@omegagrid/core 0.10.1 → 0.10.2

package/dist/ui/dropdown.js

@@ -1,300 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, css } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { ColorTypes } from '../types';
-import * as dom from '../common/dom';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { createRef, ref } from 'lit-html/directives/ref.js';
-import { guard } from 'lit/directives/guard.js';
-import { utils } from '../common';
-import { colorable } from '../themes';
-import constants from '../constants';
-export class DropdownEvent extends Event {
-    constructor(event) {
-        super(`dropdown.${event}`);
-    }
-}
-let DropdownContainer = class DropdownContainer extends LitElement {
-    constructor() {
-        super();
-        this.color = ColorTypes.Accent;
-        this.render = () => html `<div><slot name="inner-content"></slot></div>`;
-        this.addEventListener('mousedown', (e) => e.stopPropagation());
-    }
-};
-DropdownContainer.styles = css `
-		:host {
-			background-color: var(--og-background-color);
-			position: absolute;
-			overflow: hidden;
-			box-sizing: border-box;
-			color: var(--og-text-color);
-			z-index: 60000;
-			font-size: var(--og-font-size);
-			font-family: var(--og-font-family);
-			border-radius: var(--og-base-radius);
-			box-shadow: var(--og-base-shadow);
-		}
-
-		:host(.radiusfix-down) {
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
-		}
-
-		:host(.radiusfix-up) {
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
-		}
-	`;
-__decorate([
-    property({ type: String, reflect: true })
-], DropdownContainer.prototype, "color", void 0);
-DropdownContainer = __decorate([
-    customElement('og-dropdown-container'),
-    colorable({ props: ['border'] })
-], DropdownContainer);
-export { DropdownContainer };
-let Dropdown = class Dropdown extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.alignment = 'right';
-        this.openDirection = 'down';
-        this.positionOffset = 0;
-        this.dropdownParent = document.body;
-        this.animation = 0.1;
-        this.color = ColorTypes.Accent;
-        this.noCaret = false;
-        this.disabled = false;
-        this.dropdownRef = createRef();
-        this._onDocumentMouseDown = (e) => {
-            for (const elm of e.composedPath()) {
-                if (elm == this.dropdown || elm == this)
-                    return;
-            }
-            this.close();
-        };
-        this._onMousedown = async () => this.toggle();
-        this.renderDropdown = () => html `
-		<og-dropdown-container ${ref(this.dropdownRef)}
-			style="display: none">
-		</og-dropdown-container>
-	`;
-        this.renderLabel = () => {
-            if (utils.isString(this.label)) {
-                return this.label === '' ? unsafeHTML('&nbsp;') : html `<div class="text">${this.label}</div>`;
-            }
-            else {
-                return this.label;
-            }
-        };
-        this.render = () => html `
-		<og-button
-			@mousedown="${this._onMousedown}"
-			class="main"
-			color="${this.color}"
-			?disabled="${this.disabled}"
-			.icon="${this.icon}"
-			.caret="${this.noCaret ? 'none' : this.openDirection}">
-			${this.hasLabelSlot ? html `
-				<div class="label" slot="content"><slot name="label"></slot></div>
-			` : guard([this.label], () => (this.hasLabel ? html `
-				<div class="label" slot="content">${this.renderLabel()}</div>
-			` : ''))}
-		</og-button>
-
-		${this.renderDropdown()}
-	`;
-    }
-    get dropdown() { return this.dropdownRef?.value; }
-    get isOpen() { return this.dropdown && !dom.isHidden(this.dropdown); }
-    connectedCallback() {
-        super.connectedCallback();
-        this.tabIndex = 0;
-    }
-    animateDropdown(seconds) {
-        const height = this.dropdown.offsetHeight;
-        dom.setSize(this.dropdown, { h: 0 });
-        this.dropdown.style.transition = `height ${seconds}s ease-in-out`;
-        setTimeout(() => dom.setSize(this.dropdown, { h: height }), 0);
-        setTimeout(() => {
-            this.dropdown.style.height = 'auto';
-            this.dropdown.style.transition = '';
-            this.layout();
-        }, seconds * 1000);
-    }
-    async open() {
-        this.dispatchEvent(new DropdownEvent('beforeOpen'));
-        await this.updateComplete;
-        if (this.dropdown.parentElement !== this.dropdownParent) {
-            this.dropdownParent.appendChild(this.dropdown);
-        }
-        if (this.children.length > 0 && !this._contentElm) {
-            this._contentElm = [...this.children].find(elm => elm.slot == 'content');
-            if (this._contentElm) {
-                this._contentElm.slot = 'inner-content';
-                this.dropdown.appendChild(this._contentElm);
-            }
-        }
-        if (this.width > 0)
-            dom.setSize(this.dropdown, { w: this.width });
-        dom.showElement(this.dropdown);
-        this.requestUpdate();
-        await this.dropdown.updateComplete;
-        this.dispatchEvent(new DropdownEvent('open'));
-        this.layout();
-        if (this.animation > 0)
-            this.animateDropdown(this.animation);
-        document.body.addEventListener('mousedown', this._onDocumentMouseDown);
-    }
-    close() {
-        if (this.dropdown)
-            dom.hideElement(this.dropdown);
-        this.layout();
-        document.body.removeEventListener('mousedown', this._onDocumentMouseDown);
-    }
-    toggle() {
-        if (this.disabled)
-            return;
-        if (this.isOpen)
-            this.close();
-        else
-            this.open();
-    }
-    disconnectedCallback() {
-        this.dropdown?.remove();
-        super.disconnectedCallback();
-    }
-    get hasLabelSlot() {
-        return this.querySelector('[slot="label"]') != null;
-    }
-    get hasLabel() {
-        return this.label !== '' && this.label != null;
-    }
-    updated(props) {
-        super.updated(props);
-        if (this.dropdown)
-            this.dropdown.color = this.color == ColorTypes.Transparent ? ColorTypes.Accent : this.color;
-    }
-    get useRadiusFix() {
-        return this.isOpen && this.color != ColorTypes.Transparent;
-    }
-    layout() {
-        this.classList.toggle(`radiusfix-${this.openDirection}`, this.useRadiusFix);
-        if (!this.dropdown)
-            return;
-        this.dropdown.classList.toggle(`radiusfix-${this.openDirection}`, this.useRadiusFix);
-        if (!this.isOpen)
-            return;
-        const offset = dom.getElementOffset(this, this.dropdownParent);
-        dom.setSize(this.dropdown, { w: this.offsetWidth }, true);
-        const pos = { t: 'unset', b: 'unset', l: 'unset', r: 'unset' };
-        if (this.openDirection == 'down') {
-            pos.t = offset.top + this.offsetHeight - 1;
-        }
-        else {
-            pos.t = offset.top - this.dropdown.offsetHeight + 1;
-        }
-        if (this.alignment == 'left') {
-            this.dropdown.style.right = 'auto';
-            pos.l = this.positionOffset + offset.left;
-        }
-        else {
-            this.dropdown.style.left = 'auto';
-            pos.r = this.dropdownParent.clientWidth - this.positionOffset - offset.left - this.offsetWidth;
-        }
-        dom.setPosition(this.dropdown, pos);
-        dom.fixElementPosition(this.dropdown);
-    }
-};
-Dropdown.styles = [css `
-		:host {
-			box-sizing: border-box;
-			display: flex;
-			align-items: stretch;
-			flex-direction: row;
-			font-size: var(--og-font-size);
-			font-family: var(--og-font-family);
-			cursor: pointer;
-			user-select: none;
-			outline: none;
-			border-radius: var(--og-base-radius);
-			height: ${constants.BUTTON_HEIGHT}px;
-		}
-
-		:host(.radiusfix-down) {
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
-		}
-
-		:host(.radiusfix-up) {
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
-		}
-
-		:host([disabled]) {
-			border-color: var(--og-colortype-gray-border-color);
-		}
-
-		div.text {
-			flex: 1;
-			color: var(--og-text-color-1);
-			padding-left: 2px;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-		}
-
-		og-button {
-			flex: 1;
-			border-radius: 0;
-			border: none;
-			height: 100%;
-		}
-	`];
-__decorate([
-    property({ type: String })
-], Dropdown.prototype, "alignment", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], Dropdown.prototype, "openDirection", void 0);
-__decorate([
-    property({ type: Number })
-], Dropdown.prototype, "positionOffset", void 0);
-__decorate([
-    property({ type: Object })
-], Dropdown.prototype, "dropdownParent", void 0);
-__decorate([
-    property({ type: Number })
-], Dropdown.prototype, "animation", void 0);
-__decorate([
-    property()
-], Dropdown.prototype, "label", void 0);
-__decorate([
-    property()
-], Dropdown.prototype, "icon", void 0);
-__decorate([
-    property({ type: Number })
-], Dropdown.prototype, "width", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], Dropdown.prototype, "color", void 0);
-__decorate([
-    property({ type: Boolean })
-], Dropdown.prototype, "noCaret", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Dropdown.prototype, "disabled", void 0);
-__decorate([
-    query('.label')
-], Dropdown.prototype, "labelElm", void 0);
-Dropdown = __decorate([
-    customElement('og-dropdown'),
-    colorable({ props: ['border'] })
-], Dropdown);
-export { Dropdown };
-//# sourceMappingURL=dropdown.js.map

