@vollowx/seele 0.13.5 → 0.13.6

package/src/base/slider.d.ts

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright 2018-2023 Google, Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement, PropertyValues } from 'lit';
+declare const Base: Constructor<import("./mixins/form-associated.js").FormAssociatedInterface> & Constructor<import("./mixins/focus-delegated.js").FocusDelegatedInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+export declare class Slider extends Base {
+    min: number;
+    max: number;
+    value?: number;
+    valueStart?: number;
+    valueEnd?: number;
+    valueLabel: string;
+    valueLabelStart: string;
+    valueLabelEnd: string;
+    ariaLabelStart: string;
+    ariaValueTextStart: string;
+    ariaLabelEnd: string;
+    ariaValueTextEnd: string;
+    step: number;
+    ticks: boolean;
+    labeled: boolean;
+    range: boolean;
+    get nameStart(): string;
+    set nameStart(name: string);
+    get nameEnd(): string;
+    set nameEnd(name: string);
+    protected readonly inputStart: HTMLInputElement | null;
+    protected readonly inputEnd: HTMLInputElement | null;
+    protected readonly handleStart: HTMLDivElement | null;
+    protected readonly handleEnd: HTMLDivElement | null;
+    protected startOnTop: boolean;
+    protected handlesOverlapping: boolean;
+    protected renderValueStart?: number;
+    protected renderValueEnd?: number;
+    protected get renderAriaLabelStart(): string;
+    protected get renderAriaValueTextStart(): string;
+    protected get renderAriaLabelEnd(): string;
+    protected get renderAriaValueTextEnd(): string;
+    protected renderInput({ start, value, ariaLabel, ariaValueText, ariaMin, ariaMax, }: {
+        start: boolean;
+        value?: number;
+        ariaLabel: string;
+        ariaValueText: string;
+        ariaMin: number;
+        ariaMax: number;
+    }): import("lit-html").TemplateResult<1>;
+    private isRedispatchingEvent;
+    private action?;
+    ariaLabel: string | null;
+    ariaValueText: string | null;
+    constructor();
+    focus(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    protected handleFocus(event: Event): void;
+    protected handleKeydown(event: KeyboardEvent): void;
+    protected handleKeyup(event: KeyboardEvent): void;
+    protected handleDown(event: PointerEvent): void;
+    protected handleUp(event: PointerEvent): Promise<void>;
+    protected handleInput(event: InputEvent): void;
+    protected handleChange(event: Event): void;
+    private startAction;
+    private finishAction;
+    private updateOnTop;
+    private needsClamping;
+    private isActionFlipped;
+    private flipAction;
+    private clampAction;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | Array<[string, string]> | null): void;
+    protected updateFormValue(): void;
+}
+export {};

package/src/base/slider.js

