@santi020k/lumen-elements 3.0.1 → 4.1.0

package/dist/components/media-viewport.js

@@ -0,0 +1,108 @@
+import { bindLumenMediaViewport, lumenMediaViewportActions, lumenMediaViewportLabels, syncLumenMediaViewport } from '@santi020k/lumen-core/media-viewport';
+import { normalizeLumenMediaViewport } from '@santi020k/lumen-core/media-workspace';
+import { defineLumenElement, LumenElement } from '../element-base.js';
+export const lumenMediaViewportElementConfig = {
+    baseClassName: 'ui-media-viewport',
+    observedAttributes: ['label', 'disabled', 'max-zoom', 'zoom', 'pan-x', 'pan-y', 'ratio', 'locale', 'lang'],
+    tagName: 'lumen-media-viewport'
+};
+export class LumenMediaViewportElement extends LumenElement {
+    static config = lumenMediaViewportElementConfig;
+    cleanup;
+    stage;
+    copy = lumenMediaViewportLabels;
+    get value() {
+        return normalizeLumenMediaViewport({ zoom: Number(this.getAttribute('zoom') ?? 1), x: Number(this.getAttribute('pan-x') ?? 0), y: Number(this.getAttribute('pan-y') ?? 0) }, this.maxZoom);
+    }
+    set value(value) {
+        const next = normalizeLumenMediaViewport(value, this.maxZoom);
+        this.setAttribute('zoom', String(next.zoom));
+        this.setAttribute('pan-x', String(next.x));
+        this.setAttribute('pan-y', String(next.y));
+    }
+    set labels(value) {
+        this.copy = { ...lumenMediaViewportLabels, ...value };
+        this.update();
+    }
+    get maxZoom() {
+        return Number(this.getAttribute('max-zoom') ?? 4);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.stage)
+            this.createContent();
+        this.cleanup?.();
+        this.cleanup = bindLumenMediaViewport(this, {
+            disabled: () => this.hasAttribute('disabled'),
+            getValue: () => this.value,
+            maxZoom: () => this.maxZoom,
+            onValueChange: value => {
+                this.value = value;
+                this.dispatchEvent(new CustomEvent('ui:media-viewport-change', { bubbles: true, detail: value }));
+            }
+        });
+        this.update();
+    }
+    disconnectedCallback() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+    }
+    attributeChangedCallback() {
+        super.attributeChangedCallback();
+        this.update();
+    }
+    createContent() {
+        const stage = this.ownerDocument.createElement('div');
+        const content = this.ownerDocument.createElement('div');
+        const caption = this.ownerDocument.createElement('div');
+        const status = this.ownerDocument.createElement('span');
+        const actions = this.ownerDocument.createElement('div');
+        stage.className = 'ui-media-viewport__stage';
+        stage.dataset.uiMediaViewportStage = '';
+        stage.tabIndex = 0;
+        stage.setAttribute('role', 'group');
+        content.className = 'ui-media-viewport__content';
+        content.dataset.uiMediaViewportContent = '';
+        content.append(...this.childNodes);
+        stage.append(content);
+        status.dataset.uiMediaViewportStatus = '';
+        status.id = `media-viewport-${crypto.randomUUID()}`;
+        status.setAttribute('role', 'status');
+        status.setAttribute('aria-live', 'polite');
+        stage.setAttribute('aria-describedby', status.id);
+        actions.className = 'ui-media-viewport__actions';
+        actions.setAttribute('role', 'group');
+        for (const action of lumenMediaViewportActions) {
+            const button = this.ownerDocument.createElement('button');
+            button.type = 'button';
+            button.className = 'ui-button ui-button--outline';
+            button.dataset.uiMediaViewportAction = action;
+            actions.append(button);
+        }
+        caption.className = 'ui-media-viewport__caption';
+        caption.append(status, actions);
+        this.append(stage, caption);
+        this.stage = stage;
+    }
+    get locale() {
+        return this.getAttribute('locale') ?? this.closest('[lang]')?.getAttribute('lang') ?? undefined;
+    }
+    update() {
+        if (!this.stage)
+            return;
+        const ratio = Number(this.getAttribute('ratio') ?? 16 / 9);
+        const label = this.getAttribute('label') ?? 'Media preview';
+        this.stage.style.aspectRatio = String(Number.isFinite(ratio) && ratio >= 0.1 && ratio <= 10 ? ratio : 16 / 9);
+        this.stage.setAttribute('aria-label', label);
+        this.querySelector('.ui-media-viewport__actions')?.setAttribute('aria-label', label);
+        for (const [index, action] of lumenMediaViewportActions.entries()) {
+            const button = this.querySelectorAll('button[data-ui-media-viewport-action]')[index];
+            if (button)
+                button.textContent = this.copy[action];
+        }
+        syncLumenMediaViewport(this, this.value, this.maxZoom, this.hasAttribute('disabled'), this.locale);
+    }
+}
+export const defineLumenMediaViewport = (registry) => {
+    defineLumenElement(lumenMediaViewportElementConfig, LumenMediaViewportElement, registry);
+};