package/dist/ui/dropdown.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/ui/dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ColorTypes, CssPosition, Layout, VerticalDirection } from '../types';\nimport * as dom from '../common/dom';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { createRef, ref } from 'lit-html/directives/ref.js';\nimport { guard } from 'lit/directives/guard.js';\nimport { IconSpec } from './icon';\nimport { utils } from '../common';\nimport { colorable } from '../themes';\nimport constants from '../constants';\n\nexport class DropdownEvent extends Event {\n\n\tconstructor(event: string) {\n\t\tsuper(`dropdown.${event}`);\n\t}\n}\n\n@customElement('og-dropdown-container')\n@colorable({props: ['border']})\nexport class DropdownContainer extends LitElement {\n\n\tstatic styles = css`\n\t\t:host {\n\t\t\tbackground-color: var(--og-background-color);\n\t\t\tposition: absolute;\n\t\t\toverflow: hidden;\n\t\t\tbox-sizing: border-box;\n\t\t\tcolor: var(--og-text-color);\n\t\t\tz-index: 60000;\n\t\t\tfont-size: var(--og-font-size);\n\t\t\tfont-family: var(--og-font-family);\n\t\t\tborder-radius: var(--og-base-radius);\n\t\t\tbox-shadow: var(--og-base-shadow);\n\t\t}\n\n\t\t:host(.radiusfix-down) {\n\t\t\tborder-top-left-radius: 0;\n\t\t\tborder-top-right-radius: 0;\n\t\t}\n\n\t\t:host(.radiusfix-up) {\n\t\t\tborder-bottom-left-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t}\n\t`;\n\n\t@property({type: String, reflect: true})\n\tcolor = ColorTypes.Accent;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('mousedown', (e: MouseEvent) => e.stopPropagation());\n\t}\n\n\trender = () => html`<div><slot name=\"inner-content\"></slot></div>`;\n}\n\n@customElement('og-dropdown')\n@colorable({props: ['border']})\nexport class Dropdown extends LitElement implements Layout {\n\n\tstatic styles = [css`\n\t\t:host {\n\t\t\tbox-sizing: border-box;\n\t\t\tdisplay: flex;\n\t\t\talign-items: stretch;\n\t\t\tflex-direction: row;\n\t\t\tfont-size: var(--og-font-size);\n\t\t\tfont-family: var(--og-font-family);\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n\t\t\toutline: none;\n\t\t\tborder-radius: var(--og-base-radius);\n\t\t\theight: ${constants.BUTTON_HEIGHT}px;\n\t\t}\n\n\t\t:host(.radiusfix-down) {\n\t\t\tborder-bottom-left-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t}\n\n\t\t:host(.radiusfix-up) {\n\t\t\tborder-top-left-radius: 0;\n\t\t\tborder-top-right-radius: 0;\n\t\t}\n\n\t\t:host([disabled]) {\n\t\t\tborder-color: var(--og-colortype-gray-border-color);\n\t\t}\n\n\t\tdiv.text {\n\t\t\tflex: 1;\n\t\t\tcolor: var(--og-text-color-1);\n\t\t\tpadding-left: 2px;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\tog-button {\n\t\t\tflex: 1;\n\t\t\tborder-radius: 0;\n\t\t\tborder: none;\n\t\t\theight: 100%;\n\t\t}\n\t`];\n\n\t@property({type: String})\n\talignment: 'left'|'right' = 'right';\n\n\t@property({type: String, reflect: true})\n\topenDirection: VerticalDirection = 'down';\n\n\t@property({type: Number})\n\tpositionOffset = 0;\n\n\t@property({type: Object})\n\tdropdownParent: HTMLElement = document.body;\n\n\t@property({type: Number})\n\tanimation = 0.1;\n\n\t@property()\n\tlabel: string|HTMLElement|TemplateResult;\n\n\t@property()\n\ticon: IconSpec|string;\n\n\t@property({type: Number})\n\twidth: number;\n\n\t@property({type: String, reflect: true})\n\tcolor = ColorTypes.Accent;\n\n\t@property({type: Boolean})\n\tnoCaret = false;\n\n\t@property({type: Boolean, reflect: true})\n\tdisabled = false;\n\n\t@query('.label')\n\tlabelElm: HTMLDivElement;\n\n\tprivate _contentElm: HTMLElement;\n\n\tprotected dropdownRef = createRef<DropdownContainer>();\n\tget dropdown() { return this.dropdownRef?.value }\n\n\tget isOpen() { return this.dropdown && !dom.isHidden(this.dropdown) }\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis.tabIndex = 0;\n\t}\n\n\t_onDocumentMouseDown = (e: MouseEvent) => {\n\t\tfor (const elm of e.composedPath()) {\n\t\t\tif (elm == this.dropdown || elm == this) return;\n\t\t}\n\t\tthis.close();\n\t}\n\n\tanimateDropdown(seconds: number) {\n\t\tconst height = this.dropdown.offsetHeight;\n\t\tdom.setSize(this.dropdown, {h: 0});\n\t\tthis.dropdown.style.transition = `height ${seconds}s ease-in-out`;\n\t\tsetTimeout(() => dom.setSize(this.dropdown, {h: height}), 0);\n\t\tsetTimeout(() => {\n\t\t\tthis.dropdown.style.height = 'auto';\n\t\t\tthis.dropdown.style.transition = '';\n\t\t\tthis.layout();\n\t\t}, seconds * 1000);\n\t}\n\n\tasync open() {\n\t\tthis.dispatchEvent(new DropdownEvent('beforeOpen'));\n\t\tawait this.updateComplete;\n\t\t\n\t\tif (this.dropdown.parentElement !== this.dropdownParent) {\n\t\t\tthis.dropdownParent.appendChild(this.dropdown);\n\t\t}\n\n\t\tif (this.children.length > 0 && !this._contentElm) {\n\t\t\tthis._contentElm = [...this.children].find(elm => elm.slot == 'content') as HTMLElement;\n\t\t\tif (this._contentElm) {\n\t\t\t\tthis._contentElm.slot = 'inner-content';\n\t\t\t\tthis.dropdown.appendChild(this._contentElm);\n\t\t\t}\n\t\t}\n\n\t\tif (this.width > 0) dom.setSize(this.dropdown, {w: this.width});\n\t\tdom.showElement(this.dropdown);\n\t\tthis.requestUpdate();\n\t\tawait this.dropdown.updateComplete;\n\t\tthis.dispatchEvent(new DropdownEvent('open'));\n\t\tthis.layout();\n\n\t\tif (this.animation > 0) this.animateDropdown(this.animation);\n\n\t\tdocument.body.addEventListener('mousedown', this._onDocumentMouseDown);\n\t}\n\n\tclose() {\n\t\tif (this.dropdown) dom.hideElement(this.dropdown);\n\t\tthis.layout();\n\t\tdocument.body.removeEventListener('mousedown', this._onDocumentMouseDown);\n\t}\n\n\ttoggle() {\n\t\tif (this.disabled) return;\n\t\tif (this.isOpen) this.close();\n\t\telse this.open();\n\t}\n\n\t_onMousedown = async () => this.toggle();\n\n\tdisconnectedCallback() {\n\t\tthis.dropdown?.remove();\n\t\tsuper.disconnectedCallback();\n\t}\n\n\trenderDropdown = () => html`\n\t\t<og-dropdown-container ${ref(this.dropdownRef)}\n\t\t\tstyle=\"display: none\">\n\t\t</og-dropdown-container>\n\t`;\n\n\trenderLabel = () => {\n\t\tif (utils.isString(this.label)) {\n\t\t\treturn this.label === '' ? unsafeHTML('&nbsp;') : html`<div class=\"text\">${this.label}</div>`;\n\t\t} else {\n\t\t\treturn this.label;\n\t\t}\n\t};\n\n\tget hasLabelSlot() {\n\t\treturn this.querySelector('[slot=\"label\"]') != null;\n\t}\n\n\tget hasLabel() {\n\t\treturn this.label !== '' && this.label != null;\n\t}\n\n\tupdated(props: Map<string, unknown>) {\n\t\tsuper.updated(props);\n\t\tif (this.dropdown) this.dropdown.color = this.color == ColorTypes.Transparent ? ColorTypes.Accent : this.color;\n\t}\n\n\trender = () => html`\n\t\t<og-button\n\t\t\t@mousedown=\"${this._onMousedown}\"\n\t\t\tclass=\"main\"\n\t\t\tcolor=\"${this.color}\"\n\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t.icon=\"${this.icon}\"\n\t\t\t.caret=\"${this.noCaret ? 'none' : this.openDirection}\">\n\t\t\t${this.hasLabelSlot ? html`\n\t\t\t\t<div class=\"label\" slot=\"content\"><slot name=\"label\"></slot></div>\n\t\t\t` : guard([this.label], () => (this.hasLabel ? html`\n\t\t\t\t<div class=\"label\" slot=\"content\">${this.renderLabel()}</div>\n\t\t\t` : ''))}\n\t\t</og-button>\n\n\t\t${this.renderDropdown()}\n\t`;\n\n\tget useRadiusFix() {\n\t\treturn this.isOpen && this.color != ColorTypes.Transparent;\n\t}\n\n\tlayout() {\n\t\tthis.classList.toggle(`radiusfix-${this.openDirection}`, this.useRadiusFix);\n\t\tif (!this.dropdown) return;\n\t\tthis.dropdown.classList.toggle(`radiusfix-${this.openDirection}`, this.useRadiusFix);\n\t\tif (!this.isOpen) return;\n\n\t\tconst offset = dom.getElementOffset(this, this.dropdownParent);\n\t\tdom.setSize(this.dropdown, {w: this.offsetWidth}, true);\n\n\t\tconst pos: CssPosition = {t: 'unset', b: 'unset', l: 'unset', r: 'unset'};\n\n\t\tif (this.openDirection == 'down') {\n\t\t\tpos.t = offset.top + this.offsetHeight - 1;\n\t\t} else {\n\t\t\tpos.t = offset.top - this.dropdown.offsetHeight + 1;\n\t\t}\n\n\t\tif (this.alignment == 'left') {\n\t\t\tthis.dropdown.style.right = 'auto';\n\t\t\tpos.l = this.positionOffset + offset.left;\n\t\t} else {\n\t\t\tthis.dropdown.style.left = 'auto';\n\t\t\tpos.r = this.dropdownParent.clientWidth - this.positionOffset - offset.left - this.offsetWidth;\n\t\t}\n\n\t\tdom.setPosition(this.dropdown, pos);\n\t\tdom.fixElementPosition(this.dropdown);\n\t}\n\n}"]}

