@vandeurenglenn/lite-elements 0.3.18

package/exports/dialog.js

@@ -0,0 +1,256 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+import './elevation.js';
+import './icon.js';
+import '@vandeurenglenn/little-pubsub';
+
+let CustomDialog = (() => {
+    let _classDecorators = [customElement('custom-dialog')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    let _open_decorators;
+    let _open_initializers = [];
+    let _open_extraInitializers = [];
+    let _fullscreen_decorators;
+    let _fullscreen_initializers = [];
+    let _fullscreen_extraInitializers = [];
+    let _hasActions_decorators;
+    let _hasActions_initializers = [];
+    let _hasActions_extraInitializers = [];
+    let _hasHeader_decorators;
+    let _hasHeader_initializers = [];
+    let _hasHeader_extraInitializers = [];
+    let _hasHero_decorators;
+    let _hasHero_initializers = [];
+    let _hasHero_extraInitializers = [];
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _open_decorators = [property({ type: Boolean, reflect: true })];
+            _fullscreen_decorators = [property({ type: Boolean, reflect: true })];
+            _hasActions_decorators = [property({ type: Boolean, reflect: true, attribute: 'has-actions' })];
+            _hasHeader_decorators = [property({ type: Boolean, reflect: true, attribute: 'has-header' })];
+            _hasHero_decorators = [property({ type: Boolean, reflect: true, attribute: 'has-hero' })];
+            __esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
+            __esDecorate(this, null, _fullscreen_decorators, { kind: "accessor", name: "fullscreen", static: false, private: false, access: { has: obj => "fullscreen" in obj, get: obj => obj.fullscreen, set: (obj, value) => { obj.fullscreen = value; } }, metadata: _metadata }, _fullscreen_initializers, _fullscreen_extraInitializers);
+            __esDecorate(this, null, _hasActions_decorators, { kind: "accessor", name: "hasActions", static: false, private: false, access: { has: obj => "hasActions" in obj, get: obj => obj.hasActions, set: (obj, value) => { obj.hasActions = value; } }, metadata: _metadata }, _hasActions_initializers, _hasActions_extraInitializers);
+            __esDecorate(this, null, _hasHeader_decorators, { kind: "accessor", name: "hasHeader", static: false, private: false, access: { has: obj => "hasHeader" in obj, get: obj => obj.hasHeader, set: (obj, value) => { obj.hasHeader = value; } }, metadata: _metadata }, _hasHeader_initializers, _hasHeader_extraInitializers);
+            __esDecorate(this, null, _hasHero_decorators, { kind: "accessor", name: "hasHero", static: false, private: false, access: { has: obj => "hasHero" in obj, get: obj => obj.hasHero, set: (obj, value) => { obj.hasHero = value; } }, metadata: _metadata }, _hasHero_initializers, _hasHero_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #open_accessor_storage = __runInitializers(this, _open_initializers, false);
+        get open() { return this.#open_accessor_storage; }
+        set open(value) { this.#open_accessor_storage = value; }
+        #fullscreen_accessor_storage = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _fullscreen_initializers, false));
+        get fullscreen() { return this.#fullscreen_accessor_storage; }
+        set fullscreen(value) { this.#fullscreen_accessor_storage = value; }
+        #hasActions_accessor_storage = (__runInitializers(this, _fullscreen_extraInitializers), __runInitializers(this, _hasActions_initializers, false));
+        get hasActions() { return this.#hasActions_accessor_storage; }
+        set hasActions(value) { this.#hasActions_accessor_storage = value; }
+        #hasHeader_accessor_storage = (__runInitializers(this, _hasActions_extraInitializers), __runInitializers(this, _hasHeader_initializers, false));
+        get hasHeader() { return this.#hasHeader_accessor_storage; }
+        set hasHeader(value) { this.#hasHeader_accessor_storage = value; }
+        #hasHero_accessor_storage = (__runInitializers(this, _hasHeader_extraInitializers), __runInitializers(this, _hasHero_initializers, false));
+        get hasHero() { return this.#hasHero_accessor_storage; }
+        set hasHero(value) { this.#hasHero_accessor_storage = value; }
+        connectedCallback() {
+            const actionsSlot = this.shadowRoot.querySelector('slot[name="actions"]');
+            // @ts-ignore
+            this.hasActions = Array.from(actionsSlot?.assignedNodes() || []).length !== 0;
+            let headerSlot = this.shadowRoot.querySelector('slot[name="header"]');
+            const checks = ['title', 'header-start', 'header-end'];
+            let i = 0;
+            // @ts-ignore
+            while (Array.from(headerSlot.assignedElements()).length === 0 && i < checks.length) {
+                headerSlot = this.shadowRoot.querySelector(`slot[name="${checks[i]}"]`);
+                i += 1;
+            }
+            // @ts-ignore
+            this.hasHeader = headerSlot.assignedElements().length !== 0;
+            const heroSlot = this.shadowRoot.querySelector('slot[name="hero-icon"]');
+            // @ts-ignore
+            this.hashero = Array.from(heroSlot?.assignedNodes() || []).length !== 0;
+        }
+        onChange(propertyKey, value) {
+            if (propertyKey === 'open') {
+                this.open
+                    ? this.querySelector('[slot="actions"]').addEventListener('click', this._close)
+                    : this.querySelector('[slot="actions"]').removeEventListener('click', this._close);
+            }
+        }
+        _close = (__runInitializers(this, _hasHero_extraInitializers), (event) => {
+            const target = event.composedPath()[0];
+            this.dispatchEvent(new CustomEvent('close', { detail: target.getAttribute('action') || 'close' }));
+            this.open = false;
+        });
+        static styles = [
+            css `
+      :host {
+        position: fixed;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+      }
+
+      .header {
+        height: 56px;
+        box-sizing: border-box;
+      }
+
+      .scrim,
+      .dialog {
+        transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms opacity,
+          var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
+      }
+
+      .scrim {
+        position: absolute;
+        inset: 0;
+        background-color: var(--md-sys-color-scrim);
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      dialog {
+        pointer-events: none;
+        border: none;
+        min-width: 280px;
+        max-width: 560px;
+        width: fit-content;
+        border-radius: var(--md-sys-shape-corner-extra-large);
+        background-color: var(--md-sys-color-surface-container-high);
+        color: var(--md-sys-color-on-surface);
+        padding: 24px;
+        box-sizing: border-box;
+        position: relative;
+        opacity: 0;
+        transform: scaleY(0.1);
+      }
+
+      .body {
+        overflow-y: auto;
+      }
+
+      :host([has-actions]) .body {
+        padding-top: 16px;
+        padding-bottom: 24px;
+      }
+
+      :host([has-header][has-hero]) .header {
+        padding-top: 16px;
+      }
+
+      slot[name='title']::slotted(*) {
+        font-family: var(--md-sys-typescale-title-large-font-family-name);
+        font-style: var(--md-sys-typescale-title-large-font-family-style);
+        font-weight: var(--md-sys-typescale-title-large-font-weight);
+        font-size: var(--md-sys-typescale-title-large-font-size);
+        letter-spacing: var(--md-sys-typescale-title-large-tracking);
+        line-height: var(--md-sys-typescale-title-large-height);
+        text-transform: var(--md-sys-typescale-title-large-text-transform);
+        text-decoration: var(--md-sys-typescale-title-large-text-decoration);
+      }
+
+      :host([has-hero]) slot[name='title']::slotted(*) {
+        padding-top: 16px;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      :host([fullscreen]) slot[name='title']::slotted(*) {
+        padding-left: 16px;
+      }
+
+      :host(:not([fullscreen])) dialog {
+        align-items: center;
+        justify-content: center;
+      }
+
+      slot[name='supporting-text']::slotted(*) {
+        color: var(--md-sys-color-on-surface-variant);
+        padding-bottom: 16px;
+      }
+
+      slot[name='actions']::slotted(*) {
+        align-items: center;
+        justify-content: end;
+      }
+
+      :host([open]) dialog,
+      :host([open]) .scrim {
+        pointer-events: auto;
+        opacity: 1;
+        transform: scaleY(1);
+        transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms opacity,
+          var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
+      }
+
+      :host([open]) .scrim {
+        opacity: 0.44;
+      }
+
+      :host([fullscreen]) slot[name='actions']::slotted(*) {
+        --custom-icon-size: 12px;
+        --custom-button-color: var(--md-sys-color-primary);
+      }
+
+      slot[name='actions'] {
+        align-items: flex-end;
+      }
+    `
+        ];
+        render() {
+            return html `
+      <span class="scrim" @click=${this._close}></span>
+      <dialog ?open=${this.open}>
+        <custom-elevation level=${this.fullscreen ? 0 : 3}></custom-elevation>
+        <slot name="hero-icon"></slot>
+        <slot name="supporting-text"></slot>
+        <flex-row class="header" center>
+          <slot name="header">
+            <flex-row center style="width: 100%">
+              <slot name="header-start">
+                ${this.fullscreen
+                ? html `<custom-button @click=${this._close}
+                      ><custom-icon slot="icon">close</custom-icon></custom-button
+                    >`
+                : ''}
+              </slot>
+              <slot name="title"></slot>
+              <flex-it></flex-it>
+              <slot name="header-end">
+                ${this.fullscreen ? html `<slot name="actions"></slot>` : ''}
+                ${this.fullscreen
+                ? ''
+                : html `<custom-button @click=${this._close}
+                      ><custom-icon slot="icon">close</custom-icon></custom-button
+                    >`}
+              </slot>
+            </flex-row>
+          </slot>
+        </flex-row>
+        <flex-column class="body">
+          <slot></slot>
+        </flex-column>
+
+        ${this.fullscreen ? '' : html `<slot name="actions"></slot>`}
+      </dialog>
+    `;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomDialog };

package/exports/divider/divider.d.ts

@@ -0,0 +1,17 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+import '../button/button.js';
+export declare class CustomDivider extends LiteElement {
+    static properties: {
+        inset: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        middleInset: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+    };
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/divider.js

@@ -0,0 +1,54 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, html, LiteElement } from '@vandeurenglenn/lite';
+import './button.js';
+import './elevation.js';
+
+let CustomDivider = (() => {
+    let _classDecorators = [customElement('custom-divider')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static properties = {
+            inset: { type: Boolean, reflect: true, attribute: 'inset' },
+            middleInset: { type: Boolean, reflect: true, attribute: 'middle-inset' }
+        };
+        render() {
+            return html `
+      <style>
+        :host {
+          display: block;
+          box-sizing: border-box;
+          min-height: 1px;
+          margin: 8px 0 16px 0;
+          background: var(--md-sys-color-outline);
+        }
+
+        :host([inset]) {
+          margin-left: 16px;
+          margin-right: 0;
+        }
+
+        :host([middle-inset]) {
+          margin-left: 16px;
+          margin-right: 16px;
+        }
+      </style>
+    `;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomDivider };

package/exports/drawer/drawer-button.d.ts

@@ -0,0 +1,9 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+import '../icon/icon.js';
+import '../button/button.js';
+export declare class CustomDrawerButton extends LiteElement {
+    accessor mobile: boolean;
+    accessor drawerOpen: boolean;
+    accessor id: string;
+    openPane: any;
+}

package/exports/drawer/drawer-layout.d.ts

@@ -0,0 +1,19 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+import './drawer.js';
+import './drawer-button.js';
+import './drawer-item.js';
+import '../bar/top-app-bar.js';
+import { AppBarTypes } from '../bar/top-app-bar.js';
+import '@vandeurenglenn/flex-elements/column.js';
+export declare class CustomDrawerLayout extends LiteElement {
+    accessor drawerOpen: boolean;
+    accessor keepClosed: boolean;
+    accessor narrow: boolean;
+    accessor drawerType: 'modal' | undefined;
+    accessor appBarType: AppBarTypes;
+    accessor mainDrawerId: string;
+    connectedCallback(): void;
+    _onnarrow({ detail }: CustomEvent): boolean;
+    private _click;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/drawer/drawer.d.ts

@@ -0,0 +1,13 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+import '../elevation/elevation.js';
+import '../button/button.js';
+import '../pane/pane.js';
+export declare class CustomDrawer extends LiteElement {
+    accessor open: boolean;
+    accessor mobile: boolean;
+    accessor type: 'modal' | undefined;
+    accessor right: boolean;
+    accessor id: string;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/drawer-button.js

@@ -0,0 +1,83 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+import './icon.js';
+import './button.js';
+import '@vandeurenglenn/little-pubsub';
+import './elevation.js';
+
+let CustomDrawerButton = (() => {
+    let _classDecorators = [customElement('custom-drawer-button')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    let _mobile_decorators;
+    let _mobile_initializers = [];
+    let _mobile_extraInitializers = [];
+    let _drawerOpen_decorators;
+    let _drawerOpen_initializers = [];
+    let _drawerOpen_extraInitializers = [];
+    let _id_decorators;
+    let _id_initializers = [];
+    let _id_extraInitializers = [];
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _mobile_decorators = [property({ type: Boolean, reflect: true })];
+            _drawerOpen_decorators = [property({ type: Boolean, reflect: true, attribute: 'drawer-open' })];
+            _id_decorators = [property()];
+            __esDecorate(this, null, _mobile_decorators, { kind: "accessor", name: "mobile", static: false, private: false, access: { has: obj => "mobile" in obj, get: obj => obj.mobile, set: (obj, value) => { obj.mobile = value; } }, metadata: _metadata }, _mobile_initializers, _mobile_extraInitializers);
+            __esDecorate(this, null, _drawerOpen_decorators, { kind: "accessor", name: "drawerOpen", static: false, private: false, access: { has: obj => "drawerOpen" in obj, get: obj => obj.drawerOpen, set: (obj, value) => { obj.drawerOpen = value; } }, metadata: _metadata }, _drawerOpen_initializers, _drawerOpen_extraInitializers);
+            __esDecorate(this, null, _id_decorators, { kind: "accessor", name: "id", static: false, private: false, access: { has: obj => "id" in obj, get: obj => obj.id, set: (obj, value) => { obj.id = value; } }, metadata: _metadata }, _id_initializers, _id_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #mobile_accessor_storage = __runInitializers(this, _mobile_initializers, false);
+        get mobile() { return this.#mobile_accessor_storage; }
+        set mobile(value) { this.#mobile_accessor_storage = value; }
+        #drawerOpen_accessor_storage = (__runInitializers(this, _mobile_extraInitializers), __runInitializers(this, _drawerOpen_initializers, void 0));
+        get drawerOpen() { return this.#drawerOpen_accessor_storage; }
+        set drawerOpen(value) { this.#drawerOpen_accessor_storage = value; }
+        #id_accessor_storage = (__runInitializers(this, _drawerOpen_extraInitializers), __runInitializers(this, _id_initializers, void 0));
+        get id() { return this.#id_accessor_storage; }
+        set id(value) { this.#id_accessor_storage = value; }
+        openPane() {
+            document.dispatchEvent(new CustomEvent('custom-pane-open', { detail: this.id }));
+        }
+        static styles = [
+            css `
+      :host {
+        display: block;
+        opacity: 1;
+        pointer-events: auto;
+        will-change: width, opacity;
+      }
+
+      :host([drawer-open]) {
+        opacity: 0;
+        pointer-events: none;
+        width: 0;
+      }
+    `
+        ];
+        render() {
+            return html `
+      <custom-button @click=${() => this.openPane()}>
+        <custom-icon slot="icon">menu</custom-icon>
+      </custom-button>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _id_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomDrawerButton };

package/exports/drawer-item.js

@@ -0,0 +1,69 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, css, html, LiteElement } from '@vandeurenglenn/lite';
+
+let CustomDrawerItem = (() => {
+    let _classDecorators = [customElement('custom-drawer-item')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = [
+            css `
+      :host {
+        display: flex;
+        padding-left: 16px;
+        padding-right: 24px;
+        height: 100%;
+        min-height: 54px;
+        max-height: 54px;
+        width: 100%;
+        box-sizing: border-box;
+        border-radius: var(--md-sys-shape-corner-extra-large);
+        align-items: center;
+        pointer-events: auto;
+        cursor: pointer;
+      }
+
+      slot {
+        pointer-events: none;
+      }
+
+      slot[name='icon']::slotted(*) {
+        margin-right: 12px;
+        height: 24px;
+        width: 24px;
+      }
+
+      slot[name='end']::slotted(*) {
+        margin-left: 12px;
+        box-sizing: border-box;
+      }
+
+      :host([non-interactive]) {
+        pointer-events: none;
+      }
+    `
+        ];
+        render() {
+            return html `
+      <slot name="icon"></slot>
+      <slot></slot>
+      <slot name="end"></slot>
+    `;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomDrawerItem };