@nectary/components 3.3.0 → 3.3.2

package/lib/cjs/textarea/types.js

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

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

@@ -1,112 +0,0 @@
-"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

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

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

@@ -1,100 +0,0 @@
-"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

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

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

@@ -1,338 +0,0 @@
-"use strict";
-
-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-button id="submit" size="s" aria-label="Submit"><sinch-icon id="icon-submit" slot="icon" name="done"></sinch-icon></sinch-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

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

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

@@ -1,89 +0,0 @@
-"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;