npm - @operato/board - Versions diffs - 9.0.0-beta.18 → 9.0.0-beta.20 - Mend

@operato/board 9.0.0-beta.18 → 9.0.0-beta.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

package/dist/src/modeller/property-sidebar/shapes/box-padding-editor-styles.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"box-padding-editor-styles.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FxC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const BoxPaddingEditorStyles = css`\n .box-padding {\n width: 100%;\n }\n\n .box-padding td {\n background: var(--url-icon-properties-padding) 50% 0 no-repeat;\n }\n\n .box-padding tr:nth-child(1),\n .box-padding tr:nth-child(3) {\n height: 20px;\n }\n\n .box-padding tr td:nth-child(1),\n .box-padding tr td:nth-child(3) {\n width: 18px;\n }\n\n .box-padding .slide1 {\n background-position: 0 0;\n }\n\n .box-padding .slide2 {\n background-position: 50% -40px;\n background-color: rgba(69, 46, 41, 0.2);\n }\n\n .box-padding .slide3 {\n background-position: 100% -440px;\n }\n\n .box-padding .slide4 {\n background-position: 0 -360px;\n background-color: rgba(69, 46, 41, 0.2);\n }\n\n .box-padding .slide5 {\n background: none;\n text-align: center;\n }\n\n .box-padding .slide6 {\n background-position: 100% -160px;\n background-color: rgba(69, 46, 41, 0.2);\n }\n\n .box-padding .slide7 {\n background-position: 0 100%;\n }\n\n .box-padding .slide8 {\n background-position: 50% -320px;\n background-color: rgba(69, 46, 41, 0.2);\n }\n\n .box-padding .slide9 {\n background-position: 0 0px;\n }\n\n .box-padding input {\n background-color: transparent;\n width: 35px;\n margin: 0px;\n padding: 0px;\n clear: both;\n float: initial;\n border: 1px solid #fff;\n border-width: 0 0 1px 0;\n text-align: right;\n font-size: 14px;\n }\n\n .slide5 input:nth-child(1),\n .slide5 input:nth-child(4) {\n display: block;\n margin: auto;\n }\n\n .slide5 input:nth-child(2) {\n float: left;\n }\n\n .slide5 input:nth-child(3) {\n float: right;\n margin-top: -25px;\n }\n\n .slide5 input:nth-child(4) {\n margin-top: -5px;\n }\n`\n"]}

package/dist/src/modeller/property-sidebar/shapes/shapes.d.ts DELETED Viewed

@@ -1,26 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import '@operato/input/ox-input-angle.js';
-import '@operato/input/ox-buttons-radio.js';
-import '@material/web/icon/icon.js';
-import '@operato/i18n/ox-i18n.js';
-import '@operato/help/ox-title-with-help.js';
-import { BOUNDS, Component, Properties } from '@hatiolab/things-scene';
-import { AbstractProperty } from '../abstract-property.js';
-export declare class PropertyShapes extends AbstractProperty {
-    static styles: import("lit").CSSResult[];
-    value?: Properties;
-    bounds: BOUNDS | null;
-    selected: Component[];
-    private _3dExpanded;
-    firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    _onValueChange(e: Event): void;
-    _hasTextProperty(selected: Component[]): boolean;
-    _hasProperties(selected: Component[]): boolean;
-    _isIdentifiable(selected: Component[]): boolean;
-    _isClassIdentifiable(selected: Component[]): boolean;
-    _isLine(selected: Component[]): boolean;
-    _is3dish(selected: Component[]): boolean;
-}

package/dist/src/modeller/property-sidebar/shapes/shapes.js DELETED Viewed