@@ -1,9 +1,10 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 /**
  * @license
  * Copyright 2018-2023 Google, Inc.
  * SPDX-License-Identifier: Apache-2.0
- */ import { LitElement, html, nothing } from 'lit';
+ */
+import { __decorate } from "tslib";
+import { LitElement, html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { InternalsAttached, internals } from './mixins/internals-attached.js';
@@ -24,36 +25,60 @@ export class Slider extends Base {
         this.setAttribute('name-end', name);
     }
     get renderAriaLabelStart() {
-        return this.ariaLabelStart || this.ariaLabel && `${this.ariaLabel} start` || this.valueLabelStart || String(this.valueStart);
+        return (this.ariaLabelStart ||
+            (this.ariaLabel && `${this.ariaLabel} start`) ||
+            this.valueLabelStart ||
+            String(this.valueStart));
     }
     get renderAriaValueTextStart() {
-        return this.ariaValueTextStart || this.valueLabelStart || String(this.valueStart);
+        return (this.ariaValueTextStart || this.valueLabelStart || String(this.valueStart));
     }
     get renderAriaLabelEnd() {
         if (this.range) {
-            return this.ariaLabelEnd || this.ariaLabel && `${this.ariaLabel} end` || this.valueLabelEnd || String(this.valueEnd);
+            return (this.ariaLabelEnd ||
+                (this.ariaLabel && `${this.ariaLabel} end`) ||
+                this.valueLabelEnd ||
+                String(this.valueEnd));
         }
         return this.ariaLabel || this.valueLabel || String(this.value);
     }
     get renderAriaValueTextEnd() {
         if (this.range) {
-            return this.ariaValueTextEnd || this.valueLabelEnd || String(this.valueEnd);
+            return (this.ariaValueTextEnd || this.valueLabelEnd || String(this.valueEnd));
         }
         return this.ariaValueText || this.valueLabel || String(this.value);
     }
-    renderInput({ start, value, ariaLabel, ariaValueText, ariaMin, ariaMax }) {
+    renderInput({ start, value, ariaLabel, ariaValueText, ariaMin, ariaMax, }) {
         const name = start ? `start` : `end`;
-        return html`<input type="range" class="${classMap({
+        return html `<input type="range" class="${classMap({
             start,
-            end: !start
+            end: !start,
         })}" @focus="${this.handleFocus}" @pointerdown="${this.handleDown}" @pointerup="${this.handleUp}" @keydown="${this.handleKeydown}" @keyup="${this.handleKeyup}" @input="${this.handleInput}" @change="${this.handleChange}" id="${name}" .disabled="${this.disabled}" .min="${String(this.min)}" aria-valuemin="${ariaMin}" .max="${String(this.max)}" aria-valuemax="${ariaMax}" .step="${String(this.step)}" .value="${String(value)}" .tabIndex="${start ? 1 : 0}" aria-label="${ariaLabel || nothing}" aria-valuetext="${ariaValueText}">`;
     }
