@node-projects/web-component-designer 0.0.93 → 0.0.96

package/dist/elements/controls/DesignerTabControl.js

@@ -1,13 +1,13 @@
-import { BaseCustomWebComponentLazyAppend, css, TypedEvent, DomHelper } from '@node-projects/base-custom-webcomponent';
-export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
-    _selectedIndex = -1;
-    _contentObserver;
-    _panels;
-    _headerDiv;
-    _moreDiv;
-    _moreContainer;
-    _elementMap = new WeakMap();
-    _firstConnect = true;
+import { BaseCustomWebComponentLazyAppend, css, TypedEvent, DomHelper } from '@node-projects/base-custom-webcomponent';
+export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
+    _selectedIndex = -1;
+    _contentObserver;
+    _panels;
+    _headerDiv;
+    _moreDiv;
+    _moreContainer;
+    _elementMap = new WeakMap();
+    _firstConnect = true;
     static style = css `
         :host {
             height: 100%;
@@ -94,130 +94,130 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
             background: var(--medium-grey, #2f3545);
             height: calc(100% - 30px);
         }
-        `;
-    constructor() {
-        super();
-        this._contentObserver = new MutationObserver(() => {
-            this.refreshItems();
-        });
-        let outerDiv = document.createElement("div");
-        outerDiv.className = 'outer';
-        this.shadowRoot.appendChild(outerDiv);
-        this._headerDiv = document.createElement("div");
-        this._headerDiv.className = 'header';
-        outerDiv.appendChild(this._headerDiv);
-        this._moreDiv = document.createElement("div");
-        this._moreDiv.className = "header header-more";
-        this._moreDiv.innerText = "<<";
-        outerDiv.appendChild(this._moreDiv);
-        this._moreContainer = document.createElement("div");
-        this._moreContainer.className = "more-container";
-        this._moreContainer.style.visibility = "hidden";
-        outerDiv.appendChild(this._moreContainer);
-        this._moreDiv.onclick = () => {
-            if (this._moreContainer.children.length && this._moreContainer.style.visibility == "hidden")
-                this._moreContainer.style.visibility = 'visible';
-            else
-                this._moreContainer.style.visibility = "hidden";
-        };
-        this._panels = document.createElement("div");
-        this._panels.className = 'panels';
-        outerDiv.appendChild(this._panels);
-        let _slot = document.createElement("slot");
-        _slot.name = 'panels';
-        this._panels.appendChild(_slot);
-        const resizeObserver = new ResizeObserver(entries => {
-            this._showHideHeaderItems();
-        });
-        resizeObserver.observe(this._headerDiv);
-    }
-    _showHideHeaderItems() {
-        this._moreContainer.style.visibility = "hidden";
-        let w = 0;
-        DomHelper.removeAllChildnodes(this._moreContainer);
-        DomHelper.removeAllChildnodes(this._headerDiv);
-        for (let item of this.children) {
-            let htmlItem = item;
-            const tabHeaderDiv = this._elementMap.get(htmlItem);
-            this._moreContainer.appendChild(tabHeaderDiv);
-            if (this._headerDiv.children.length == 0 || (w + (tabHeaderDiv.clientWidth / 2)) < this._headerDiv.clientWidth) {
-                this._headerDiv.appendChild(tabHeaderDiv);
-                w += tabHeaderDiv.clientWidth;
-            }
-        }
-    }
-    connectedCallback() {
-        if (this._firstConnect) {
-            this.refreshItems();
-            this._firstConnect = false;
-            this._contentObserver.observe(this, { childList: true });
-            let selectedIndexAttribute = this.getAttribute("selected-index");
-            if (selectedIndexAttribute) {
-                this.selectedIndex = parseInt(selectedIndexAttribute);
-            }
-        }
-    }
-    get selectedIndex() {
-        return this._selectedIndex;
-    }
-    set selectedIndex(value) {
-        let old = this._selectedIndex;
-        this._selectedIndex = value;
-        if (this.children.length && old != this._selectedIndex)
-            this._selectedIndexChanged(old);
-    }
-    disconnectedCallback() {
-        //this._contentObserver.disconnect();
-    }
-    refreshItems() {
-        this._headerDiv.innerHTML = "";
-        let i = 0;
-        for (let item of this.children) {
-            let htmlItem = item;
-            let tabHeaderDiv = document.createElement("div");
-            tabHeaderDiv.innerText = htmlItem.title;
-            tabHeaderDiv.title = htmlItem.title;
-            tabHeaderDiv.className = 'tab-header';
-            let j = i;
-            tabHeaderDiv.onpointerdown = () => {
-                let old = this._selectedIndex;
-                this._selectedIndex = j;
-                if (this._headerDiv.children.length)
-                    this._selectedIndexChanged(old, true);
-                this._moreContainer.style.visibility = 'hidden';
-            };
-            this._elementMap.set(htmlItem, tabHeaderDiv);
-            this._headerDiv.appendChild(tabHeaderDiv);
-            i++;
-        }
-        this._showHideHeaderItems();
-        this._selectedIndexChanged();
-    }
-    _selectedIndexChanged(oldIndex, viaClick = false) {
-        for (let index = 0; index < this.children.length; index++) {
-            const element = this.children[index];
-            if (index == this._selectedIndex) {
-                element.slot = "panels";
-                const el = this.children[index];
-                const headerEl = this._elementMap.get(el);
-                if (headerEl) {
-                    headerEl.classList.add('selected');
-                    if (element.activated)
-                        element.activated();
-                }
-            }
-            else {
-                element.removeAttribute("slot");
-                const el = this.children[index];
-                const headerEl = this._elementMap.get(el);
-                if (headerEl) {
-                    headerEl.classList.remove('selected');
-                }
-            }
-        }
-        this.onSelectedTabChanged.emit({ newIndex: this._selectedIndex, oldIndex: oldIndex, changedViaClick: viaClick });
-        this._moreContainer.style.visibility = 'hidden';
-    }
-    onSelectedTabChanged = new TypedEvent();
-}
-customElements.define('node-projects-designer-tab-control', DesignerTabControl);
+        `;
+    constructor() {
+        super();
+        this._contentObserver = new MutationObserver(() => {
+            this.refreshItems();
+        });
+        let outerDiv = document.createElement("div");
+        outerDiv.className = 'outer';
+        this.shadowRoot.appendChild(outerDiv);
+        this._headerDiv = document.createElement("div");
+        this._headerDiv.className = 'header';
+        outerDiv.appendChild(this._headerDiv);
+        this._moreDiv = document.createElement("div");
+        this._moreDiv.className = "header header-more";
+        this._moreDiv.innerText = "<<";
+        outerDiv.appendChild(this._moreDiv);
+        this._moreContainer = document.createElement("div");
+        this._moreContainer.className = "more-container";
+        this._moreContainer.style.visibility = "hidden";
+        outerDiv.appendChild(this._moreContainer);
+        this._moreDiv.onclick = () => {
+            if (this._moreContainer.children.length && this._moreContainer.style.visibility == "hidden")
+                this._moreContainer.style.visibility = 'visible';
+            else
+                this._moreContainer.style.visibility = "hidden";
+        };
+        this._panels = document.createElement("div");
+        this._panels.className = 'panels';
+        outerDiv.appendChild(this._panels);
+        let _slot = document.createElement("slot");
+        _slot.name = 'panels';
+        this._panels.appendChild(_slot);
+        const resizeObserver = new ResizeObserver(entries => {
+            this._showHideHeaderItems();
+        });
+        resizeObserver.observe(this._headerDiv);
+    }
+    _showHideHeaderItems() {
+        this._moreContainer.style.visibility = "hidden";
+        let w = 0;
+        DomHelper.removeAllChildnodes(this._moreContainer);
+        DomHelper.removeAllChildnodes(this._headerDiv);
+        for (let item of this.children) {
+            let htmlItem = item;
+            const tabHeaderDiv = this._elementMap.get(htmlItem);
+            this._moreContainer.appendChild(tabHeaderDiv);
+            if (this._headerDiv.children.length == 0 || (w + (tabHeaderDiv.clientWidth / 2)) < this._headerDiv.clientWidth) {
+                this._headerDiv.appendChild(tabHeaderDiv);
+                w += tabHeaderDiv.clientWidth;
+            }
+        }
+    }
+    connectedCallback() {
+        if (this._firstConnect) {
+            this.refreshItems();
+            this._firstConnect = false;
+            this._contentObserver.observe(this, { childList: true });
+            let selectedIndexAttribute = this.getAttribute("selected-index");
+            if (selectedIndexAttribute) {
+                this.selectedIndex = parseInt(selectedIndexAttribute);
+            }
+        }
+    }
+    get selectedIndex() {
+        return this._selectedIndex;
+    }
+    set selectedIndex(value) {
+        let old = this._selectedIndex;
+        this._selectedIndex = value;
+        if (this.children.length && old != this._selectedIndex)
+            this._selectedIndexChanged(old);
+    }
+    disconnectedCallback() {
+        //this._contentObserver.disconnect();
+    }
+    refreshItems() {
+        this._headerDiv.innerHTML = "";
+        let i = 0;
+        for (let item of this.children) {
+            let htmlItem = item;
+            let tabHeaderDiv = document.createElement("div");
+            tabHeaderDiv.innerText = htmlItem.title;
+            tabHeaderDiv.title = htmlItem.title;
+            tabHeaderDiv.className = 'tab-header';
+            let j = i;
+            tabHeaderDiv.onpointerdown = () => {
+                let old = this._selectedIndex;
+                this._selectedIndex = j;
+                if (this._headerDiv.children.length)
+                    this._selectedIndexChanged(old, true);
+                this._moreContainer.style.visibility = 'hidden';
+            };
+            this._elementMap.set(htmlItem, tabHeaderDiv);
+            this._headerDiv.appendChild(tabHeaderDiv);
+            i++;
+        }
+        this._showHideHeaderItems();
+        this._selectedIndexChanged();
+    }
+    _selectedIndexChanged(oldIndex, viaClick = false) {
+        for (let index = 0; index < this.children.length; index++) {
+            const element = this.children[index];
+            if (index == this._selectedIndex) {
+                element.slot = "panels";
+                const el = this.children[index];
+                const headerEl = this._elementMap.get(el);
+                if (headerEl) {
+                    headerEl.classList.add('selected');
+                    if (element.activated)
+                        element.activated();
+                }
+            }
+            else {
+                element.removeAttribute("slot");
+                const el = this.children[index];
+                const headerEl = this._elementMap.get(el);
+                if (headerEl) {
+                    headerEl.classList.remove('selected');
+                }
+            }
+        }
+        this.onSelectedTabChanged.emit({ newIndex: this._selectedIndex, oldIndex: oldIndex, changedViaClick: viaClick });
+        this._moreContainer.style.visibility = 'hidden';
+    }
+    onSelectedTabChanged = new TypedEvent();
+}
+customElements.define('node-projects-designer-tab-control', DesignerTabControl);

package/dist/elements/controls/ImageButtonListSelector.d.ts

@@ -1,17 +1,17 @@
-import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export declare type ImageButtonListSelectorValueChangedEventArgs = {
-    newValue?: string;
-    oldValue?: string;
-};
-export declare class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    private _value;
-    get value(): string;
-    set value(value: string);
-    valueChanged: TypedEvent<ImageButtonListSelectorValueChangedEventArgs>;
-    property: string;
-    unsetValue: string;
-    _updateValue(): void;
-    ready(): void;
-}
+import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export declare type ImageButtonListSelectorValueChangedEventArgs = {
+    newValue?: string;
+    oldValue?: string;
+};
+export declare class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _value;
+    get value(): string;
+    set value(value: string);
+    valueChanged: TypedEvent<ImageButtonListSelectorValueChangedEventArgs>;
+    property: string;
+    unsetValue: string;
+    _updateValue(): void;
+    ready(): void;
+}

package/dist/elements/controls/ImageButtonListSelector.js

@@ -1,5 +1,5 @@
-import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
+import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     div {
       font-size: 10px;
@@ -26,56 +26,56 @@ export class ImageButtonListSelector extends BaseCustomWebComponentConstructorAp
       background: white;
       border: 1px solid lightgray;
     }
-  `;
+  `;
     static template = html `
     <div>
       <div><span id="property"></span>: <span id="value"></span></div>
       <div class="container"><slot id="slot"></slot></div>
     </div>
-  `;
-    _value;
-    get value() {
-        return this._value;
-    }
-    set value(value) {
-        const oldValue = this._value;
-        this._value = value;
-        this._updateValue();
-        this.valueChanged.emit({ newValue: this._value, oldValue: oldValue });
-    }
-    valueChanged = new TypedEvent();
-    property;
-    unsetValue;
-    _updateValue() {
-        if (this.value) {
-            this._getDomElement('value').innerText = this.value;
-            this._getDomElement('value').classList.add('value-set');
-        }
-        else {
-            this._getDomElement('value').classList.remove('value-set');
-        }
-        const slot = this._getDomElement('slot');
-        for (let e of slot.assignedElements()) {
-            if (e.dataset.value == this.value)
-                e.style.background = "cornflowerblue";
-            else
-                e.style.background = "";
-        }
-    }
-    ready() {
-        this._parseAttributesToProperties();
-        const slot = this._getDomElement('slot');
-        slot.onclick = (e) => {
-            const path = e.composedPath();
-            for (let e of slot.assignedElements()) {
-                if (path.indexOf(e) >= 0) {
-                    this.value = e.dataset.value;
-                }
-            }
-        };
-        this._getDomElement('property').innerText = this.property ?? '';
-        this._getDomElement('value').innerText = this.unsetValue ?? '';
-        this._updateValue();
-    }
-}
-customElements.define('node-projects-image-button-list-selector', ImageButtonListSelector);
+  `;
+    _value;
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        const oldValue = this._value;
+        this._value = value;
+        this._updateValue();
+        this.valueChanged.emit({ newValue: this._value, oldValue: oldValue });
+    }
+    valueChanged = new TypedEvent();
+    property;
+    unsetValue;
+    _updateValue() {
+        if (this.value) {
+            this._getDomElement('value').innerText = this.value;
+            this._getDomElement('value').classList.add('value-set');
+        }
+        else {
+            this._getDomElement('value').classList.remove('value-set');
+        }
+        const slot = this._getDomElement('slot');
+        for (let e of slot.assignedElements()) {
+            if (e.dataset.value == this.value)
+                e.style.background = "cornflowerblue";
+            else
+                e.style.background = "";
+        }
+    }
+    ready() {
+        this._parseAttributesToProperties();
+        const slot = this._getDomElement('slot');
+        slot.onclick = (e) => {
+            const path = e.composedPath();
+            for (let e of slot.assignedElements()) {
+                if (path.indexOf(e) >= 0) {
+                    this.value = e.dataset.value;
+                }
+            }
+        };
+        this._getDomElement('property').innerText = this.property ?? '';
+        this._getDomElement('value').innerText = this.unsetValue ?? '';
+        this._updateValue();
+    }
+}
+customElements.define('node-projects-image-button-list-selector', ImageButtonListSelector);

package/dist/elements/controls/NumericPopup.d.ts

@@ -1,6 +1,6 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-export declare class NumericPopup extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    ready(): void;
-}
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare class NumericPopup extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    ready(): void;
+}

package/dist/elements/controls/NumericPopup.js

@@ -1,5 +1,5 @@
-import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
-export class NumericPopup extends BaseCustomWebComponentConstructorAppend {
+import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
+export class NumericPopup extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     :host {
     }
@@ -7,7 +7,7 @@ export class NumericPopup extends BaseCustomWebComponentConstructorAppend {
       grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
       grid-template-columns: 1fr 1fr;
     }
-  `;
+  `;
     static template = html `
     <div>
       <input type="range" min="0" max="100">
@@ -32,8 +32,8 @@ export class NumericPopup extends BaseCustomWebComponentConstructorAppend {
       <button>90</button>
       <button>100</button>
     </div>
-  `;
-    ready() {
-    }
-}
-customElements.define('node-projects-numeric-popup', NumericPopup);
+  `;
+    ready() {
+    }
+}
+customElements.define('node-projects-numeric-popup', NumericPopup);

package/dist/elements/controls/NumericStyleInput.d.ts

@@ -1,16 +1,16 @@
-import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export declare type ImageButtonListSelectorValueChangedEventArgs = {
-    newValue?: string;
-    oldValue?: string;
-};
-export declare class NumericStyleInput extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    private _value;
-    get value(): string;
-    set value(value: string);
-    valueChanged: TypedEvent<ImageButtonListSelectorValueChangedEventArgs>;
-    private _input;
-    constructor();
-    private _updateValue;
-}
+import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export declare type ImageButtonListSelectorValueChangedEventArgs = {
+    newValue?: string;
+    oldValue?: string;
+};
+export declare class NumericStyleInput extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _value;
+    get value(): string;
+    set value(value: string);
+    valueChanged: TypedEvent<ImageButtonListSelectorValueChangedEventArgs>;
+    private _input;
+    constructor();
+    private _updateValue;
+}

package/dist/elements/controls/NumericStyleInput.js

@@ -1,5 +1,5 @@
-import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export class NumericStyleInput extends BaseCustomWebComponentConstructorAppend {
+import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export class NumericStyleInput extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     :host {
     }
@@ -7,7 +7,7 @@ export class NumericStyleInput extends BaseCustomWebComponentConstructorAppend {
     input {
       cursor: ew-resize;
     }
-  `;
+  `;
     static template = html `
     <input id="input" type="text">
     <select id="select">