@@ -1,430 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import '@operato/input/ox-input-angle.js';
-import '@operato/input/ox-buttons-radio.js';
-import '@material/web/icon/icon.js';
-import '@operato/i18n/ox-i18n.js';
-import '@operato/help/ox-title-with-help.js';
-import { css, html } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { keyed } from 'lit/directives/keyed.js';
-import { AbstractProperty } from '../abstract-property.js';
-import { PropertySharedStyle } from '../property-shared-style.js';
-import { BoxPaddingEditorStyles } from './box-padding-editor-styles.js';
-export class PropertyShapes extends AbstractProperty {
-    constructor() {
-        super(...arguments);
-        this.bounds = null;
-        this.selected = [];
-        this._3dExpanded = false;
-    }
-    firstUpdated() {
-        this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
-    }
-    render() {
-        const value = this.value || {};
-        const { width, height } = this.bounds || {};
-        return html `
-      <fieldset>
-        <div class="property-grid">
-          ${this._isIdentifiable(this.selected)
-            ? html `
-                <label> <ox-i18n msgid="label.id">ID</ox-i18n> </label>
-                <input value-key="id" .value=${value.id || ''} />
-              `
-            : html ``}
-          ${this._isClassIdentifiable(this.selected)
-            ? html `
-                <label> <ox-i18n msgid="label.class">Class</ox-i18n> </label>
-                <input value-key="class" .value=${value.class || ''} />
-              `
-            : html ``}
-          ${this._hasTextProperty(this.selected)
-            ? html `
-                <label> <ox-i18n msgid="label.text">Text</ox-i18n> </label>
-                <input value-key="text" .value=${value.text || ''} />
-                <label> <ox-i18n msgid="label.text-format">Text Format</ox-i18n> </label>
-                <input value-key="textFormat" .value=${value.textFormat || ''} list="format-list" />
-                <datalist id="format-list">
-                  <option value="#,###."></option>
-                  <option value="#,###.#"></option>
-                  <option value="#,###.0"></option>
-                  <option value="#,##0.#"></option>
-                  <option value="#,##0.0"></option>
-                  <option value="#,##0.0%"></option>
-                </datalist>
-              `
-            : html ``}
-          ${this._hasProperties(this.selected)
-            ? html `
-                <div class="checkbox-row">
-                  <input id="checkbox-hidden" value-key="hidden" type="checkbox" .checked=${value.hidden} />
-                  <label for="checkbox-hidden"> <ox-i18n msgid="label.item-hidden">Item Hidden</ox-i18n> </label>
-                  <input id="checkbox-locked" value-key="locked" type="checkbox" .checked=${value.locked} />
-                  <label for="checkbox-locked"> <ox-i18n msgid="label.locked">Locked</ox-i18n> </label>
-                </div>
-              `
-            : html ``}
-        </div>
-      </fieldset>
-      ${!this._isLine(this.selected)
-            ? keyed(this.selected, html `
-              <fieldset class="icon-label unit ratio">
-                <legend>
-                  <ox-title-with-help topic="board-modeller/shapes/size" msgid="label.size">size</ox-title-with-help>
-                </legend>
-                <div class="property-grid">
-                  <label class="width"> <ox-i18n msgid="label.width">width</ox-i18n> </label>
-                  <input type="number" value-key="bounds.width" .value=${String(width)} />
-                  <label class="height"> <ox-i18n msgid="label.height">height</ox-i18n> </label>
-                  <input type="number" value-key="bounds.height" .value=${String(height)} />
-                  ${this.selected.length && this.selected[0].isRootModel()
-                ? html ``
-                : html `
-                        <label class="rotate"> <ox-i18n msgid="label.rotate">rotate</ox-i18n> </label>
-                        <ox-input-angle value-key="rotation" .value=${value.rotation}> </ox-input-angle>
-                      `}
-                </div>
-              </fieldset>
-            `)
-            : html ``}
-      ${this._is3dish(this.selected)
-            ? html `
-            <fieldset class="icon-label unit ratio" collapsable ?collapsed=${!this._3dExpanded}>
-              <legend>
-                <ox-title-with-help topic="board-modeller/shapes/3dish" msgid="label.3dish">3D</ox-title-with-help>
-                <md-icon
-                  @click=${(e) => {
-                this._3dExpanded = !this._3dExpanded;
-            }}
-                  >${this._3dExpanded ? 'expand_less' : 'expand_more'}</md-icon
-                >
-              </legend>
-              <div class="property-grid">
-                <label class="zPos"> <ox-i18n msgid="label.z-pos">pos. Z</ox-i18n> </label>
-                <input type="number" value-key="zPos" .value=${value.zPos} />
-                <label class="depth"> <ox-i18n msgid="label.depth">depth</ox-i18n> </label>
-                <input type="number" value-key="depth" .value=${value.depth} />
-                <label class="rotationX"> <ox-i18n msgid="label.rotation-x">rot. X</ox-i18n> </label>
-                <ox-input-angle value-key="rotationX" .value=${value.rotationX}> </ox-input-angle>
-                <label class="rotationY"> <ox-i18n msgid="label.rotation-y">rot. Y</ox-i18n> </label>
-                <ox-input-angle value-key="rotationY" .value=${value.rotationY}> </ox-input-angle>
-                <label class="rotationZ"> <ox-i18n msgid="label.rotation-z">rot. Z</ox-i18n> </label>
-                <ox-input-angle value-key="rotation" .value=${value.rotation}> </ox-input-angle>
-              </div>
-            </fieldset>
-          `
-            : html ``}
-      ${this._hasTextProperty(this.selected)
-            ? html `
-            <fieldset>
-              <legend>
-                <ox-title-with-help topic="board-modeller/shapes/text-box" msgid="label.text-box"
-                  >text box</ox-title-with-help
-                >
-              </legend>
-              <div class="property-grid">
-                <label> <ox-i18n msgid="label.horizontal">horizontal</ox-i18n> </label>
-                <ox-buttons-radio value-key="textAlign" .value=${value.textAlign}>
-                  <div data-value="left"></div>
-                  <div data-value="center"></div>
-                  <div data-value="right"></div>
-                  <div data-value="justify"></div>
-                </ox-buttons-radio>
-                <label> <ox-i18n msgid="label.vertical">vertical</ox-i18n> </label>
-                <ox-buttons-radio value-key="textBaseline" .value=${value.textBaseline}>
-                  <div data-value="top"></div>
-                  <div data-value="middle"></div>
-                  <div data-value="bottom"></div>
-                </ox-buttons-radio>
-                <div class="checkbox-row">
-                  <input
-                    id="checkbox-support-markdown"
-                    type="checkbox"
-                    value-key="supportMarkdown"
-                    .checked=${value.supportMarkdown}
-                  />
-                  <label for="checkbox-support-markdown">
-                    <ox-i18n msgid="label.support-markdown">Support Markdown</ox-i18n>
-                  </label>
-                </div>
-                <div class="checkbox-row">
-                  <input id="checkbox-textwrap" type="checkbox" value-key="textWrap" .checked=${value.textWrap} />
-                  <label for="checkbox-textwrap"> <ox-i18n msgid="label.text-wrap">Text Wrap</ox-i18n> </label>
-                </div>
-                ${!value.textWrap
-                ? html ` <label for="checkbox-textOverflow">
-                        <ox-i18n msgid="label.text-overflow">Text Overflow</ox-i18n>
-                      </label>
-                      <select value-key="textOverflow" .value=${value.textOverflow || ''}>
-                        <option value="" selected>none</option>
-                        <option value="ellipsis">ellipsis</option>
-                        <option value="clip">clip</option>
-                      </select>`
-                : ''}
-                <label> <ox-i18n msgid="label.padding">padding</ox-i18n> </label>
-                <table class="box-padding">
-                  <tr>
-                    <td class="slide1"></td>
-                    <td class="slide2"></td>
-                    <td class="slide3"></td>
-                  </tr>
-                  <tr>
-                    <td class="slide4"></td>
-                    <td class="slide5">
-                      <input type="number" value-key="paddingTop" .value=${value.paddingTop || 0} />
-                      <input type="number" value-key="paddingLeft" .value=${value.paddingLeft || 0} />
-                      <input type="number" value-key="paddingRight" .value=${value.paddingRight || 0} />
-                      <input type="number" value-key="paddingBottom" .value=${value.paddingBottom || 0} />
-                    </td>
-                    <td class="slide6"></td>
-                  </tr>
-                  <tr>
-                    <td class="slide7"></td>
-                    <td class="slide8"></td>
-                    <td class="slide9"></td>
-                  </tr>
-                </table>
-              </div>
-            </fieldset>
-          `
-            : html ``}
-      ${this.selected.length && this.selected[0].isRootModel()
-            ? html `
-            <fieldset class="icon-label">
-              <legend>
-                <ox-title-with-help topic="board-modeller/shapes/viewer-option" msgid="label.viewer-option"
-                  >Viewer Option</ox-title-with-help
-                >
-              </legend>
-              <div class="property-grid">
-                <label><ox-i18n msgid="label.fit">Fit</ox-i18n></label>
-                <select value-key="fitMode" .value=${value.fitMode || 'ratio'}>
-                  <option value="none">none</option>
-                  <option value="center">center</option>
-                  <option value="ratio" selected>ratio</option>
-                  <option value="both">both</option>
-                  <option value="width">width</option>
-                  <option value="height">height</option>
-                </select>
-              </div>
-            </fieldset>
-            <fieldset class="icon-label">
-              <legend>
-                <ox-title-with-help topic="board-modeller/shapes/print-option" msgid="label.label-print"
-                  >Print Option</ox-title-with-help
-                >
-              </legend>
-              <div class="property-grid">
-                <label class="rotate"><ox-i18n msgid="label.label-rotation">Label Rotation</ox-i18n></label>
-                <select value-key="labelRotation" .value=${value.labelRotation || 'N'}>
-                  <option value="N" selected>0°</option>
-                  <option value="B">90°</option>
-                  <option value="I">180°</option>
-                  <option value="R">270°</option>
-                </select>
-              </div>
-            </fieldset>
-          `
-            : html ``}
-    `;
-    }
-    _onValueChange(e) {
-        var element = e.target;
-        var key = element.getAttribute('value-key');
-        if (!key) {
-            return;
-        }
-        var value = this._getValueFromEventTarget(element);
-        if (key.indexOf('bounds.') == 0) {
-            if (isNaN(value))
-                return;
-            this.dispatchEvent(new CustomEvent('bounds-change', {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    [key.substr(7)]: value
-                }
-            }));
-        }
-        else {
-            this._onAfterValueChange(key, value);
-        }
-    }
-    _hasTextProperty(selected) {
-        for (let i = 0; i < selected.length; i++) {
-            if (!selected[i].hasTextProperty)
-                return false;
-        }
-        return true;
-    }
-    _hasProperties(selected) {
-        if (!selected || selected.length == 0 || (selected[0] && selected[0].isLayer && selected[0].isLayer()))
-            return false;
-        return true;
-    }
-    _isIdentifiable(selected) {
-        if (!selected || selected.length == 0 || selected.length > 1 || (selected[0].isLayer && selected[0].isLayer()))
-            return false;
-        return true;
-    }
-    _isClassIdentifiable(selected) {
-        if (!selected || (selected[0] && selected[0].isLayer()))
-            return false;
-        return true;
-    }
-    _isLine(selected) {
-        if (!selected || !(selected[0] && selected[0].isLine()))
-            return false;
-        return true;
-    }
-    _is3dish(selected) {
-        if (!selected || !(selected[0] && selected[0].is3dish()))
-            return false;
-        return true;
-    }
-}
-PropertyShapes.styles = [
-    PropertySharedStyle,
-    BoxPaddingEditorStyles,
-    css `
-      fieldset[collapsable] legend {
-        box-sizing: border-box;
-        width: 100%;
-      }
-      fieldset[collapsable] legend md-icon {
-        float: right;
-        font-size: medium;
-        margin: 0;
-        cursor: pointer;
-      }
-      fieldset[collapsable][collapsed] > :not(legend) {
-        display: none;
-      }
-    `,
-    css `
-      .icon-label label {
-        background: var(--url-icon-properties-label) 7px -900px no-repeat;
-      }
-      .icon-label label.width {
-        background-position: 7px -96px;
-      }
-      .icon-label label.height {
-        background-position: 7px 4px;
-      }
-      .icon-label label.rotate {
-        background-position: 7px -198px;
-      }
-      .icon-label label.twidth {
-        background-position: 7px -296px;
-      }
-      .icon-label label.theight {
-        background-position: 7px -396px;
-      }
-      .icon-label label.zPos {
-        background-position: 5px -1098px;
-      }
-      .icon-label label.depth {
-        background-position: 5px -1198px;
-      }
-      .icon-label label.rotationX {
-        background-position: 5px -1296px;
-      }
-      .icon-label label.rotationY {
-        background-position: 5px -1396px;
-      }
-      .icon-label label.rotationZ {
-        background-position: 5px -1496px;
-      }
-      ox-buttons-radio > * {
-        width: 30px;
-        height: 25px;
-        min-width: initial;
-        margin: 0 4px 0 0;
-        padding: 0;
-        border-radius: 0;
-        display: inline-block;
-        border-bottom: 2px solid #fff;
-      }
-      ox-buttons-radio div {
-        background: var(--url-icon-properties) no-repeat;
-      }
-      ox-buttons-radio div[data-value='left'] {
-        background-position: 50% 3px;
-      }
-      ox-buttons-radio div[data-value='center'] {
-        background-position: 50% -47px;
-      }
-      ox-buttons-radio div[data-value='right'] {
-        background-position: 50% -97px;
-      }
-      ox-buttons-radio div[data-value='justify'] {
-        background-position: 50% -147px;
-      }
-      ox-buttons-radio div[data-value='top'] {
-        background-position: 50% -197px;
-      }
-      ox-buttons-radio div[data-value='middle'] {
-        background-position: 50% -193px;
-      }
-      ox-buttons-radio div[data-value='bottom'] {
-        background-position: 50% -188px;
-      }
-      ox-buttons-radio div[active] {
-        border-color: #f2471c;
-      }
-    `
-];
-__decorate([
-    property({ type: Object })
-], PropertyShapes.prototype, "value", void 0);
-__decorate([
-    property({ type: Object })
-], PropertyShapes.prototype, "bounds", void 0);
-__decorate([
-    property({ type: Array })
-], PropertyShapes.prototype, "selected", void 0);
-__decorate([
-    state()
-], PropertyShapes.prototype, "_3dExpanded", void 0);
-//# sourceMappingURL=shapes.js.map