package/dist/ui/dropdownColorPicker.d.ts

@@ -1,12 +0,0 @@
-import { Dropdown } from './dropdown';
-import { ColorPicker } from './colorpicker';
-export declare class DropdownColorPicker extends Dropdown {
-    static styles: import("lit").CSSResult[];
-    value: string;
-    _picker: ColorPicker;
-    get picker(): ColorPicker;
-    updateLabel(): void;
-    willUpdate(): void;
-    constructor();
-}
-//# sourceMappingURL=dropdownColorPicker.d.ts.map

package/dist/ui/dropdownColorPicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdownColorPicker.d.ts","sourceRoot":"","sources":["../../src/ui/dropdownColorPicker.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,qBACa,mBAAoB,SAAQ,QAAQ;IAEhD,MAAM,CAAC,MAAM,4BAMV;IAGH,KAAK,EAAE,MAAM,CAAC;IAEd,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,MAAM,gBAeT;IAED,WAAW;IAQX,UAAU;;CAWV"}

package/dist/ui/dropdownColorPicker.js

@@ -1,60 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { colors, dom, events } from '../common';
-import { customElement, property } from 'lit/decorators.js';
-import { Dropdown } from './dropdown';
-import { css, html } from 'lit';
-let DropdownColorPicker = class DropdownColorPicker extends Dropdown {
-    get picker() {
-        if (this._picker)
-            return this._picker;
-        this._picker = dom.createElement('og-colorpicker');
-        this._picker.slot = 'inner-content';
-        this._picker.style.border = 'none';
-        this._picker.style.minWidth = '100%';
-        this._picker.addEventListener('change', (e) => {
-            this.value = e.value;
-            this.updateLabel();
-            this.close();
-            this.dispatchEvent(new events.ChangeEvent(this.value));
-        });
-        this._picker.addEventListener('render', () => this.layout());
-        this.dropdown.appendChild(this._picker);
-        return this._picker;
-    }
-    updateLabel() {
-        this.label = this.value ? html `
-			<div style="background: ${this.value}; color: ${colors.contrastColor(this.value)}; padding: 2px">${this.value}</div>
-		` : html `
-			<div style="padding: 2px">&nbsp;</div>
-		`;
-    }
-    willUpdate() {
-        this.value = colors.css(this.value);
-        this.updateLabel();
-    }
-    constructor() {
-        super();
-        this.addEventListener('dropdown.beforeOpen', () => this.picker);
-        this.addEventListener('dropdown.open', () => this.picker.focus());
-    }
-};
-DropdownColorPicker.styles = [...Dropdown.styles, css `
-		og-button {
-			padding-top: 0;
-			padding-left: 0;
-			padding-bottom: 0;
-		}	
-	`];
-__decorate([
-    property({ type: String })
-], DropdownColorPicker.prototype, "value", void 0);
-DropdownColorPicker = __decorate([
-    customElement(`og-dropdown-colorpicker`)
-], DropdownColorPicker);
-export { DropdownColorPicker };
-//# sourceMappingURL=dropdownColorPicker.js.map

