@haiilo/catalyst 10.1.1 → 10.3.1

package/dist/components/cat-time.js

@@ -0,0 +1,303 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as catI18nRegistry } from './cat-i18n-registry.js';
+import { d as defineCustomElement$6 } from './cat-button2.js';
+import { d as defineCustomElement$5 } from './cat-dropdown2.js';
+import { d as defineCustomElement$4 } from './cat-icon2.js';
+import { d as defineCustomElement$3 } from './cat-input2.js';
+import { d as defineCustomElement$2 } from './cat-spinner2.js';
+
+function getHour12(language) {
+    const dateStr = new Intl.DateTimeFormat(language, { hour: '2-digit', minute: '2-digit' })
+        .format(new Date())
+        .toLowerCase();
+    return dateStr.includes('am') || dateStr.includes('pm');
+}
+function getLocale(language) {
+    return {
+        change: catI18nRegistry.t('timepicker.change'),
+        choose: catI18nRegistry.t('timepicker.choose'),
+        timeFormat: getHour12(language) ? '12' : '24'
+    };
+}
+
+function clampTime(min, date, max) {
+    const [, hhMin, mmMin] = min?.match(/(\d{2}):(\d{2})/)?.map(Number) ?? [];
+    const [, hhMax, mmMax] = max?.match(/(\d{2}):(\d{2})/)?.map(Number) ?? [];
+    let minTime = -Infinity;
+    let maxTime = Infinity;
+    if (hhMin !== undefined && mmMin !== undefined) {
+        minTime = new Date(date.getFullYear(), date.getMonth(), date.getDate(), hhMin, mmMin).getTime();
+    }
+    if (hhMax !== undefined && mmMax !== undefined) {
+        maxTime = new Date(date.getFullYear(), date.getMonth(), date.getDate(), hhMax, mmMax).getTime();
+    }
+    return new Date(Math.min(Math.max(date.getTime(), minTime), maxTime));
+}
+function isBefore(date, time) {
+    const [, hh, mm] = time?.match(/(\d{2}):(\d{2})/)?.map(Number) ?? [];
+    if (hh === undefined || mm === undefined) {
+        return false;
+    }
+    return date.getHours() < hh || (date.getHours() === hh && date.getMinutes() < mm);
+}
+function isAfter(date, time) {
+    const [, hh, mm] = time?.match(/(\d{2}):(\d{2})/)?.map(Number) ?? [];
+    if (hh === undefined || mm === undefined) {
+        return false;
+    }
+    return date.getHours() > hh || (date.getHours() === hh && date.getMinutes() > mm);
+}
+
+const catTimeCss = ":host{display:block}:host([hidden]){display:none}.label-aria{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.cat-time-addon{margin-left:-1px}nav{max-height:16rem}nav ul{list-style:none;margin:0;padding:0}.time-disabled{opacity:0.25}";
+const CatTimeStyle0 = catTimeCss;
+
+const CatTime$1 = /*@__PURE__*/ proxyCustomElement(class CatTime extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.catChange = createEvent(this, "catChange", 7);
+        this.catFocus = createEvent(this, "catFocus", 7);
+        this.catBlur = createEvent(this, "catBlur", 7);
+        this.language = catI18nRegistry.getLocale();
+        this.locale = getLocale(this.language);
+        this.hasSlottedLabel = false;
+        this.hasSlottedHint = false;
+        this.selectionTime = null;
+        this.isAm = true;
+        this.requiredMarker = 'optional';
+        this.horizontal = false;
+        this.autoComplete = undefined;
+        this.clearable = false;
+        this.disabled = false;
+        this.hint = undefined;
+        this.icon = undefined;
+        this.iconRight = false;
+        this.identifier = undefined;
+        this.label = '';
+        this.labelHidden = false;
+        this.max = undefined;
+        this.min = undefined;
+        this.name = undefined;
+        this.placeholder = undefined;
+        this.textPrefix = undefined;
+        this.textSuffix = undefined;
+        this.readonly = false;
+        this.required = false;
+        this.value = undefined;
+        this.errors = undefined;
+        this.errorUpdate = 0;
+        this.nativeAttributes = undefined;
+        this.placement = 'bottom-end';
+        this.step = 30;
+    }
+    componentWillLoad() {
+        this.syncValue(this.value ?? '');
+    }
+    componentWillRender() {
+        this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+        this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+    }
+    componentDidLoad() {
+        this.input?.mask({
+            time: true,
+            timeFormat: this.locale.timeFormat,
+            timePattern: ['h', 'm']
+        });
+    }
+    onOpen() {
+        const query = (selector) => this.hostElement.shadowRoot?.querySelector(selector);
+        const time = clampTime(this.min ?? null, this.selectionTime ?? new Date(2000, 5, 1, 8), this.max ?? null);
+        const elem1 = query(`[data-time="${this.formatIso(time)}"]`);
+        time.setMinutes(Math.floor(time.getMinutes() / this.step) * this.step);
+        const elem2 = query(`[data-time="${this.formatIso(time)}"]`);
+        setTimeout(() => {
+            (elem2 ?? elem1)?.doFocus();
+            (elem2 ?? elem1)?.scrollIntoView(this.selectionTime ? { block: 'center' } : undefined);
+        }); // not entirely sure why this is necessary
+    }
+    /**
+     * Select a time in the picker.
+     *
+     * @param date The time to select.
+     */
+    async select(date) {
+        const oldValue = this.value;
+        if (!date) {
+            this.selectionTime = null;
+            this.value = undefined;
+        }
+        else {
+            const time = clampTime(this.min ?? null, date, this.max ?? null);
+            this.isAm = this.format(time).toLowerCase().includes('am');
+            this.selectionTime = time;
+            this.value = this.formatIso(time);
+        }
+        // we need to set the input explicitly to sync the input even without a
+        // rerender (if the value is not changed)
+        if (this.input) {
+            this.input.value = this.format(this.selectionTime, false);
+        }
+        if (oldValue !== this.value) {
+            this.catChange.emit(this.value);
+        }
+    }
+    /**
+     * Programmatically move focus to the input. Use this method instead of
+     * `input.focus()`.
+     *
+     * @param options An optional object providing options to control aspects of
+     * the focusing process.
+     */
+    async doFocus(options) {
+        this.input?.doFocus(options);
+    }
+    /**
+     * Programmatically remove focus from the input. Use this method instead of
+     * `input.blur()`.
+     */
+    async doBlur() {
+        this.input?.doBlur();
+    }
+    /**
+     * Clear the input.
+     */
+    async clear() {
+        this.input?.clear();
+    }
+    render() {
+        return (h(Host, { key: '417fe04aff5d229b3f99595cd464ed1b35a64655' }, h("cat-input", { key: 'a240ad76627fcc5013d8e51e0728e0296dbb0e42', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, h("span", { key: 'cf2026f70a32a5df5331b82d1d64cb4695a0b42e', slot: "label" }, this.hasSlottedLabel && h("slot", { name: "label" }), !this.hasSlottedLabel && this.label, h("span", { key: '46b4a5363823a48d5569f77bcbadbaf0ef93e7b1', class: "label-aria" }, " (HH:mm)")), h("div", { key: 'cfad61c399b5b4a487b211976e61c3e33fb37a98', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (h("cat-button", { class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), h("cat-dropdown", { key: '2a158234c4cc55920105b326cdf31fbe02fedfb7', slot: "addon", placement: this.placement }, h("cat-button", { key: '1aa21b054ef608a4f1e9cc32312a762fa64d8b2d', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), h("nav", { key: 'dd604da9f2244c970ca62ca68385cc86d0b98bef', slot: "content", class: "cat-nav" }, h("ul", { key: '3c5e331defd7f192c27aab7085f5337a2eaf0fe7' }, this.timeArray().map(time => {
+            const isoTime = this.formatIso(time);
+            const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);
+            return (h("li", null, h("cat-button", { class: {
+                    'cat-nav-item': true,
+                    'time-disabled': disabled
+                }, disabled: disabled, active: isoTime === this.value, color: isoTime === this.value ? 'primary' : 'secondary', variant: isoTime === this.value ? 'filled' : 'outlined', onCatClick: () => this.select(time), "data-time": isoTime }, this.format(time))));
+        }))))), this.hasSlottedHint && (h("span", { slot: "hint" }, h("slot", { name: "hint" }))))));
+    }
+    timeArray() {
+        const result = [];
+        const start = new Date(2000, 5, 1, 0, 0, 0);
+        let time = new Date(start.getTime());
+        while (time.getDate() === start.getDate()) {
+            result.push(time);
+            time = new Date(time.getTime() + this.step * 60000);
+        }
+        return result;
+    }
+    syncValue(value) {
+        const [, hh, mm] = value.match(/(\d{2}):(\d{2})/)?.map(Number) ?? [];
+        if (hh === undefined || mm === undefined) {
+            this.select(null);
+            return;
+        }
+        this.select(this.locale.timeFormat === '24'
+            ? new Date(2000, 5, 1, hh, mm, 0)
+            : new Date(2000, 5, 1, (hh % 12) + (this.isAm ? 0 : 12), mm, 0));
+    }
+    toggleAm() {
+        if (this.selectionTime) {
+            this.select(new Date(this.selectionTime.getTime() + (this.isAm ? 12 : -12) * 3600000));
+        }
+        else {
+            this.isAm = !this.isAm;
+        }
+    }
+    onInputBlur(e) {
+        this.syncValue(this.input?.value ?? '');
+        this.catBlur.emit(e);
+    }
+    format(date, includeAmPm = true) {
+        const str = date
+            ? new Intl.DateTimeFormat(this.language, {
+                hour: '2-digit',
+                minute: '2-digit'
+            }).format(date)
+            : '';
+        return includeAmPm ? str : str.replace(/\s?(am|pm)/i, '');
+    }
+    formatIso(date) {
+        return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
+    }
+    get hostElement() { return this; }
+    static get style() { return CatTimeStyle0; }
+}, [1, "cat-time", {
+        "requiredMarker": [1, "required-marker"],
+        "horizontal": [4],
+        "autoComplete": [1, "auto-complete"],
+        "clearable": [4],
+        "disabled": [4],
+        "hint": [1],
+        "icon": [1],
+        "iconRight": [4, "icon-right"],
+        "identifier": [1],
+        "label": [1],
+        "labelHidden": [4, "label-hidden"],
+        "max": [1],
+        "min": [1],
+        "name": [1],
+        "placeholder": [1],
+        "textPrefix": [1, "text-prefix"],
+        "textSuffix": [1, "text-suffix"],
+        "readonly": [4],
+        "required": [4],
+        "value": [1025],
+        "errors": [4],
+        "errorUpdate": [8, "error-update"],
+        "nativeAttributes": [16],
+        "placement": [1],
+        "step": [2],
+        "hasSlottedLabel": [32],
+        "hasSlottedHint": [32],
+        "selectionTime": [32],
+        "isAm": [32],
+        "select": [64],
+        "doFocus": [64],
+        "doBlur": [64],
+        "clear": [64]
+    }, [[0, "catOpen", "onOpen"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cat-time", "cat-button", "cat-dropdown", "cat-icon", "cat-input", "cat-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cat-time":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CatTime$1);
+            }
+            break;
+        case "cat-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "cat-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "cat-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "cat-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "cat-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const CatTime = CatTime$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CatTime, defineCustomElement };
+
+//# sourceMappingURL=cat-time.js.map

package/dist/components/cat-time.js.map

@@ -0,0 +1 @@
+{"file":"cat-time.js","mappings":"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","names":["i18n","CatTime"],"sources":["src/components/cat-time/cat-time-locale.ts","src/components/cat-time/cat-time-math.ts","src/components/cat-time/cat-time.scss?tag=cat-time&encapsulation=shadow","src/components/cat-time/cat-time.tsx"],"sourcesContent":["import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\nexport function getHour12(language: string): boolean {\n  const dateStr = new Intl.DateTimeFormat(language, { hour: '2-digit', minute: '2-digit' })\n    .format(new Date())\n    .toLowerCase();\n  return dateStr.includes('am') || dateStr.includes('pm');\n}\n\nexport function getLocale(language: string) {\n  return {\n    change: i18n.t('timepicker.change'),\n    choose: i18n.t('timepicker.choose'),\n    timeFormat: getHour12(language) ? '12' : '24'\n  };\n}\n","export function clampTime(min: string | null, date: Date, max: string | null): Date {\n  const [, hhMin, mmMin] = min?.match(/(\\d{2}):(\\d{2})/)?.map(Number) ?? [];\n  const [, hhMax, mmMax] = max?.match(/(\\d{2}):(\\d{2})/)?.map(Number) ?? [];\n  let minTime = -Infinity;\n  let maxTime = Infinity;\n  if (hhMin !== undefined && mmMin !== undefined) {\n    minTime = new Date(date.getFullYear(), date.getMonth(), date.getDate(), hhMin, mmMin).getTime();\n  }\n  if (hhMax !== undefined && mmMax !== undefined) {\n    maxTime = new Date(date.getFullYear(), date.getMonth(), date.getDate(), hhMax, mmMax).getTime();\n  }\n  return new Date(Math.min(Math.max(date.getTime(), minTime), maxTime));\n}\n\nexport function isBefore(date: Date, time: string | null): boolean {\n  const [, hh, mm] = time?.match(/(\\d{2}):(\\d{2})/)?.map(Number) ?? [];\n  if (hh === undefined || mm === undefined) {\n    return false;\n  }\n  return date.getHours() < hh || (date.getHours() === hh && date.getMinutes() < mm);\n}\n\nexport function isAfter(date: Date, time: string | null): boolean {\n  const [, hh, mm] = time?.match(/(\\d{2}):(\\d{2})/)?.map(Number) ?? [];\n  if (hh === undefined || mm === undefined) {\n    return false;\n  }\n  return date.getHours() > hh || (date.getHours() === hh && date.getMinutes() > mm);\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.label-aria {\n  @include cat-visually-hidden;\n}\n\n.cat-time-addon {\n  margin-left: -1px;\n}\n\nnav {\n  max-height: 16rem;\n\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n}\n\n.time-disabled {\n  opacity: 0.25;\n}\n","import { Placement } from '@floating-ui/dom';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, h } from '@stencil/core';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { getLocale } from './cat-time-locale';\nimport { clampTime, isAfter, isBefore } from './cat-time-math';\n\n@Component({\n  tag: 'cat-time',\n  styleUrl: 'cat-time.scss',\n  shadow: true\n})\nexport class CatTime {\n  private readonly language = i18n.getLocale();\n  private readonly locale = getLocale(this.language);\n  private input?: HTMLCatInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  @State() selectionTime: Date | null = null;\n\n  @State() isAm = true;\n\n  /**\n   * Whether the label need a marker to shown if the input is required or optional.\n   */\n  @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * Hint for form autofill feature.\n   */\n  @Prop() autoComplete?: string;\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the input.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * The name of an icon to be displayed in the input.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * A maximum time value given in HH:mm format.\n   */\n  @Prop() max?: string;\n\n  /**\n   * A minimum value given in HH:mm format.\n   */\n  @Prop() min?: string;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * A textual prefix to be displayed in the input.\n   */\n  @Prop() textPrefix?: string;\n\n  /**\n   * A textual suffix to be displayed in the input.\n   */\n  @Prop() textSuffix?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the control given in HH:mm format\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors on change with the given delay in milliseconds.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * The placement of the dropdown.\n   */\n  @Prop() placement: Placement = 'bottom-end';\n\n  /**\n   * The step size for times in minutes.\n   */\n  @Prop() step = 30;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string>;\n\n  /**\n   * Emitted when the input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad() {\n    this.syncValue(this.value ?? '');\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  componentDidLoad() {\n    this.input?.mask({\n      time: true,\n      timeFormat: this.locale.timeFormat,\n      timePattern: ['h', 'm']\n    });\n  }\n\n  @Listen('catOpen')\n  onOpen() {\n    const query = (selector: string) => this.hostElement.shadowRoot?.querySelector<HTMLCatButtonElement>(selector);\n    const time = clampTime(this.min ?? null, this.selectionTime ?? new Date(2000, 5, 1, 8), this.max ?? null);\n    const elem1 = query(`[data-time=\"${this.formatIso(time)}\"]`);\n    time.setMinutes(Math.floor(time.getMinutes() / this.step) * this.step);\n    const elem2 = query(`[data-time=\"${this.formatIso(time)}\"]`);\n    setTimeout(() => {\n      (elem2 ?? elem1)?.doFocus();\n      (elem2 ?? elem1)?.scrollIntoView(this.selectionTime ? { block: 'center' } : undefined);\n    }); // not entirely sure why this is necessary\n  }\n\n  /**\n   * Select a time in the picker.\n   *\n   * @param date The time to select.\n   */\n  @Method()\n  async select(date: Date | null): Promise<void> {\n    const oldValue = this.value;\n    if (!date) {\n      this.selectionTime = null;\n      this.value = undefined;\n    } else {\n      const time = clampTime(this.min ?? null, date, this.max ?? null);\n      this.isAm = this.format(time).toLowerCase().includes('am');\n      this.selectionTime = time;\n      this.value = this.formatIso(time);\n    }\n    // we need to set the input explicitly to sync the input even without a\n    // rerender (if the value is not changed)\n    if (this.input) {\n      this.input.value = this.format(this.selectionTime, false);\n    }\n    if (oldValue !== this.value) {\n      this.catChange.emit(this.value);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the input. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input?.doFocus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the input. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input?.doBlur();\n  }\n\n  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.input?.clear();\n  }\n\n  render() {\n    return (\n      <Host>\n        <cat-input\n          class=\"cat-time-input\"\n          ref={el => (this.input = el as HTMLCatInputElement)}\n          requiredMarker={this.requiredMarker}\n          horizontal={this.horizontal}\n          autoComplete={this.autoComplete}\n          clearable={this.clearable}\n          disabled={this.disabled}\n          hint={this.hint}\n          icon={this.icon}\n          iconRight={this.iconRight}\n          identifier={this.identifier}\n          label={this.label}\n          labelHidden={this.labelHidden}\n          name={this.name}\n          placeholder={this.placeholder}\n          textPrefix={this.textPrefix}\n          textSuffix={this.textSuffix}\n          readonly={this.readonly}\n          required={this.required}\n          value={this.format(this.selectionTime, false)}\n          errors={this.errors}\n          errorUpdate={this.errorUpdate}\n          nativeAttributes={this.nativeAttributes}\n          onCatFocus={e => this.catFocus.emit(e.detail)}\n          onCatBlur={e => this.onInputBlur(e.detail)}\n        >\n          <span slot=\"label\">\n            {this.hasSlottedLabel && <slot name=\"label\"></slot>}\n            {!this.hasSlottedLabel && this.label}\n            <span class=\"label-aria\"> (HH:mm)</span>\n          </span>\n          <div slot=\"addon\" class=\"cat-time-addon\">\n            {this.locale.timeFormat === '12' && (\n              <cat-button\n                class=\"cat-time-format\"\n                disabled={this.disabled || this.readonly}\n                onCatClick={() => this.toggleAm()}\n              >\n                {this.isAm ? 'AM' : 'PM'}\n              </cat-button>\n            )}\n            <cat-dropdown slot=\"addon\" placement={this.placement}>\n              <cat-button\n                slot=\"trigger\"\n                class=\"cat-time-toggle\"\n                disabled={this.disabled || this.readonly}\n                icon=\"$cat:timepicker-clock\"\n                iconOnly\n                a11yLabel={\n                  this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose\n                }\n              ></cat-button>\n              <nav slot=\"content\" class=\"cat-nav\">\n                <ul>\n                  {this.timeArray().map(time => {\n                    const isoTime = this.formatIso(time);\n                    const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);\n                    return (\n                      <li>\n                        <cat-button\n                          class={{\n                            'cat-nav-item': true,\n                            'time-disabled': disabled\n                          }}\n                          disabled={disabled}\n                          active={isoTime === this.value}\n                          color={isoTime === this.value ? 'primary' : 'secondary'}\n                          variant={isoTime === this.value ? 'filled' : 'outlined'}\n                          onCatClick={() => this.select(time)}\n                          data-time={isoTime}\n                        >\n                          {this.format(time)}\n                        </cat-button>\n                      </li>\n                    );\n                  })}\n                </ul>\n              </nav>\n            </cat-dropdown>\n          </div>\n          {this.hasSlottedHint && (\n            <span slot=\"hint\">\n              <slot name=\"hint\"></slot>\n            </span>\n          )}\n        </cat-input>\n      </Host>\n    );\n  }\n\n  private timeArray() {\n    const result = [];\n    const start = new Date(2000, 5, 1, 0, 0, 0);\n    let time = new Date(start.getTime());\n    while (time.getDate() === start.getDate()) {\n      result.push(time);\n      time = new Date(time.getTime() + this.step * 60000);\n    }\n    return result;\n  }\n\n  private syncValue(value: string) {\n    const [, hh, mm] = value.match(/(\\d{2}):(\\d{2})/)?.map(Number) ?? [];\n    if (hh === undefined || mm === undefined) {\n      this.select(null);\n      return;\n    }\n    this.select(\n      this.locale.timeFormat === '24'\n        ? new Date(2000, 5, 1, hh, mm, 0)\n        : new Date(2000, 5, 1, (hh % 12) + (this.isAm ? 0 : 12), mm, 0)\n    );\n  }\n\n  private toggleAm() {\n    if (this.selectionTime) {\n      this.select(new Date(this.selectionTime.getTime() + (this.isAm ? 12 : -12) * 3600000));\n    } else {\n      this.isAm = !this.isAm;\n    }\n  }\n\n  private onInputBlur(e: FocusEvent) {\n    this.syncValue(this.input?.value ?? '');\n    this.catBlur.emit(e);\n  }\n\n  private format(date: Date | null, includeAmPm = true) {\n    const str = date\n      ? new Intl.DateTimeFormat(this.language, {\n          hour: '2-digit',\n          minute: '2-digit'\n        }).format(date)\n      : '';\n    return includeAmPm ? str : str.replace(/\\s?(am|pm)/i, '');\n  }\n\n  private formatIso(date: Date) {\n    return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;\n  }\n}\n"],"version":3}

package/dist/components/cat-toggle.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { l as loglevel } from './loglevel.js';
+import { l as log } from './loglevel.js';
 import { C as CatFormHint } from './cat-form-hint.js';
 
 const catToggleCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}:host{display:flex;flex-direction:column;gap:0.5rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.label-left{flex-direction:row-reverse}input{position:absolute;margin:0;width:2rem;height:1.25rem;opacity:0;cursor:inherit}.toggle-placeholder{width:calc(2rem + 1px);flex-shrink:0}.toggle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;position:relative;width:2rem;height:1.25rem;border-radius:10rem;background-color:rgb(var(--cat-border-color-dark, 215, 219, 224));transition:background-color 125ms ease;pointer-events:none}:checked+.toggle{background-color:rgb(var(--cat-primary-bg, 0, 129, 148))}:focus-visible+.toggle{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.toggle::after{content:\"\";position:absolute;width:1rem;height:1rem;background:#fff;border-radius:10rem;transform:translateX(calc(2px - 0.5rem));transition:transform 125ms linear;box-shadow:0 1px 2px rgba(27, 31, 38, 0.06), 0 1px 3px rgba(27, 31, 38, 0.1)}:checked+.toggle::after{transform:translateX(calc(-2px + 0.5rem));background:rgb(var(--cat-primary-fill, 255, 255, 255))}.is-disabled .toggle{background-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}:host(.cat-error) .toggle{background-color:rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}:host(.cat-error) :checked+.toggle{background-color:rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) :checked+.toggle::after{background:rgb(var(--cat-danger-fill, 255, 255, 255))}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}";
+const CatToggleStyle0 = catToggleCss;
 
 let nextUniqueId = 0;
 const CatToggle$1 = /*@__PURE__*/ proxyCustomElement(class CatToggle extends HTMLElement {
@@ -40,7 +41,7 @@ const CatToggle$1 = /*@__PURE__*/ proxyCustomElement(class CatToggle extends HTM
         this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
         this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
         if (!this.label && !this.hasSlottedLabel) {
-            loglevel.warn('[A11y] Missing ARIA label on toggle', this);
+            log.warn('[A11y] Missing ARIA label on toggle', this);
         }
     }
     /**
@@ -61,7 +62,7 @@ const CatToggle$1 = /*@__PURE__*/ proxyCustomElement(class CatToggle extends HTM
         this.input.blur();
     }
     render() {
-        return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { class: "toggle" }), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hasHint && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "toggle-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+        return (h(Host, { key: '1cc91400d302cd19fa92216ec3fdf45ae869b761' }, h("label", { key: '981ac74c7a9aa3324cab60067849e2ffff9d4158', htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { key: 'f4c1a4398f73d2c3da8fd26b360d4a4d94dae3c3', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: '4a8c4e21fcb48dc3f2260d5abfcf2351fa0eeb13', class: "toggle" }), h("span", { key: 'b911ffc5f29252efba3989e494eca1c5ec0fbd54', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hasHint && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "toggle-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -81,7 +82,7 @@ const CatToggle$1 = /*@__PURE__*/ proxyCustomElement(class CatToggle extends HTM
         this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;
     }
     get hostElement() { return this; }
-    static get style() { return catToggleCss; }
+    static get style() { return CatToggleStyle0; }
 }, [1, "cat-toggle", {
         "checked": [1028],
         "disabled": [4],

package/dist/components/cat-toggle.js.map

@@ -1 +1 @@
-{"file":"cat-toggle.js","mappings":"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","names":["CatToggle","log"],"sources":["src/components/cat-toggle/cat-toggle.scss?tag=cat-toggle&encapsulation=shadow","src/components/cat-toggle/cat-toggle.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$toggle-width: 2rem;\n$toggle-height: 1.25rem;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  flex: 0 1 auto;\n  display: flex;\n  gap: 0.5rem;\n  @include cat-body('m');\n  @include cat-select(none);\n  cursor: pointer;\n}\n\n.label-left {\n  flex-direction: row-reverse;\n}\n\ninput {\n  position: absolute;\n  margin: 0;\n  width: $toggle-width;\n  height: $toggle-height;\n  opacity: 0;\n  cursor: inherit;\n}\n\n.toggle-placeholder {\n  width: calc($toggle-width + 1px);\n  flex-shrink: 0;\n}\n\n.toggle {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: $toggle-width;\n  height: $toggle-height;\n  border-radius: 10rem;\n  background-color: cat-token('color.ui.border.dark');\n  transition: background-color cat-token('time.transition.s') ease;\n  pointer-events: none;\n\n  :checked + & {\n    background-color: cat-token('color.theme.primary.bg');\n  }\n\n  :focus-visible + & {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 1rem;\n    height: 1rem;\n    background: #fff;\n    border-radius: 10rem;\n    transform: translateX(calc(2px - 0.5rem));\n    transition: transform cat-token('time.transition.s') linear;\n    @include cat-elevation(2);\n\n    :checked + & {\n      transform: translateX(calc(-2px + 0.5rem));\n      background: cat-token('color.theme.primary.fill');\n    }\n  }\n\n  .is-disabled & {\n    background-color: cat-token('color.ui.border.dark');\n  }\n}\n\n:host(.cat-error) {\n  .toggle {\n    background-color: cat-token('color.theme.danger.bg', 0.2);\n  }\n\n  :checked + .toggle {\n    background-color: cat-token('color.theme.danger.bg');\n\n    &::after {\n      background: cat-token('color.theme.danger.fill');\n    }\n  }\n}\n\n.label {\n  flex: 1 1 auto;\n\n  .is-hidden & {\n    @include cat-visually-hidden;\n  }\n}\n\n.is-disabled {\n  cursor: not-allowed;\n  color: cat-token('color.ui.font.muted');\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n *\n * @slot hint - Optional hint element to be displayed with the toggle.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part input - The native input element.\n */\n@Component({\n  tag: 'cat-toggle',\n  styleUrls: ['cat-toggle.scss'],\n  shadow: true\n})\nexport class CatToggle {\n  private readonly _id = `cat-toggle-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label of the toggle that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the input.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the toggle.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the checked toggle.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() value?: any;\n\n  /**\n   * The value of the unchecked toggle.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() noValue?: any;\n\n  /**\n   * The resolved value of the toggle, based on the checked state, value and noValue.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop({ mutable: true }) resolvedValue: any = null;\n\n  /**\n   * Optional hint text(s) to be displayed with the toggle.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the toggle.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the checked status of the toggle is changed.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Event() catChange!: EventEmitter<any>;\n\n  /**\n   * Emitted when the toggle received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad() {\n    this.updateResolved();\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the toggle. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the toggle. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n        >\n          <input\n            {...this.nativeAttributes}\n            part=\"input\"\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            class=\"form-check-input\"\n            role=\"switch\"\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n            aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n          />\n          <span class=\"toggle\"></span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hasHint && (\n          <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n            <div class=\"toggle-placeholder\"></div>\n            <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint;\n  }\n\n  private onInput() {\n    this.checked = this.input.checked;\n    this.updateResolved();\n    this.catChange.emit(this.resolvedValue);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n\n  private updateResolved() {\n    this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;\n  }\n}\n"],"version":3}
+{"file":"cat-toggle.js","mappings":"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","names":["CatToggle"],"sources":["src/components/cat-toggle/cat-toggle.scss?tag=cat-toggle&encapsulation=shadow","src/components/cat-toggle/cat-toggle.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$toggle-width: 2rem;\n$toggle-height: 1.25rem;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  flex: 0 1 auto;\n  display: flex;\n  gap: 0.5rem;\n  @include cat-body('m');\n  @include cat-select(none);\n  cursor: pointer;\n}\n\n.label-left {\n  flex-direction: row-reverse;\n}\n\ninput {\n  position: absolute;\n  margin: 0;\n  width: $toggle-width;\n  height: $toggle-height;\n  opacity: 0;\n  cursor: inherit;\n}\n\n.toggle-placeholder {\n  width: calc($toggle-width + 1px);\n  flex-shrink: 0;\n}\n\n.toggle {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: $toggle-width;\n  height: $toggle-height;\n  border-radius: 10rem;\n  background-color: cat-token('color.ui.border.dark');\n  transition: background-color cat-token('time.transition.s') ease;\n  pointer-events: none;\n\n  :checked + & {\n    background-color: cat-token('color.theme.primary.bg');\n  }\n\n  :focus-visible + & {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 1rem;\n    height: 1rem;\n    background: #fff;\n    border-radius: 10rem;\n    transform: translateX(calc(2px - 0.5rem));\n    transition: transform cat-token('time.transition.s') linear;\n    @include cat-elevation(2);\n\n    :checked + & {\n      transform: translateX(calc(-2px + 0.5rem));\n      background: cat-token('color.theme.primary.fill');\n    }\n  }\n\n  .is-disabled & {\n    background-color: cat-token('color.ui.border.dark');\n  }\n}\n\n:host(.cat-error) {\n  .toggle {\n    background-color: cat-token('color.theme.danger.bg', 0.2);\n  }\n\n  :checked + .toggle {\n    background-color: cat-token('color.theme.danger.bg');\n\n    &::after {\n      background: cat-token('color.theme.danger.fill');\n    }\n  }\n}\n\n.label {\n  flex: 1 1 auto;\n\n  .is-hidden & {\n    @include cat-visually-hidden;\n  }\n}\n\n.is-disabled {\n  cursor: not-allowed;\n  color: cat-token('color.ui.font.muted');\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n *\n * @slot hint - Optional hint element to be displayed with the toggle.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part input - The native input element.\n */\n@Component({\n  tag: 'cat-toggle',\n  styleUrls: ['cat-toggle.scss'],\n  shadow: true\n})\nexport class CatToggle {\n  private readonly _id = `cat-toggle-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label of the toggle that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the input.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the toggle.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the checked toggle.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() value?: any;\n\n  /**\n   * The value of the unchecked toggle.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() noValue?: any;\n\n  /**\n   * The resolved value of the toggle, based on the checked state, value and noValue.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop({ mutable: true }) resolvedValue: any = null;\n\n  /**\n   * Optional hint text(s) to be displayed with the toggle.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the toggle.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the checked status of the toggle is changed.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Event() catChange!: EventEmitter<any>;\n\n  /**\n   * Emitted when the toggle received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad() {\n    this.updateResolved();\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the toggle. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the toggle. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n        >\n          <input\n            {...this.nativeAttributes}\n            part=\"input\"\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            class=\"form-check-input\"\n            role=\"switch\"\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n            aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n          />\n          <span class=\"toggle\"></span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hasHint && (\n          <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n            <div class=\"toggle-placeholder\"></div>\n            <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint;\n  }\n\n  private onInput() {\n    this.checked = this.input.checked;\n    this.updateResolved();\n    this.catChange.emit(this.resolvedValue);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n\n  private updateResolved() {\n    this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;\n  }\n}\n"],"version":3}

package/dist/components/cat-tooltip.js

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as computePosition, a as autoUpdate, o as offset, f as flip, b as shift } from './floating-ui.dom.esm.js';
+import { c as computePosition, o as offset, f as flip, b as shift, a as autoUpdate } from './floating-ui.dom.esm.js';
 
 const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 
 const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{--cat-font-color-head:var(--cat-font-color-tooltip, 255, 255, 255);--cat-font-color-body:var(--cat-font-color-tooltip, 255, 255, 255);position:fixed;width:max-content;top:0;left:0;box-sizing:border-box;font-size:0.875rem;line-height:1.125rem;font-weight:500;background-color:rgb(var(--cat-bg-tooltip, 0, 0, 0));border-radius:var(--cat-border-radius-m, 0.25rem);color:rgb(var(--cat-font-color-tooltip, 255, 255, 255));transition:opacity 250ms linear, visibility 250ms linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;z-index:calc(var(--cat-z-index, 1000) + 200);max-width:min(100vw - 0.5rem, 20rem)}.tooltip-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.tooltip-show{opacity:1;visibility:visible}.tooltip p{margin:0}.tooltip-round{border-radius:10rem}.tooltip-s{padding:0.375rem 0.5rem}.tooltip-s.tooltip-round{padding:0.375rem 0.75rem}.tooltip-m{padding:0.75rem}.tooltip-m.tooltip-round{padding:0.75rem 1rem}.tooltip-l{padding:1rem}.tooltip-l.tooltip-round{padding:1rem 1.5rem}";
+const CatTooltipStyle0 = catTooltipCss;
 
 let nextUniqueId = 0;
 const CatTooltip$1 = /*@__PURE__*/ proxyCustomElement(class CatTooltip extends HTMLElement {
@@ -66,12 +67,12 @@ const CatTooltip$1 = /*@__PURE__*/ proxyCustomElement(class CatTooltip extends H
         }
     }
     render() {
-        return (h(Host, null, h("slot", null), h("div", { ref: el => (this.tooltip = el), id: this.id, role: "tooltip", "aria-hidden": !this.open, "aria-live": this.open ? 'polite' : 'off', class: {
+        return (h(Host, { key: 'f1bfba8c8ce1a2d43959b18b00627af819536428' }, h("slot", { key: '0366fe88ce8bd0382beed9c298dbd945cad70bec' }), h("div", { key: 'dd9f7cd786780cd64e3fa2670f516eda71d15351', ref: el => (this.tooltip = el), id: this.id, role: "tooltip", "aria-hidden": !this.open, "aria-live": this.open ? 'polite' : 'off', class: {
                 tooltip: true,
                 'tooltip-hidden': this.inactive,
                 'tooltip-round': this.round,
                 [`tooltip-${this.size}`]: Boolean(this.size)
-            } }, h("slot", { name: "content" }, h("p", null, this.content)))));
+            } }, h("slot", { key: '2a6f92d2cfc845849730792f08e65ffb70c03e5f', name: "content" }, h("p", { key: '23b8d57bcb92506d5c88a59261716158b0daa0ba' }, this.content)))));
     }
     async update() {
         if (this.trigger && this.tooltip) {
@@ -146,7 +147,7 @@ const CatTooltip$1 = /*@__PURE__*/ proxyCustomElement(class CatTooltip extends H
         this.cleanupFloatingUi = undefined;
     }
     get hostElement() { return this; }
-    static get style() { return catTooltipCss; }
+    static get style() { return CatTooltipStyle0; }
 }, [1, "cat-tooltip", {
         "content": [1],
         "disabled": [4],

package/dist/components/cat-tooltip.js.map

@@ -1 +1 @@
-{"file":"cat-tooltip.js","mappings":"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","names":["CatTooltip","isTouchScreen"],"sources":["src/utils/is-touch-screen.ts","src/components/cat-tooltip/cat-tooltip.scss?tag=cat-tooltip&encapsulation=shadow","src/components/cat-tooltip/cat-tooltip.tsx"],"sourcesContent":["const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n\nexport default isTouchDevice;\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n$-max-width: 20rem;\n$-box-shadow: rgb(0 0 0 / 8%) 0 1px 8px 0;\n$-shift-padding: 0.25rem; // padding given to the shift() middleware\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.tooltip {\n  --cat-font-color-head: #{cat-token('color.ui.font.tooltip', $wrap: false)};\n  --cat-font-color-body: #{cat-token('color.ui.font.tooltip', $wrap: false)};\n  position: fixed;\n  width: max-content;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  @include cat-body('s', 500);\n  background-color: cat-token('color.ui.background.tooltip');\n  border-radius: cat-border-radius('m');\n  color: cat-token('color.ui.font.tooltip');\n  transition:\n    opacity cat-token('time.transition.m') linear,\n    visibility cat-token('time.transition.m') linear;\n  visibility: hidden;\n  opacity: 0;\n  box-shadow: $-box-shadow;\n  z-index: cat-z-index('tooltip');\n  max-width: min(calc(100vw - 2 * $-shift-padding), $-max-width);\n\n  &-hidden {\n    @include cat-visually-hidden;\n  }\n\n  &-show {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  p {\n    margin: 0;\n  }\n}\n\n// ----- round\n\n.tooltip-round {\n  border-radius: 10rem;\n}\n\n// ----- size\n\n.tooltip-s {\n  padding: 0.375rem 0.5rem;\n\n  &.tooltip-round {\n    padding: 0.375rem 0.75rem;\n  }\n}\n\n.tooltip-m {\n  padding: 0.75rem;\n\n  &.tooltip-round {\n    padding: 0.75rem 1rem;\n  }\n}\n\n.tooltip-l {\n  padding: 1rem;\n\n  &.tooltip-round {\n    padding: 1rem 1.5rem;\n  }\n}\n","import { autoUpdate, computePosition, flip, offset, Placement, shift } from '@floating-ui/dom';\nimport { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport isTouchScreen from '../../utils/is-touch-screen';\n\nlet nextUniqueId = 0;\n\n@Component({\n  tag: 'cat-tooltip',\n  styleUrl: 'cat-tooltip.scss',\n  shadow: true\n})\nexport class CatTooltip {\n  private static readonly OFFSET = 4;\n  private static readonly SHIFT_PADDING = 4;\n  private readonly id = `cat-tooltip-${nextUniqueId++}`;\n  private tooltip?: HTMLElement;\n  private trigger?: Element;\n  private showTimeout?: number;\n  private hideTimeout?: number;\n  private touchTimeout?: number;\n  private inactive = false;\n  private cleanupFloatingUi?: () => void;\n\n  private readonly boundShowListener: () => void;\n  private readonly boundHideListener: () => void;\n  private readonly boundWindowTouchStartListener: () => void;\n  private readonly boundTouchStartListener: (event: Event) => void;\n  private readonly boundTouchEndListener: () => void;\n\n  constructor() {\n    this.boundShowListener = this.showListener.bind(this);\n    this.boundHideListener = this.hideListener.bind(this);\n    this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);\n    this.boundTouchStartListener = this.touchStartListener.bind(this);\n    this.boundTouchEndListener = this.touchEndListener.bind(this);\n  }\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() open = false;\n\n  /**\n   * The content of the tooltip.\n   */\n  @Prop() content = '';\n\n  /**\n   * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n   * and invisible. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The placement of the tooltip.\n   */\n  @Prop() placement: Placement = 'top';\n\n  /**\n   * Use round tooltip edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The size of the tooltip.\n   */\n  @Prop() size: 's' | 'm' | 'l' = 'm';\n\n  /**\n   * The delay time for showing tooltip in ms.\n   */\n  @Prop() showDelay = 250;\n\n  /**\n   * The delay time for hiding tooltip in ms.\n   */\n  @Prop() hideDelay = 0;\n\n  /**\n   * The duration of tap to show the tooltip.\n   */\n  @Prop() longTouchDuration = 1000;\n\n  @Listen('keydown')\n  handleKeyDown({ key }: KeyboardEvent) {\n    key === 'Escape' && this.hideTooltip();\n  }\n\n  componentDidLoad(): void {\n    const slot = this.hostElement.shadowRoot?.querySelector('slot');\n    this.trigger = slot?.assignedElements?.()?.[0];\n    if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {\n      this.trigger.setAttribute('aria-describedby', this.id);\n    }\n\n    if (isTouchScreen) {\n      window.addEventListener('touchstart', this.boundWindowTouchStartListener);\n      this.trigger?.addEventListener('touchstart', this.boundTouchStartListener);\n      this.trigger?.addEventListener('touchend', this.boundTouchEndListener);\n    } else {\n      this.trigger?.addEventListener('focusin', this.boundShowListener);\n      this.trigger?.addEventListener('focusout', this.boundHideListener);\n      this.trigger?.addEventListener('mouseenter', this.boundShowListener);\n      this.trigger?.addEventListener('mouseleave', this.boundHideListener);\n    }\n  }\n\n  componentWillRender(): void {\n    this.inactive = this.disabled || (!this.content && !this.hostElement.querySelector('[slot=\"content\"]'));\n  }\n\n  disconnectedCallback(): void {\n    if (isTouchScreen) {\n      window.removeEventListener('touchstart', this.boundWindowTouchStartListener);\n      this.trigger?.removeEventListener('touchstart', this.boundTouchStartListener);\n      this.trigger?.removeEventListener('touchend', this.boundTouchEndListener);\n    } else {\n      this.trigger?.removeEventListener('mouseenter', this.boundShowListener);\n      this.trigger?.removeEventListener('mouseleave', this.boundHideListener);\n      this.trigger?.removeEventListener('focusin', this.boundShowListener);\n      this.trigger?.removeEventListener('focusout', this.boundHideListener);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n        <div\n          ref={el => (this.tooltip = el)}\n          id={this.id}\n          role=\"tooltip\"\n          aria-hidden={!this.open}\n          aria-live={this.open ? 'polite' : 'off'}\n          class={{\n            tooltip: true,\n            'tooltip-hidden': this.inactive,\n            'tooltip-round': this.round,\n            [`tooltip-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          <slot name=\"content\">\n            {/* The paragraph is needed here to make aria-live work properly. */}\n            <p>{this.content}</p>\n          </slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private async update() {\n    if (this.trigger && this.tooltip) {\n      await computePosition(this.trigger, this.tooltip, {\n        strategy: 'fixed',\n        placement: this.placement,\n        middleware: [\n          offset(CatTooltip.OFFSET),\n          flip({ fallbackAxisSideDirection: 'start' }),\n          shift({ padding: CatTooltip.SHIFT_PADDING })\n        ]\n      }).then(({ x, y }) => {\n        if (this.tooltip) {\n          Object.assign(this.tooltip.style, {\n            left: `${Math.max(0, x)}px`,\n            top: `${y}px`\n          });\n        }\n      });\n    }\n  }\n\n  private showListener() {\n    window.clearTimeout(this.hideTimeout);\n    this.hideTimeout = undefined;\n    if (!this.showTimeout) {\n      this.showTimeout = window.setTimeout(() => {\n        this.showTimeout = undefined;\n        this.showTooltip();\n      }, this.showDelay);\n    }\n  }\n\n  private hideListener() {\n    window.clearTimeout(this.showTimeout);\n    this.showTimeout = undefined;\n    if (!this.hideTimeout) {\n      this.hideTimeout = window.setTimeout(() => {\n        this.hideTimeout = undefined;\n        this.hideTooltip();\n      }, this.hideDelay);\n    }\n  }\n\n  private touchStartListener(event: Event) {\n    event.stopPropagation();\n    if (!this.touchTimeout) {\n      this.touchTimeout = window.setTimeout(() => {\n        this.touchTimeout = undefined;\n        this.showTooltip();\n      }, this.longTouchDuration);\n    }\n  }\n\n  private touchEndListener() {\n    window.clearTimeout(this.touchTimeout);\n    this.touchTimeout = undefined;\n    this.hideTooltip();\n  }\n\n  private windowTouchStartListener() {\n    this.hideTooltip();\n  }\n\n  private showTooltip() {\n    if (this.trigger && this.tooltip) {\n      this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());\n    }\n    if (!this.inactive) {\n      this.open = true;\n      this.tooltip?.classList.add('tooltip-show');\n    }\n  }\n\n  private hideTooltip() {\n    this.open = false;\n    this.tooltip?.classList.remove('tooltip-show');\n    this.cleanupFloatingUi?.();\n    this.cleanupFloatingUi = undefined;\n  }\n}\n"],"version":3}
+{"file":"cat-tooltip.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,cAAc,IAAI,MAAM,IAAI,SAAS,CAAC,cAAc,GAAG,CAAC;;ACA9E,MAAM,aAAa,GAAG,yuCAAyuC,CAAC;AAChwC,yBAAe,aAAa;;ACG5B,IAAI,YAAY,GAAG,CAAC,CAAC;MAORA,YAAU;IAkBrB;;;;QAfiB,OAAE,GAAG,eAAe,YAAY,EAAE,EAAE,CAAC;QAM9C,aAAQ,GAAG,KAAK,CAAC;oBAmBT,KAAK;uBAKH,EAAE;wBAMD,KAAK;yBAKO,KAAK;qBAKpB,KAAK;oBAKW,GAAG;yBAKf,GAAG;yBAKH,CAAC;iCAKO,IAAI;QAlD9B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtD,IAAI,CAAC,6BAA6B,GAAG,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC9E,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC/D;IAgDD,aAAa,CAAC,EAAE,GAAG,EAAiB;QAClC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;KACxC;IAED,gBAAgB;QACd,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QAChE,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE,gBAAgB,IAAI,GAAG,CAAC,CAAC,CAAC;QAC/C,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE;YAClE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;SACxD;QAED,IAAIC,aAAa,EAAE;YACjB,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,6BAA6B,CAAC,CAAC;YAC1E,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;YAC3E,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;SACxE;aAAM;YACL,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YAClE,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACnE,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACrE,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;SACtE;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;KACzG;IAED,oBAAoB;QAClB,IAAIA,aAAa,EAAE;YACjB,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,6BAA6B,CAAC,CAAC;YAC7E,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;YAC9E,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;SAC3E;aAAM;YACL,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACxE,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACxE,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACrE,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;SACvE;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAQ,EACR,4DACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAC9B,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,IAAI,eACZ,IAAI,CAAC,IAAI,GAAG,QAAQ,GAAG,KAAK,EACvC,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI;gBACb,gBAAgB,EAAE,IAAI,CAAC,QAAQ;gBAC/B,eAAe,EAAE,IAAI,CAAC,KAAK;gBAC3B,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;aAC7C,IAED,6DAAM,IAAI,EAAC,SAAS,IAElB,4DAAI,IAAI,CAAC,OAAO,CAAK,CAChB,CACH,CACD,EACP;KACH;IAEO,MAAM,MAAM;QAClB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE;YAChC,MAAM,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;gBAChD,QAAQ,EAAE,OAAO;gBACjB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,UAAU,EAAE;oBACV,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC;oBACzB,IAAI,CAAC,EAAE,yBAAyB,EAAE,OAAO,EAAE,CAAC;oBAC5C,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,CAAC,aAAa,EAAE,CAAC;iBAC7C;aACF,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;gBACf,IAAI,IAAI,CAAC,OAAO,EAAE;oBAChB,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;wBAChC,IAAI,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI;wBAC3B,GAAG,EAAE,GAAG,CAAC,IAAI;qBACd,CAAC,CAAC;iBACJ;aACF,CAAC,CAAC;SACJ;KACF;IAEO,YAAY;QAClB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACtC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC7B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;gBACnC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;gBAC7B,IAAI,CAAC,WAAW,EAAE,CAAC;aACpB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SACpB;KACF;IAEO,YAAY;QAClB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACtC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC7B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;gBACnC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;gBAC7B,IAAI,CAAC,WAAW,EAAE,CAAC;aACpB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SACpB;KACF;IAEO,kBAAkB,CAAC,KAAY;QACrC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,UAAU,CAAC;gBACpC,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;gBAC9B,IAAI,CAAC,WAAW,EAAE,CAAC;aACpB,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC5B;KACF;IAEO,gBAAgB;QACtB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvC,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;QAC9B,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAEO,wBAAwB;QAC9B,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE;YAChC,IAAI,CAAC,iBAAiB,GAAG,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;SACtF;QACD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;SAC7C;KACF;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;QAC/C,IAAI,CAAC,iBAAiB,IAAI,CAAC;QAC3B,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;KACpC;;;;;;;;;;;;;;AAvNuBD,mBAAM,GAAG,CAAH,CAAK;AACXA,0BAAa,GAAG,CAAH,CAAK;;;;;;;;;;;;;;;;;;;;","names":["CatTooltip","isTouchScreen"],"sources":["src/utils/is-touch-screen.ts","src/components/cat-tooltip/cat-tooltip.scss?tag=cat-tooltip&encapsulation=shadow","src/components/cat-tooltip/cat-tooltip.tsx"],"sourcesContent":["const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n\nexport default isTouchDevice;\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n$-max-width: 20rem;\n$-box-shadow: rgb(0 0 0 / 8%) 0 1px 8px 0;\n$-shift-padding: 0.25rem; // padding given to the shift() middleware\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.tooltip {\n  --cat-font-color-head: #{cat-token('color.ui.font.tooltip', $wrap: false)};\n  --cat-font-color-body: #{cat-token('color.ui.font.tooltip', $wrap: false)};\n  position: fixed;\n  width: max-content;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  @include cat-body('s', 500);\n  background-color: cat-token('color.ui.background.tooltip');\n  border-radius: cat-border-radius('m');\n  color: cat-token('color.ui.font.tooltip');\n  transition:\n    opacity cat-token('time.transition.m') linear,\n    visibility cat-token('time.transition.m') linear;\n  visibility: hidden;\n  opacity: 0;\n  box-shadow: $-box-shadow;\n  z-index: cat-z-index('tooltip');\n  max-width: min(calc(100vw - 2 * $-shift-padding), $-max-width);\n\n  &-hidden {\n    @include cat-visually-hidden;\n  }\n\n  &-show {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  p {\n    margin: 0;\n  }\n}\n\n// ----- round\n\n.tooltip-round {\n  border-radius: 10rem;\n}\n\n// ----- size\n\n.tooltip-s {\n  padding: 0.375rem 0.5rem;\n\n  &.tooltip-round {\n    padding: 0.375rem 0.75rem;\n  }\n}\n\n.tooltip-m {\n  padding: 0.75rem;\n\n  &.tooltip-round {\n    padding: 0.75rem 1rem;\n  }\n}\n\n.tooltip-l {\n  padding: 1rem;\n\n  &.tooltip-round {\n    padding: 1rem 1.5rem;\n  }\n}\n","import { autoUpdate, computePosition, flip, offset, Placement, shift } from '@floating-ui/dom';\nimport { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport isTouchScreen from '../../utils/is-touch-screen';\n\nlet nextUniqueId = 0;\n\n@Component({\n  tag: 'cat-tooltip',\n  styleUrl: 'cat-tooltip.scss',\n  shadow: true\n})\nexport class CatTooltip {\n  private static readonly OFFSET = 4;\n  private static readonly SHIFT_PADDING = 4;\n  private readonly id = `cat-tooltip-${nextUniqueId++}`;\n  private tooltip?: HTMLElement;\n  private trigger?: Element;\n  private showTimeout?: number;\n  private hideTimeout?: number;\n  private touchTimeout?: number;\n  private inactive = false;\n  private cleanupFloatingUi?: () => void;\n\n  private readonly boundShowListener: () => void;\n  private readonly boundHideListener: () => void;\n  private readonly boundWindowTouchStartListener: () => void;\n  private readonly boundTouchStartListener: (event: Event) => void;\n  private readonly boundTouchEndListener: () => void;\n\n  constructor() {\n    this.boundShowListener = this.showListener.bind(this);\n    this.boundHideListener = this.hideListener.bind(this);\n    this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);\n    this.boundTouchStartListener = this.touchStartListener.bind(this);\n    this.boundTouchEndListener = this.touchEndListener.bind(this);\n  }\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() open = false;\n\n  /**\n   * The content of the tooltip.\n   */\n  @Prop() content = '';\n\n  /**\n   * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n   * and invisible. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The placement of the tooltip.\n   */\n  @Prop() placement: Placement = 'top';\n\n  /**\n   * Use round tooltip edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The size of the tooltip.\n   */\n  @Prop() size: 's' | 'm' | 'l' = 'm';\n\n  /**\n   * The delay time for showing tooltip in ms.\n   */\n  @Prop() showDelay = 250;\n\n  /**\n   * The delay time for hiding tooltip in ms.\n   */\n  @Prop() hideDelay = 0;\n\n  /**\n   * The duration of tap to show the tooltip.\n   */\n  @Prop() longTouchDuration = 1000;\n\n  @Listen('keydown')\n  handleKeyDown({ key }: KeyboardEvent) {\n    key === 'Escape' && this.hideTooltip();\n  }\n\n  componentDidLoad(): void {\n    const slot = this.hostElement.shadowRoot?.querySelector('slot');\n    this.trigger = slot?.assignedElements?.()?.[0];\n    if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {\n      this.trigger.setAttribute('aria-describedby', this.id);\n    }\n\n    if (isTouchScreen) {\n      window.addEventListener('touchstart', this.boundWindowTouchStartListener);\n      this.trigger?.addEventListener('touchstart', this.boundTouchStartListener);\n      this.trigger?.addEventListener('touchend', this.boundTouchEndListener);\n    } else {\n      this.trigger?.addEventListener('focusin', this.boundShowListener);\n      this.trigger?.addEventListener('focusout', this.boundHideListener);\n      this.trigger?.addEventListener('mouseenter', this.boundShowListener);\n      this.trigger?.addEventListener('mouseleave', this.boundHideListener);\n    }\n  }\n\n  componentWillRender(): void {\n    this.inactive = this.disabled || (!this.content && !this.hostElement.querySelector('[slot=\"content\"]'));\n  }\n\n  disconnectedCallback(): void {\n    if (isTouchScreen) {\n      window.removeEventListener('touchstart', this.boundWindowTouchStartListener);\n      this.trigger?.removeEventListener('touchstart', this.boundTouchStartListener);\n      this.trigger?.removeEventListener('touchend', this.boundTouchEndListener);\n    } else {\n      this.trigger?.removeEventListener('mouseenter', this.boundShowListener);\n      this.trigger?.removeEventListener('mouseleave', this.boundHideListener);\n      this.trigger?.removeEventListener('focusin', this.boundShowListener);\n      this.trigger?.removeEventListener('focusout', this.boundHideListener);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n        <div\n          ref={el => (this.tooltip = el)}\n          id={this.id}\n          role=\"tooltip\"\n          aria-hidden={!this.open}\n          aria-live={this.open ? 'polite' : 'off'}\n          class={{\n            tooltip: true,\n            'tooltip-hidden': this.inactive,\n            'tooltip-round': this.round,\n            [`tooltip-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          <slot name=\"content\">\n            {/* The paragraph is needed here to make aria-live work properly. */}\n            <p>{this.content}</p>\n          </slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private async update() {\n    if (this.trigger && this.tooltip) {\n      await computePosition(this.trigger, this.tooltip, {\n        strategy: 'fixed',\n        placement: this.placement,\n        middleware: [\n          offset(CatTooltip.OFFSET),\n          flip({ fallbackAxisSideDirection: 'start' }),\n          shift({ padding: CatTooltip.SHIFT_PADDING })\n        ]\n      }).then(({ x, y }) => {\n        if (this.tooltip) {\n          Object.assign(this.tooltip.style, {\n            left: `${Math.max(0, x)}px`,\n            top: `${y}px`\n          });\n        }\n      });\n    }\n  }\n\n  private showListener() {\n    window.clearTimeout(this.hideTimeout);\n    this.hideTimeout = undefined;\n    if (!this.showTimeout) {\n      this.showTimeout = window.setTimeout(() => {\n        this.showTimeout = undefined;\n        this.showTooltip();\n      }, this.showDelay);\n    }\n  }\n\n  private hideListener() {\n    window.clearTimeout(this.showTimeout);\n    this.showTimeout = undefined;\n    if (!this.hideTimeout) {\n      this.hideTimeout = window.setTimeout(() => {\n        this.hideTimeout = undefined;\n        this.hideTooltip();\n      }, this.hideDelay);\n    }\n  }\n\n  private touchStartListener(event: Event) {\n    event.stopPropagation();\n    if (!this.touchTimeout) {\n      this.touchTimeout = window.setTimeout(() => {\n        this.touchTimeout = undefined;\n        this.showTooltip();\n      }, this.longTouchDuration);\n    }\n  }\n\n  private touchEndListener() {\n    window.clearTimeout(this.touchTimeout);\n    this.touchTimeout = undefined;\n    this.hideTooltip();\n  }\n\n  private windowTouchStartListener() {\n    this.hideTooltip();\n  }\n\n  private showTooltip() {\n    if (this.trigger && this.tooltip) {\n      this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());\n    }\n    if (!this.inactive) {\n      this.open = true;\n      this.tooltip?.classList.add('tooltip-show');\n    }\n  }\n\n  private hideTooltip() {\n    this.open = false;\n    this.tooltip?.classList.remove('tooltip-show');\n    this.cleanupFloatingUi?.();\n    this.cleanupFloatingUi = undefined;\n  }\n}\n"],"version":3}