@swiftwc/ui 0.0.0-dev.99 → 1.0.0-canary.0

package/generated/components/date-picker.js

@@ -1,480 +0,0 @@
-var _a;
-import { I18n } from '../i18n';
-import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
-import { MutationObserverSet } from '../internal/class/mutation-observer-set';
-import { $, clamp, devFlags, kebabCase, onoff, set } from '../internal/utils';
-import { queryMorph } from '../morphdom';
-import { html } from '../tpl';
-const datePickerStyles = ['graphical', 'field', 'automatic'];
-/**
- * @summary A control that selects an absolute date.
- */
-export class DatePicker extends FormAssociatedBase {
-    static get observedAttributes() {
-        return [
-            /**
-             * The style of this element
-             * @type {"graphical"|"field"|"automatic"}
-             */
-            'date-picker-style',
-            /**
-             * @type {boolean}
-             */
-            'required',
-            'prompt',
-            'label',
-            'name',
-            'selection',
-            /**
-             * @type {boolean}
-             */
-            'disabled',
-            'minimum',
-            'maximum',
-        ];
-    }
-    static #templates = new Map();
-    // #lastRenderedStyle?: DatePickerStyle //string | null
-    #renderValidityMsgs = (entries) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ mutation`);
-        this.setValidity(this.validity, this.validationMessage);
-    };
-    #shadowRoot;
-    #customValidity = '';
-    #slots = new Map();
-    #validityObservers = new MutationObserverSet(this.#renderValidityMsgs);
-    // #validitiesSlot?: HTMLSlotElement
-    #inputs = [];
-    get #internals() {
-        return getInternals(this);
-    }
-    get template() {
-        if (!_a.#templates.has(this.datePickerStyle))
-            switch (this.datePickerStyle) {
-                default:
-                    _a.#templates.set(this.datePickerStyle, $(html `<label part="root date-picker-stack">
-                <div part="root date-picker-label-stack">
-                  <slot name="label"></slot>
-                </div>
-                <div part="root date-picker-input-stack">
-                  <input type="text" name="month" inputmode="numeric" pattern="d*" minlength="1" maxlength="2" min="1" max="12" part="root input date-picker-form-input" />
-                  <span part="root date-picker-separator"></span>
-                  <input type="text" name="day" inputmode="numeric" pattern="d*" minlength="1" maxlength="2" min="1" max="31" part="root input date-picker-form-input" />
-                  <span part="root date-picker-separator"></span>
-                  <input type="text" name="year" inputmode="numeric" pattern="d*" minlength="4" maxlength="4" min="0" max="9999" part="root input date-picker-form-input" />
-                </div>
-                <slot name="validity-options" hidden></slot>
-              </label>`));
-                    break;
-            }
-        return _a.#templates.get(this.datePickerStyle);
-    }
-    constructor() {
-        super();
-        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        switch (name) {
-            case 'selection':
-                // nothing happens// const [y = '', m = '', d = ''] = (newValue ?? '').split(/\D+/)
-                // this.#selectedDate = { year: y, month: m, day: d }
-                break;
-            case 'required':
-                for (const input of this.#inputs)
-                    input.setAttribute(name, newValue ?? ''); // else this.#input?.removeAttribute(name)
-                this.#sendValueToForm();
-                break;
-            case 'name':
-            case 'minimum':
-            case 'maximum':
-                this.#sendValueToForm(false);
-                break;
-            case 'prompt':
-                const [py = '', pm = '', pd = ''] = (newValue ?? '').split(/\D+/), map = { year: py, month: pm, day: pd };
-                for (const input of this.#inputs)
-                    input.setAttribute('placeholder', map[input.name] ?? '');
-                break;
-            case 'label':
-                queryMorph('[slot=label]', html `<label-view slot="label" foreground="secondary">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this);
-                // this.#sendValueToForm()
-                break;
-            case 'disabled':
-                for (const input of this.#inputs)
-                    input.toggleAttribute('disabled', !newValue);
-                break;
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.#validityObservers.unobserveAll();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        CleanupRegistry.register(this, onoff('click', this.#handleClick, this).on());
-        this.#render();
-        CleanupRegistry.register(this, onoff('localechange', () => {
-            this.#render();
-        }, I18n.on).on());
-        // finally
-        if (!this.hasAttribute('selection'))
-            return;
-        const [y = '', m = '', d = ''] = (this.getAttribute('selection') ?? '').split(/\D+/);
-        this.#selectedDate = { year: y, month: m, day: d };
-        this.#sendValueToForm(false);
-    }
-    get datePickerStyle() {
-        return datePickerStyles.includes(this.getAttribute('date-picker-style') ?? '') ? this.getAttribute('date-picker-style') : 'automatic';
-    }
-    #render() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ #render (${this.datePickerStyle})`);
-        // if (this.#lastRenderedStyle === this.datePickerStyle) return // skip if already applied
-        // this.#lastRenderedStyle = this.datePickerStyle
-        // clear shadow DOM
-        this.#shadowRoot.replaceChildren(document.importNode(this.template, true));
-        CleanupRegistry.unregister(this, 'slots');
-        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
-            this.#slots?.set(slot.name, slot);
-        CleanupRegistry.register(this, () => {
-            this.#slots = new Map();
-        }, 'slots');
-        CleanupRegistry.unregister(this, 'validities');
-        CleanupRegistry.register(this, onoff('slotchange', this.#handleValiditiesSlotchange, this.#slots?.get('validity-options')).on(), 'validities');
-        switch (this.datePickerStyle) {
-            default:
-                const [yyyy = '', mm = '', dd = ''] = new Date().toISOString().split('T').shift()?.split('-') ?? [], map = { year: yyyy, month: mm, day: dd };
-                this.#inputs = [...this.#shadowRoot.querySelectorAll('input')]
-                    .sort((a, b) => I18n.dateOrder.indexOf(a.name) - I18n.dateOrder.indexOf(b.name))
-                    .map((input, i) => {
-                    input.style.order = `${i * 2}`;
-                    input.tabIndex = i + 1;
-                    input.setAttribute('placeholder', map[input.name]);
-                    return input;
-                });
-                for (const span of this.#shadowRoot.querySelectorAll('input~span')) {
-                    const prevOrder = Number(span.previousElementSibling?.style.getPropertyValue('order'));
-                    span.style.setProperty('order', `${prevOrder + 1}`);
-                    span.textContent = I18n.dateSeparator;
-                }
-                CleanupRegistry.unregister(this, 'inputs:*');
-                for (const input of this.#inputs) {
-                    CleanupRegistry.register(this, onoff([
-                        { types: 'focus', listener: this.#handleInputFocus },
-                        { types: 'blur', listener: this.#handleInputBlur },
-                        { types: 'input', listener: this.#handleInputInput },
-                        { types: 'beforeinput', listener: this.#handleInputBeforeinput },
-                        { types: 'paste', listener: this.#handleInputPaste },
-                        { types: 'keydown', listener: this.#handleInputKeydown },
-                    ], input).on(), `inputs:${input.name}`);
-                }
-                break;
-        }
-    }
-    #handleValiditiesSlotchange = ({ type, target: slot }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
-        if (!(slot instanceof HTMLSlotElement))
-            return;
-        const assigned = slot.assignedElements();
-        this.#validityObservers.syncObservations(assigned, ['value', 'label']);
-        // if (0 < assigned.length)
-        this.#renderValidityMsgs([]);
-    };
-    get #selectedDate() {
-        const map = Object.fromEntries(this.#inputs.map(({ name, value }) => [name, value]));
-        return {
-            year: map.year ?? '',
-            month: map.month ?? '',
-            day: map.day ?? '',
-        };
-    }
-    set #selectedDate(v) {
-        for (const input of this.#inputs) {
-            const nv = v[input.name] ?? '', pattern = /^(\d+)?$/;
-            let finalValue = pattern.test(nv) ? nv : '', parsedValue = parseInt(finalValue);
-            if (_a.#min(input) > parsedValue)
-                finalValue = '';
-            else if (_a.#max(input) < parsedValue)
-                finalValue = '';
-            input.value = finalValue;
-        }
-    }
-    #handleClick = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const { target } = evt;
-        if (!(target instanceof HTMLElement))
-            return;
-        const input = target.closest('input');
-        if (input)
-            return;
-        this.#shadowRoot.querySelector('input.focus')?.focus?.();
-        evt.stopImmediatePropagation();
-        evt.preventDefault();
-        evt.stopPropagation();
-    };
-    #sendValueToForm = (dispatchEvent = true) => {
-        // input.value has already been updated/synced !!
-        if (this.matches(':disabled'))
-            return this.setValidity({});
-        if (this.#inputs.some((el) => el.matches(':invalid'))) {
-            for (const input of this.#inputs) {
-                if (input.matches(':invalid'))
-                    this.setValidity(input.validity, input.validationMessage, input);
-            }
-        }
-        else if (null === this.valueAsDate) {
-            this.setValidity({ badInput: true }, 'invalid-date');
-        }
-        else {
-            const parts = ['year', 'month', 'day'], input = (name) => this.#inputs.find((el) => el.name === name);
-            const underflow = this.minimum && parts.find((p) => parseInt(this.minimum[p]) > parseInt(this.value[p])), overflow = this.maximum && parts.find((p) => parseInt(this.maximum[p]) < parseInt(this.value[p]));
-            if (underflow)
-                this.setValidity({ rangeUnderflow: true }, `${underflow}-underflow`, input(underflow));
-            else if (overflow)
-                this.setValidity({ rangeOverflow: true }, `${overflow}-overflow`, input(overflow));
-            else
-                this.setValidity({});
-        }
-        const selection = `${this.#selectedDate.year}-${this.#selectedDate.month}-${this.#selectedDate.day}`;
-        const entries = new FormData();
-        entries.append(this.name, selection);
-        this.#internals.setFormValue(entries);
-        if (dispatchEvent)
-            this.dispatchEvent(new CustomEvent('selection', { detail: { selection }, bubbles: true, composed: true }));
-    };
-    #handleInputPaste = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const { target: input } = evt;
-        if (!(input instanceof HTMLInputElement))
-            return;
-        evt.preventDefault();
-        const data = [...`${(evt.clipboardData?.getData('text') ?? '').trim()}`].reduce((acc, ch, i) => {
-            if (/\d/.test(ch))
-                return `${acc}${ch}`;
-            else
-                return acc; // skip everything else
-        }, ''); // number is now sanitized but contains edge cases like '+' and also global one separator that could be wither dot or decimal.
-        if (0 === data.length)
-            return this.shake(); //.then(this.reportValidity) // nothing to paste
-        const start = input.selectionStart ?? 0, end = input.selectionEnd ?? 0, before = input.value.slice(0, start), after = input.value.slice(end), newText = `${before}${data}${after}`;
-        if (-1 < input.maxLength && input.maxLength < newText.length)
-            return this.shake(); //.then(this.reportValidity) // exceeding maxlength
-        input.value = newText;
-        const newCaret = start + data.length;
-        input.setSelectionRange(newCaret, newCaret); // move caret after inserted char
-        this.#sendValueToForm();
-    };
-    #handleInputBeforeinput = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const { target: input } = evt;
-        if (!(input instanceof HTMLInputElement))
-            return;
-        if ('insertText' !== evt.inputType)
-            return;
-        const data = evt.data ?? '';
-        if (-1 < input.maxLength && 0 === data.length) {
-            evt.preventDefault();
-            return this.shake(); //.then(this.reportValidity)
-        } // nothing to add
-        const start = input.selectionStart ?? 0, end = input.selectionEnd ?? 0, before = input.value.slice(0, start), after = input.value.slice(end), newText = `${before}${data}${after}`;
-        if (0 === newText.length)
-            return;
-        switch (input.getAttribute('inputmode')) {
-            case 'numeric':
-                if (/^(\d+)?$/.test(newText))
-                    break; // allow only digits
-                evt.preventDefault();
-                return this.shake(); //.then(this.reportValidity)
-        }
-    };
-    #handleInputKeydown = ({ type, target, key }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
-        if (!(target instanceof HTMLInputElement))
-            return;
-        const input = target;
-        if (!input)
-            return;
-        const currentIndex = this.#inputs.indexOf(input);
-        let index = currentIndex;
-        if (key === 'ArrowRight' && input.value.length === input.selectionStart) {
-            if (-1 < currentIndex && currentIndex < this.#inputs.length - 1)
-                index++;
-        }
-        else if (key === 'ArrowLeft' && 0 === input.selectionStart) {
-            if (0 < currentIndex)
-                index -= 1;
-        }
-        this.#inputs[index]?.focus();
-    };
-    #handleInputFocus = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        for (const input of this.#inputs)
-            input.classList.toggle('focus', input === evt.target);
-    };
-    #handleInputBlur = ({ target, type }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
-        if (!(target instanceof HTMLInputElement))
-            return;
-        const input = target;
-        if (0 === input.value.length)
-            return;
-        const finalText = `${clamp(this.value[input.name] ?? '0', _a.#min(input), _a.#max(input))}`.padStart(parseInt(input.getAttribute('maxlength') ?? '0'), '0');
-        if (!set(input, 'value', finalText))
-            return;
-        // this.selection = this.selection
-        this.#sendValueToForm();
-    };
-    #handleInputInput = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        this.#sendValueToForm();
-    };
-    /**
-     * Form participation property
-     */
-    get name() {
-        return this.getAttribute('name') ?? this.getAttribute('label') ?? this.querySelector(':scope>[slot=label]')?.textContent ?? '';
-    }
-    get value() {
-        // text allows special edge cases, like '0' for day and generally might be invalid day/month/year.
-        // here we make sure it is date-like, to be used in date operations.
-        const map = Object.fromEntries(this.#inputs.map(({ name, value }) => [name, value]));
-        return {
-            year: (map.year ?? '').padStart(4, '0'),
-            month: (map.month ?? '').padStart(2, '0'),
-            day: (map.day ?? '').padStart(2, '0'),
-        };
-    }
-    /**
-     * Returns the value as a Date object.
-     * @type {Date|null}
-     */
-    get valueAsDate() {
-        try {
-            const d = new Date(`${this.value.year}-${this.value.month}-${this.value.day}`);
-            if (!(d instanceof Date) || isNaN(d.getTime()))
-                return null;
-            return d;
-        }
-        catch {
-            return null;
-        }
-    }
-    static #min(input) {
-        if (!input?.hasAttribute('min'))
-            return -Infinity;
-        const number = Number(input.getAttribute('min'));
-        if (Number.isNaN(number))
-            return -Infinity;
-        return number;
-    }
-    static #max(input) {
-        if (!input?.hasAttribute('max'))
-            return Infinity;
-        const number = Number(input.getAttribute('max'));
-        if (Number.isNaN(number))
-            return Infinity;
-        return number;
-    }
-    get minimum() {
-        if (!this.hasAttribute('minimum'))
-            return null;
-        try {
-            new Date(this.getAttribute('minimum') ?? '');
-            const [y = '', m = '', d = ''] = (this.getAttribute('minimum') ?? '').split(/\D+/);
-            return {
-                year: y.padStart(4, '0'),
-                month: m.padStart(2, '0'),
-                day: d.padStart(2, '0'),
-            };
-        }
-        catch {
-            return null;
-        }
-    }
-    get maximum() {
-        if (!this.hasAttribute('maximum'))
-            return null;
-        try {
-            new Date(this.getAttribute('maximum') ?? '');
-            const [y = '', m = '', d = ''] = (this.getAttribute('maximum') ?? '').split(/\D+/);
-            return {
-                year: y.padStart(4, '0'),
-                month: m.padStart(2, '0'),
-                day: d.padStart(2, '0'),
-            };
-        }
-        catch {
-            return null;
-        }
-    }
-    setValidity = (flags, message, anchor) => {
-        // let msg
-        // if (message)
-        for (const k in flags) {
-            const key = k; // ✅ type-safe cast
-            if (true !== flags[key])
-                continue;
-            for (const el of this.#slots?.get('validity-options')?.assignedElements({ flatten: true }) ?? []) {
-                if (!el.matches('option'))
-                    continue;
-                const { label, value } = el;
-                if (`${kebabCase(key)}` === value) {
-                    message = label;
-                    break;
-                }
-                else if (`${kebabCase(key)}:${message}` === value) {
-                    message = label;
-                    break;
-                }
-            }
-        }
-        if (!message)
-            for (const k in flags) {
-                const key = k; // ✅ type-safe cast
-                if (true !== flags[key])
-                    continue;
-                message = kebabCase(key);
-                break;
-            }
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ validity-change`);
-        return this.#internals.setValidity(flags, this.#customValidity || message, anchor ?? this.#inputs.at(0));
-    };
-    setCustomValidity = (message) => {
-        this.#customValidity = message;
-        if (this.#customValidity)
-            this.#internals.setValidity({ ...this.#internals.validity, customError: true }, message);
-        else
-            this.#sendValueToForm(false);
-    };
-    formStateRestoreCallback(state, reason) {
-        //
-    }
-    formAssociatedCallback(form) {
-        this.#sendValueToForm(false);
-    }
-    formDisabledCallback(disabled) {
-        for (const input of this.#inputs)
-            input.toggleAttribute('disabled', !disabled);
-    }
-    formResetCallback() {
-        this.#selectedDate = {
-            year: '',
-            month: '',
-            day: '',
-        };
-        this.#sendValueToForm(false);
-    }
-}
-_a = DatePicker;

package/generated/components/disclosure-group.d.ts

@@ -1,17 +0,0 @@
-import { DetailsBase } from '../namespace-browser/base';
-/**
- * @summary A view that shows or hides another view when the user opens or closes it.
- *
- * @example <details is="disclosure-group"><summary><label-view title="Items"></label-view></summary><label-view title="Item 1"></label-view><label-view title="Item 2"></label-view><details is="disclosure-group"><summary><label-view title="Sub-items"></label-view></summary><label-view title="Sub-item 1"></label-view></details></details>
- *
- * @fires is-expanded
- * @fires is-collapsed
- */
-export declare class DisclosureGroup extends DetailsBase {
-    #private;
-    static get observedAttributes(): string[];
-    constructor();
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    static polyfillDisconnectedCallback(el: DisclosureGroup): void;
-    static polyfillConnectedCallback(el: DisclosureGroup): void;
-}

package/generated/components/disclosure-group.js

@@ -1,66 +0,0 @@
-import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { cssTime, devFlags, onoff, timeout } from '../internal/utils';
-import { DetailsBase } from '../namespace-browser/base';
-const toggleTimers = new WeakMap();
-/**
- * @summary A view that shows or hides another view when the user opens or closes it.
- *
- * @example <details is="disclosure-group"><summary><label-view title="Items"></label-view></summary><label-view title="Item 1"></label-view><label-view title="Item 2"></label-view><details is="disclosure-group"><summary><label-view title="Sub-items"></label-view></summary><label-view title="Sub-item 1"></label-view></details></details>
- *
- * @fires is-expanded
- * @fires is-collapsed
- */
-export class DisclosureGroup extends DetailsBase {
-    static get observedAttributes() {
-        return [
-            /**
-             * The status of this element
-             * @type {boolean}
-             */
-            'open',
-        ];
-    }
-    constructor() {
-        super();
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${DisclosureGroup.name} ⚡️ attr-change [${name}]`);
-        // if (CSS.supports('interpolate-size', 'allow-keywords')) return
-    }
-    static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${DisclosureGroup.name} ⚡️ disconnect`);
-        CleanupRegistry.unregister(el);
-    }
-    static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${DisclosureGroup.name} ⚡️ connect`);
-        const newValue = el.open ? 'open' : 'closed';
-        if (newValue !== el.dataset.state)
-            el.dataset.state = newValue;
-        CleanupRegistry.register(el, onoff('toggle', DisclosureGroup.#handleToggle, el).on());
-        CleanupRegistry.register(el, () => {
-            toggleTimers.get(el)?.cancel();
-            toggleTimers.delete(el);
-        });
-    }
-    static #handleToggle = async ({ type, currentTarget: details }) => {
-        if (devFlags.debug)
-            console.debug(`${DisclosureGroup.name} ⚡️ ${type}`);
-        if (!(details instanceof HTMLDetailsElement))
-            return;
-        const newValue = details.open ? 'opening' : 'closing';
-        if (newValue !== details.dataset.state)
-            details.dataset.state = newValue;
-        if (!toggleTimers.has(details))
-            toggleTimers.set(details, timeout()); //if (!toggleTimeouts.has(details)) toggleTimeouts.set(details, null)
-        // Cancel previous timeout for this instance
-        //if (toggleTimeouts.has(details) && toggleTimeouts.get(details)) self.clearTimeout(toggleTimeouts.get(details))
-        // Schedule a new hook
-        toggleTimers.get(details).next(() => {
-            details.dataset.state = details.open ? 'open' : 'closed';
-            details?.dispatchEvent(new CustomEvent(`is-${details.open ? 'expanded' : 'collapsed'}`, { bubbles: true, composed: true }));
-        }, cssTime(`${details.computedStyleMap().get('--disclosure-group-animation-duration')}`));
-    };
-}

package/generated/components/fine-tooltip.d.ts

@@ -1,15 +0,0 @@
-/**
- * @summary A tooltip that shows an unobtrusive helpful message on pointer:fine screens. Use it by adding a `help` attribute to any element.
- */
-export declare class FineTooltip extends HTMLElement {
-    #private;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    hidePopover(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'fine-tooltip': FineTooltip;
-    }
-}