package/dist/ui/dropdownColorPicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdownColorPicker.js","sourceRoot":"","sources":["../../src/ui/dropdownColorPicker.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAGzB,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,QAAQ;IAchD,IAAI,MAAM;QACT,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,aAAa,CAAc,gBAAgB,CAAC,CAAC;QAChE,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,eAAe,CAAC;QACpC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QACnC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC;QACrC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAqB,EAAE,EAAE;YACjE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,KAAe,CAAC;YAC/B,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,IAAI,CAAC,aAAa,CAAC,IAAI,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAC7D,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACxC,OAAO,IAAI,CAAC,OAAO,CAAC;IACrB,CAAC;IAED,WAAW;QACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA;6BACH,IAAI,CAAC,KAAK,YAAY,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,IAAI,CAAC,KAAK;GAC7G,CAAC,CAAC,CAAC,IAAI,CAAA;;GAEP,CAAC;IACH,CAAC;IAED,UAAU;QACT,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,CAAC,WAAW,EAAE,CAAC;IACpB,CAAC;IAED;QACC,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChE,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IACnE,CAAC;;AA9CM,0BAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,GAAG,CAAA;;;;;;EAMvC,CAAC,AANW,CAMV;AAGH;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;kDACX;AAXF,mBAAmB;IAD/B,aAAa,CAAC,yBAAyB,CAAC;GAC5B,mBAAmB,CAkD/B","sourcesContent":["import { colors, dom, events } from '../common';\nimport { customElement, property } from 'lit/decorators.js';\nimport { Dropdown } from './dropdown';\nimport { ColorPicker } from './colorpicker';\nimport { css, html } from 'lit';\n\n@customElement(`og-dropdown-colorpicker`)\nexport class DropdownColorPicker extends Dropdown {\n\n\tstatic styles = [...Dropdown.styles, css`\n\t\tog-button {\n\t\t\tpadding-top: 0;\n\t\t\tpadding-left: 0;\n\t\t\tpadding-bottom: 0;\n\t\t}\t\n\t`];\n\n\t@property({type: String})\n\tvalue: string;\n\n\t_picker: ColorPicker;\n\tget picker() {\n\t\tif (this._picker) return this._picker;\n\t\tthis._picker = dom.createElement<ColorPicker>('og-colorpicker');\n\t\tthis._picker.slot = 'inner-content';\n\t\tthis._picker.style.border = 'none';\n\t\tthis._picker.style.minWidth = '100%';\n\t\tthis._picker.addEventListener('change', (e: events.ChangeEvent) => {\n\t\t\tthis.value = e.value as string;\n\t\t\tthis.updateLabel();\n\t\t\tthis.close();\n\t\t\tthis.dispatchEvent(new events.ChangeEvent(this.value));\n\t\t});\n\t\tthis._picker.addEventListener('render', () => this.layout());\n\t\tthis.dropdown.appendChild(this._picker);\n\t\treturn this._picker;\n\t}\n\n\tupdateLabel() {\n\t\tthis.label = this.value ? html`\n\t\t\t<div style=\"background: ${this.value}; color: ${colors.contrastColor(this.value)}; padding: 2px\">${this.value}</div>\n\t\t` : html`\n\t\t\t<div style=\"padding: 2px\">&nbsp;</div>\n\t\t`; \n\t}\n\n\twillUpdate() {\n\t\tthis.value = colors.css(this.value);\n\t\tthis.updateLabel();\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('dropdown.beforeOpen', () => this.picker);\n\t\tthis.addEventListener('dropdown.open', () => this.picker.focus());\n\t}\n\t\n}"]}