-    constructor(){
-        super(), this.min = 0, this.max = 100, this.valueLabel = '', this.valueLabelStart = '', this.valueLabelEnd = '', this.ariaLabelStart = '', this.ariaValueTextStart = '', this.ariaLabelEnd = '', this.ariaValueTextEnd = '', this.step = 1, this.ticks = false, this.labeled = false, this.range = false, this.startOnTop = false, this.handlesOverlapping = false, this.isRedispatchingEvent = false, // @TODO: Delegate ARIA attributes to inputs, automatically convert from
+    constructor() {
+        super();
+        this.min = 0;
+        this.max = 100;
+        this.valueLabel = '';
+        this.valueLabelStart = '';
+        this.valueLabelEnd = '';
+        this.ariaLabelStart = '';
+        this.ariaValueTextStart = '';
+        this.ariaLabelEnd = '';
+        this.ariaValueTextEnd = '';
+        this.step = 1;
+        this.ticks = false;
+        this.labeled = false;
+        this.range = false;
+        this.startOnTop = false;
+        this.handlesOverlapping = false;
+        this.isRedispatchingEvent = false;
+        // @TODO: Delegate ARIA attributes to inputs, automatically convert from
         // aria-* to data-aria-*.
-        this.ariaLabel = null, this.ariaValueText = null;
+        this.ariaLabel = null;
+        this.ariaValueText = null;
         // Activation click handling usually goes here if needed
-        this.addEventListener('click', (event)=>{
+        this.addEventListener('click', (event) => {
             if (!isActivationClick(event) || !this.inputEnd) {
                 return;
             }
@@ -65,9 +90,15 @@ export class Slider extends Base {
         this.inputEnd?.focus();
     }
     willUpdate(changed) {
-        this.renderValueStart = changed.has('valueStart') ? this.valueStart : this.inputStart?.valueAsNumber;
-        const endValueChanged = changed.has('valueEnd') && this.range || changed.has('value');
-        this.renderValueEnd = endValueChanged ? this.range ? this.valueEnd : this.value : this.inputEnd?.valueAsNumber;
+        this.renderValueStart = changed.has('valueStart')
+            ? this.valueStart
+            : this.inputStart?.valueAsNumber;
+        const endValueChanged = (changed.has('valueEnd') && this.range) || changed.has('value');
+        this.renderValueEnd = endValueChanged
+            ? this.range
+                ? this.valueEnd
+                : this.value
+            : this.inputEnd?.valueAsNumber;
     }
     updated(changed) {
         if (this.range) {
@@ -86,10 +117,14 @@ export class Slider extends Base {
                 const v = this.inputEnd.valueAsNumber;
                 this.valueEnd = this.renderValueEnd = v;
             }
-        } else {
+        }
+        else {
             this.value ??= this.renderValueEnd;
         }
-        if (changed.has('range') || changed.has('renderValueStart') || changed.has('renderValueEnd') || this.isUpdatePending) {
+        if (changed.has('range') ||
+            changed.has('renderValueStart') ||
+            changed.has('renderValueEnd') ||
+            this.isUpdatePending) {
             const startNub = this.handleStart?.querySelector('.handleNub');
             const endNub = this.handleEnd?.querySelector('.handleNub');
             this.handlesOverlapping = isOverlapping(startNub, endNub);
@@ -119,9 +154,7 @@ export class Slider extends Base {
         if (target !== undefined) {
             target.focus();
             if (flipped && target.valueAsNumber !== values.get(target)) {
-                target.dispatchEvent(new Event('change', {
-                    bubbles: true
-                }));
+                target.dispatchEvent(new Event('change', { bubbles: true }));
             }
         }
         this.finishAction(event);
@@ -147,7 +180,8 @@ export class Slider extends Base {
         if (this.range) {
             this.valueStart = this.inputStart.valueAsNumber;
             this.valueEnd = this.inputEnd.valueAsNumber;
-        } else {
+        }
+        else {
             this.value = this.inputEnd.valueAsNumber;
         }
         if (stopPropagation) {
@@ -178,15 +212,9 @@ export class Slider extends Base {
             target,
             fixed,
             values: new Map([
-                [
-                    target,
-                    target.valueAsNumber
-                ],
-                [
-                    fixed,
-                    fixed?.valueAsNumber
-                ]
-            ])
+                [target, target.valueAsNumber],
+                [fixed, fixed?.valueAsNumber],
+            ]),
         };
     }
     finishAction(event) {
@@ -201,7 +229,9 @@ export class Slider extends Base {
         }
         const { target, fixed } = this.action;
         const isStart = target === this.inputStart;
-        return isStart ? target.valueAsNumber > fixed.valueAsNumber : target.valueAsNumber < fixed.valueAsNumber;
+        return isStart
+            ? target.valueAsNumber > fixed.valueAsNumber
+            : target.valueAsNumber < fixed.valueAsNumber;
     }
     isActionFlipped() {
         const { action } = this;
@@ -268,126 +298,89 @@ export class Slider extends Base {
             data.append(this.nameStart, String(this.valueStart));
             data.append(this.nameEnd, String(this.valueEnd));
             this[internals].setFormValue(data);
-        } else {
+        }
+        else {
             this[internals].setFormValue(String(this.value));
         }
     }
 }
-_ts_decorate([
-    property({
-        type: Number
-    })
+__decorate([
+    property({ type: Number })
 ], Slider.prototype, "min", void 0);
-_ts_decorate([
-    property({
-        type: Number
-    })
+__decorate([
+    property({ type: Number })
 ], Slider.prototype, "max", void 0);
-_ts_decorate([
-    property({
-        type: Number
-    })
+__decorate([
+    property({ type: Number })
 ], Slider.prototype, "value", void 0);
-_ts_decorate([
-    property({
-        type: Number,
-        attribute: 'value-start'
-    })
+__decorate([
+    property({ type: Number, attribute: 'value-start' })
 ], Slider.prototype, "valueStart", void 0);
-_ts_decorate([
-    property({
-        type: Number,
-        attribute: 'value-end'
-    })
+__decorate([
+    property({ type: Number, attribute: 'value-end' })
 ], Slider.prototype, "valueEnd", void 0);
-_ts_decorate([
-    property({
-        attribute: 'value-label'
-    })
+__decorate([
+    property({ attribute: 'value-label' })
 ], Slider.prototype, "valueLabel", void 0);
-_ts_decorate([
-    property({
-        attribute: 'value-label-start'
-    })
+__decorate([
+    property({ attribute: 'value-label-start' })
 ], Slider.prototype, "valueLabelStart", void 0);
-_ts_decorate([
-    property({
-        attribute: 'value-label-end'
-    })
+__decorate([
+    property({ attribute: 'value-label-end' })
 ], Slider.prototype, "valueLabelEnd", void 0);
-_ts_decorate([
-    property({
-        attribute: 'aria-label-start'
-    })
+__decorate([
+    property({ attribute: 'aria-label-start' })
 ], Slider.prototype, "ariaLabelStart", void 0);
-_ts_decorate([
-    property({
-        attribute: 'aria-valuetext-start'
-    })
+__decorate([
+    property({ attribute: 'aria-valuetext-start' })
 ], Slider.prototype, "ariaValueTextStart", void 0);
-_ts_decorate([
-    property({
-        attribute: 'aria-label-end'
-    })
+__decorate([
+    property({ attribute: 'aria-label-end' })
 ], Slider.prototype, "ariaLabelEnd", void 0);
-_ts_decorate([
-    property({
-        attribute: 'aria-valuetext-end'
-    })
+__decorate([
+    property({ attribute: 'aria-valuetext-end' })
 ], Slider.prototype, "ariaValueTextEnd", void 0);
-_ts_decorate([
-    property({
-        type: Number
-    })
+__decorate([
+    property({ type: Number })
 ], Slider.prototype, "step", void 0);
-_ts_decorate([
-    property({
-        type: Boolean
-    })
+__decorate([
+    property({ type: Boolean })
 ], Slider.prototype, "ticks", void 0);
-_ts_decorate([
-    property({
-        type: Boolean
-    })
+__decorate([
+    property({ type: Boolean })
 ], Slider.prototype, "labeled", void 0);
-_ts_decorate([
-    property({
-        type: Boolean
-    })
+__decorate([
+    property({ type: Boolean })
 ], Slider.prototype, "range", void 0);
-_ts_decorate([
+__decorate([
     query('input.start')
 ], Slider.prototype, "inputStart", void 0);
-_ts_decorate([
+__decorate([
     query('input.end')
 ], Slider.prototype, "inputEnd", void 0);
-_ts_decorate([
+__decorate([
     query('.handle.start')
 ], Slider.prototype, "handleStart", void 0);
-_ts_decorate([
+__decorate([
     query('.handle.end')
 ], Slider.prototype, "handleEnd", void 0);
-_ts_decorate([
+__decorate([
     state()
 ], Slider.prototype, "startOnTop", void 0);
-_ts_decorate([
+__decorate([
     state()
 ], Slider.prototype, "handlesOverlapping", void 0);
-_ts_decorate([
+__decorate([
     state()
 ], Slider.prototype, "renderValueStart", void 0);
-_ts_decorate([
+__decorate([
     state()
 ], Slider.prototype, "renderValueEnd", void 0);
-_ts_decorate([
-    property({
-        attribute: 'data-aria-label'
-    })
+__decorate([
+    property({ attribute: 'data-aria-label' })
 ], Slider.prototype, "ariaLabel", void 0);
-_ts_decorate([
-    property({
-        attribute: 'data-aria-valuetext'
-    })
+__decorate([
+    property({ attribute: 'data-aria-valuetext' })
 ], Slider.prototype, "ariaValueText", void 0);
 function isOverlapping(elA, elB) {
     if (!(elA && elB)) {
@@ -395,7 +388,10 @@ function isOverlapping(elA, elB) {
     }
     const a = elA.getBoundingClientRect();
     const b = elB.getBoundingClientRect();
-    return !(a.top > b.bottom || a.right < b.left || a.bottom < b.top || a.left > b.right);
+    return !(a.top > b.bottom ||
+        a.right < b.left ||
+        a.bottom < b.top ||
+        a.left > b.right);
 }
 function isActivationClick(event) {
     // Simple check for now, simplified version of material web's check
@@ -408,7 +404,7 @@ function dispatchActivationClick(element) {
     const event = new MouseEvent('click', {
         bubbles: true,
         cancelable: true,
-        view: window
+        view: window,
     });
     element.dispatchEvent(event);
 }
@@ -421,7 +417,8 @@ function redispatchEvent(element, event) {
     const copy = new event.constructor(event.type, {
         bubbles: event.bubbles,
         cancelable: event.cancelable,
-        composed: event.composed
+        composed: event.composed,
+        // detail: (event as any).detail,
     });
     element.dispatchEvent(copy);
     return true;

package/src/base/tab-panel.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+declare const TabPanel_base: Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+export declare class TabPanel extends TabPanel_base {
+    protected _role: string;
+    render(): import("lit-html").TemplateResult<1>;
+    value: string;
+    connectedCallback(): void;
+}
+export {};

package/src/base/tab-panel.js

@@ -1,25 +1,25 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { InternalsAttached, internals } from './mixins/internals-attached.js';
 import { genUniqueId } from '../core/unique-id.js';
 export class TabPanel extends InternalsAttached(LitElement) {
+    constructor() {
+        super(...arguments);
+        this._role = 'tabpanel';
+        this.value = '';
+    }
     render() {
-        return html`<slot></slot>`;
+        return html `<slot></slot>`;
     }
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('seele-base', 'tabpanel');
         this[internals].role = this._role;
-        if (!this.id) this.id = genUniqueId('tabpanel');
-    }
-    constructor(...args){
-        super(...args), this._role = 'tabpanel', this.value = '';
+        if (!this.id)
+            this.id = genUniqueId('tabpanel');
     }
 }
-_ts_decorate([
-    property({
-        type: String,
-        reflect: true
-    })
+__decorate([
+    property({ type: String, reflect: true })
 ], TabPanel.prototype, "value", void 0);

package/src/base/tab.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+declare const Tab_base: Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+/**
+ * TODO: disabled
+ */
+export declare class Tab extends Tab_base {
+    #private;
+    protected _role: string;
+    selected: boolean;
+    focused: boolean;
+    value: string;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    protected updated(changed: Map<string, any>): void;
+    focus(): void;
+    blur(): void;
+}
+export {};

package/src/base/tab.js

@@ -1,19 +1,28 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { InternalsAttached, internals } from './mixins/internals-attached.js';
 import { genUniqueId } from '../core/unique-id.js';
 /**
  * TODO: disabled
- */ export class Tab extends InternalsAttached(LitElement) {
+ */
+export class Tab extends InternalsAttached(LitElement) {
+    constructor() {
+        super(...arguments);
+        this._role = 'tab';
+        this.selected = false;
+        this.focused = false;
+        this.value = '';
+    }
     render() {
-        return html`<slot></slot>`;
+        return html `<slot></slot>`;
     }
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('seele-base', 'tab');
         this[internals].role = this._role;
-        if (!this.id) this.id = genUniqueId('tab');
+        if (!this.id)
+            this.id = genUniqueId('tab');
         this.#updateInternals();
     }
     updated(changed) {
@@ -24,8 +33,12 @@ import { genUniqueId } from '../core/unique-id.js';
     }
     #updateInternals() {
         this[internals].ariaSelected = this.selected ? 'true' : 'false';
-        this.focused ? this[internals].states.add('focused') : this[internals].states.delete('focused');
-        this.selected ? this[internals].states.add('selected') : this[internals].states.delete('selected');
+        this.focused
+            ? this[internals].states.add('focused')
+            : this[internals].states.delete('focused');
+        this.selected
+            ? this[internals].states.add('selected')
+            : this[internals].states.delete('selected');
     }
     focus() {
         this.focused = true;
@@ -35,25 +48,13 @@ import { genUniqueId } from '../core/unique-id.js';
         this.focused = false;
         super.blur();
     }
-    constructor(...args){
-        super(...args), this._role = 'tab', this.selected = false, this.focused = false, this.value = '';
-    }
 }
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], Tab.prototype, "selected", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], Tab.prototype, "focused", void 0);
-_ts_decorate([
-    property({
-        type: String,
-        reflect: true
-    })
+__decorate([
+    property({ type: String, reflect: true })
 ], Tab.prototype, "value", void 0);

package/src/base/tabs.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+import type { Tab } from './tab.js';
+/**
+ * @fires {CustomEvent} tab-select
+ */
+export declare class Tabs extends LitElement {
+    #private;
+    protected _role: string;
+    switch: 'auto' | 'manual';
+    selected: string;
+    $slotItems: Array<HTMLElement>;
+    get $tabs(): Tab[];
+    get $parent(): HTMLElement;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    protected updated(changed: Map<string, any>): void;
+    focusTab(tab: Tab): void;
+    selectTab(selectedTab: Tab): void;
+}