@node-projects/web-component-designer 0.0.291 → 0.1.0

package/dist/elements/controls/MetricsEditor.js

@@ -1,151 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
-export class MetricsEditor extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-:host {
-  justify-content: center;
-  display: flex;
-  margin: 10px;
-  line-height: 12px;
-  min-width: 120px;
-}
-
-* { 
-  font-size: 12px;
-  font-family: monospace;
-  color: black;
-}
-
-.top {
-  display: inline-block;
-}
-.left {
-  display: inline-block;
-  vertical-align: middle;
-}
-.right {
-  display: inline-block;
-  vertical-align: middle;
-}
-.bottom {
-  display: inline-block;
-}
-
-div.ct {
-  width:280px;height:120px;
-}
-
-div span {
-  font-size: 10px;
-  position: absolute;
-  top: 0;
-  left: 0; 
-}
-
-div.ct {
-  position: relative;
-  background: white;
-  display: inline-block;
-  border: dotted 1px gray;
-  text-align: center;
-  vertical-align: middle;
-}
-
-div.ct.box {
-  border: dotted 2px black;
-}
-
-div.ct > div.ct {
-  left: 0;
-  top: 0;
-  background: #F9CC9F;
-  width: calc(100% - 20px);
-  height: calc(100% - 26px);
-  border-style: dashed;
-}
-
-div.ct > div.ct > div.ct {
-  background: #FEDC9B;
-  border-style: solid;
-}
-
-div.ct > div.ct > div.ct > div.ct {
-  background: #C4Cf8C;
-  border-style: dashed;
-}
-
-div.ct > div.ct > div.ct > div.ct > div.ct {
-  background: #8Cb6C2;
-  border-style: solid;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-}
-
-span {
-  width: 30%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}`;
-    static template = html `
-  <div id="position" class="ct"><span title="position">position</span>
-  <div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div id="margin" class="ct"><span title="margin">margin</span>
-  <div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div id="border" class="ct"><span title="border">border</span>
-  <div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div id="padding" class="ct"><span title="padding">padding</span>
-  <div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div id="element" class="ct" style="font-size:6px"><div data-style="element" @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div>
-  &nbsp;x&nbsp;
-  <div data-style="element" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div>
-  </div><div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div><div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div><div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div>
-  `;
-    property;
-    unsetValue;
-    _borderDiv;
-    _elementDiv;
-    constructor() {
-        super();
-        this._restoreCachedInititalValues();
-        this._borderDiv = this._getDomElement('border');
-        this._elementDiv = this._getDomElement('element');
-    }
-    ready() {
-        this._parseAttributesToProperties();
-        this._assignEvents();
-    }
-    onDoubleClick(event) {
-        const element = event.target;
-        element.setAttribute("contentEditable", "");
-        const range = document.createRange();
-        const sel = window.getSelection();
-        range.setStart(element.firstChild, 0);
-        range.setEndAfter(element.lastChild);
-        sel.removeAllRanges();
-        sel.addRange(range);
-    }
-    onKeyDown(event) {
-        const element = event.target;
-        if (event.key == "Enter") {
-            element.removeAttribute("contentEditable");
-            const value = element.innerHTML;
-            const valueChangedEvent = new CustomEvent('value-changed', {
-                detail: {
-                    style: element.dataset['style'],
-                    value: value
-                }
-            });
-            this.dispatchEvent(valueChangedEvent);
-        }
-    }
-    refresh(element) {
-        this._elementDiv.classList.remove('box');
-        this._borderDiv.classList.remove('box');
-        if (element) {
-            let cp = getComputedStyle(element);
-            if (cp.boxSizing == 'content-box') {
-                this._elementDiv.classList.add('box');
-            }
-            else {
-                this._borderDiv.classList.add('box');
-            }
-        }
-    }
-}
-customElements.define('node-projects-metrics-editor', MetricsEditor);

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

@@ -1,6 +0,0 @@
-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,39 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
-export class NumericPopup extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-    :host {
-    }
-    .predefined {
-      grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
-      grid-template-columns: 1fr 1fr;
-    }
-  `;
-    static template = html `
-    <div>
-      <input type="range" min="0" max="100">
-      <input id="value">
-      <select>
-        <option>px</option>
-        <option>%</option>
-        <option>pt</option>
-        <option>em</option>
-        <option>rem</option>
-        <option>auto</option>
-      </select>
-    </div>
-    <div class="predefined">
-      <button>Auto</button>
-      <button>0</button>
-      <button>10</button>
-      <button>20</button>
-      <button>40</button>
-      <button>50</button>
-      <button>70</button>
-      <button>90</button>
-      <button>100</button>
-    </div>
-  `;
-    ready() {
-    }
-}
-customElements.define('node-projects-numeric-popup', NumericPopup);

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

@@ -1,16 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export 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,56 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export class NumericStyleInput extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-    :host {
-    }
-
-    input {
-      cursor: ew-resize;
-    }
-  `;
-    static template = html `
-    <input id="input" type="text">
-    <select id="select">
-      <option>px</option>
-      <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);

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

@@ -1,15 +0,0 @@
-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;
-}