@nectary/components 2.12.0 → 2.12.2

package/lib/cjs/textarea/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/tile-control/index.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _utils = require('../utils');
+const templateHTML = '<style>:host{display:block;outline:0;--sinch-grid-num-columns:1}#wrapper{display:grid;grid-template-columns:repeat(var(--sinch-grid-num-columns),auto);gap:16px;width:fit-content}:host([small]) #wrapper{gap:8px}:host([cols="2"]){--sinch-grid-num-columns:2}:host([cols="3"]){--sinch-grid-num-columns:3}:host([cols="4"]){--sinch-grid-num-columns:4}:host([cols="5"]){--sinch-grid-num-columns:5}:host([cols="6"]){--sinch-grid-num-columns:6}:host([cols="7"]){--sinch-grid-num-columns:7}:host([cols="8"]){--sinch-grid-num-columns:8}:host([cols="9"]){--sinch-grid-num-columns:9}:host([cols="10"]){--sinch-grid-num-columns:10}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+(0, _utils.defineCustomElement)('sinch-tile-control', class extends _utils.NectaryElement {
+  #$slot;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$slot = shadowRoot.querySelector('slot');
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'tablist');
+    this.#$slot.addEventListener('option-change', this.#onOptionChange);
+    this.#$slot.addEventListener('slotchange', this.#onSlotChange);
+    this.addEventListener('-change', this.#onChangeReactHandler);
+  }
+  disconnectedCallback() {
+    this.#$slot.removeEventListener('option-change', this.#onOptionChange);
+    this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
+    this.removeEventListener('-change', this.#onChangeReactHandler);
+  }
+  static get observedAttributes() {
+    return ['value', 'small', 'multiple'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if ((0, _utils.isAttrEqual)(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'value':
+        {
+          this.#onValueChange(newVal ?? '');
+          break;
+        }
+      case 'small':
+        {
+          this.#onSmallChange();
+          (0, _utils.updateBooleanAttribute)(this, name, (0, _utils.isAttrTrue)(newVal));
+          break;
+        }
+      case 'multiple':
+        {
+          this.#onValueChange(this.value);
+        }
+    }
+  }
+  set value(value) {
+    (0, _utils.updateAttribute)(this, 'value', value);
+  }
+  get value() {
+    return (0, _utils.getAttribute)(this, 'value', '');
+  }
+  set small(isSmall) {
+    (0, _utils.updateBooleanAttribute)(this, 'small', isSmall);
+  }
+  get small() {
+    return (0, _utils.getBooleanAttribute)(this, 'small');
+  }
+  set multiple(isMultiple) {
+    (0, _utils.updateBooleanAttribute)(this, 'multiple', isMultiple);
+  }
+  get multiple() {
+    return (0, _utils.getBooleanAttribute)(this, 'multiple');
+  }
+  set cols(value) {
+    (0, _utils.updateIntegerAttribute)(this, 'cols', value);
+  }
+  get cols() {
+    return (0, _utils.getIntegerAttribute)(this, 'cols', 1);
+  }
+  #onSlotChange = () => {
+    this.#onValueChange(this.value);
+    this.#onSmallChange();
+  };
+  #onOptionChange = e => {
+    e.stopPropagation();
+    const $elem = e.target;
+    const value = e.detail;
+    const detail = this.multiple ? (0, _utils.updateCsv)(this.value, value, !(0, _utils.getBooleanAttribute)($elem, 'data-checked')) : value;
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail
+    }));
+  };
+  #onValueChange(csv) {
+    if (this.multiple) {
+      const values = (0, _utils.unpackCsv)(csv);
+      for (const $option of this.#$slot.assignedElements()) {
+        const isChecked = !(0, _utils.getBooleanAttribute)($option, 'disabled') && values.includes((0, _utils.getAttribute)($option, 'value', ''));
+        (0, _utils.updateBooleanAttribute)($option, 'data-checked', isChecked);
+      }
+    } else {
+      const value = (0, _utils.getFirstCsvValue)(csv);
+      for (const $option of this.#$slot.assignedElements()) {
+        const isChecked = !(0, _utils.getBooleanAttribute)($option, 'disabled') && value === (0, _utils.getAttribute)($option, 'value', '');
+        (0, _utils.updateBooleanAttribute)($option, 'data-checked', isChecked);
+      }
+    }
+  }
+  #onSmallChange() {
+    const isSmall = this.small;
+    for (const $opt of this.#$slot.assignedElements()) {
+      (0, _utils.updateBooleanAttribute)($opt, 'data-small', isSmall);
+    }
+  }
+  #onChangeReactHandler = e => {
+    (0, _utils.getReactEventHandler)(this, 'on-change')?.(e);
+  };
+});

