@swiftwc/ui 0.0.0-dev.2 → 0.0.0-dev.21

package/generated/components/borderless-button.d.ts

@@ -0,0 +1,9 @@
+import { ButtonBase } from '../namespace-browser/base';
+export declare class BorderlessButton extends ButtonBase {
+    #private;
+    static get observedAttributes(): string[];
+    constructor();
+    static polyfillDisconnectedCallback(el: BorderlessButton): void;
+    static polyfillConnectedCallback(el: BorderlessButton): void;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+}

package/generated/components/borderless-button.js

@@ -0,0 +1,34 @@
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { buttonRole, onoff } from '../internal/utils';
+import { ButtonBase } from '../namespace-browser/base';
+export class BorderlessButton extends ButtonBase {
+    static get observedAttributes() {
+        return ['role'];
+    }
+    constructor() {
+        super();
+    }
+    static polyfillDisconnectedCallback(el) {
+        console.debug(`${BorderlessButton.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(el);
+    }
+    static polyfillConnectedCallback(el) {
+        console.debug(`${BorderlessButton.name} ⚡️ connect`);
+        el.tabIndex = 0;
+        CleanupRegistry.register(el, onoff('click', BorderlessButton.#handleClick, el).on());
+    }
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        console.debug(`${BorderlessButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        const node = target instanceof HTMLButtonElement && target;
+        if (!node)
+            return;
+        switch (attributeName) {
+            case 'role':
+                buttonRole(target, attributeName);
+                break;
+        }
+    }
+    static #handleClick = async (evt) => {
+        // alert(99)
+    };
+}

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

@@ -0,0 +1,9 @@
+import { DialogBase } from '../namespace-browser/base';
+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

@@ -0,0 +1,108 @@
+import { confirmationDialog } from '../buses';
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { isInside, onoff, touchGlass } from '../internal/utils';
+import { DialogBase } from '../namespace-browser/base';
+export class ConfirmationDialog extends DialogBase {
+    static get observedAttributes() {
+        return ['anchor'];
+    }
+    constructor() {
+        super();
+    }
+    static polyfillDisconnectedCallback(el) {
+        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) {
+        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, (evt) => {
+            const target = evt.target instanceof HTMLElement && evt.target;
+            if (!target)
+                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());
+        console.debug(`${ConfirmationDialog.name} ⚡️ will-open`);
+        el.removeAttribute('closing');
+        el.scrollTop = 0;
+        el.returnValue = '';
+        el.autofocus = true;
+        el.showModal();
+    }
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        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) => {
+        console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
+        const dialog = evt.currentTarget instanceof HTMLDialogElement && evt.currentTarget;
+        if (!dialog)
+            return;
+        const target = evt.target instanceof HTMLElement && evt.target;
+        if (!target)
+            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) => {
+        console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
+        if (!evt.cancelable)
+            return;
+        const target = evt.target instanceof HTMLDialogElement && evt.target;
+        if (!target)
+            return;
+        evt.preventDefault();
+        target.inert = true;
+        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 = (evt) => {
+        console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
+        const target = evt.target instanceof HTMLDialogElement && evt.target;
+        if (!target)
+            return;
+        target.remove();
+    };
+}

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

@@ -0,0 +1,24 @@
+/**
+ * @summary A message with a title and extra information that you show when part of your app can’t be used.
+ *
+ * @example <content-unavailable-view search></content-unavailable-view>
+ *
+ * @example <content-unavailable-view search="foo"></content-unavailable-view>
+ *
+ * @example <content-unavailable-view padding><label-view title="No Mail"><i class="ph ph-tray" slot="image" 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-view>
+ *
+ * @example <content-unavailable-view padding><label-view title="No Mail"><svg slot="image" 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-view>
+ *
+ * @slot description
+ * @slot actions
+ *
+ */
+export declare class ContentUnavailableView extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    static get template(): DocumentFragment;
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}

package/generated/components/content-unavailable-view.js

@@ -0,0 +1,78 @@
+import { I18n } from '../i18n';
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { $, onoff } from '../internal/utils';
+/**
+ * @summary A message with a title and extra information that you show when part of your app can’t be used.
+ *
+ * @example <content-unavailable-view search></content-unavailable-view>
+ *
+ * @example <content-unavailable-view search="foo"></content-unavailable-view>
+ *
+ * @example <content-unavailable-view padding><label-view title="No Mail"><i class="ph ph-tray" slot="image" 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-view>
+ *
+ * @example <content-unavailable-view padding><label-view title="No Mail"><svg slot="image" 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-view>
+ *
+ * @slot description
+ * @slot actions
+ *
+ */
+export class ContentUnavailableView extends HTMLElement {
+    static get observedAttributes() {
+        return ['search'];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(String.raw `
+      <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,
+        };
+    }
+    disconnectedCallback() {
+        console.debug(`${ContentUnavailableView.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        console.debug(`${ContentUnavailableView.name} ⚡️ connect`);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        console.debug(`${ContentUnavailableView.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;
+        }
+    }
+    #renderSearch = (search) => {
+        const titleLabel = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(`<label-view><i class="ph ph-magnifying-glass" slot="image" foreground="secondary"></i></label-view>`, '>1')), descText = this.querySelector(':scope>[slot=description]') ?? this.appendChild($(`<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

@@ -0,0 +1,46 @@
+import { FormAssociatedBase } from '../internal/class/form-associated-base';
+declare const datePickerStyles: readonly ["graphical", "field", "automatic"];
+export type DatePickerStyle = (typeof datePickerStyles)[number];
+export declare class DatePicker extends FormAssociatedBase {
+    #private;
+    static get observedAttributes(): string[];
+    get template(): DocumentFragment;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get datePickerStyle(): DatePickerStyle;
+    get selection(): {
+        year: string;
+        month: string;
+        day: string;
+    };
+    set selection(v: {
+        year: string;
+        month: string;
+        day: string;
+    });
+    get name(): string;
+    get value(): {
+        year: string;
+        month: string;
+        day: string;
+    };
+    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;
+    formAssociatedCallback: (form: HTMLFormElement) => void;
+    formDisabledCallback: (disabled: boolean) => void;
+    formResetCallback: () => void;
+}
+export {};