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

package/generated/components/color-scheme.js

@@ -1,54 +0,0 @@
-import { devFlags } from '../internal/utils';
-export class ColorScheme extends HTMLElement {
-    static get observedAttributes() {
-        return ['dark'];
-    }
-    constructor() {
-        super();
-    }
-    connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ColorScheme.name} ⚡️ connect`);
-        this.hidden = true;
-        this.inert = true;
-    }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ColorScheme.name} ⚡️ disconnect`);
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${ColorScheme.name} ⚡️ attr-change [${name}]`);
-        // self.CSS.registerProperty({ name: '--canvas', syntax: '<color>', inherits: false, initialValue: 'oklch(100% 0 0deg)' })
-        if (newValue)
-            self.CSS.registerProperty({ name: '--canvas', syntax: '<color>', inherits: false, initialValue: 'oklch(0% 0 0deg)' });
-        // @property --canvas {
-        //   syntax: "<color>";
-        //   initial-value: oklch(100% 0 0deg);
-        //   inherits: false;
-        // }
-        // @media (prefers-color-scheme: dark) {
-        //   @property --canvas {
-        //     syntax: "<color>";
-        //     initial-value: oklch(0% 0 0deg);
-        //     inherits: false;
-        //   }
-        // }
-        // @property --canvastext {
-        //   syntax: "<color>";
-        //   initial-value: oklch(0% 0 0deg);
-        //   inherits: false;
-        // }
-        // @media (prefers-color-scheme: dark) {
-        //   @property --canvastext {
-        //     syntax: "<color>";
-        //     initial-value: oklch(100% 0 0deg);
-        //     inherits: false;
-        //   }
-        // }
-        // if (CSS.supports('interpolate-size', 'allow-keywords')) {
-        // self.CSS.registerProperty({ name: '--background', syntax: '<color>', inherits: false, initialValue: 'oklch(100% 0 0deg)' })
-        if (null !== newValue)
-            self.CSS.registerProperty({ name: '--background', syntax: '<color>', inherits: false, initialValue: 'oklch(0% 0 0deg)' });
-    }
-}

package/generated/components/confirmation-dialog.d.ts

@@ -1,12 +0,0 @@
-import { DialogBase } from '../namespace-browser/base';
-/**
- * @summary A dialog that asks the user to confirm an action. Use it from the client module like `await confirmationDialog(trigger, 'Permanently erase the items in the Trash?')`.
- */
-export declare class ConfirmationDialog extends DialogBase {
-    #private;
-    static get observedAttributes(): string[];
-    constructor();
-    static polyfillDisconnectedCallback(el: ConfirmationDialog): void;
-    static polyfillConnectedCallback(el: ConfirmationDialog): void;
-    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
-}

package/generated/components/confirmation-dialog.js

@@ -1,116 +0,0 @@
-import { confirmationDialog } from '../buses';
-import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, isInside, onoff, touchGlass } from '../internal/utils';
-import { DialogBase } from '../namespace-browser/base';
-/**
- * @summary A dialog that asks the user to confirm an action. Use it from the client module like `await confirmationDialog(trigger, 'Permanently erase the items in the Trash?')`.
- */
-export class ConfirmationDialog extends DialogBase {
-    static get observedAttributes() {
-        return ['anchor'];
-    }
-    constructor() {
-        super();
-    }
-    static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${ConfirmationDialog.name} ⚡️ disconnect`);
-        const positionAnchor = el.style.getPropertyValue('position-anchor');
-        document.querySelector(`[style*="${positionAnchor}"]`)?.style.removeProperty('anchor-name'); //$.prop('anchor-name', null, document.querySelector<HTMLElement>(`[style*="${positionAnchor}"]`))
-        el.style.removeProperty('position-anchor'); //$.prop('position-anchor', null, el)
-        CleanupRegistry.unregister(el);
-        confirmationDialog.dispatchEvent(new CustomEvent('confirmation:return', {
-            detail: { returnValue: el.returnValue, positionAnchor },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${ConfirmationDialog.name} ⚡️ connect`);
-        CleanupRegistry.register(el, onoff([
-            { types: 'click', listener: this.#handleDialogClick },
-            { types: 'close', listener: this.#handleDialogClose },
-            { types: 'cancel', listener: this.#handleDialogCancel },
-        ], el).on());
-        CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, ({ target }) => {
-            if (!(target instanceof HTMLElement))
-                return true;
-            if (target.matches('[is=confirmation-dialog]'))
-                return false;
-            // if (!(event.target as HTMLElement).closest('menu-view[open]')) return false
-            return true;
-        }), el).on());
-        if (devFlags.debug)
-            console.debug(`${ConfirmationDialog.name} ⚡️ will-open`);
-        el.removeAttribute('closing');
-        el.scrollTop = 0;
-        el.returnValue = '';
-        el.autofocus = true;
-        el.showModal();
-    }
-    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        if (devFlags.debug)
-            console.debug(`${ConfirmationDialog.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
-        // const newValue = (target as HTMLElement).getAttribute(attributeName ?? '')
-        switch (attributeName) {
-            case 'label':
-                // let label = this.querySelector(':scope>[slot=label]')
-                // if (newValue) {
-                //   label ??= this.appendChild($(`<label-view slot="label"></label-view>`))
-                //   label.setAttribute('title', newValue)
-                // } else label?.remove()
-                break;
-        }
-    }
-    static #handleDialogClick = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
-        const { target, currentTarget: dialog } = evt;
-        if (!(dialog instanceof HTMLDialogElement))
-            return;
-        if (!(target instanceof HTMLElement))
-            return;
-        if (target.matches('dialog') && !isInside(evt.clientX, evt.clientY, dialog.getBoundingClientRect()))
-            return dialog.requestClose(); // click outside
-        const button = target.closest('button');
-        if (!button)
-            return;
-        button.scrollIntoView({
-            behavior: self.matchMedia('(prefers-reduced-motion: no-preference)').matches ? 'smooth' : 'instant',
-            block: 'nearest',
-            inline: 'nearest',
-        });
-        dialog.returnValue = button.value;
-        dialog.requestClose(button.value);
-        evt.stopPropagation();
-        evt.stopImmediatePropagation();
-    };
-    static #handleDialogCancel = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
-        if (!evt.cancelable)
-            return;
-        const { target } = evt;
-        if (!(target instanceof HTMLDialogElement))
-            return;
-        evt.preventDefault();
-        target.inert = true;
-        if (devFlags.debug)
-            console.debug(`${ConfirmationDialog.name} ⚡️ will-close`);
-        target.setAttribute('closing', '');
-        Promise.allSettled(target.getAnimations().map(({ finished }) => finished)).then(() => {
-            if (!target.hasAttribute('closing'))
-                return;
-            target?.close(target?.returnValue);
-            target.removeAttribute('closing');
-        });
-    };
-    static #handleDialogClose = ({ type, target }) => {
-        if (devFlags.debug)
-            console.debug(`${ConfirmationDialog.name} ⚡️ ${type}`);
-        if (!(target instanceof HTMLDialogElement))
-            return;
-        target.remove();
-    };
-}

package/generated/components/content-unavailable.d.ts

@@ -1,30 +0,0 @@
-/**
- * @summary A message with a title and extra information that you show when part of your app can’t be used.
- *
- * @example <content-unavailable search></content-unavailable>
- *
- * @example <content-unavailable search="foo"></content-unavailable>
- *
- * @example <content-unavailable padding><label-view title="No Mail"><i class="ph ph-tray" slot="icon" foreground="secondary"></i></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable>
- *
- * @example <content-unavailable padding><label-view title="No Mail"><svg slot="icon" foreground="secondary" ...>...</svg></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable>
- *
- * @slot — The default slot.
- * @slot description
- * @slot actions
- *
- */
-export declare class ContentUnavailable extends HTMLElement {
-    #private;
-    static get observedAttributes(): string[];
-    static get template(): DocumentFragment;
-    constructor();
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    disconnectedCallback(): void;
-    connectedCallback(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'content-unavailable': ContentUnavailable;
-    }
-}

package/generated/components/content-unavailable.js

@@ -1,82 +0,0 @@
-import { I18n } from '../i18n';
-import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, devFlags, onoff } from '../internal/utils';
-import { html } from '../tpl';
-/**
- * @summary A message with a title and extra information that you show when part of your app can’t be used.
- *
- * @example <content-unavailable search></content-unavailable>
- *
- * @example <content-unavailable search="foo"></content-unavailable>
- *
- * @example <content-unavailable padding><label-view title="No Mail"><i class="ph ph-tray" slot="icon" foreground="secondary"></i></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable>
- *
- * @example <content-unavailable padding><label-view title="No Mail"><svg slot="icon" foreground="secondary" ...>...</svg></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable>
- *
- * @slot — The default slot.
- * @slot description
- * @slot actions
- *
- */
-export class ContentUnavailable extends HTMLElement {
-    static get observedAttributes() {
-        return ['search'];
-    }
-    static #template;
-    static get template() {
-        return (this.#template ??= $(html `<div part="root content-unavailable-title-stack">
-          <slot></slot>
-        </div>
-        <div part="root content-unavailable-description-stack">
-          <slot name="description"></slot>
-        </div>
-        <div part="root content-unavailable-actions-stack">
-          <slot name="actions"></slot>
-        </div>`));
-    }
-    #shadowRoot;
-    #slots;
-    constructor() {
-        super();
-        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
-        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        this.#slots = {
-            '': this.#shadowRoot.querySelector('slot:not([name])') ?? undefined,
-            description: this.#shadowRoot.querySelector('slot[name="description"]') ?? undefined,
-            actions: this.#shadowRoot.querySelector('slot[name="actions"]') ?? undefined,
-        };
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${ContentUnavailable.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        switch (name) {
-            case 'search':
-                if (oldValue === newValue)
-                    break;
-                this.#renderSearch(newValue);
-                CleanupRegistry.unregister(this, 'i18n');
-                CleanupRegistry.register(this, onoff('localechange', () => {
-                    this.#renderSearch(this.getAttribute('search'));
-                }, I18n.on).on(), 'i18n');
-                break;
-        }
-    }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ContentUnavailable.name} ⚡️ disconnect`);
-    }
-    connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ContentUnavailable.name} ⚡️ connect`);
-    }
-    #renderSearch = (search) => {
-        const titleLabel = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(html `<label-view><i class="ph ph-magnifying-glass" slot="icon" foreground="secondary"></i></label-view>`, '>1')), descText = this.querySelector(':scope>[slot=description]') ?? this.appendChild($(html `<label-view foreground="secondary" slot="description"></label-view>`, '>1'));
-        if (search) {
-            const interpolate = (text, vars) => text.replaceAll(/\{(\w+)\}/g, (_, key) => vars[key] ?? '');
-            titleLabel.setAttribute('title', interpolate(I18n.t('SearchUnavailableContent').Label, { search }));
-        }
-        else
-            titleLabel?.setAttribute('title', I18n.t('SearchUnavailableContent').NoLabel);
-        descText.setAttribute('title', I18n.t('SearchUnavailableContent').Description);
-    };
-}

package/generated/components/date-picker.d.ts

@@ -1,52 +0,0 @@
-import { FormAssociatedBase } from '../internal/class/form-associated-base';
-declare const datePickerStyles: readonly ["graphical", "field", "automatic"];
-export type DatePickerStyle = (typeof datePickerStyles)[number];
-/**
- * @summary A control that selects an absolute date.
- */
-export declare class DatePicker extends FormAssociatedBase {
-    #private;
-    static get observedAttributes(): string[];
-    get template(): DocumentFragment;
-    constructor();
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    disconnectedCallback(): void;
-    connectedCallback(): void;
-    get datePickerStyle(): DatePickerStyle;
-    /**
-     * Form participation property
-     */
-    get name(): string;
-    get value(): {
-        year: string;
-        month: string;
-        day: string;
-    };
-    /**
-     * Returns the value as a Date object.
-     * @type {Date|null}
-     */
-    get valueAsDate(): Date | null;
-    get minimum(): {
-        year: string;
-        month: string;
-        day: string;
-    } | null;
-    get maximum(): {
-        year: string;
-        month: string;
-        day: 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 {
-        'date-picker': DatePicker;
-    }
-}
-export {};