input-time-picker.js 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933
  1. /*!
  2. * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  3. * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  4. * v1.0.0-beta.97
  5. */
  6. import { h, Host } from "@stencil/core";
  7. import { guid } from "../../utils/guid";
  8. import { formatTimeString, isValidTime, localizeTimeString } from "../../utils/time";
  9. import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
  10. import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
  11. import { updateHostInteraction } from "../../utils/interactive";
  12. import { connectLocalized, disconnectLocalized, numberStringFormatter, updateEffectiveLocale } from "../../utils/locale";
  13. import { numberKeys } from "../../utils/key";
  14. export class InputTimePicker {
  15. constructor() {
  16. //--------------------------------------------------------------------------
  17. //
  18. // Properties
  19. //
  20. //--------------------------------------------------------------------------
  21. /**
  22. * When `true`, the component is active.
  23. *
  24. * @deprecated Use `open` instead.
  25. */
  26. this.active = false;
  27. /** When `true`, displays the `calcite-time-picker` component. */
  28. this.open = false;
  29. /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
  30. this.disabled = false;
  31. /**
  32. * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
  33. *
  34. * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
  35. */
  36. this.readOnly = false;
  37. /**
  38. * When `true`, the component must have a value in order for the form to submit.
  39. *
  40. * @internal
  41. */
  42. this.required = false;
  43. /** Specifies the size of the component. */
  44. this.scale = "m";
  45. /**
  46. * Determines the type of positioning to use for the overlaid content.
  47. *
  48. * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
  49. *
  50. * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
  51. *
  52. */
  53. this.overlayPositioning = "absolute";
  54. /**
  55. * Determines where the popover will be positioned relative to the input.
  56. *
  57. * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
  58. */
  59. this.placement = "auto";
  60. /** Specifies the granularity the component's `value` must adhere to (in seconds). */
  61. this.step = 60;
  62. /** The component's value in UTC (always 24-hour format). */
  63. this.value = null;
  64. /** whether the value of the input was changed as a result of user typing or not */
  65. this.internalValueChange = false;
  66. this.previousValidValue = null;
  67. this.referenceElementId = `input-time-picker-${guid()}`;
  68. //--------------------------------------------------------------------------
  69. //
  70. // State
  71. //
  72. //--------------------------------------------------------------------------
  73. this.effectiveLocale = "";
  74. //--------------------------------------------------------------------------
  75. //
  76. // Event Listeners
  77. //
  78. //--------------------------------------------------------------------------
  79. this.calciteInternalInputBlurHandler = () => {
  80. this.open = false;
  81. const shouldIncludeSeconds = this.shouldIncludeSeconds();
  82. const { effectiveLocale: locale, numberingSystem, value, calciteInputEl } = this;
  83. numberStringFormatter.numberFormatOptions = {
  84. locale,
  85. numberingSystem,
  86. useGrouping: false
  87. };
  88. const delocalizedValue = numberStringFormatter.delocalize(calciteInputEl.value);
  89. const localizedInputValue = localizeTimeString({
  90. value: delocalizedValue,
  91. includeSeconds: shouldIncludeSeconds,
  92. locale,
  93. numberingSystem
  94. });
  95. this.setInputValue(localizedInputValue ||
  96. localizeTimeString({ value, locale, numberingSystem, includeSeconds: shouldIncludeSeconds }));
  97. };
  98. this.calciteInternalInputFocusHandler = (event) => {
  99. if (!this.readOnly) {
  100. this.open = true;
  101. event.stopPropagation();
  102. }
  103. };
  104. this.calciteInputInputHandler = (event) => {
  105. const target = event.target;
  106. numberStringFormatter.numberFormatOptions = {
  107. locale: this.effectiveLocale,
  108. numberingSystem: this.numberingSystem,
  109. useGrouping: false
  110. };
  111. const delocalizedValue = numberStringFormatter.delocalize(target.value);
  112. this.setValue({ value: delocalizedValue });
  113. // only translate the numerals until blur
  114. const localizedValue = delocalizedValue
  115. .split("")
  116. .map((char) => numberKeys.includes(char)
  117. ? numberStringFormatter.numberFormatter.format(Number(char))
  118. : char)
  119. .join("");
  120. this.setInputValue(localizedValue);
  121. };
  122. this.timePickerChangeHandler = (event) => {
  123. event.stopPropagation();
  124. const target = event.target;
  125. const value = target.value;
  126. this.setValue({ value, origin: "time-picker" });
  127. };
  128. // --------------------------------------------------------------------------
  129. //
  130. // Private Methods
  131. //
  132. // --------------------------------------------------------------------------
  133. this.keyDownHandler = (event) => {
  134. const { defaultPrevented, key } = event;
  135. if (defaultPrevented) {
  136. return;
  137. }
  138. if (key === "Enter") {
  139. if (submitForm(this)) {
  140. event.preventDefault();
  141. }
  142. }
  143. if (key === "Escape" && this.open) {
  144. this.open = false;
  145. event.preventDefault();
  146. }
  147. };
  148. this.setCalcitePopoverEl = (el) => {
  149. this.popoverEl = el;
  150. };
  151. this.setCalciteInputEl = (el) => {
  152. this.calciteInputEl = el;
  153. };
  154. this.setCalciteTimePickerEl = (el) => {
  155. this.calciteTimePickerEl = el;
  156. };
  157. this.setInputValue = (newInputValue) => {
  158. if (!this.calciteInputEl) {
  159. return;
  160. }
  161. this.calciteInputEl.value = newInputValue;
  162. };
  163. this.setValue = ({ value, origin = "input" }) => {
  164. const previousValue = this.value;
  165. const newValue = formatTimeString(value);
  166. const newLocalizedValue = localizeTimeString({
  167. value: newValue,
  168. locale: this.effectiveLocale,
  169. numberingSystem: this.numberingSystem,
  170. includeSeconds: this.shouldIncludeSeconds()
  171. });
  172. this.internalValueChange = origin !== "external" && origin !== "loading";
  173. const shouldEmit = origin !== "loading" &&
  174. origin !== "external" &&
  175. ((value !== this.previousValidValue && !value) ||
  176. !!(!this.previousValidValue && newValue) ||
  177. (newValue !== this.previousValidValue && newValue));
  178. if (value) {
  179. if (shouldEmit) {
  180. this.previousValidValue = newValue;
  181. }
  182. if (newValue && newValue !== this.value) {
  183. this.value = newValue;
  184. }
  185. this.localizedValue = newLocalizedValue;
  186. }
  187. else {
  188. this.value = value;
  189. this.localizedValue = null;
  190. }
  191. if (origin === "time-picker" || origin === "external") {
  192. this.setInputValue(newLocalizedValue);
  193. }
  194. if (shouldEmit) {
  195. const changeEvent = this.calciteInputTimePickerChange.emit();
  196. if (changeEvent.defaultPrevented) {
  197. this.internalValueChange = false;
  198. this.value = previousValue;
  199. this.setInputValue(previousValue);
  200. this.previousValidValue = previousValue;
  201. }
  202. else {
  203. this.previousValidValue = newValue;
  204. }
  205. }
  206. };
  207. }
  208. activeHandler(value) {
  209. this.open = value;
  210. }
  211. openHandler(value) {
  212. this.active = value;
  213. if (this.disabled || this.readOnly) {
  214. this.open = false;
  215. return;
  216. }
  217. if (value) {
  218. this.reposition(true);
  219. }
  220. }
  221. handleDisabledAndReadOnlyChange(value) {
  222. if (!value) {
  223. this.open = false;
  224. }
  225. }
  226. localeChanged() {
  227. updateEffectiveLocale(this);
  228. }
  229. valueWatcher(newValue) {
  230. if (!this.internalValueChange) {
  231. this.setValue({ value: newValue, origin: "external" });
  232. }
  233. this.internalValueChange = false;
  234. }
  235. effectiveLocaleWatcher() {
  236. this.setInputValue(localizeTimeString({
  237. value: this.value,
  238. locale: this.effectiveLocale,
  239. numberingSystem: this.numberingSystem,
  240. includeSeconds: this.shouldIncludeSeconds()
  241. }));
  242. }
  243. clickHandler(event) {
  244. if (event.composedPath().includes(this.calciteTimePickerEl)) {
  245. return;
  246. }
  247. this.setFocus();
  248. }
  249. timePickerBlurHandler(event) {
  250. event.preventDefault();
  251. event.stopPropagation();
  252. this.open = false;
  253. }
  254. timePickerFocusHandler(event) {
  255. event.preventDefault();
  256. event.stopPropagation();
  257. if (!this.readOnly) {
  258. this.open = true;
  259. }
  260. }
  261. // --------------------------------------------------------------------------
  262. //
  263. // Public Methods
  264. //
  265. // --------------------------------------------------------------------------
  266. /** Sets focus on the component. */
  267. async setFocus() {
  268. var _a;
  269. (_a = this.calciteInputEl) === null || _a === void 0 ? void 0 : _a.setFocus();
  270. }
  271. /**
  272. * Updates the position of the component.
  273. *
  274. * @param delayed
  275. */
  276. async reposition(delayed = false) {
  277. var _a;
  278. (_a = this.popoverEl) === null || _a === void 0 ? void 0 : _a.reposition(delayed);
  279. }
  280. onLabelClick() {
  281. this.setFocus();
  282. }
  283. shouldIncludeSeconds() {
  284. return this.step < 60;
  285. }
  286. //--------------------------------------------------------------------------
  287. //
  288. // Lifecycle
  289. //
  290. //--------------------------------------------------------------------------
  291. connectedCallback() {
  292. connectLocalized(this);
  293. const { active, open } = this;
  294. if (this.value) {
  295. this.setValue({ value: isValidTime(this.value) ? this.value : undefined, origin: "loading" });
  296. }
  297. connectLabel(this);
  298. connectForm(this);
  299. if (open) {
  300. this.active = open;
  301. }
  302. else if (active) {
  303. this.open = active;
  304. }
  305. }
  306. componentDidLoad() {
  307. this.setInputValue(this.localizedValue);
  308. }
  309. disconnectedCallback() {
  310. disconnectLabel(this);
  311. disconnectForm(this);
  312. disconnectLocalized(this);
  313. }
  314. componentDidRender() {
  315. updateHostInteraction(this);
  316. }
  317. // --------------------------------------------------------------------------
  318. //
  319. // Render Methods
  320. //
  321. // --------------------------------------------------------------------------
  322. render() {
  323. const popoverId = `${this.referenceElementId}-popover`;
  324. return (h(Host, { onKeyDown: this.keyDownHandler }, h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: this.readOnly, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true }, h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.effectiveLocale, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })), h(HiddenFormInputSlot, { component: this })));
  325. }
  326. static get is() { return "calcite-input-time-picker"; }
  327. static get encapsulation() { return "shadow"; }
  328. static get originalStyleUrls() {
  329. return {
  330. "$": ["input-time-picker.scss"]
  331. };
  332. }
  333. static get styleUrls() {
  334. return {
  335. "$": ["input-time-picker.css"]
  336. };
  337. }
  338. static get properties() {
  339. return {
  340. "active": {
  341. "type": "boolean",
  342. "mutable": true,
  343. "complexType": {
  344. "original": "boolean",
  345. "resolved": "boolean",
  346. "references": {}
  347. },
  348. "required": false,
  349. "optional": false,
  350. "docs": {
  351. "tags": [{
  352. "name": "deprecated",
  353. "text": "Use `open` instead."
  354. }],
  355. "text": "When `true`, the component is active."
  356. },
  357. "attribute": "active",
  358. "reflect": true,
  359. "defaultValue": "false"
  360. },
  361. "open": {
  362. "type": "boolean",
  363. "mutable": true,
  364. "complexType": {
  365. "original": "boolean",
  366. "resolved": "boolean",
  367. "references": {}
  368. },
  369. "required": false,
  370. "optional": false,
  371. "docs": {
  372. "tags": [],
  373. "text": "When `true`, displays the `calcite-time-picker` component."
  374. },
  375. "attribute": "open",
  376. "reflect": true,
  377. "defaultValue": "false"
  378. },
  379. "disabled": {
  380. "type": "boolean",
  381. "mutable": false,
  382. "complexType": {
  383. "original": "boolean",
  384. "resolved": "boolean",
  385. "references": {}
  386. },
  387. "required": false,
  388. "optional": false,
  389. "docs": {
  390. "tags": [],
  391. "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
  392. },
  393. "attribute": "disabled",
  394. "reflect": true,
  395. "defaultValue": "false"
  396. },
  397. "readOnly": {
  398. "type": "boolean",
  399. "mutable": false,
  400. "complexType": {
  401. "original": "boolean",
  402. "resolved": "boolean",
  403. "references": {}
  404. },
  405. "required": false,
  406. "optional": false,
  407. "docs": {
  408. "tags": [{
  409. "name": "mdn",
  410. "text": "[readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)"
  411. }],
  412. "text": "When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified."
  413. },
  414. "attribute": "read-only",
  415. "reflect": true,
  416. "defaultValue": "false"
  417. },
  418. "intlHour": {
  419. "type": "string",
  420. "mutable": false,
  421. "complexType": {
  422. "original": "string",
  423. "resolved": "string",
  424. "references": {}
  425. },
  426. "required": false,
  427. "optional": true,
  428. "docs": {
  429. "tags": [],
  430. "text": "Accessible name for the component's hour input."
  431. },
  432. "attribute": "intl-hour",
  433. "reflect": false
  434. },
  435. "intlHourDown": {
  436. "type": "string",
  437. "mutable": false,
  438. "complexType": {
  439. "original": "string",
  440. "resolved": "string",
  441. "references": {}
  442. },
  443. "required": false,
  444. "optional": true,
  445. "docs": {
  446. "tags": [],
  447. "text": "Accessible name for the component's hour down button."
  448. },
  449. "attribute": "intl-hour-down",
  450. "reflect": false
  451. },
  452. "intlHourUp": {
  453. "type": "string",
  454. "mutable": false,
  455. "complexType": {
  456. "original": "string",
  457. "resolved": "string",
  458. "references": {}
  459. },
  460. "required": false,
  461. "optional": true,
  462. "docs": {
  463. "tags": [],
  464. "text": "Accessible name for the component's hour up button."
  465. },
  466. "attribute": "intl-hour-up",
  467. "reflect": false
  468. },
  469. "intlMeridiem": {
  470. "type": "string",
  471. "mutable": false,
  472. "complexType": {
  473. "original": "string",
  474. "resolved": "string",
  475. "references": {}
  476. },
  477. "required": false,
  478. "optional": true,
  479. "docs": {
  480. "tags": [],
  481. "text": "Accessible name for the component's meridiem (am/pm) input."
  482. },
  483. "attribute": "intl-meridiem",
  484. "reflect": false
  485. },
  486. "intlMeridiemDown": {
  487. "type": "string",
  488. "mutable": false,
  489. "complexType": {
  490. "original": "string",
  491. "resolved": "string",
  492. "references": {}
  493. },
  494. "required": false,
  495. "optional": true,
  496. "docs": {
  497. "tags": [],
  498. "text": "Accessible name for the component's meridiem (am/pm) down button."
  499. },
  500. "attribute": "intl-meridiem-down",
  501. "reflect": false
  502. },
  503. "intlMeridiemUp": {
  504. "type": "string",
  505. "mutable": false,
  506. "complexType": {
  507. "original": "string",
  508. "resolved": "string",
  509. "references": {}
  510. },
  511. "required": false,
  512. "optional": true,
  513. "docs": {
  514. "tags": [],
  515. "text": "Accessible name for the component's meridiem (am/pm) up button."
  516. },
  517. "attribute": "intl-meridiem-up",
  518. "reflect": false
  519. },
  520. "intlMinute": {
  521. "type": "string",
  522. "mutable": false,
  523. "complexType": {
  524. "original": "string",
  525. "resolved": "string",
  526. "references": {}
  527. },
  528. "required": false,
  529. "optional": true,
  530. "docs": {
  531. "tags": [],
  532. "text": "Accessible name for the component's minute input."
  533. },
  534. "attribute": "intl-minute",
  535. "reflect": false
  536. },
  537. "intlMinuteDown": {
  538. "type": "string",
  539. "mutable": false,
  540. "complexType": {
  541. "original": "string",
  542. "resolved": "string",
  543. "references": {}
  544. },
  545. "required": false,
  546. "optional": true,
  547. "docs": {
  548. "tags": [],
  549. "text": "Accessible name for the component's minute down button."
  550. },
  551. "attribute": "intl-minute-down",
  552. "reflect": false
  553. },
  554. "intlMinuteUp": {
  555. "type": "string",
  556. "mutable": false,
  557. "complexType": {
  558. "original": "string",
  559. "resolved": "string",
  560. "references": {}
  561. },
  562. "required": false,
  563. "optional": true,
  564. "docs": {
  565. "tags": [],
  566. "text": "Accessible name for the component's minute up button."
  567. },
  568. "attribute": "intl-minute-up",
  569. "reflect": false
  570. },
  571. "intlSecond": {
  572. "type": "string",
  573. "mutable": false,
  574. "complexType": {
  575. "original": "string",
  576. "resolved": "string",
  577. "references": {}
  578. },
  579. "required": false,
  580. "optional": true,
  581. "docs": {
  582. "tags": [],
  583. "text": "Accessible name for the component's second input."
  584. },
  585. "attribute": "intl-second",
  586. "reflect": false
  587. },
  588. "intlSecondDown": {
  589. "type": "string",
  590. "mutable": false,
  591. "complexType": {
  592. "original": "string",
  593. "resolved": "string",
  594. "references": {}
  595. },
  596. "required": false,
  597. "optional": true,
  598. "docs": {
  599. "tags": [],
  600. "text": "Accessible name for the component's second down button."
  601. },
  602. "attribute": "intl-second-down",
  603. "reflect": false
  604. },
  605. "intlSecondUp": {
  606. "type": "string",
  607. "mutable": false,
  608. "complexType": {
  609. "original": "string",
  610. "resolved": "string",
  611. "references": {}
  612. },
  613. "required": false,
  614. "optional": true,
  615. "docs": {
  616. "tags": [],
  617. "text": "Accessible name for the component's second up button."
  618. },
  619. "attribute": "intl-second-up",
  620. "reflect": false
  621. },
  622. "locale": {
  623. "type": "string",
  624. "mutable": true,
  625. "complexType": {
  626. "original": "string",
  627. "resolved": "string",
  628. "references": {}
  629. },
  630. "required": false,
  631. "optional": false,
  632. "docs": {
  633. "tags": [{
  634. "name": "internal",
  635. "text": undefined
  636. }, {
  637. "name": "deprecated",
  638. "text": "set the global `lang` attribute on the element instead."
  639. }, {
  640. "name": "mdn",
  641. "text": "[lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)"
  642. }],
  643. "text": "BCP 47 language tag for desired language and country format."
  644. },
  645. "attribute": "locale",
  646. "reflect": false
  647. },
  648. "name": {
  649. "type": "string",
  650. "mutable": false,
  651. "complexType": {
  652. "original": "string",
  653. "resolved": "string",
  654. "references": {}
  655. },
  656. "required": false,
  657. "optional": false,
  658. "docs": {
  659. "tags": [],
  660. "text": "Specifies the name of the component on form submission."
  661. },
  662. "attribute": "name",
  663. "reflect": false
  664. },
  665. "numberingSystem": {
  666. "type": "string",
  667. "mutable": false,
  668. "complexType": {
  669. "original": "NumberingSystem",
  670. "resolved": "\"arab\" | \"arabext\" | \"bali\" | \"beng\" | \"deva\" | \"fullwide\" | \"gujr\" | \"guru\" | \"hanidec\" | \"khmr\" | \"knda\" | \"laoo\" | \"latn\" | \"limb\" | \"mlym\" | \"mong\" | \"mymr\" | \"orya\" | \"tamldec\" | \"telu\" | \"thai\" | \"tibt\"",
  671. "references": {
  672. "NumberingSystem": {
  673. "location": "import",
  674. "path": "../../utils/locale"
  675. }
  676. }
  677. },
  678. "required": false,
  679. "optional": true,
  680. "docs": {
  681. "tags": [],
  682. "text": "Specifies the Unicode numeral system used by the component for localization."
  683. },
  684. "attribute": "numbering-system",
  685. "reflect": false
  686. },
  687. "required": {
  688. "type": "boolean",
  689. "mutable": false,
  690. "complexType": {
  691. "original": "boolean",
  692. "resolved": "boolean",
  693. "references": {}
  694. },
  695. "required": false,
  696. "optional": false,
  697. "docs": {
  698. "tags": [{
  699. "name": "internal",
  700. "text": undefined
  701. }],
  702. "text": "When `true`, the component must have a value in order for the form to submit."
  703. },
  704. "attribute": "required",
  705. "reflect": true,
  706. "defaultValue": "false"
  707. },
  708. "scale": {
  709. "type": "string",
  710. "mutable": false,
  711. "complexType": {
  712. "original": "Scale",
  713. "resolved": "\"l\" | \"m\" | \"s\"",
  714. "references": {
  715. "Scale": {
  716. "location": "import",
  717. "path": "../interfaces"
  718. }
  719. }
  720. },
  721. "required": false,
  722. "optional": false,
  723. "docs": {
  724. "tags": [],
  725. "text": "Specifies the size of the component."
  726. },
  727. "attribute": "scale",
  728. "reflect": true,
  729. "defaultValue": "\"m\""
  730. },
  731. "overlayPositioning": {
  732. "type": "string",
  733. "mutable": false,
  734. "complexType": {
  735. "original": "OverlayPositioning",
  736. "resolved": "\"absolute\" | \"fixed\"",
  737. "references": {
  738. "OverlayPositioning": {
  739. "location": "import",
  740. "path": "../../utils/floating-ui"
  741. }
  742. }
  743. },
  744. "required": false,
  745. "optional": false,
  746. "docs": {
  747. "tags": [],
  748. "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`."
  749. },
  750. "attribute": "overlay-positioning",
  751. "reflect": false,
  752. "defaultValue": "\"absolute\""
  753. },
  754. "placement": {
  755. "type": "string",
  756. "mutable": false,
  757. "complexType": {
  758. "original": "LogicalPlacement",
  759. "resolved": "Placement | VariationPlacement | AutoPlacement | DeprecatedPlacement",
  760. "references": {
  761. "LogicalPlacement": {
  762. "location": "import",
  763. "path": "../../utils/floating-ui"
  764. }
  765. }
  766. },
  767. "required": false,
  768. "optional": false,
  769. "docs": {
  770. "tags": [{
  771. "name": "see",
  772. "text": "[LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)"
  773. }],
  774. "text": "Determines where the popover will be positioned relative to the input."
  775. },
  776. "attribute": "placement",
  777. "reflect": true,
  778. "defaultValue": "\"auto\""
  779. },
  780. "step": {
  781. "type": "number",
  782. "mutable": false,
  783. "complexType": {
  784. "original": "number",
  785. "resolved": "number",
  786. "references": {}
  787. },
  788. "required": false,
  789. "optional": false,
  790. "docs": {
  791. "tags": [],
  792. "text": "Specifies the granularity the component's `value` must adhere to (in seconds)."
  793. },
  794. "attribute": "step",
  795. "reflect": false,
  796. "defaultValue": "60"
  797. },
  798. "value": {
  799. "type": "string",
  800. "mutable": true,
  801. "complexType": {
  802. "original": "string",
  803. "resolved": "string",
  804. "references": {}
  805. },
  806. "required": false,
  807. "optional": false,
  808. "docs": {
  809. "tags": [],
  810. "text": "The component's value in UTC (always 24-hour format)."
  811. },
  812. "attribute": "value",
  813. "reflect": false,
  814. "defaultValue": "null"
  815. }
  816. };
  817. }
  818. static get states() {
  819. return {
  820. "effectiveLocale": {},
  821. "localizedValue": {}
  822. };
  823. }
  824. static get events() {
  825. return [{
  826. "method": "calciteInputTimePickerChange",
  827. "name": "calciteInputTimePickerChange",
  828. "bubbles": true,
  829. "cancelable": true,
  830. "composed": true,
  831. "docs": {
  832. "tags": [],
  833. "text": "Fires when the time value is changed as a result of user input."
  834. },
  835. "complexType": {
  836. "original": "string",
  837. "resolved": "string",
  838. "references": {}
  839. }
  840. }];
  841. }
  842. static get methods() {
  843. return {
  844. "setFocus": {
  845. "complexType": {
  846. "signature": "() => Promise<void>",
  847. "parameters": [],
  848. "references": {
  849. "Promise": {
  850. "location": "global"
  851. }
  852. },
  853. "return": "Promise<void>"
  854. },
  855. "docs": {
  856. "text": "Sets focus on the component.",
  857. "tags": []
  858. }
  859. },
  860. "reposition": {
  861. "complexType": {
  862. "signature": "(delayed?: boolean) => Promise<void>",
  863. "parameters": [{
  864. "tags": [{
  865. "name": "param",
  866. "text": "delayed"
  867. }],
  868. "text": ""
  869. }],
  870. "references": {
  871. "Promise": {
  872. "location": "global"
  873. }
  874. },
  875. "return": "Promise<void>"
  876. },
  877. "docs": {
  878. "text": "Updates the position of the component.",
  879. "tags": [{
  880. "name": "param",
  881. "text": "delayed"
  882. }]
  883. }
  884. }
  885. };
  886. }
  887. static get elementRef() { return "el"; }
  888. static get watchers() {
  889. return [{
  890. "propName": "active",
  891. "methodName": "activeHandler"
  892. }, {
  893. "propName": "open",
  894. "methodName": "openHandler"
  895. }, {
  896. "propName": "disabled",
  897. "methodName": "handleDisabledAndReadOnlyChange"
  898. }, {
  899. "propName": "readOnly",
  900. "methodName": "handleDisabledAndReadOnlyChange"
  901. }, {
  902. "propName": "locale",
  903. "methodName": "localeChanged"
  904. }, {
  905. "propName": "value",
  906. "methodName": "valueWatcher"
  907. }, {
  908. "propName": "effectiveLocale",
  909. "methodName": "effectiveLocaleWatcher"
  910. }];
  911. }
  912. static get listeners() {
  913. return [{
  914. "name": "click",
  915. "method": "clickHandler",
  916. "target": undefined,
  917. "capture": false,
  918. "passive": false
  919. }, {
  920. "name": "calciteInternalTimePickerBlur",
  921. "method": "timePickerBlurHandler",
  922. "target": undefined,
  923. "capture": false,
  924. "passive": false
  925. }, {
  926. "name": "calciteInternalTimePickerFocus",
  927. "method": "timePickerFocusHandler",
  928. "target": undefined,
  929. "capture": false,
  930. "passive": false
  931. }];
  932. }
  933. }