@vandeurenglenn/lite-elements 0.3.18

package/exports/select-mixin.js

@@ -0,0 +1,139 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+
+class SelectBase extends LiteElement {
+    #selected;
+    currentSelected;
+    connectedCallback() {
+        this.selected = this.defaultSelected;
+    }
+    get multi() {
+        return this.hasAttribute('multi');
+    }
+    set multi(value) {
+        value ? this.setAttribute('multi', '') : this.removeAttribute('multi');
+    }
+    get defaultSelected() {
+        return this.getAttribute('default-selected') || 0;
+    }
+    set selected(value) {
+        this.#selected = value;
+        this.#requestSelectedUpdate();
+    }
+    get selected() {
+        return this.#selected;
+    }
+    get slotted() {
+        if (this.shadowRoot)
+            return this.shadowRoot.querySelector('slot');
+        return this;
+    }
+    get #assignedNodes() {
+        const nodes = 'assignedNodes' in this.slotted ? this.slotted.assignedNodes() : this.children;
+        const arr = [];
+        for (var i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            if (node.nodeType === 1)
+                arr.push(node);
+        }
+        return arr;
+    }
+    get attrForSelected() {
+        return this.getAttribute('attr-for-selected') || 'name';
+    }
+    /**
+     * get the attribute used to set selected
+     *
+     * @example
+     * <custom-selector attr-for-selected="select">
+     *  <li select="1"></li>
+     *  <li select="2"></li>
+     * </custom-selector>
+     */
+    set attrForSelected(value) {
+        this.setAttribute('attr-for-selected', value);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            // check if value is number
+            if (!isNaN(newValue)) {
+                newValue = Number(newValue);
+            }
+            this[name] = newValue;
+        }
+    }
+    /**
+     * @param {string|number|HTMLElement} selected
+     */
+    select(selected) {
+        if (selected)
+            this.selected = selected;
+        // TODO: fix selectedobservers
+        if (this.multi)
+            this.#requestSelectedUpdate();
+    }
+    next() {
+        const index = this.getIndexFor(this.currentSelected);
+        if (index !== -1 &&
+            index >= 0 &&
+            this.#assignedNodes.length > index &&
+            index + 1 <= this.#assignedNodes.length - 1) {
+            this.selected = this.#assignedNodes[index + 1];
+        }
+    }
+    previous() {
+        const index = this.getIndexFor(this.currentSelected);
+        if (index !== -1 && index >= 0 && this.#assignedNodes.length > index && index - 1 >= 0) {
+            this.selected = this.#assignedNodes[index - 1];
+        }
+    }
+    getIndexFor(element) {
+        return this.#assignedNodes.indexOf(element || this.selected);
+    }
+    #updateSelected(selected, currentSelected) {
+        selected.classList.add('custom-selected');
+        if (currentSelected && currentSelected !== selected) {
+            currentSelected.classList.remove('custom-selected');
+        }
+        this.currentSelected = selected;
+    }
+    #updateMultiSelected(selected) {
+        for (const child of this.#assignedNodes) {
+            if (selected.includes(child.getAttribute(this.attrForSelected))) {
+                child.classList.add('custom-selected');
+            }
+            else {
+                child.classList.remove('custom-selected');
+            }
+        }
+    }
+    #updateStringSelected(selected) {
+        for (const child of this.#assignedNodes) {
+            if (child.getAttribute(this.attrForSelected) === selected) {
+                return this.#updateSelected(child, this.currentSelected);
+            }
+        }
+    }
+    #requestSelectedUpdate() {
+        if (this.selected === undefined) {
+            this.currentSelected && this.currentSelected.classList.remove('custom-selected');
+            return;
+        }
+        const type = typeof this.selected;
+        if (Array.isArray(this.selected))
+            return this.#updateMultiSelected(this.selected);
+        if (type === 'object')
+            return this.#updateSelected(this.selected, this.currentSelected);
+        if (type === 'string')
+            return this.#updateStringSelected(this.selected);
+        // set selected by index
+        const child = this.#assignedNodes[this.selected];
+        if (child)
+            this.#updateSelected(child, this.currentSelected);
+        // remove selected even when nothing found, better to return nothing
+    }
+}
+function SelectMixin(Base) {
+    return SelectBase;
+}
+
+export { SelectBase, SelectMixin };