package/dist/ui/dropdownList.d.ts

@@ -1,8 +0,0 @@
-import { DropdownMenu } from './dropdownMenu';
-export declare class DropdownList extends DropdownMenu {
-    value: string | number | boolean;
-    constructor();
-    open(): Promise<void>;
-    willUpdate(props: Map<string, unknown>): void;
-}
-//# sourceMappingURL=dropdownList.d.ts.map

package/dist/ui/dropdownList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdownList.d.ts","sourceRoot":"","sources":["../../src/ui/dropdownList.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,qBACa,YAAa,SAAQ,YAAY;IAG7C,KAAK,EAAE,MAAM,GAAC,MAAM,GAAC,OAAO,CAAC;;IAWvB,IAAI;IAQV,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;CAatC"}

package/dist/ui/dropdownList.js

@@ -1,48 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { customElement, property } from 'lit/decorators.js';
-import { ChangeEvent } from '../common/events';
-import { DropdownMenu } from './dropdownMenu';
-let DropdownList = class DropdownList extends DropdownMenu {
-    constructor() {
-        super();
-        this.label = String.fromCharCode(160);
-        this.addEventListener('menu.select', (e) => {
-            this.value = e.item.key ?? e.item.k;
-            this.dispatchEvent(new ChangeEvent(this.value));
-        });
-    }
-    async open() {
-        await super.open();
-        if (this.value != null) {
-            const index = this.items.findIndex(i => i.key == this.value);
-            if (index > -1)
-                setTimeout(() => this.menu.list.scrollToIndex(index), 10);
-        }
-    }
-    willUpdate(props) {
-        super.willUpdate(props);
-        if (props.has('value')) {
-            const index = this.items.findIndex(i => (i.key ?? i.k) == this.value);
-            if (index > -1) {
-                const item = this.items[index];
-                this.label = item.renderer ? item.renderer(this.labelElm, index, item) : (item.value ?? item.v);
-            }
-            else {
-                this.label = this.value;
-            }
-        }
-    }
-};
-__decorate([
-    property()
-], DropdownList.prototype, "value", void 0);
-DropdownList = __decorate([
-    customElement(`og-dropdown-list`)
-], DropdownList);
-export { DropdownList };
-//# sourceMappingURL=dropdownList.js.map