package/lib/cjs/tile-control/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/tile-control-option/index.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _utils = require('../utils');
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;width:var(--sinch-local-size);height:var(--sinch-local-size);padding:16px 8px 8px;border-radius:var(--sinch-local-shape-radius);background-color:var(--sinch-local-color-background);box-shadow:var(--sinch-local-shadow);cursor:pointer;--sinch-local-color-background:var(--sinch-comp-tile-control-color-default-background-initial);--sinch-local-color-border:var(--sinch-comp-tile-control-color-default-border-initial);--sinch-local-color-text:var(--sinch-comp-tile-control-color-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-tile-control-color-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-initial);--sinch-local-shape-radius:var(--sinch-comp-tile-control-shape-radius-l);--sinch-local-size:88px;--sinch-local-size-icon:var(--sinch-comp-tile-control-size-m-icon)}button::before{content:"";position:absolute;inset:0;border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-local-shape-radius);pointer-events:none}button:focus-visible::after{position:absolute;content:"";inset:-4px;padding:2px;border:2px solid var(--sinch-comp-tile-control-color-default-outline-focus);border-radius:calc(var(--sinch-local-shape-radius) + 4px);pointer-events:none}:host([data-small])>button{padding:12px 4px 4px;--sinch-local-shape-radius:var(--sinch-comp-tile-control-shape-radius-s);--sinch-local-size:64px;--sinch-local-size-icon:var(--sinch-comp-tile-control-size-s-icon)}button:enabled:hover{--sinch-local-color-background:var(--sinch-comp-tile-control-color-default-background-hover);--sinch-local-color-border:var(--sinch-comp-tile-control-color-default-border-hover);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-hover)}:host([data-checked])>button:enabled,button:enabled:active{--sinch-local-color-background:var(--sinch-comp-tile-control-color-checked-background-initial);--sinch-local-color-border:var(--sinch-comp-tile-control-color-checked-border-initial);--sinch-local-color-text:var(--sinch-comp-tile-control-color-checked-text-initial);--sinch-local-color-icon:var(--sinch-comp-tile-control-color-checked-icon-initial);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-active)}:host([data-checked])>button:enabled::before,button:enabled:active::before{border-width:2px}button:disabled{cursor:initial;--sinch-local-color-background:var(--sinch-comp-tile-control-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-tile-control-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-tile-control-color-disabled-text-initial);--sinch-local-color-icon:var(--sinch-comp-tile-control-color-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-disabled)}#text{display:inline-block;min-height:20px;text-align:center;font:var(--sinch-comp-tile-control-font-label);color:var(--sinch-local-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon{width:var(--sinch-local-size-icon);height:var(--sinch-local-size-icon);align-self:center;--sinch-global-size-icon:var(--sinch-local-size-icon);--sinch-global-color-icon:var(--sinch-local-color-icon)}</style><button><div id="icon"><slot name="icon"></slot></div><span id="text"></span></button>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+(0, _utils.defineCustomElement)('sinch-tile-control-option', class extends _utils.NectaryElement {
+  #$button;
+  #$text;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$button = shadowRoot.querySelector('button');
+    this.#$text = shadowRoot.querySelector('#text');
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'tab');
+    this.#$button.addEventListener('click', this.#onButtonClick);
+    this.#$button.addEventListener('focus', this.#onButtonFocus);
+    this.#$button.addEventListener('blur', this.#onButtonBlur);
+    this.addEventListener('-focus', this.#onFocusReactHandler);
+    this.addEventListener('-blur', this.#onBlurReactHandler);
+  }
+  disconnectedCallback() {
+    this.#$button.removeEventListener('click', this.#onButtonClick);
+    this.#$button.removeEventListener('focus', this.#onButtonFocus);
+    this.#$button.removeEventListener('blur', this.#onButtonBlur);
+    this.removeEventListener('-focus', this.#onFocusReactHandler);
+    this.removeEventListener('-blur', this.#onBlurReactHandler);
+  }
+  static get observedAttributes() {
+    return ['data-checked', 'text', 'disabled'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'data-checked':
+        {
+          (0, _utils.updateExplicitBooleanAttribute)(this, 'aria-selected', (0, _utils.isAttrTrue)(newVal));
+          break;
+        }
+      case 'disabled':
+        {
+          this.#$button.disabled = (0, _utils.isAttrTrue)(newVal);
+          break;
+        }
+    }
+  }
+  set value(value) {
+    (0, _utils.updateAttribute)(this, 'value', value);
+  }
+  get value() {
+    return (0, _utils.getAttribute)(this, 'value', '');
+  }
+  set disabled(isDisabled) {
+    (0, _utils.updateBooleanAttribute)(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return (0, _utils.getBooleanAttribute)(this, 'disabled');
+  }
+  set text(value) {
+    (0, _utils.updateAttribute)(this, 'text', value);
+  }
+  get text() {
+    return (0, _utils.getAttribute)(this, 'text', '');
+  }
+  get focusable() {
+    return true;
+  }
+  focus() {
+    this.#$button.focus();
+  }
+  blur() {
+    this.#$button.blur();
+  }
+  #onButtonClick = e => {
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('option-change', {
+      detail: this.value,
+      bubbles: true
+    }));
+  };
+  #onButtonFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onButtonBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onFocusReactHandler = () => {
+    (0, _utils.getReactEventHandler)(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    (0, _utils.getReactEventHandler)(this, 'on-blur')?.();
+  };
+});