package/dist/components/virtual-list.d.ts

@@ -0,0 +1,38 @@
+import { type LumenCustomElementRegistry, LumenElement } from '../element-base.js';
+export declare const lumenVirtualListElementConfig: {
+    readonly attributeClasses: {
+        readonly glass: {
+            readonly true: "ui-virtual-list--glass";
+            readonly subtle: "ui-virtual-list--glass ui-glass-subtle";
+            readonly strong: "ui-virtual-list--glass ui-glass-strong";
+        };
+    };
+    readonly baseClassName: "ui-virtual-list";
+    readonly defaults: {
+        readonly 'data-ui-virtual-list': "";
+        readonly tabindex: "0";
+    };
+    readonly tagName: "lumen-virtual-list";
+};
+export declare class LumenVirtualListElement extends LumenElement {
+    static config: {
+        readonly attributeClasses: {
+            readonly glass: {
+                readonly true: "ui-virtual-list--glass";
+                readonly subtle: "ui-virtual-list--glass ui-glass-subtle";
+                readonly strong: "ui-virtual-list--glass ui-glass-strong";
+            };
+        };
+        readonly baseClassName: "ui-virtual-list";
+        readonly defaults: {
+            readonly 'data-ui-virtual-list': "";
+            readonly tabindex: "0";
+        };
+        readonly tagName: "lumen-virtual-list";
+    };
+    private controller;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+export declare const defineLumenVirtualList: (registry?: LumenCustomElementRegistry) => void;
+//# sourceMappingURL=virtual-list.d.ts.map

package/dist/components/virtual-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../src/components/virtual-list.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,0BAA0B,EAC/B,YAAY,EAEb,MAAM,oBAAoB,CAAA;AAE3B,eAAO,MAAM,6BAA6B;;;;;;;;;;;;;;CAWH,CAAA;AAEvC,qBAAa,uBAAwB,SAAQ,YAAY;IACvD,OAAgB,MAAM;;;;;;;;;;;;;;MAAgC;IAEtD,OAAO,CAAC,UAAU,CAAwC;IAEjD,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;CAKtC;AAED,eAAO,MAAM,sBAAsB,GAAI,WAAW,0BAA0B,KAAG,IAE9E,CAAA"}

package/dist/components/virtual-list.js

@@ -0,0 +1,30 @@
+import { createLumenVirtualListController } from '@santi020k/lumen-core/virtual-list';
+import { defineLumenElement, LumenElement } from '../element-base.js';
+export const lumenVirtualListElementConfig = {
+    attributeClasses: {
+        glass: {
+            true: 'ui-virtual-list--glass',
+            subtle: 'ui-virtual-list--glass ui-glass-subtle',
+            strong: 'ui-virtual-list--glass ui-glass-strong'
+        }
+    },
+    baseClassName: 'ui-virtual-list',
+    defaults: { 'data-ui-virtual-list': '', tabindex: '0' },
+    tagName: 'lumen-virtual-list'
+};
+export class LumenVirtualListElement extends LumenElement {
+    static config = lumenVirtualListElementConfig;
+    controller;
+    connectedCallback() {
+        super.connectedCallback();
+        this.controller?.destroy();
+        this.controller = createLumenVirtualListController(this);
+    }
+    disconnectedCallback() {
+        this.controller?.destroy();
+        this.controller = undefined;
+    }
+}
+export const defineLumenVirtualList = (registry) => {
+    defineLumenElement(lumenVirtualListElementConfig, LumenVirtualListElement, registry);
+};

package/dist/components/visual-interactions.d.ts

@@ -0,0 +1,65 @@
+import { LumenElement } from '../element-base.js';
+export declare const lumenMotionGroupElementConfig: {
+    readonly baseClassName: "ui-motion-group";
+    readonly defaults: {
+        readonly 'data-ui-motion-group': "";
+    };
+    readonly observedAttributes: readonly ["duration", "enter-exit"];
+    readonly tagName: "lumen-motion-group";
+};
+export declare class LumenMotionGroupElement extends LumenElement {
+    static config: {
+        readonly baseClassName: "ui-motion-group";
+        readonly defaults: {
+            readonly 'data-ui-motion-group': "";
+        };
+        readonly observedAttributes: readonly ["duration", "enter-exit"];
+        readonly tagName: "lumen-motion-group";
+    };
+    private cleanup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private bind;
+}
+export declare const lumenChartMotionElementConfig: {
+    readonly baseClassName: "ui-chart-motion";
+    readonly defaults: {
+        readonly 'data-ui-chart-motion': "";
+    };
+    readonly observedAttributes: readonly ["duration"];
+    readonly tagName: "lumen-chart-motion";
+};
+export declare class LumenChartMotionElement extends LumenElement {
+    static config: {
+        readonly baseClassName: "ui-chart-motion";
+        readonly defaults: {
+            readonly 'data-ui-chart-motion': "";
+        };
+        readonly observedAttributes: readonly ["duration"];
+        readonly tagName: "lumen-chart-motion";
+    };
+    private cleanup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private bind;
+}
+export declare const lumenVisualEffectElementConfig: {
+    readonly baseClassName: "ui-visual-effect";
+    readonly observedAttributes: readonly ["variant", "animated", "intensity"];
+    readonly tagName: "lumen-visual-effect";
+};
+export declare class LumenVisualEffectElement extends LumenElement {
+    static config: {
+        readonly baseClassName: "ui-visual-effect";
+        readonly observedAttributes: readonly ["variant", "animated", "intensity"];
+        readonly tagName: "lumen-visual-effect";
+    };
+    private cleanup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private update;
+}
+//# sourceMappingURL=visual-interactions.d.ts.map

package/dist/components/visual-interactions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visual-interactions.d.ts","sourceRoot":"","sources":["../../src/components/visual-interactions.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAA2B,MAAM,oBAAoB,CAAA;AAE1E,eAAO,MAAM,6BAA6B;;;;;;;CAKH,CAAA;AAEvC,qBAAa,uBAAwB,SAAQ,YAAY;IACvD,OAAgB,MAAM;;;;;;;MAAgC;IACtD,OAAO,CAAC,OAAO,CAA0B;IAEhC,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,wBAAwB,IAAI,IAAI;IAMzC,OAAO,CAAC,IAAI;CAQb;AAED,eAAO,MAAM,6BAA6B;;;;;;;CAKH,CAAA;AAEvC,qBAAa,uBAAwB,SAAQ,YAAY;IACvD,OAAgB,MAAM;;;;;;;MAAgC;IACtD,OAAO,CAAC,OAAO,CAA0B;IAChC,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,wBAAwB,IAAI,IAAI;IAMzC,OAAO,CAAC,IAAI;CAOb;AAED,eAAO,MAAM,8BAA8B;;;;CAIJ,CAAA;AAEvC,qBAAa,wBAAyB,SAAQ,YAAY;IACxD,OAAgB,MAAM;;;;MAAiC;IACvD,OAAO,CAAC,OAAO,CAA0B;IAEhC,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,wBAAwB,IAAI,IAAI;IAMzC,OAAO,CAAC,MAAM;CAef"}

package/dist/components/visual-interactions.js

@@ -0,0 +1,91 @@
+import { bindLumenChartMotion, bindLumenMotionGroup, createLumenSpotlightController, normalizeLumenEffectIntensity } from '@santi020k/lumen-core';
+import { LumenElement } from '../element-base.js';
+export const lumenMotionGroupElementConfig = {
+    baseClassName: 'ui-motion-group',
+    defaults: { 'data-ui-motion-group': '' },
+    observedAttributes: ['duration', 'enter-exit'],
+    tagName: 'lumen-motion-group'
+};
+export class LumenMotionGroupElement extends LumenElement {
+    static config = lumenMotionGroupElementConfig;
+    cleanup;
+    connectedCallback() {
+        super.connectedCallback();
+        this.bind();
+    }
+    disconnectedCallback() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+    }
+    attributeChangedCallback() {
+        super.attributeChangedCallback();
+        if (this.isConnected)
+            this.bind();
+    }
+    bind() {
+        this.cleanup?.();
+        const value = this.getAttribute('duration');
+        const duration = value === 'fast' || value === 'slow' ? value : 'standard';
+        this.cleanup = bindLumenMotionGroup(this, { duration, enterExit: this.getAttribute('enter-exit') !== 'false' });
+    }
+}
+export const lumenChartMotionElementConfig = {
+    baseClassName: 'ui-chart-motion',
+    defaults: { 'data-ui-chart-motion': '' },
+    observedAttributes: ['duration'],
+    tagName: 'lumen-chart-motion'
+};
+export class LumenChartMotionElement extends LumenElement {
+    static config = lumenChartMotionElementConfig;
+    cleanup;
+    connectedCallback() {
+        super.connectedCallback();
+        this.bind();
+    }
+    disconnectedCallback() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+    }
+    attributeChangedCallback() {
+        super.attributeChangedCallback();
+        if (this.isConnected)
+            this.bind();
+    }
+    bind() {
+        this.cleanup?.();
+        const duration = this.getAttribute('duration');
+        this.cleanup = bindLumenChartMotion(this, duration === 'fast' || duration === 'slow' ? duration : 'standard');
+    }
+}
+export const lumenVisualEffectElementConfig = {
+    baseClassName: 'ui-visual-effect',
+    observedAttributes: ['variant', 'animated', 'intensity'],
+    tagName: 'lumen-visual-effect'
+};
+export class LumenVisualEffectElement extends LumenElement {
+    static config = lumenVisualEffectElementConfig;
+    cleanup;
+    connectedCallback() {
+        super.connectedCallback();
+        this.update();
+    }
+    disconnectedCallback() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+    }
+    attributeChangedCallback() {
+        super.attributeChangedCallback();
+        if (this.isConnected)
+            this.update();
+    }
+    update() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+        this.dataset.uiVisualEffect = this.getAttribute('variant') ?? 'mesh';
+        this.dataset.uiEffectAnimated = String(this.hasAttribute('animated') && this.getAttribute('animated') !== 'false');
+        const raw = this.getAttribute('intensity');
+        this.style.setProperty('--ui-effect-intensity', String(normalizeLumenEffectIntensity(raw === null ? undefined : Number(raw))));
+        if (this.dataset.uiVisualEffect === 'spotlight')
+            this.cleanup = createLumenSpotlightController(this);
+    }
+}