package/dist/ui/dropdownList.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdownList.js","sourceRoot":"","sources":["../../src/ui/dropdownList.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGvC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,YAAY;IAK7C;QACC,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;QACtC,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,CAAC,CAAY,EAAE,EAAE;YACrD,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;YACpC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACjD,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,KAAK,CAAC,IAAI;QACT,MAAM,KAAK,CAAC,IAAI,EAAE,CAAC;QACnB,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,EAAE,CAAC;YACxB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;YAC7D,IAAI,KAAK,GAAG,CAAC,CAAC;gBAAE,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAC3E,CAAC;IACF,CAAC;IAED,UAAU,CAAC,KAA2B;QACrC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACxB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;YACtE,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC;gBAChB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC;YACjG,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAe,CAAC;YACnC,CAAC;QACF,CAAC;IACF,CAAC;CAED,CAAA;AAhCA;IADC,QAAQ,EAAE;2CACkB;AAHjB,YAAY;IADxB,aAAa,CAAC,kBAAkB,CAAC;GACrB,YAAY,CAmCxB","sourcesContent":["import { customElement, property } from 'lit/decorators.js';\nimport { MenuEvent } from './menu';\nimport { ChangeEvent } from '../common/events';\nimport { DropdownMenu } from './dropdownMenu';\n\n@customElement(`og-dropdown-list`)\nexport class DropdownList extends DropdownMenu {\n\n\t@property()\n\tvalue: string|number|boolean;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.label = String.fromCharCode(160);\n\t\tthis.addEventListener('menu.select', (e: MenuEvent) => {\n\t\t\tthis.value = e.item.key ?? e.item.k;\n\t\t\tthis.dispatchEvent(new ChangeEvent(this.value));\n\t\t});\n\t}\n\n\tasync open() {\n\t\tawait super.open();\n\t\tif (this.value != null) {\n\t\t\tconst index = this.items.findIndex(i => i.key == this.value);\n\t\t\tif (index > -1) setTimeout(() => this.menu.list.scrollToIndex(index), 10);\n\t\t}\n\t}\n\n\twillUpdate(props: Map<string, unknown>) {\n\t\tsuper.willUpdate(props);\n\t\tif (props.has('value')) {\n\t\t\tconst index = this.items.findIndex(i => (i.key ?? i.k) == this.value);\n\t\t\tif (index > -1) {\n\t\t\t\tconst item = this.items[index];\n\t\t\t\tthis.label = item.renderer ? item.renderer(this.labelElm, index, item) : (item.value ?? item.v);\n\t\t\t} else {\n\t\t\t\tthis.label = this.value as string;\n\t\t\t}\n\t\t}\n\t}\n\t\n}"]}