package/lib/cjs/tile-control-option/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/time-picker/index.js

@@ -0,0 +1,339 @@
+"use strict";
+
+require('../icon-button');
+require('../icon');
+require('../segmented-control');
+require('../segmented-control-option');
+var _utils = require('../utils');
+var _utils2 = require('./utils');
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-comp-time-picker-header-font);line-height:48px;user-select:none;color:var(--sinch-comp-time-picker-header-color-default-text-initial)}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-comp-time-picker-watch-face-color-default-border-initial);background-color:var(--sinch-comp-time-picker-watch-face-color-default-background-initial)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;text-align:center;top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-12{font:var(--sinch-comp-time-picker-digit-font-default-h12);color:var(--sinch-comp-time-picker-digit-color-default-h12-initial);line-height:28px}.digit-hour-12.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h12);color:var(--sinch-comp-time-picker-digit-color-checked-h12-default)}.digit-hour-24{font:var(--sinch-comp-time-picker-digit-font-default-h24);color:var(--sinch-comp-time-picker-digit-color-default-h24-initial);line-height:28px}.digit-hour-24.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h24);color:var(--sinch-comp-time-picker-digit-color-checked-h24-initial)}.digit-minute{font:var(--sinch-comp-time-picker-digit-font-default-minutes);color:var(--sinch-comp-time-picker-digit-color-default-minute-initial);line-height:28px}.digit-minute.selected{font:var(--sinch-comp-time-picker-digit-font-checked-minutes);color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-comp-time-picker-needle-color-default-background-initial)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2;outline:0}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-hour:focus-visible,#needle-minute:focus-visible{background-color:var(--sinch-comp-time-picker-needle-color-default-background-focus)}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}#submit-icon{--sinch-global-color-icon:var(--sinch-comp-time-picker-header-color-default-icon-initial)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><div id="header-colon">&colon;</div><div id="header-minutes" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><sinch-icon-button id="submit" size="s" aria-label="Submit"><sinch-icon id="icon-submit" slot="icon" name="done"></sinch-icon></sinch-icon-button></div><div id="picker" aria-hidden="true"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour" tabindex="0"></div><div id="needle-minute" tabindex="0"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+const PICKER_RADIUS = 216 / 2;
+const MINUTE_DIGIT_SIZE = 30;
+const HOUR_12_DIGIT_SIZE = 26;
+const HOUR_24_DIGIT_SIZE = 26;
+const MINUTE_RADIUS = PICKER_RADIUS - MINUTE_DIGIT_SIZE;
+const HOUR_12_RADIUS = MINUTE_RADIUS - HOUR_12_DIGIT_SIZE;
+const HOUR_24_RADIUS = HOUR_12_RADIUS - HOUR_24_DIGIT_SIZE;
+const NEEDLE_HOUR_12_LENGTH = HOUR_12_RADIUS;
+const NEEDLE_HOUR_24_LENGTH = HOUR_24_RADIUS;
+const NEEDLE_MINUTE_LENGTH = MINUTE_RADIUS;
+(0, _utils.defineCustomElement)('sinch-time-picker', class extends _utils.NectaryElement {
+  #$pickerHours;
+  #$pickerMinutes;
+  #$pickerTouch;
+  #$needleHour;
+  #$needleMinute;
+  #$headerHours;
+  #$headerHoursText;
+  #$headerMinutes;
+  #$headerMinutesText;
+  #$ampm;
+  #$submitButton;
+  #hour = 0;
+  #minute = 0;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$pickerHours = shadowRoot.querySelector('#picker-hours');
+    this.#$pickerMinutes = shadowRoot.querySelector('#picker-minutes');
+    this.#$pickerTouch = shadowRoot.querySelector('#picker');
+    this.#$needleHour = shadowRoot.querySelector('#needle-hour');
+    this.#$needleMinute = shadowRoot.querySelector('#needle-minute');
+    this.#$headerHours = shadowRoot.querySelector('#header-hours');
+    this.#$headerMinutes = shadowRoot.querySelector('#header-minutes');
+    this.#$headerHoursText = shadowRoot.querySelector('#header-hours > span');
+    this.#$headerMinutesText = shadowRoot.querySelector('#header-minutes > span');
+    this.#$ampm = shadowRoot.querySelector('#ampm');
+    this.#$submitButton = shadowRoot.querySelector('#submit');
+    this.#$needleMinute.style.height = `${NEEDLE_MINUTE_LENGTH}px`;
+    this.#$needleHour.style.height = `${NEEDLE_HOUR_12_LENGTH}px`;
+    const MINUTE_DIGIT_RADIUS = MINUTE_RADIUS + MINUTE_DIGIT_SIZE / 2;
+    const HOUR_12_DIGIT_RADIUS = HOUR_12_RADIUS + HOUR_12_DIGIT_SIZE / 2;
+    const HOUR_24_DIGIT_RADIUS = HOUR_24_RADIUS + HOUR_24_DIGIT_SIZE / 2;
+    const hours12Frag = document.createDocumentFragment();
+    for (let i = 0; i < 12; i++) {
+      const rad = Math.PI / 6 * (i - 3);
+      const el = document.createElement('div');
+      const x = Math.cos(rad) * HOUR_12_DIGIT_RADIUS;
+      const y = Math.sin(rad) * HOUR_12_DIGIT_RADIUS;
+      const hourDisplayValue = (0, _utils2.stringifyHourFace)(i);
+      el.className = 'digit-hour-12';
+      el.style.transform = `translate(${x}px, ${y}px)`;
+      el.textContent = hourDisplayValue;
+      hours12Frag.appendChild(el);
+    }
+    this.#$pickerHours.appendChild(hours12Frag);
+    const hours24Frag = document.createDocumentFragment();
+    for (let i = 12; i < 24; i++) {
+      const rad = Math.PI / 6 * (i - 3);
+      const el = document.createElement('div');
+      const x = Math.cos(rad) * HOUR_24_DIGIT_RADIUS;
+      const y = Math.sin(rad) * HOUR_24_DIGIT_RADIUS;
+      const hourDisplayValue = (0, _utils2.stringifyHourFace)(i);
+      el.className = 'digit-hour-24';
+      el.style.transform = `translate(${x}px, ${y}px)`;
+      el.textContent = hourDisplayValue;
+      hours24Frag.appendChild(el);
+    }
+    this.#$pickerHours.appendChild(hours24Frag);
+    const minutesFrag = document.createDocumentFragment();
+    for (let i = 0; i < 60; i += 5) {
+      const rad = Math.PI / 30 * (i - 15);
+      const el = document.createElement('div');
+      const x = Math.cos(rad) * MINUTE_DIGIT_RADIUS;
+      const y = Math.sin(rad) * MINUTE_DIGIT_RADIUS;
+      el.className = 'digit-minute';
+      el.style.transform = `translate(${x}px, ${y}px)`;
+      el.textContent = (0, _utils2.stringifyMinute)(i);
+      minutesFrag.appendChild(el);
+    }
+    this.#$pickerMinutes.appendChild(minutesFrag);
+  }
+  connectedCallback() {
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$pickerTouch.addEventListener('click', this.#onPickerClick, options);
+    this.#$ampm.addEventListener('-change', this.#onAmPmChange, options);
+    this.#$submitButton.addEventListener('click', this.#onSubmitButtonClick, options);
+    this.#$needleHour.addEventListener('keydown', this.#onHoursKeydown, options);
+    this.#$needleMinute.addEventListener('keydown', this.#onMinutesKeydown, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+  }
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['value', 'ampm', 'submit-aria-label'];
+  }
+  attributeChangedCallback(name, prevValue, newVal) {
+    if ((0, _utils.isAttrEqual)(prevValue, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'value':
+        {
+          const {
+            hours,
+            minutes
+          } = (0, _utils2.parseTime)(newVal);
+          this.#hour = hours;
+          this.#minute = minutes;
+          this.#render();
+          break;
+        }
+      case 'ampm':
+        {
+          this.#render();
+          (0, _utils.updateBooleanAttribute)(this, 'ampm', (0, _utils.isAttrTrue)(newVal));
+          break;
+        }
+      case 'submit-aria-label':
+        {
+          (0, _utils.updateAttribute)(this.#$submitButton, 'aria-label', newVal);
+          break;
+        }
+    }
+  }
+  set value(value) {
+    (0, _utils.updateAttribute)(this, 'value', value);
+  }
+  get value() {
+    return (0, _utils.getAttribute)(this, 'value', '');
+  }
+  set ampm(value) {
+    (0, _utils.updateBooleanAttribute)(this, 'ampm', value);
+  }
+  get ampm() {
+    return (0, _utils.getBooleanAttribute)(this, 'ampm');
+  }
+  set submitAriaLabel(value) {
+    (0, _utils.updateAttribute)(this, 'submit-aria-label', value);
+  }
+  get submitAriaLabel() {
+    return (0, _utils.getAttribute)(this, 'submit-aria-label', '');
+  }
+  get submitButtonRect() {
+    return (0, _utils.getRect)(this.#$submitButton);
+  }
+  get amButtonRect() {
+    if (!this.ampm) {
+      return null;
+    }
+    const $am = this.#$ampm.querySelector('[value="am"]');
+    return $am != null ? (0, _utils.getRect)($am) : null;
+  }
+  get pmButtonRect() {
+    if (!this.ampm) {
+      return null;
+    }
+    const $pm = this.#$ampm.querySelector('[value="pm"]');
+    return $pm != null ? (0, _utils.getRect)($pm) : null;
+  }
+  hourDigitRect(hour) {
+    const $digit = this.#$pickerHours.children[(0, _utils2.hourToIndex)(hour, !this.ampm)];
+    return $digit != null ? (0, _utils.getRect)($digit) : null;
+  }
+  minuteDigitRect(minute) {
+    const $digit = this.#$pickerMinutes.children[Math.round(minute / 5)];
+    return $digit != null ? (0, _utils.getRect)($digit) : null;
+  }
+  #getClickDegree(x, y) {
+    const touchRect = this.#$pickerTouch.getBoundingClientRect();
+    const cx = touchRect.width / 2;
+    const cy = touchRect.height / 2;
+    const px = x - touchRect.x;
+    const py = touchRect.height - y + touchRect.y;
+    const dx = px - cx;
+    const dy = py - cy;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    const cosRad = dx / len;
+    const rad = Math.acos(cosRad * (dy < 0 ? -1 : 1));
+    const deg = rad * (180 / Math.PI);
+    let cssDeg = (deg - 90 - 360) % 360 * -1;
+    if (dy < 0) {
+      cssDeg += 180;
+    }
+    const rowIndex = len > MINUTE_RADIUS ? 0 : len > HOUR_12_RADIUS ? 1 : 2;
+    return [cssDeg, rowIndex];
+  }
+  #onPickerClick = e => {
+    const [cssDeg, rowIndex] = this.#getClickDegree(e.x, e.y);
+    const isHourRowClick = rowIndex > 0;
+    const isHour24RowClick = rowIndex > 1;
+    if (isHourRowClick) {
+      const digitIndex = Math.round(cssDeg / 30) % 12;
+      const is24 = (0, _utils.getBooleanAttribute)(this, 'ampm') === false;
+      if (is24) {
+        if (isHour24RowClick) {
+          this.#hour = digitIndex === 0 ? 0 : digitIndex + 12;
+        } else {
+          this.#hour = digitIndex === 0 ? 12 : digitIndex;
+        }
+      } else {
+        this.#hour = digitIndex + (this.#$ampm.value === 'pm' ? 12 : 0);
+      }
+      this.#$headerHours.focus();
+    } else {
+      this.#minute = Math.round(cssDeg / 6) % 60;
+      this.#$headerMinutes.focus();
+    }
+    this.#render();
+  };
+  #render() {
+    const is24 = (0, _utils.getBooleanAttribute)(this, 'ampm') === false;
+    this.#selectHour(is24);
+    this.#selectMinute();
+    this.#$headerHoursText.textContent = (0, _utils2.stringifyHour)(this.#hour, is24);
+    this.#$headerMinutesText.textContent = (0, _utils2.stringifyMinute)(this.#minute);
+    (0, _utils.updateAttribute)(this.#$headerHours, 'aria-valuenow', this.#hour);
+    (0, _utils.updateAttribute)(this.#$headerHours, 'aria-valuetext', this.#hour);
+    (0, _utils.updateAttribute)(this.#$headerMinutes, 'aria-valuenow', this.#minute);
+    (0, _utils.updateAttribute)(this.#$headerMinutes, 'aria-valuetext', this.#minute);
+  }
+  #selectHour(is24) {
+    const $hours = this.#$pickerHours.children;
+    const hourDigitIndex = this.#hour % 12;
+    const selectedIndex = (0, _utils2.hourToIndex)(this.#hour, is24);
+    const currentCssDeg = (0, _utils2.getNeedleRotationDeg)(this.#$needleHour);
+    const hourCssDeg = (0, _utils2.getShortestCssDeg)(currentCssDeg, hourDigitIndex * 30);
+    for (let i = 0; i < $hours.length; i++) {
+      (0, _utils.setClass)($hours[i], 'selected', i === selectedIndex);
+    }
+    this.#$needleHour.style.transform = `rotate(${hourCssDeg}deg)`;
+    if (is24) {
+      if (this.#hour > 0 && this.#hour <= 12) {
+        this.#$needleHour.style.height = `${NEEDLE_HOUR_12_LENGTH}px`;
+      } else {
+        this.#$needleHour.style.height = `${NEEDLE_HOUR_24_LENGTH}px`;
+      }
+    } else {
+      this.#$needleHour.style.height = `${NEEDLE_HOUR_12_LENGTH}px`;
+    }
+    this.#$ampm.setAttribute('value', this.#hour >= 0 && this.#hour < 12 ? 'am' : 'pm');
+  }
+  #selectMinute() {
+    const $minutes = this.#$pickerMinutes.children;
+    const isNeedleSelected = this.#minute % 5 === 0;
+    const selectedIndex = this.#minute / 5;
+    const currentCssDeg = (0, _utils2.getNeedleRotationDeg)(this.#$needleMinute);
+    const minuteCssDeg = (0, _utils2.getShortestCssDeg)(currentCssDeg, this.#minute * 6);
+    for (let i = 0; i < $minutes.length; i++) {
+      (0, _utils.setClass)($minutes[i], 'selected', selectedIndex === i);
+    }
+    (0, _utils.setClass)(this.#$needleMinute, 'selected', isNeedleSelected);
+    this.#$needleMinute.style.transform = `rotate(${minuteCssDeg}deg)`;
+  }
+  #onAmPmChange = e => {
+    const value = e.detail;
+    switch (value) {
+      case 'am':
+        {
+          if (this.#hour >= 12) {
+            this.#hour -= 12;
+            this.#render();
+          }
+          break;
+        }
+      case 'pm':
+        {
+          if (this.#hour < 12) {
+            this.#hour += 12;
+            this.#render();
+          }
+          break;
+        }
+    }
+  };
+  #onSubmitButtonClick = () => {
+    const value = (0, _utils2.stringifyTime)(this.#hour, this.#minute);
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: value
+    }));
+  };
+  #onHoursKeydown = e => {
+    switch (e.key) {
+      case 'ArrowUp':
+        {
+          e.preventDefault();
+          this.#hour = (this.#hour + 1) % 24;
+          this.#render();
+          break;
+        }
+      case 'ArrowDown':
+        {
+          e.preventDefault();
+          this.#hour = (this.#hour + 23) % 24;
+          this.#render();
+          break;
+        }
+    }
+  };
+  #onMinutesKeydown = e => {
+    switch (e.key) {
+      case 'ArrowUp':
+        {
+          e.preventDefault();
+          this.#minute = (this.#minute + 1) % 60;
+          this.#render();
+          break;
+        }
+      case 'ArrowDown':
+        {
+          e.preventDefault();
+          this.#minute = (this.#minute + 59) % 60;
+          this.#render();
+          break;
+        }
+    }
+  };
+  #onChangeReactHandler = e => {
+    (0, _utils.getReactEventHandler)(this, 'on-change')?.(e);
+  };
+});