@@ -15,42 +15,42 @@ export class NumericStyleInput extends BaseCustomWebComponentConstructorAppend {
       <option>%</option>
       <option>pt</option>
     </select>
-  `;
-    _value;
-    get value() {
-        return this._value;
-    }
-    set value(value) {
-        const oldValue = this._value;
-        this._value = value;
-        this._updateValue();
-        this.valueChanged.emit({ newValue: this._value, oldValue: oldValue });
-    }
-    valueChanged = new TypedEvent();
-    _input;
-    //private _select: HTMLSelectElement;
-    constructor() {
-        super();
-        this._input = this._getDomElement('input');
-        //this._select = this._getDomElement<HTMLSelectElement>('select');
-        let oldX = null;
-        this._input.onpointerdown = (e) => {
-            oldX = e.x;
-            this._input.setPointerCapture(e.pointerId);
-        };
-        this._input.onpointermove = (e) => {
-            if (oldX !== null) {
-                let diffX = e.x - oldX;
-                if (diffX != 0)
-                    this._input.value = parseInt(this._input.value) + diffX;
-            }
-        };
-        this._input.onpointerup = (e) => {
-            oldX = null;
-            this._input.releasePointerCapture(e.pointerId);
-        };
-    }
-    _updateValue() {
-    }
-}
-customElements.define('node-projects-numeric-style-input', NumericStyleInput);
+  `;
+    _value;
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        const oldValue = this._value;
+        this._value = value;
+        this._updateValue();
+        this.valueChanged.emit({ newValue: this._value, oldValue: oldValue });
+    }
+    valueChanged = new TypedEvent();
+    _input;
+    //private _select: HTMLSelectElement;
+    constructor() {
+        super();
+        this._input = this._getDomElement('input');
+        //this._select = this._getDomElement<HTMLSelectElement>('select');
+        let oldX = null;
+        this._input.onpointerdown = (e) => {
+            oldX = e.x;
+            this._input.setPointerCapture(e.pointerId);
+        };
+        this._input.onpointermove = (e) => {
+            if (oldX !== null) {
+                let diffX = e.x - oldX;
+                if (diffX != 0)
+                    this._input.value = parseInt(this._input.value) + diffX;
+            }
+        };
+        this._input.onpointerup = (e) => {
+            oldX = null;
+            this._input.releasePointerCapture(e.pointerId);
+        };
+    }
+    _updateValue() {
+    }
+}
+customElements.define('node-projects-numeric-style-input', NumericStyleInput);

package/dist/elements/controls/PlainScrollbar.d.ts

@@ -1,15 +1,15 @@
-export declare class PlainScrollbar extends HTMLElement {
-    private widget;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    get thumbSize(): number;
-    set thumbSize(v: number);
-    get value(): number;
-    set value(v: number);
-    get orientation(): string;
-    set orientation(s: string);
-    get orientationBoolean(): boolean;
-    static get observedAttributes(): string[];
-    attributeChangedCallback(attrName: string, _oldValue: string | null, newValue: string | null): void;
-}
+export declare class PlainScrollbar extends HTMLElement {
+    private widget;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get thumbSize(): number;
+    set thumbSize(v: number);
+    get value(): number;
+    set value(v: number);
+    get orientation(): string;
+    set orientation(s: string);
+    get orientationBoolean(): boolean;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(attrName: string, _oldValue: string | null, newValue: string | null): void;
+}