package/exports/selector-mixin.js

@@ -0,0 +1,43 @@
+import { SelectBase } from './select-mixin.js';
+import '@vandeurenglenn/lite';
+
+class SelectorBase extends SelectBase {
+    constructor() {
+        super();
+    }
+    async connectedCallback() {
+        super.connectedCallback && (await super.connectedCallback());
+        // this.updateComplete && await this.updateComplete
+        this.slotted.addEventListener('click', this.#onClick.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback && super.disconnectedCallback();
+        this.slotted.removeEventListener('click', this.#onClick.bind(this));
+    }
+    #onClick(event) {
+        const target = event.composedPath()[0];
+        if (target.localName === this.localName) {
+            // was just a click in the host element so we don't need todo anything
+            return;
+        }
+        const selected = target.getAttribute(this.attrForSelected) || target;
+        if (this.multi) {
+            const selectedArray = Array.isArray(this.selected) ? this.selected : [];
+            const index = selectedArray.indexOf(selected);
+            if (index === -1)
+                selectedArray.push(selected);
+            else
+                selectedArray.splice(index, 1);
+            // trigger observer
+            this.selected = selectedArray;
+        }
+        else
+            this.selected = selected;
+        this.dispatchEvent(new CustomEvent('selected', { detail: selected }));
+    }
+}
+function SelectorMixin(Base) {
+    return SelectorBase;
+}
+
+export { SelectorBase, SelectorMixin };

package/exports/selector.js

@@ -0,0 +1,63 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, css, html } from '@vandeurenglenn/lite';
+import { SelectorBase } from './selector-mixin.js';
+import './select-mixin.js';
+
+let CustomSelector = (() => {
+    let _classDecorators = [customElement('custom-selector')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = SelectorBase;
+    (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;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+      }
+
+      ::slotted(.custom-selected:not([non-interactive])) {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+
+      ::slotted(*) {
+        color: var(--md-sys-color-on-surface-variant);
+        font-family: var(--md-sys-typescale-label-large-font-family-name);
+        font-style: var(--md-sys-typescale-label-large-font-family-style);
+        font-weight: var(--md-sys-typescale-label-large-font-weight);
+        font-size: var(--md-sys-typescale-label-large-font-size);
+        letter-spacing: var(--md-sys-typescale-label-large-tracking);
+        line-height: var(--md-sys-typescale-label-large-height);
+        text-transform: var(--md-sys-typescale-label-large-text-transform);
+        text-decoration: var(--md-sys-typescale-label-large-text-decoration);
+      }
+
+      ::slotted(:not(.custom-selected):not([non-interactive]):hover) {
+        background: var(--md-sys-color-secondary-container-hover);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+    `
+        ];
+        render() {
+            return html `<slot></slot>`;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomSelector };

package/exports/supporting-pane/supporting-pane.d.ts

@@ -0,0 +1,12 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+import './../pane/pane.js';
+export declare class CustomSupportingPane extends LiteElement {
+    accessor open: boolean;
+    accessor variant: 'compact' | 'medium' | 'expanded';
+    accessor left: boolean;
+    accessor id: string;
+    accessor supporting: any;
+    onPaneClose({ detail }: CustomEvent): void;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/supporting-pane.js

@@ -0,0 +1,133 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, property, query, html, LiteElement } from '@vandeurenglenn/lite';
+import './pane.js';
+import './elevation.js';
+import './button.js';
+import './icon.js';
+import '@vandeurenglenn/little-pubsub';
+
+let CustomSupportingPane = (() => {
+    let _classDecorators = [customElement('custom-supporting-pane')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    let _open_decorators;
+    let _open_initializers = [];
+    let _open_extraInitializers = [];
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_extraInitializers = [];
+    let _left_decorators;
+    let _left_initializers = [];
+    let _left_extraInitializers = [];
+    let _id_decorators;
+    let _id_initializers = [];
+    let _id_extraInitializers = [];
+    let _supporting_decorators;
+    let _supporting_initializers = [];
+    let _supporting_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 })];
+            _variant_decorators = [property({ type: String, reflect: true })];
+            _left_decorators = [property({ type: Boolean, reflect: true })];
+            _id_decorators = [property({ type: String })];
+            _supporting_decorators = [query('.support')];
+            __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, _variant_decorators, { kind: "accessor", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
+            __esDecorate(this, null, _left_decorators, { kind: "accessor", name: "left", static: false, private: false, access: { has: obj => "left" in obj, get: obj => obj.left, set: (obj, value) => { obj.left = value; } }, metadata: _metadata }, _left_initializers, _left_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(this, null, _supporting_decorators, { kind: "accessor", name: "supporting", static: false, private: false, access: { has: obj => "supporting" in obj, get: obj => obj.supporting, set: (obj, value) => { obj.supporting = value; } }, metadata: _metadata }, _supporting_initializers, _supporting_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 });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #open_accessor_storage = __runInitializers(this, _open_initializers, false);
+        get open() { return this.#open_accessor_storage; }
+        set open(value) { this.#open_accessor_storage = value; }
+        #variant_accessor_storage = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _variant_initializers, 'expanded'));
+        get variant() { return this.#variant_accessor_storage; }
+        set variant(value) { this.#variant_accessor_storage = value; }
+        #left_accessor_storage = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _left_initializers, false));
+        get left() { return this.#left_accessor_storage; }
+        set left(value) { this.#left_accessor_storage = value; }
+        #id_accessor_storage = (__runInitializers(this, _left_extraInitializers), __runInitializers(this, _id_initializers, void 0));
+        get id() { return this.#id_accessor_storage; }
+        set id(value) { this.#id_accessor_storage = value; }
+        #supporting_accessor_storage = (__runInitializers(this, _id_extraInitializers), __runInitializers(this, _supporting_initializers, void 0));
+        get supporting() { return this.#supporting_accessor_storage; }
+        set supporting(value) { this.#supporting_accessor_storage = value; }
+        onPaneClose({ detail }) {
+            if (this.id === detail) {
+                this.open = false;
+            }
+        }
+        connectedCallback() {
+            document.addEventListener('custom-pane-close', this.onPaneClose.bind(this));
+            document.addEventListener('custom-pane-open', ({ detail }) => {
+                if (this.id === detail)
+                    this.open = true;
+            });
+        }
+        render() {
+            return html `<style>
+        :host {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          background: var(--md-sys-color-surface);
+          color: var(--md-sys-color-on-surface);
+          width: 100%;
+          position: relative;
+          --supporting-pane-width: 360px;
+        }
+        .support {
+          position: absolute;
+          right: 0;
+        }
+
+        :host([left]) {
+          left: 0;
+          right: none;
+        }
+        :host([variant='expanded']) .support {
+          --custom-pane-width: var(--supporting-pane-width);
+        }
+        :host([variant='expanded']) {
+          flex-direction: row;
+        }
+
+        :host([variant='compact']) .support {
+          position: absolute;
+          flex-direction: row;
+        }
+        main {
+          width: 100%;
+        }
+        :host([open]) main {
+          width: calc(100% - var(--supporting-pane-width));
+        }
+      </style>
+      <main>
+        <slot></slot>
+      </main>
+      <custom-pane class="support" ?open=${this.open} ?right=${!this.left} .id=${this.id}>
+        <slot name="supporting">
+          <slot name="supporting-header" slot="header"></slot>
+          <slot name="supporting-content"></slot>
+        </slot>
+      </custom-pane>`;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _supporting_extraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomSupportingPane };

package/exports/tab.js

@@ -0,0 +1,47 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, html, LiteElement } from '@vandeurenglenn/lite';
+
+let CustomTab = (() => {
+    let _classDecorators = [customElement('custom-tab')];
+    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 });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        render() {
+            return html `
+      <style>
+        :host {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          height: 40px;
+          padding: 0 12px;
+          box-sizing: border-box;
+          width: auto;
+          font: var(--_supporting-text-type);
+          cursor: pointer;
+          white-space: nowrap;
+        }
+
+        slot {
+          pointer-events: none;
+        }
+      </style>
+      <slot></slot>
+    `;
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomTab };

package/exports/tabs/menu.d.ts

@@ -0,0 +1 @@
+export {};

package/exports/tabs/tab.d.ts

@@ -0,0 +1,4 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+export declare class CustomTab extends LiteElement {
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/tabs/tabs.d.ts

@@ -0,0 +1,5 @@
+import { SelectorBase } from '../mixins/selector-mixin.js';
+import './tab.js';
+export declare class CustomTabs extends SelectorBase {
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/tabs.js

@@ -0,0 +1,80 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, html } from '@vandeurenglenn/lite';
+import { SelectorBase } from './selector-mixin.js';
+import './tab.js';
+import './select-mixin.js';
+
+let CustomTabs = (() => {
+    let _classDecorators = [customElement('custom-tabs')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = SelectorBase;
+    (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 });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        // TODO: make scrollable
+        render() {
+            return html `
+      <style>
+        :host {
+          --custom-tabs-background: var(---md-sys-color-surface);
+          --selected-color: var(--md-sys-color-primary);
+          --selected-tab-color: var(--md-sys-color-primary);
+          --custom-tabs-shape: var(--md-sys-shape-corner-none);
+          --inactive-color: var(--md-sys-color-on-surface-variant);
+          display: flex;
+          flex-direction: row;
+          min-height: var(--custom-tabs-height, 64px);
+          overflow-x: auto;
+          background: var(--custom-tabs-background);
+          border-radius: var(--custom-tabs-shape);
+        }
+        ::slotted(*) {
+          color: var(--inactive-color);
+        }
+        ::slotted(.custom-selected) {
+          color: var(--selected-color);
+          border-bottom: 2px solid var(--selected-tab-color);
+        }
+
+        :host([round]) ::slotted(*) {
+          gap: 0;
+        }
+
+        :host([round]) ::slotted(.custom-selected) {
+          --md-sys-color-on-surface: var(--md-sys-color-on-tertiary);
+          color: var(--md-sys-color-on-tertiary);
+          background: var(--md-sys-color-tertiary);
+          border: none;
+          border-radius: var(--md-sys-shape-corner-extra-large);
+        }
+        ::-webkit-scrollbar {
+          width: 6px;
+          border-radius: 12px;
+        }
+        ::-webkit-scrollbar-track {
+          background: #f1f1f1;
+        }
+        ::-webkit-scrollbar-thumb {
+          background: #888;
+          border-radius: 12px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+          background: #555;
+        }
+      </style>
+      <slot></slot>
+    `;
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomTabs };

package/exports/text-field.js

@@ -0,0 +1,88 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, query, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+
+let TextField = (() => {
+    let _classDecorators = [customElement('text-field')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    let _leadingIconSlot_decorators;
+    let _leadingIconSlot_initializers = [];
+    let _leadingIconSlot_extraInitializers = [];
+    let _trailingIconSlot_decorators;
+    let _trailingIconSlot_initializers = [];
+    let _trailingIconSlot_extraInitializers = [];
+    let _hasLeadingIcon_decorators;
+    let _hasLeadingIcon_initializers = [];
+    let _hasLeadingIcon_extraInitializers = [];
+    let _hasTrailingIcon_decorators;
+    let _hasTrailingIcon_initializers = [];
+    let _hasTrailingIcon_extraInitializers = [];
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _leadingIconSlot_decorators = [query('slot[name="leading-icon"]')];
+            _trailingIconSlot_decorators = [query('slot[name="trailing-icon"]')];
+            _hasLeadingIcon_decorators = [property({ type: Boolean, reflect: true, attribute: 'has-leading-icon' })];
+            _hasTrailingIcon_decorators = [property({ type: Boolean, reflect: true, attribute: 'has-trailing-icon' })];
+            __esDecorate(this, null, _leadingIconSlot_decorators, { kind: "accessor", name: "leadingIconSlot", static: false, private: false, access: { has: obj => "leadingIconSlot" in obj, get: obj => obj.leadingIconSlot, set: (obj, value) => { obj.leadingIconSlot = value; } }, metadata: _metadata }, _leadingIconSlot_initializers, _leadingIconSlot_extraInitializers);
+            __esDecorate(this, null, _trailingIconSlot_decorators, { kind: "accessor", name: "trailingIconSlot", static: false, private: false, access: { has: obj => "trailingIconSlot" in obj, get: obj => obj.trailingIconSlot, set: (obj, value) => { obj.trailingIconSlot = value; } }, metadata: _metadata }, _trailingIconSlot_initializers, _trailingIconSlot_extraInitializers);
+            __esDecorate(this, null, _hasLeadingIcon_decorators, { kind: "accessor", name: "hasLeadingIcon", static: false, private: false, access: { has: obj => "hasLeadingIcon" in obj, get: obj => obj.hasLeadingIcon, set: (obj, value) => { obj.hasLeadingIcon = value; } }, metadata: _metadata }, _hasLeadingIcon_initializers, _hasLeadingIcon_extraInitializers);
+            __esDecorate(this, null, _hasTrailingIcon_decorators, { kind: "accessor", name: "hasTrailingIcon", static: false, private: false, access: { has: obj => "hasTrailingIcon" in obj, get: obj => obj.hasTrailingIcon, set: (obj, value) => { obj.hasTrailingIcon = value; } }, metadata: _metadata }, _hasTrailingIcon_initializers, _hasTrailingIcon_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 });
+        }
+        #leadingIconSlot_accessor_storage = __runInitializers(this, _leadingIconSlot_initializers, void 0);
+        get leadingIconSlot() { return this.#leadingIconSlot_accessor_storage; }
+        set leadingIconSlot(value) { this.#leadingIconSlot_accessor_storage = value; }
+        #trailingIconSlot_accessor_storage = (__runInitializers(this, _leadingIconSlot_extraInitializers), __runInitializers(this, _trailingIconSlot_initializers, void 0));
+        get trailingIconSlot() { return this.#trailingIconSlot_accessor_storage; }
+        set trailingIconSlot(value) { this.#trailingIconSlot_accessor_storage = value; }
+        #hasLeadingIcon_accessor_storage = (__runInitializers(this, _trailingIconSlot_extraInitializers), __runInitializers(this, _hasLeadingIcon_initializers, void 0));
+        get hasLeadingIcon() { return this.#hasLeadingIcon_accessor_storage; }
+        set hasLeadingIcon(value) { this.#hasLeadingIcon_accessor_storage = value; }
+        #hasTrailingIcon_accessor_storage = (__runInitializers(this, _hasLeadingIcon_extraInitializers), __runInitializers(this, _hasTrailingIcon_initializers, void 0));
+        get hasTrailingIcon() { return this.#hasTrailingIcon_accessor_storage; }
+        set hasTrailingIcon(value) { this.#hasTrailingIcon_accessor_storage = value; }
+        #leadingIconSlotChange = (__runInitializers(this, _hasTrailingIcon_extraInitializers), () => {
+            if (this.leadingIconSlot.assignedElements.length > 0)
+                this.hasLeadingIcon = true;
+            else
+                this.hasLeadingIcon = false;
+        });
+        #trailingIconSlotChange = () => {
+            if (this.trailingIconSlot.assignedElements.length > 0)
+                this.hasTrailingIcon = true;
+            else
+                this.hasTrailingIcon = false;
+        };
+        connectedCallback() {
+            this.leadingIconSlot.addEventListener('slotchange', this.#leadingIconSlotChange);
+            this.trailingIconSlot.addEventListener('slotchange', this.#trailingIconSlotChange);
+        }
+        static styles = [
+            css `
+      :host {
+        display: block;
+      }
+      .label {
+      }
+
+      :host([has-leading-icon]) {
+      }
+    `
+        ];
+        render() {
+            return html ` <slot name="leading-icon"></slot> `;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { TextField };

package/exports/theme/theme.d.ts

@@ -0,0 +1,15 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+export declare class CustomTheme extends LiteElement {
+    #private;
+    accessor loadFont: boolean;
+    accessor narrowTrigger: string;
+    accessor narrow: boolean;
+    constructor();
+    set language(value: string);
+    get language(): string;
+    /**
+     * loads given path and converst (when needed) to css variables
+     * @param {string} path
+     */
+    load(path: string): Promise<void>;
+}