package/dist/ui/dropdownMenu.d.ts

@@ -1,11 +0,0 @@
-import { Dropdown } from './dropdown';
-import { Menu, MenuItem } from './menu';
-export declare class DropdownMenu extends Dropdown {
-    items: MenuItem[];
-    dynamicWidth: boolean;
-    private _menu;
-    get menu(): Menu;
-    constructor();
-    updated(props: Map<string, unknown>): void;
-}
-//# sourceMappingURL=dropdownMenu.d.ts.map

package/dist/ui/dropdownMenu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdownMenu.d.ts","sourceRoot":"","sources":["../../src/ui/dropdownMenu.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAa,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEnD,qBACa,YAAa,SAAQ,QAAQ;IAGzC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAGlB,YAAY,UAAS;IAErB,OAAO,CAAC,KAAK,CAAO;IAEpB,IAAI,IAAI,SAoBP;;IAWD,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;CAQnC"}

package/dist/ui/dropdownMenu.js

@@ -1,61 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { dom } from '../common';
-import { customElement, property } from 'lit/decorators.js';
-import { Dropdown } from './dropdown';
-import { MenuEvent } from './menu';
-let DropdownMenu = class DropdownMenu extends Dropdown {
-    get menu() {
-        if (this._menu)
-            return this._menu;
-        this._menu = dom.createElement('og-menu', {
-            slot: 'inner-content',
-            dynamicWidth: this.dynamicWidth,
-            items: this.items,
-            style: {
-                border: 'none',
-                minWidth: '100%'
-            },
-            listeners: [
-                ['render', () => this.layout()],
-                ['menu.select', (e) => {
-                        this.close();
-                        this.dispatchEvent(new MenuEvent('select', e.item));
-                    }]
-            ]
-        });
-        this.dropdown.appendChild(this._menu);
-        return this._menu;
-    }
-    constructor() {
-        super();
-        this.dynamicWidth = false;
-        this.addEventListener('dropdown.beforeOpen', () => this.menu);
-        this.addEventListener('dropdown.open', () => {
-            this.menu.focus();
-            setTimeout(() => this.layout(), 0);
-        });
-    }
-    updated(props) {
-        super.updated(props);
-        if (this._menu) {
-            this._menu.dynamicWidth = this.dynamicWidth;
-            this._menu.items = this.items;
-        }
-    }
-};
-__decorate([
-    property({ type: Array })
-], DropdownMenu.prototype, "items", void 0);
-__decorate([
-    property({ type: Boolean })
-], DropdownMenu.prototype, "dynamicWidth", void 0);
-DropdownMenu = __decorate([
-    customElement(`og-dropdown-menu`)
-], DropdownMenu);
-export { DropdownMenu };
-//# sourceMappingURL=dropdownMenu.js.map

