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

package/generated/components/text-field.js

@@ -1,526 +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 { $, compareBigDecimals, devFlags, kebabCase, onoff, set } from '../internal/utils';
-import { queryMorph } from '../morphdom';
-import { html } from '../tpl';
-const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
-/**
- * @summary A control that displays an editable text area.
- *
- * @fires {{ detail: { text: string } }} commit — Triggered when user interacts with the input area
- *
- * @slot label
- * @slot {HTMLOptionElement[]} validity-options
- */
-export class TextField extends FormAssociatedBase {
-    static get observedAttributes() {
-        return [
-            'prompt',
-            'minimum',
-            'maximum',
-            'min-length',
-            'max-length',
-            'label',
-            'name',
-            'text',
-            'text-input-autocapitalization',
-            /**
-             * @type {boolean}
-             */
-            'disable-autocorrection',
-            /**
-             * @type {decimal-pad|number-pad|default}
-             */
-            'keyboard-type',
-            /**
-             * @type {boolean}
-             */
-            'required',
-            /**
-             * @type {boolean}
-             */
-            'disabled',
-        ];
-    }
-    static #template;
-    static get template() {
-        return (this.#template ??= $(html `<label part="root text-field-stack">
-        <div part="root text-field-label-stack">
-          <slot name="label"></slot>
-        </div>
-        <div part="root text-field-input-stack">
-          <input type="text" part="root input text-field-form-input" />
-        </div>
-        <slot name="validity-options" hidden></slot>
-      </label>`));
-    }
-    #renderValidityMsgs = (entries) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ mutation`);
-        this.setValidity(this.validity, this.validationMessage);
-    };
-    #shadowRoot;
-    // #internals: ElementInternals
-    #customValidity = '';
-    // #validitiesSlot?: HTMLSlotElement
-    #slots = new Map();
-    #validityObservers = new MutationObserverSet(this.#renderValidityMsgs);
-    #input;
-    get #internals() {
-        return getInternals(this);
-    }
-    constructor() {
-        super();
-        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
-        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
-            this.#slots?.set(slot.name, slot);
-        CleanupRegistry.register(this, () => {
-            this.#slots = new Map();
-        });
-        CleanupRegistry.unregister(this, 'validities');
-        CleanupRegistry.register(this, onoff('slotchange', this.#handleValiditiesSlotchange, this.#slots?.get('validity-options')).on(), 'validities');
-        this.#input = this.#shadowRoot.querySelector('input') ?? undefined;
-        CleanupRegistry.register(this, onoff([{ types: 'focusin', listener: this.#handleFocusin }], this).on());
-        CleanupRegistry.register(this, onoff([
-            { types: 'blur', listener: this.#handleInputBlur },
-            { types: 'input', listener: this.#handleInputInput },
-            { types: 'beforeinput', listener: this.#handleInputBeforeinput },
-            { types: 'paste', listener: this.#handleInputPaste },
-        ], this.#input).on());
-        CleanupRegistry.register(this, onoff('localechange', () => {
-            this.text = this.text;
-        }, I18n.on).on());
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        switch (name) {
-            case 'keyboard-type':
-                switch (newValue) {
-                    case 'decimal-pad':
-                        this.#input?.setAttribute('inputmode', 'decimal');
-                        break;
-                    case 'number-pad':
-                        this.#input?.setAttribute('inputmode', 'numeric');
-                        break;
-                    case 'default':
-                    default:
-                        this.#input?.removeAttribute('inputmode');
-                        break;
-                }
-                this.#sendValueToForm();
-                break;
-            case 'text-input-autocapitalization':
-                switch (newValue) {
-                    case 'never':
-                        this.#input?.setAttribute('autocapitalize', 'off');
-                        break;
-                    case 'characters':
-                        this.#input?.setAttribute('autocapitalize', newValue);
-                        break;
-                    case 'words':
-                        this.#input?.setAttribute('autocapitalize', newValue);
-                        break;
-                    default:
-                    case 'sentences':
-                        this.#input?.setAttribute('autocapitalize', 'on');
-                        break;
-                }
-                break;
-            case 'disable-autocorrection':
-                if ('' === newValue)
-                    for (const [k, v] of [
-                        ['autocomplete', 'off'],
-                        ['autocorrect', 'off'],
-                        ['spellcheck', 'false'],
-                    ])
-                        this.#input?.setAttribute(k, v);
-                else
-                    for (const k of ['autocomplete', 'autocorrect', 'spellcheck'])
-                        this.#input?.removeAttribute(k);
-                break;
-            case 'text':
-                // if (this.#input) this.#input.value = newValue ?? ''
-                // nothing happens //this.text = newValue ?? ''
-                break;
-            case 'required':
-                this.#input?.setAttribute(name, newValue ?? ''); // else this.#input?.removeAttribute(name)
-                this.#sendValueToForm();
-                break;
-            case 'name':
-            case 'minimum':
-            case 'maximum':
-                this.#sendValueToForm(false);
-                break;
-            case 'prompt':
-                this.#input?.setAttribute('placeholder', newValue ?? ''); // else this.#input?.removeAttribute(name)
-                break;
-            case 'min-length':
-                this.#input?.setAttribute('minlength', newValue ?? '');
-                this.#sendValueToForm();
-                break;
-            case 'max-length':
-                this.#input?.setAttribute('maxlength', newValue ?? '');
-                this.#sendValueToForm();
-                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 el of this.#shadowRoot.querySelectorAll('input'))
-                    el.toggleAttribute('disabled', !newValue);
-                break;
-        }
-        // render pattern
-        switch (this.keyboardType) {
-            case 'decimal-pad':
-                const allowedSignsRegex2 = String.raw `[+\-]?|[+\-]?(\d+([.,]\d*)?|[.,]\d*)`, // allow single '+' or '-', then allow only one ',' or '.' and finally only digits
-                digitsDecimalsOnlyRegex = String.raw `(\d+([.,]\d*)?|[.,]\d*)?`; // allow only one ',' or '.' and finally only digits
-                this.#input?.setAttribute('pattern', this.negativeNumbersAllowed ? allowedSignsRegex2 : digitsDecimalsOnlyRegex);
-                break;
-            case 'number-pad':
-                const allowedSignsRegex = String.raw `([+\-]|\d+|[+\-]\d+)?`, // allow single '+' or '-', then allow only digits
-                digitsOnlyRegex = String.raw `\d*`; // allow only digits
-                this.#input?.setAttribute('pattern', this.negativeNumbersAllowed ? allowedSignsRegex : digitsOnlyRegex);
-                break;
-            default:
-                this.#input?.removeAttribute('pattern');
-                break;
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.#validityObservers.unobserveAll();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // finally
-        if (!this.hasAttribute('text'))
-            return;
-        this.text = this.getAttribute('text') ?? ''; // this.#input.value = this.getAttribute('text') ?? ''
-        this.#sendValueToForm(false);
-    }
-    get keyboardType() {
-        return keyboardTypes.includes(this.getAttribute('keyboard-type') ?? '') ? this.getAttribute('keyboard-type') : 'default';
-    }
-    get text() {
-        return this.#input?.value ?? '';
-    }
-    set text(v) {
-        if (!this.#input)
-            return;
-        const nv = this.#patternTest(v) ? v : '';
-        set(this.#input, 'value', nv);
-        // this.text AND this.value have NOW been updated to new values
-        // if user is NOT interacting replace new-text/input.value with the formatted version of the new-text/input.value!
-        if (document.activeElement !== this && 0 < this.#input.value.length) {
-            const finalText = this.value.replace(/[.,]/g, I18n.decimalSeparator);
-            set(this.#input, 'value', finalText); // if (this.text !== finalText) this.#input.value = finalText
-        }
-    }
-    #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([]);
-    };
-    #handleFocusin = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        if (evt.target === this)
-            this.#input?.focus();
-    };
-    #sendValueToForm = (dispatchEvent = true) => {
-        // input.value has already been updated/synced !!
-        if (this.matches(':disabled'))
-            return this.setValidity({});
-        // if (this.hasAttribute('required')) {
-        if (this.#input?.matches(':invalid')) {
-            this.setValidity(this.#input?.validity, this.#input?.validationMessage);
-        }
-        else if (['number-pad', 'decimal-pad'].includes(this.keyboardType) && (this.hasAttribute('minimum') || this.hasAttribute('maximum'))) {
-            const underflow = compareBigDecimals(this.value, this.getAttribute('minimum') ?? '-Infinity'), overflow = compareBigDecimals(this.value, this.getAttribute('maximum') ?? 'Infinity');
-            if (0 > underflow)
-                this.setValidity({ rangeUnderflow: true });
-            else if (0 < overflow)
-                this.setValidity({ rangeOverflow: true });
-            else
-                this.setValidity({});
-        }
-        else {
-            this.setValidity({});
-        }
-        const entries = new FormData();
-        entries.append(this.name, this.text);
-        this.#internals.setFormValue(entries);
-        if (dispatchEvent)
-            this.dispatchEvent(new CustomEvent('commit', { detail: { text: this.text }, 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 = this.#identity(evt.clipboardData?.getData('text') ?? ''); // 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(); // input.dispatchEvent(new InputEvent('input', { bubbles: true })) // Manually trigger input event so listeners react
-    };
-    // NOTE: identity MUST always pass beforeinput checks
-    #identity = (str) => {
-        // 'ab-1.2.3.4x yz ' // "-1.234"
-        // '++12..34  ' // "+12.34"
-        // '-+5.6.7.8 ' // "-5.678"
-        // '  -+5.6,7.8  ' // "-5.678"
-        // 'foo123bar  ' // "123"
-        // '.12.3  ' // ".123"
-        // '    http://localhost:5173/input.html' // "5173."
-        // '    http://localhost:51,73/input.html' // "51,73"
-        // '    +- 0000.' // "+0000."
-        // '    +' // "+"
-        // '    +0000234' // "+0000234"
-        // '    +-1.2.3.4x yz ' // "+1.234"
-        let seenSign = false;
-        switch (this.keyboardType) {
-            case 'decimal-pad': // allow only ^+- and then only one instance of ., finally remove all non digit rest appearances
-                let seenDot = false;
-                return [...`${str.trim()}`].reduce((acc, ch, i) => {
-                    // +- signs are allowed
-                    if (this.negativeNumbersAllowed)
-                        if (!seenSign && (ch === '+' || ch === '-')) {
-                            seenSign = true;
-                            return `${acc}${ch}`;
-                        }
-                    if ((ch === '.' || ch === ',') && !seenDot) {
-                        seenDot = true;
-                        return `${acc}${ch}`;
-                    }
-                    if (/\d/.test(ch))
-                        return `${acc}${ch}`;
-                    return acc; // skip everything else
-                }, '');
-            case 'number-pad': // allow only ^+- finally remove all non digit rest appearances
-                return [...`${str.trim()}`].reduce((acc, ch, i) => {
-                    // +- signs are allowed
-                    if (this.negativeNumbersAllowed)
-                        if (!seenSign && (ch === '+' || ch === '-')) {
-                            seenSign = true;
-                            return `${acc}${ch}`;
-                        }
-                    if (/\d/.test(ch))
-                        return `${acc}${ch}`;
-                    return acc; // skip everything else
-                }, '');
-            default:
-                return `${str}`;
-        }
-    };
-    #patternTest = (str) => {
-        switch (this.keyboardType) {
-            case 'decimal-pad':
-                const allowedSignsRegex2 = /^[+-]?$|^[+-]?(\d+([.,]\d*)?|[.,]\d*)$/, // allow single '+' or '-', then allow only one ',' or '.' and finally only digits
-                digitsDecimalsOnlyRegex = /^(\d+([.,]\d*)?|[.,]\d*)?$/; // allow only one ',' or '.' and finally only digits
-                return (this.negativeNumbersAllowed ? allowedSignsRegex2 : digitsDecimalsOnlyRegex).test(str);
-            //   // isValidDecimal("");       // true
-            //   // isValidDecimal("+");      // true
-            //   // isValidDecimal("-");      // true
-            //   // isValidDecimal("123");    // true
-            //   // isValidDecimal("+123");   // true
-            //   // isValidDecimal("-456");   // true
-            //   // isValidDecimal("12.34");  // true
-            //   // isValidDecimal("-0,56");  // true
-            //   // isValidDecimal(".78");    // true
-            //   // isValidDecimal(",9");     // true
-            //   // isValidDecimal("12.3.4"); // false
-            //   // isValidDecimal("12,3,4"); // false
-            //   // isValidDecimal("12-3");   // false
-            //   // isValidDecimal("12a");    // false
-            case 'number-pad':
-                const allowedSignsRegex = /^([+-]|\d+|[+-]\d+)?$/, // allow single '+' or '-', then allow only digits
-                digitsOnlyRegex = /^(\d+)?$/; // allow only digits
-                return (this.negativeNumbersAllowed ? allowedSignsRegex : digitsOnlyRegex).test(str);
-            //   // isValidInteger("");      // true
-            //   // isValidInteger("+");     // true
-            //   // isValidInteger("-");     // true
-            //   // isValidInteger("123");   // true
-            //   // isValidInteger("+123");  // true
-            //   // isValidInteger("-456");  // true
-            //   // isValidInteger("12-3");  // false
-            //   // isValidInteger("++123"); // false
-            //   // isValidInteger("123a");  // false
-            default:
-                return true;
-        }
-    };
-    #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 = this.text.slice(0, start), after = this.text.slice(end), newText = `${before}${data}${after}`;
-        if (0 === newText.length)
-            return;
-        switch (input.getAttribute('inputmode')) {
-            case 'decimal':
-                // const allowedSignsRegex2 = /^[+-]?$|^[+-]?(\d+([.,]\d*)?|[.,]\d*)$/, // allow single '+' or '-', then allow only one ',' or '.' and finally only digits
-                //   digitsDecimalsOnlyRegex = /^(\d+([.,]\d*)?|[.,]\d*)?$/ // allow only one ',' or '.' and finally only digits
-                // if ((this.min < 0 ? allowedSignsRegex2 : digitsDecimalsOnlyRegex).test(newText)) break
-                if (this.#patternTest(newText))
-                    break;
-                evt.preventDefault();
-                return this.shake(); //.then(this.reportValidity)
-            case 'numeric':
-                // const allowedSignsRegex = /^([+-]|\d+|[+-]\d+)?$/, // allow single '+' or '-', then allow only digits
-                //   digitsOnlyRegex = /^(\d+)?$/ // allow only digits
-                // if ((this.min < 0 ? allowedSignsRegex : digitsOnlyRegex).test(newText)) break
-                if (this.#patternTest(newText))
-                    break;
-                evt.preventDefault();
-                return this.shake(); //.then(this.reportValidity)
-            // this.setValidity(prevValidity, prevValiditationMessage) // restore
-        }
-    };
-    #handleInputBlur = ({ type, target: input }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
-        if (!(input instanceof HTMLInputElement))
-            return;
-        if (0 === input.value.length)
-            return;
-        const finalText = this.value.replace(/[.,]/g, I18n.decimalSeparator);
-        if (!set(input, 'value', finalText))
-            return;
-        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 '-.' or '+' and generally might be invalid number. It might also be localized and not US based.
-        // here we make sure it is number-like, to be used in number operations.
-        switch (this.keyboardType) {
-            case 'decimal-pad':
-            case 'number-pad':
-                if ('string' !== typeof this.text)
-                    return '0';
-                const value = this.text.replace(/[.,]/g, '.');
-                // Capture optional leading sign
-                const sign = value.startsWith('-') ? '-' : '';
-                // Strip sign for processing
-                let s = value.replace(/^[+-]/, '');
-                // Split on dot (take only first two parts in case of multiple dots — though
-                // your input guarantees one, this is defensive)
-                const [intPart = '', fracPart = ''] = s.split('.'), hasDot = s.includes('.');
-                // Remove leading zeros from integer part, keep at least '0'
-                const cleanInt = intPart.replace(/^0+/, '') || '0';
-                // Remove trailing zeros from fractional part
-                const cleanFrac = fracPart.replace(/0+$/, '');
-                // Build result
-                const result = hasDot && cleanFrac.length > 0 ? `${sign}${cleanInt}.${cleanFrac}` : `${sign}${cleanInt}`;
-                return result.replace(/^-0(\.0+)?$/, '0');
-            default:
-                return this.text;
-        }
-    }
-    get valueAsNumber() {
-        switch (this.keyboardType) {
-            case 'decimal-pad':
-            case 'number-pad':
-                return Number(this.value);
-            default:
-                return '';
-        }
-    }
-    get negativeNumbersAllowed() {
-        const min = this.getAttribute('minimum') ?? '-Infinity', max = this.getAttribute('maximum') ?? 'Infinity';
-        return compareBigDecimals('0', min) >= 0 && compareBigDecimals('0', max) <= 0;
-    }
-    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.#input);
-    };
-    setCustomValidity = (message) => {
-        this.#customValidity = message;
-        if (this.#customValidity)
-            this.#internals.setValidity({ ...this.#internals.validity, customError: true }, message);
-        else
-            this.#sendValueToForm(false);
-    };
-    formStateRestoreCallback(state, reason) {
-        this.text = state;
-    }
-    formAssociatedCallback(form) {
-        this.#sendValueToForm(false);
-    }
-    formDisabledCallback(disabled) {
-        for (const el of this.#shadowRoot.querySelectorAll('input'))
-            el.toggleAttribute('disabled', !disabled);
-    }
-    formResetCallback() {
-        this.text = '';
-        this.#sendValueToForm(false);
-    }
-}
-_a = TextField;

package/generated/components/toggle-view.d.ts

@@ -1,41 +0,0 @@
-import { FormAssociatedBase } from '../internal/class/form-associated-base';
-declare const toggleStyles: readonly ["switch", "button"];
-export type ToggleStyle = (typeof toggleStyles)[number];
-/**
- * @summary A control that switches between on and off states.
- *
- * @fires toggle:change — User toggled the control
- *
- * @slot label
- * @slot {HTMLOptionElement[]} validity-options
- */
-export declare class ToggleView extends FormAssociatedBase {
-    #private;
-    static get observedAttributes(): string[];
-    static get template(): DocumentFragment;
-    constructor();
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    disconnectedCallback(): void;
-    connectedCallback(): void;
-    get toggleStyle(): ToggleStyle;
-    get isOn(): boolean;
-    set isOn(v: boolean);
-    /**
-     * Form participation property
-     */
-    get name(): string;
-    get value(): string | null;
-    set value(v: string | null);
-    setValidity: (flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement) => void;
-    setCustomValidity: (message: string) => void;
-    formStateRestoreCallback(state: string, reason: string): void;
-    formAssociatedCallback(form: HTMLFormElement): void;
-    formDisabledCallback(disabled: boolean): void;
-    formResetCallback(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'toggle-view': ToggleView;
-    }
-}
-export {};