package/dist/components/world-map.d.ts

@@ -0,0 +1,46 @@
+import { type LumenWorldMapCountryGeometry, type LumenWorldMapMarker } from '@santi020k/lumen-core/world-map';
+import { type LumenCustomElementRegistry, LumenElement } from '../element-base.js';
+export declare const lumenWorldMapElementConfig: {
+    readonly baseClassName: "ui-world-map";
+    readonly observedAttributes: readonly ["animated", "countries", "highlighted-countries", "interactive", "label", "labels", "list-label", "markers", "selected-country", "variant", "zoomable", "zoom-labels", "initial-view"];
+    readonly tagName: "lumen-world-map";
+};
+export declare class LumenWorldMapElement extends LumenElement {
+    static config: {
+        readonly baseClassName: "ui-world-map";
+        readonly observedAttributes: readonly ["animated", "countries", "highlighted-countries", "interactive", "label", "labels", "list-label", "markers", "selected-country", "variant", "zoomable", "zoom-labels", "initial-view"];
+        readonly tagName: "lumen-world-map";
+    };
+    private countryData;
+    private highlightedData;
+    private markerData;
+    private labelData;
+    private abortController;
+    private instanceId;
+    get countries(): readonly LumenWorldMapCountryGeometry[];
+    set countries(value: readonly LumenWorldMapCountryGeometry[]);
+    get highlightedCountries(): readonly string[];
+    set highlightedCountries(value: readonly string[]);
+    get markers(): readonly LumenWorldMapMarker[];
+    set markers(value: readonly LumenWorldMapMarker[]);
+    get labels(): Readonly<Record<string, string>>;
+    set labels(value: Readonly<Record<string, string>>);
+    get selectedCountry(): string;
+    set selectedCountry(value: string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    adoptedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private updateSelection;
+    private render;
+    private get zoomText();
+    private appendZoomControls;
+    private countryPath;
+    private highlightList;
+    private appendMarkers;
+    private bindPointer;
+    private appendChooser;
+    private selectCountry;
+}
+export declare const defineLumenWorldMap: (registry?: LumenCustomElementRegistry) => void;
+//# sourceMappingURL=world-map.d.ts.map

package/dist/components/world-map.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"world-map.d.ts","sourceRoot":"","sources":["../../src/components/world-map.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,4BAA4B,EACjC,KAAK,mBAAmB,EAMzB,MAAM,iCAAiC,CAAA;AAGxC,OAAO,EAAsB,KAAK,0BAA0B,EAAE,YAAY,EAA2B,MAAM,oBAAoB,CAAA;AAE/H,eAAO,MAAM,0BAA0B;;;;CAIA,CAAA;AAuDvC,qBAAa,oBAAqB,SAAQ,YAAY;IACpD,OAAgB,MAAM;;;;MAA6B;IAEnD,OAAO,CAAC,WAAW,CAAqD;IACxE,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,UAAU,CAA4C;IAC9D,OAAO,CAAC,SAAS,CAA8C;IAC/D,OAAO,CAAC,eAAe,CAA6B;IACpD,OAAO,CAAC,UAAU,CAAwC;IAE1D,IAAI,SAAS,IAAI,SAAS,4BAA4B,EAAE,CAEvD;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,SAAS,4BAA4B,EAAE,EAI3D;IAED,IAAI,oBAAoB,IAAI,SAAS,MAAM,EAAE,CAI5C;IAED,IAAI,oBAAoB,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,EAIhD;IAED,IAAI,OAAO,IAAI,SAAS,mBAAmB,EAAE,CAE5C;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,SAAS,mBAAmB,EAAE,EAIhD;IAED,IAAI,MAAM,IAAI,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAE7C;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAIjD;IAED,IAAI,eAAe,IAAI,MAAM,CAE5B;IAED,IAAI,eAAe,CAAC,KAAK,EAAE,MAAM,EAEhC;IAEQ,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAIrC,eAAe,IAAI,IAAI;IAId,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAoBrD,OAAO,CAAC,eAAe;IAqBvB,OAAO,CAAC,MAAM;IAkEd,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,kBAAkB;IAwC1B,OAAO,CAAC,WAAW;IAsBnB,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,aAAa;IA+BrB,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,aAAa;IA6CrB,OAAO,CAAC,aAAa;CActB;AAED,eAAO,MAAM,mBAAmB,GAAI,WAAW,0BAA0B,KAAG,IAE3E,CAAA"}