package/dist/ui/dropdownMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdownMenu.js","sourceRoot":"","sources":["../../src/ui/dropdownMenu.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAQ,SAAS,EAAY,MAAM,QAAQ,CAAC;AAG5C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,QAAQ;IAUzC,IAAI,IAAI;QACP,IAAI,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC;QAClC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,aAAa,CAAO,SAAS,EAAE;YAC/C,IAAI,EAAE,eAAe;YACrB,YAAY,EAAE,IAAI,CAAC,YAAY;YAC/B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,KAAK,EAAE;gBACN,MAAM,EAAE,MAAM;gBACd,QAAQ,EAAE,MAAM;aAChB;YACD,SAAS,EAAE;gBACV,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;gBAC/B,CAAC,aAAa,EAAE,CAAC,CAAY,EAAE,EAAE;wBAChC,IAAI,CAAC,KAAK,EAAE,CAAC;wBACb,IAAI,CAAC,aAAa,CAAC,IAAI,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;oBACrD,CAAC,CAAC;aACF;SACD,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC,KAAK,CAAC;IACnB,CAAC;IAED;QACC,KAAK,EAAE,CAAC;QA3BT,iBAAY,GAAG,KAAK,CAAC;QA4BpB,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC9D,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE;YAC3C,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAClB,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,KAA2B;QAClC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;YAC5C,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAC/B,CAAC;IACF,CAAC;CAED,CAAA;AA9CA;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;2CACN;AAGlB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;kDACL;AANT,YAAY;IADxB,aAAa,CAAC,kBAAkB,CAAC;GACrB,YAAY,CAiDxB","sourcesContent":["import { dom } from '../common';\nimport { customElement, property } from 'lit/decorators.js';\nimport { Dropdown } from './dropdown';\nimport { Menu, MenuEvent, MenuItem } from './menu';\n\n@customElement(`og-dropdown-menu`)\nexport class DropdownMenu extends Dropdown {\n\n\t@property({type: Array})\n\titems: MenuItem[];\n\n\t@property({type: Boolean})\n\tdynamicWidth = false;\n\n\tprivate _menu: Menu;\n\n\tget menu() {\n\t\tif (this._menu) return this._menu;\n\t\tthis._menu = dom.createElement<Menu>('og-menu', {\n\t\t\tslot: 'inner-content',\n\t\t\tdynamicWidth: this.dynamicWidth,\n\t\t\titems: this.items,\n\t\t\tstyle: {\n\t\t\t\tborder: 'none',\n\t\t\t\tminWidth: '100%'\n\t\t\t},\n\t\t\tlisteners: [\n\t\t\t\t['render', () => this.layout()],\n\t\t\t\t['menu.select', (e: MenuEvent) => {\n\t\t\t\t\tthis.close();\n\t\t\t\t\tthis.dispatchEvent(new MenuEvent('select', e.item));\n\t\t\t\t}]\n\t\t\t]\n\t\t});\n\t\tthis.dropdown.appendChild(this._menu);\n\t\treturn this._menu;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('dropdown.beforeOpen', () => this.menu);\n\t\tthis.addEventListener('dropdown.open', () => {\n\t\t\tthis.menu.focus();\n\t\t\tsetTimeout(() => this.layout(), 0);\n\t\t});\n\t}\n\n\tupdated(props: Map<string, unknown>) {\n\t\tsuper.updated(props);\n\t\tif (this._menu) {\n\t\t\tthis._menu.dynamicWidth = this.dynamicWidth;\n\t\t\tthis._menu.items = this.items;\n\t\t}\n\t}\n\t\n}"]}

package/dist/ui/expander.d.ts

@@ -1,28 +0,0 @@
-import { LitElement } from 'lit';
-export type ExpanderState = 'open' | 'closed' | 'waiting';
-export declare class ExpandEvent extends Event {
-    readonly state?: ExpanderState;
-    get collapsed(): boolean;
-    get closed(): boolean;
-    constructor(state?: ExpanderState);
-}
-export declare class LevelExpandEvent extends ExpandEvent {
-    readonly level: number;
-    constructor(level: number);
-}
-export declare class Expander extends LitElement {
-    static styles: import("lit").CSSResult[];
-    state: ExpanderState;
-    collapsedImage: string;
-    expandedImage: string;
-    toggle: () => "open" | "closed";
-    constructor();
-    render: () => import("lit-html").TemplateResult<1>;
-}
-export declare class LevelExpander extends LitElement {
-    static styles: import("lit").CSSResult[];
-    level: number;
-    render(): import("lit-html").TemplateResult<1>;
-    constructor();
-}
-//# sourceMappingURL=expander.d.ts.map

package/dist/ui/expander.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"expander.d.ts","sourceRoot":"","sources":["../../src/ui/expander.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AA2BvD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAC,QAAQ,GAAC,SAAS,CAAC;AAEtD,qBAAa,WAAY,SAAQ,KAAK;aAKT,KAAK,CAAC,EAAE,aAAa;IAHjD,IAAI,SAAS,YAAoC;IACjD,IAAI,MAAM,YAA6B;gBAEX,KAAK,CAAC,EAAE,aAAa;CAIjD;AAED,qBAAa,gBAAiB,SAAQ,WAAW;aACpB,KAAK,EAAE,MAAM;gBAAb,KAAK,EAAE,MAAM;CAGzC;AAED,qBACa,QAAS,SAAQ,UAAU;IAEvC,MAAM,CAAC,MAAM,4BAoCX;IAGF,KAAK,EAAE,aAAa,CAAC;IAGrB,cAAc,EAAE,MAAM,CAAC;IAGvB,aAAa,EAAE,MAAM,CAAC;IAEtB,MAAM,0BAAiE;;IAcvE,MAAM,6CAEJ;CAEF;AAED,qBACa,aAAc,SAAQ,UAAU;IAE5C,MAAM,CAAC,MAAM,4BAUX;IAGF,KAAK,EAAE,MAAM,CAAC;IAEd,MAAM;;CAeN"}