package/dist/src/modeller/property-sidebar/shapes/shapes.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"shapes.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/shapes/shapes.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-angle.js'\nimport '@operato/input/ox-buttons-radio.js'\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-title-with-help.js'\n\nimport { css, html } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { BOUNDS, Component, Properties } from '@hatiolab/things-scene'\n\nimport { AbstractProperty } from '../abstract-property.js'\nimport { PropertySharedStyle } from '../property-shared-style.js'\nimport { BoxPaddingEditorStyles } from './box-padding-editor-styles.js'\n\nexport class PropertyShapes extends AbstractProperty {\n static styles = [\n PropertySharedStyle,\n BoxPaddingEditorStyles,\n css`\n fieldset[collapsable] legend {\n box-sizing: border-box;\n width: 100%;\n }\n\n fieldset[collapsable] legend md-icon {\n float: right;\n font-size: medium;\n margin: 0;\n cursor: pointer;\n }\n\n fieldset[collapsable][collapsed] > :not(legend) {\n display: none;\n }\n `,\n css`\n .icon-label label {\n background: var(--url-icon-properties-label) 7px -900px no-repeat;\n }\n\n .icon-label label.width {\n background-position: 7px -96px;\n }\n\n .icon-label label.height {\n background-position: 7px 4px;\n }\n\n .icon-label label.rotate {\n background-position: 7px -198px;\n }\n\n .icon-label label.twidth {\n background-position: 7px -296px;\n }\n\n .icon-label label.theight {\n background-position: 7px -396px;\n }\n\n .icon-label label.zPos {\n background-position: 5px -1098px;\n }\n\n .icon-label label.depth {\n background-position: 5px -1198px;\n }\n\n .icon-label label.rotationX {\n background-position: 5px -1296px;\n }\n\n .icon-label label.rotationY {\n background-position: 5px -1396px;\n }\n\n .icon-label label.rotationZ {\n background-position: 5px -1496px;\n }\n\n ox-buttons-radio > * {\n width: 30px;\n height: 25px;\n min-width: initial;\n margin: 0 4px 0 0;\n padding: 0;\n border-radius: 0;\n display: inline-block;\n border-bottom: 2px solid #fff;\n }\n\n ox-buttons-radio div {\n background: var(--url-icon-properties) no-repeat;\n }\n\n ox-buttons-radio div[data-value='left'] {\n background-position: 50% 3px;\n }\n\n ox-buttons-radio div[data-value='center'] {\n background-position: 50% -47px;\n }\n\n ox-buttons-radio div[data-value='right'] {\n background-position: 50% -97px;\n }\n\n ox-buttons-radio div[data-value='justify'] {\n background-position: 50% -147px;\n }\n\n ox-buttons-radio div[data-value='top'] {\n background-position: 50% -197px;\n }\n\n ox-buttons-radio div[data-value='middle'] {\n background-position: 50% -193px;\n }\n\n ox-buttons-radio div[data-value='bottom'] {\n background-position: 50% -188px;\n }\n\n ox-buttons-radio div[active] {\n border-color: #f2471c;\n }\n `\n ]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) bounds: BOUNDS | null = null\n @property({ type: Array }) selected: Component[] = []\n\n @state() private _3dExpanded: boolean = false\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n render() {\n const value = this.value || {}\n const { width, height } = this.bounds || {}\n\n return html`\n <fieldset>\n <div class=\"property-grid\">\n ${this._isIdentifiable(this.selected)\n ? html`\n <label> <ox-i18n msgid=\"label.id\">ID</ox-i18n> </label>\n <input value-key=\"id\" .value=${value.id || ''} />\n `\n : html``}\n ${this._isClassIdentifiable(this.selected)\n ? html`\n <label> <ox-i18n msgid=\"label.class\">Class</ox-i18n> </label>\n <input value-key=\"class\" .value=${value.class || ''} />\n `\n : html``}\n ${this._hasTextProperty(this.selected)\n ? html`\n <label> <ox-i18n msgid=\"label.text\">Text</ox-i18n> </label>\n <input value-key=\"text\" .value=${value.text || ''} />\n <label> <ox-i18n msgid=\"label.text-format\">Text Format</ox-i18n> </label>\n <input value-key=\"textFormat\" .value=${value.textFormat || ''} list=\"format-list\" />\n <datalist id=\"format-list\">\n <option value=\"#,###.\"></option>\n <option value=\"#,###.#\"></option>\n <option value=\"#,###.0\"></option>\n <option value=\"#,##0.#\"></option>\n <option value=\"#,##0.0\"></option>\n <option value=\"#,##0.0%\"></option>\n </datalist>\n `\n : html``}\n ${this._hasProperties(this.selected)\n ? html`\n <div class=\"checkbox-row\">\n <input id=\"checkbox-hidden\" value-key=\"hidden\" type=\"checkbox\" .checked=${value.hidden} />\n <label for=\"checkbox-hidden\"> <ox-i18n msgid=\"label.item-hidden\">Item Hidden</ox-i18n> </label>\n\n <input id=\"checkbox-locked\" value-key=\"locked\" type=\"checkbox\" .checked=${value.locked} />\n <label for=\"checkbox-locked\"> <ox-i18n msgid=\"label.locked\">Locked</ox-i18n> </label>\n </div>\n `\n : html``}\n </div>\n </fieldset>\n\n ${!this._isLine(this.selected)\n ? keyed(\n this.selected,\n html`\n <fieldset class=\"icon-label unit ratio\">\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/size\" msgid=\"label.size\">size</ox-title-with-help>\n </legend>\n\n <div class=\"property-grid\">\n <label class=\"width\"> <ox-i18n msgid=\"label.width\">width</ox-i18n> </label>\n <input type=\"number\" value-key=\"bounds.width\" .value=${String(width)} />\n <label class=\"height\"> <ox-i18n msgid=\"label.height\">height</ox-i18n> </label>\n <input type=\"number\" value-key=\"bounds.height\" .value=${String(height)} />\n\n ${this.selected.length && this.selected[0].isRootModel()\n ? html``\n : html`\n <label class=\"rotate\"> <ox-i18n msgid=\"label.rotate\">rotate</ox-i18n> </label>\n <ox-input-angle value-key=\"rotation\" .value=${value.rotation}> </ox-input-angle>\n `}\n </div>\n </fieldset>\n `\n )\n : html``}\n ${this._is3dish(this.selected)\n ? html`\n <fieldset class=\"icon-label unit ratio\" collapsable ?collapsed=${!this._3dExpanded}>\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/3dish\" msgid=\"label.3dish\">3D</ox-title-with-help>\n <md-icon\n @click=${(e: Event) => {\n this._3dExpanded = !this._3dExpanded\n }}\n >${this._3dExpanded ? 'expand_less' : 'expand_more'}</md-icon\n >\n </legend>\n\n <div class=\"property-grid\">\n <label class=\"zPos\"> <ox-i18n msgid=\"label.z-pos\">pos. Z</ox-i18n> </label>\n <input type=\"number\" value-key=\"zPos\" .value=${value.zPos} />\n <label class=\"depth\"> <ox-i18n msgid=\"label.depth\">depth</ox-i18n> </label>\n <input type=\"number\" value-key=\"depth\" .value=${value.depth} />\n\n <label class=\"rotationX\"> <ox-i18n msgid=\"label.rotation-x\">rot. X</ox-i18n> </label>\n <ox-input-angle value-key=\"rotationX\" .value=${value.rotationX}> </ox-input-angle>\n\n <label class=\"rotationY\"> <ox-i18n msgid=\"label.rotation-y\">rot. Y</ox-i18n> </label>\n <ox-input-angle value-key=\"rotationY\" .value=${value.rotationY}> </ox-input-angle>\n\n <label class=\"rotationZ\"> <ox-i18n msgid=\"label.rotation-z\">rot. Z</ox-i18n> </label>\n <ox-input-angle value-key=\"rotation\" .value=${value.rotation}> </ox-input-angle>\n </div>\n </fieldset>\n `\n : html``}\n ${this._hasTextProperty(this.selected)\n ? html`\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/text-box\" msgid=\"label.text-box\"\n >text box</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label> <ox-i18n msgid=\"label.horizontal\">horizontal</ox-i18n> </label>\n <ox-buttons-radio value-key=\"textAlign\" .value=${value.textAlign}>\n <div data-value=\"left\"></div>\n <div data-value=\"center\"></div>\n <div data-value=\"right\"></div>\n <div data-value=\"justify\"></div>\n </ox-buttons-radio>\n\n <label> <ox-i18n msgid=\"label.vertical\">vertical</ox-i18n> </label>\n <ox-buttons-radio value-key=\"textBaseline\" .value=${value.textBaseline}>\n <div data-value=\"top\"></div>\n <div data-value=\"middle\"></div>\n <div data-value=\"bottom\"></div>\n </ox-buttons-radio>\n\n <div class=\"checkbox-row\">\n <input\n id=\"checkbox-support-markdown\"\n type=\"checkbox\"\n value-key=\"supportMarkdown\"\n .checked=${value.supportMarkdown}\n />\n <label for=\"checkbox-support-markdown\">\n <ox-i18n msgid=\"label.support-markdown\">Support Markdown</ox-i18n>\n </label>\n </div>\n\n <div class=\"checkbox-row\">\n <input id=\"checkbox-textwrap\" type=\"checkbox\" value-key=\"textWrap\" .checked=${value.textWrap} />\n <label for=\"checkbox-textwrap\"> <ox-i18n msgid=\"label.text-wrap\">Text Wrap</ox-i18n> </label>\n </div>\n\n ${!value.textWrap\n ? html` <label for=\"checkbox-textOverflow\">\n <ox-i18n msgid=\"label.text-overflow\">Text Overflow</ox-i18n>\n </label>\n <select value-key=\"textOverflow\" .value=${value.textOverflow || ''}>\n <option value=\"\" selected>none</option>\n <option value=\"ellipsis\">ellipsis</option>\n <option value=\"clip\">clip</option>\n </select>`\n : ''}\n\n <label> <ox-i18n msgid=\"label.padding\">padding</ox-i18n> </label>\n <table class=\"box-padding\">\n <tr>\n <td class=\"slide1\"></td>\n <td class=\"slide2\"></td>\n <td class=\"slide3\"></td>\n </tr>\n <tr>\n <td class=\"slide4\"></td>\n <td class=\"slide5\">\n <input type=\"number\" value-key=\"paddingTop\" .value=${value.paddingTop || 0} />\n <input type=\"number\" value-key=\"paddingLeft\" .value=${value.paddingLeft || 0} />\n <input type=\"number\" value-key=\"paddingRight\" .value=${value.paddingRight || 0} />\n <input type=\"number\" value-key=\"paddingBottom\" .value=${value.paddingBottom || 0} />\n </td>\n <td class=\"slide6\"></td>\n </tr>\n <tr>\n <td class=\"slide7\"></td>\n <td class=\"slide8\"></td>\n <td class=\"slide9\"></td>\n </tr>\n </table>\n </div>\n </fieldset>\n `\n : html``}\n ${this.selected.length && this.selected[0].isRootModel()\n ? html`\n <fieldset class=\"icon-label\">\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/viewer-option\" msgid=\"label.viewer-option\"\n >Viewer Option</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label><ox-i18n msgid=\"label.fit\">Fit</ox-i18n></label>\n <select value-key=\"fitMode\" .value=${value.fitMode || 'ratio'}>\n <option value=\"none\">none</option>\n <option value=\"center\">center</option>\n <option value=\"ratio\" selected>ratio</option>\n <option value=\"both\">both</option>\n <option value=\"width\">width</option>\n <option value=\"height\">height</option>\n </select>\n </div>\n </fieldset>\n <fieldset class=\"icon-label\">\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/print-option\" msgid=\"label.label-print\"\n >Print Option</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label class=\"rotate\"><ox-i18n msgid=\"label.label-rotation\">Label Rotation</ox-i18n></label>\n <select value-key=\"labelRotation\" .value=${value.labelRotation || 'N'}>\n <option value=\"N\" selected>0°</option>\n <option value=\"B\">90°</option>\n <option value=\"I\">180°</option>\n <option value=\"R\">270°</option>\n </select>\n </div>\n </fieldset>\n `\n : html``}\n `\n }\n\n _onValueChange(e: Event) {\n var element = e.target as HTMLElement\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n var value = this._getValueFromEventTarget(element)\n\n if (key.indexOf('bounds.') == 0) {\n if (isNaN(value)) return\n this.dispatchEvent(\n new CustomEvent('bounds-change', {\n bubbles: true,\n composed: true,\n detail: {\n [key.substr(7)]: value\n }\n })\n )\n } else {\n this._onAfterValueChange(key, value)\n }\n }\n\n _hasTextProperty(selected: Component[]) {\n for (let i = 0; i < selected.length; i++) {\n if (!selected[i].hasTextProperty) return false\n }\n\n return true\n }\n\n _hasProperties(selected: Component[]) {\n if (!selected || selected.length == 0 || (selected[0] && selected[0].isLayer && selected[0].isLayer())) return false\n\n return true\n }\n\n _isIdentifiable(selected: Component[]) {\n if (!selected || selected.length == 0 || selected.length > 1 || (selected[0].isLayer && selected[0].isLayer()))\n return false\n\n return true\n }\n\n _isClassIdentifiable(selected: Component[]) {\n if (!selected || (selected[0] && selected[0].isLayer())) return false\n\n return true\n }\n\n _isLine(selected: Component[]) {\n if (!selected || !(selected[0] && selected[0].isLine())) return false\n\n return true\n }\n\n _is3dish(selected: Component[]) {\n if (!selected || !(selected[0] && selected[0].is3dish())) return false\n\n return true\n }\n}\n"]}

package/dist/src/modeller/property-sidebar/specifics/specific-properties-builder.d.ts DELETED Viewed

@@ -1,16 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import '@operato/app/property-editor.js';
-import { LitElement, PropertyValues } from 'lit';
-export declare class SpecificPropertiesBuilder extends LitElement {
-    value: any;
-    props: any[];
-    propertyEditor: any;
-    render(): import("lit-html").TemplateResult<1>;
-    firstUpdated(): void;
-    updated(changes: PropertyValues<this>): void;
-    _onPropsChanged(props: any[]): void;
-    _setValues(): void;
-    _onValueChanged(e: Event): void;
-}