package/lib/cjs/time-picker/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/time-picker/utils.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stringifyTime = exports.stringifyMinute = exports.stringifyHourFace = exports.stringifyHour = exports.parseTime = exports.hourToIndex = exports.getShortestCssDeg = exports.getNeedleRotationDeg = void 0;
+const parseTime = value => {
+  if (value === '' || value === null) {
+    return {
+      hours: 0,
+      minutes: 0
+    };
+  }
+  const timeParts = value.split(':');
+  const hours = parseInt(timeParts[0] ?? '00');
+  const minutes = parseInt(timeParts[1] ?? '00');
+  if (isNaN(hours) || hours > 23 || hours < 0) {
+    return {
+      hours: 0,
+      minutes: 0
+    };
+  }
+  if (isNaN(minutes) || minutes > 59 || minutes < 0) {
+    return {
+      hours: 0,
+      minutes: 0
+    };
+  }
+  return {
+    hours,
+    minutes
+  };
+};
+exports.parseTime = parseTime;
+const pad = value => {
+  return value.toString().padStart(2, '0');
+};
+const stringifyTime = (hour, minute) => {
+  return `${pad(hour)}:${pad(minute)}:00`;
+};
+exports.stringifyTime = stringifyTime;
+const stringifyHour = (hour, is24) => {
+  if (is24) {
+    return pad(hour);
+  }
+  if (hour === 0 || hour === 12) {
+    return '12';
+  }
+  return pad(hour % 12);
+};
+exports.stringifyHour = stringifyHour;
+const stringifyHourFace = hour => {
+  return hour === 0 ? '12' : hour === 12 ? '24' : String(hour);
+};
+exports.stringifyHourFace = stringifyHourFace;
+const stringifyMinute = minute => {
+  return pad(minute);
+};
+exports.stringifyMinute = stringifyMinute;
+const hourToIndex = (hour, is24) => {
+  if (is24) {
+    if (hour === 0) {
+      return 12;
+    }
+    if (hour === 12) {
+      return 0;
+    }
+    return hour;
+  }
+  return hour % 12;
+};
+exports.hourToIndex = hourToIndex;
+const getNeedleRotationDeg = elem => {
+  const match = elem.style.transform.match(/^rotate\((-?\d+)deg\)$/);
+  if (match === null) {
+    return 0;
+  }
+  return Number(match[1]);
+};
+exports.getNeedleRotationDeg = getNeedleRotationDeg;
+const getShortestCssDeg = (currentDeg, nextDeg) => {
+  const angle = currentDeg % 360;
+  const diff = (360 - (angle - nextDeg)) % 360;
+  if (diff > 180) {
+    return currentDeg - 360 + diff;
+  }
+  return currentDeg + diff;
+};
+exports.getShortestCssDeg = getShortestCssDeg;