@operato/property-editor 0.2.3 → 0.2.33

package/dist/src/property-3dish.js

@@ -1,140 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-let Property3Dish = class Property3Dish extends LitElement {
-    firstUpdated() {
-        this.renderRoot.addEventListener('change', this._onChange.bind(this));
-    }
-    _onChange(e) {
-        var element = e.target;
-        var id = element.id;
-        var prop = id.substr(1);
-        var value = Number(element.value);
-        switch (element.tagName) {
-            case 'PROPERTY-ANGLE':
-                value = Number(element.radian || 0);
-                break;
-        }
-        switch (id) {
-            case 'tx':
-            case 'ty':
-            case 'tz':
-                this.dispatchEvent(new CustomEvent('translate-changed', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        value: {
-                            ...this.translatex,
-                            [prop]: value
-                        }
-                    }
-                }));
-                break;
-            case 'rx':
-            case 'ry':
-            case 'rz':
-                this.dispatchEvent(new CustomEvent('rotate-changed', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        value: {
-                            ...this.rotate,
-                            [prop]: value
-                        }
-                    }
-                }));
-                break;
-            case 'sx':
-            case 'sy':
-            case 'sz':
-                this.dispatchEvent(new CustomEvent('scale-changed', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        value: {
-                            ...this.scale,
-                            [prop]: value
-                        }
-                    }
-                }));
-                break;
-            default:
-                // dimension
-                this.dispatchEvent(new CustomEvent('dimension-changed', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        value: {
-                            ...this.dimension,
-                            [prop]: value
-                        }
-                    }
-                }));
-        }
-    }
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return html `
-      <span></span> <span><i18n-msg msgid="label.x-axes">x-axes</i18n-msg></span>
-      <span><i18n-msg msgid="label.y-axes">y-axes</i18n-msg></span>
-      <span><i18n-msg msgid="label.z-axes">z-axes</i18n-msg></span>
-
-      <label><i18n-msg msgid="label.dimension">dimension</i18n-msg></label>
-      <input type="number" id="dwidth" .value=${(_a = this.dimension) === null || _a === void 0 ? void 0 : _a.width} />
-      <input type="number" id="dheight" .value=${(_b = this.dimension) === null || _b === void 0 ? void 0 : _b.height} />
-      <input type="number" id="ddepth" .value=${(_c = this.dimension) === null || _c === void 0 ? void 0 : _c.depth} />
-
-      <label><i18n-msg msgid="label.translate">translate</i18n-msg></label>
-      <input type="number" id="tx" .value=${(_d = this.translatex) === null || _d === void 0 ? void 0 : _d.x} />
-      <input type="number" id="ty" .value=${(_e = this.translatex) === null || _e === void 0 ? void 0 : _e.y} />
-      <input type="number" id="tz" .value=${(_f = this.translatex) === null || _f === void 0 ? void 0 : _f.z} />
-
-      <label><i18n-msg msgid="label.rotate">rotate</i18n-msg></label>
-      <property-angle id="rx" .radian=${(_g = this.rotate) === null || _g === void 0 ? void 0 : _g.x}></property-angle>
-      <property-angle id="ry" .radian=${(_h = this.rotate) === null || _h === void 0 ? void 0 : _h.y}></property-angle>
-      <property-angle id="rz" .radian=${(_j = this.rotate) === null || _j === void 0 ? void 0 : _j.z}></property-angle>
-    `;
-    }
-};
-Property3Dish.styles = [
-    css `
-      :host {
-        display: grid;
-        grid-template-columns: repeat(4, minmax(50px, 1fr));
-        grid-gap: 5px;
-        grid-auto-rows: minmax(24px, auto);
-      }
-
-      :host > * {
-        grid-column: span 1;
-      }
-
-      label {
-        text-align: right;
-      }
-
-      span {
-        text-align: center;
-      }
-    `
-];
-__decorate([
-    property({ type: Object })
-], Property3Dish.prototype, "dimension", void 0);
-__decorate([
-    property({ type: Object })
-], Property3Dish.prototype, "translatex", void 0);
-__decorate([
-    property({ type: Object })
-], Property3Dish.prototype, "rotate", void 0);
-__decorate([
-    property({ type: Object })
-], Property3Dish.prototype, "scale", void 0);
-Property3Dish = __decorate([
-    customElement('property-3dish')
-], Property3Dish);
-export { Property3Dish };
-//# sourceMappingURL=property-3dish.js.map

package/dist/src/property-3dish.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"property-3dish.js","sourceRoot":"","sources":["../../src/property-3dish.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { PropertyAngle } from './property-angle'\n\n@customElement('property-3dish')\nexport class Property3Dish extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: grid;\n        grid-template-columns: repeat(4, minmax(50px, 1fr));\n        grid-gap: 5px;\n        grid-auto-rows: minmax(24px, auto);\n      }\n\n      :host > * {\n        grid-column: span 1;\n      }\n\n      label {\n        text-align: right;\n      }\n\n      span {\n        text-align: center;\n      }\n    `\n  ]\n\n  @property({ type: Object }) dimension?: { width: number; height: number; depth: number }\n  /*\n   * translate는 고유한 html element의 attribute이므로, property는 translatex로 한다.\n   */\n  @property({ type: Object }) translatex?: { x: number; y: number; z: number }\n  @property({ type: Object }) rotate?: { x: number; y: number; z: number }\n  @property({ type: Object }) scale?: { x: number; y: number; z: number }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  _onChange(e: Event) {\n    var element = e.target as HTMLElement\n    var id = element.id\n    var prop = id.substr(1)\n    var value = Number((element as HTMLInputElement).value)\n\n    switch (element.tagName) {\n      case 'PROPERTY-ANGLE':\n        value = Number((element as PropertyAngle).radian || 0)\n        break\n    }\n\n    switch (id) {\n      case 'tx':\n      case 'ty':\n      case 'tz':\n        this.dispatchEvent(\n          new CustomEvent('translate-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: {\n                ...this.translatex,\n                [prop]: value\n              }\n            }\n          })\n        )\n        break\n\n      case 'rx':\n      case 'ry':\n      case 'rz':\n        this.dispatchEvent(\n          new CustomEvent('rotate-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: {\n                ...this.rotate,\n                [prop]: value\n              }\n            }\n          })\n        )\n        break\n\n      case 'sx':\n      case 'sy':\n      case 'sz':\n        this.dispatchEvent(\n          new CustomEvent('scale-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: {\n                ...this.scale,\n                [prop]: value\n              }\n            }\n          })\n        )\n        break\n\n      default:\n        // dimension\n        this.dispatchEvent(\n          new CustomEvent('dimension-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: {\n                ...this.dimension,\n                [prop]: value\n              }\n            }\n          })\n        )\n    }\n  }\n\n  render() {\n    return html`\n      <span></span> <span><i18n-msg msgid=\"label.x-axes\">x-axes</i18n-msg></span>\n      <span><i18n-msg msgid=\"label.y-axes\">y-axes</i18n-msg></span>\n      <span><i18n-msg msgid=\"label.z-axes\">z-axes</i18n-msg></span>\n\n      <label><i18n-msg msgid=\"label.dimension\">dimension</i18n-msg></label>\n      <input type=\"number\" id=\"dwidth\" .value=${this.dimension?.width} />\n      <input type=\"number\" id=\"dheight\" .value=${this.dimension?.height} />\n      <input type=\"number\" id=\"ddepth\" .value=${this.dimension?.depth} />\n\n      <label><i18n-msg msgid=\"label.translate\">translate</i18n-msg></label>\n      <input type=\"number\" id=\"tx\" .value=${this.translatex?.x} />\n      <input type=\"number\" id=\"ty\" .value=${this.translatex?.y} />\n      <input type=\"number\" id=\"tz\" .value=${this.translatex?.z} />\n\n      <label><i18n-msg msgid=\"label.rotate\">rotate</i18n-msg></label>\n      <property-angle id=\"rx\" .radian=${this.rotate?.x}></property-angle>\n      <property-angle id=\"ry\" .radian=${this.rotate?.y}></property-angle>\n      <property-angle id=\"rz\" .radian=${this.rotate?.z}></property-angle>\n    `\n  }\n}\n"]}

package/dist/src/property-angle.d.ts

@@ -1,14 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { LitElement } from 'lit';
-export declare class PropertyAngle extends LitElement {
-    static styles: import("lit").CSSResult[];
-    radian?: string | number;
-    input: HTMLInputElement;
-    render(): import("lit-html").TemplateResult<1>;
-    get placeholder(): string;
-    _onChangeValue(e: Event): void;
-    _toDegree(radian: string | number | undefined): number;
-    _toRadian(degree: string | number | undefined): number | undefined;
-}

package/dist/src/property-angle.js

@@ -1,56 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import { LitElement, css, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-let PropertyAngle = class PropertyAngle extends LitElement {
-    render() {
-        return html `
-      <input
-        type="number"
-        .value=${this._toDegree(this.radian)}
-        @change=${(e) => this._onChangeValue(e)}
-        .placeholder=${this.placeholder}
-      />
-    `;
-    }
-    get placeholder() {
-        return this.getAttribute('placeholder') || '0°';
-    }
-    _onChangeValue(e) {
-        this.radian = this._toRadian(this.input.value);
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-    }
-    _toDegree(radian) {
-        return Math.round(((Number(radian) || 0) * 180) / Math.PI);
-    }
-    _toRadian(degree) {
-        return isNaN(Number(degree)) ? undefined : Number(degree) * (Math.PI / 180);
-    }
-};
-PropertyAngle.styles = [
-    css `
-      :host {
-        display: inline-block;
-      }
-
-      input {
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-      }
-    `
-];
-__decorate([
-    property({ type: Number })
-], PropertyAngle.prototype, "radian", void 0);
-__decorate([
-    query('input')
-], PropertyAngle.prototype, "input", void 0);
-PropertyAngle = __decorate([
-    customElement('property-angle')
-], PropertyAngle);
-export { PropertyAngle };
-//# sourceMappingURL=property-angle.js.map

package/dist/src/property-angle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"property-angle.js","sourceRoot":"","sources":["../../src/property-angle.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGlE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAmB3C,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;kBAC1B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;uBAC/B,IAAI,CAAC,WAAW;;KAElC,CAAA;IACH,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,IAAI,CAAA;IACjD,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAE9C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,SAAS,CAAC,MAAmC;QAC3C,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAA;IAC5D,CAAC;IAED,SAAS,CAAC,MAAmC;QAC3C,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,CAAA;IAC7E,CAAC;CACF,CAAA;AA9CQ,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAyB;AACpC;IAAf,KAAK,CAAC,OAAO,CAAC;4CAAyB;AAjB7B,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CA+CzB;SA/CY,aAAa","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\n@customElement('property-angle')\nexport class PropertyAngle extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n\n      input {\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        border: 1px solid rgba(0, 0, 0, 0.2);\n      }\n    `\n  ]\n\n  @property({ type: Number }) radian?: string | number\n  @query('input') input!: HTMLInputElement\n\n  render() {\n    return html`\n      <input\n        type=\"number\"\n        .value=${this._toDegree(this.radian)}\n        @change=${(e: Event) => this._onChangeValue(e)}\n        .placeholder=${this.placeholder}\n      />\n    `\n  }\n\n  get placeholder() {\n    return this.getAttribute('placeholder') || '0°'\n  }\n\n  _onChangeValue(e: Event) {\n    this.radian = this._toRadian(this.input.value)\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _toDegree(radian: string | number | undefined) {\n    return Math.round(((Number(radian) || 0) * 180) / Math.PI)\n  }\n\n  _toRadian(degree: string | number | undefined) {\n    return isNaN(Number(degree)) ? undefined : Number(degree) * (Math.PI / 180)\n  }\n}\n"]}

package/dist/src/property-buttons-radio.d.ts

@@ -1,28 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { LitElement, PropertyValues } from 'lit';
-/**
-여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.
-
-Example:
-
-  <property-buttons-radio @change=${e => this._onChange(e)} value=${value}>
-    <div data-value="top"></div>
-    <div data-value="middle"></div>
-    <div data-value="bottom"></div>
-  </property-buttons-radio>
-*/
-export declare class PropertyButtonsRadio extends LitElement {
-    static styles: import("lit").CSSResult[];
-    /**
-     * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.
-     */
-    value: Object | null;
-    mandatory: boolean;
-    render(): import("lit-html").TemplateResult<1>;
-    updated(changes: PropertyValues<this>): void;
-    get buttons(): Element[];
-    _onValueChanged(value: Object | null): void;
-    _onTapButton(e: Event): void;
-}

package/dist/src/property-buttons-radio.js

@@ -1,90 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-/**
-여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.
-
-Example:
-
-  <property-buttons-radio @change=${e => this._onChange(e)} value=${value}>
-    <div data-value="top"></div>
-    <div data-value="middle"></div>
-    <div data-value="bottom"></div>
-  </property-buttons-radio>
-*/
-let PropertyButtonsRadio = class PropertyButtonsRadio extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.
-         */
-        this.value = null;
-    }
-    render() {
-        return html ` <slot @click=${(e) => this._onTapButton(e)}></slot> `;
-    }
-    updated(changes) {
-        changes.has('value') && this._onValueChanged(this.value);
-    }
-    get buttons() {
-        return Array.from(this.querySelectorAll('*'));
-    }
-    _onValueChanged(value) {
-        this.buttons.forEach(button => {
-            if (value === button.getAttribute('data-value')) {
-                button.setAttribute('active', '');
-            }
-            else {
-                button.removeAttribute('active');
-            }
-        });
-    }
-    _onTapButton(e) {
-        var target = e.target;
-        while (!target.hasAttribute('data-value') && target !== this) {
-            target = target.parentElement;
-        }
-        if (target === this) {
-            return;
-        }
-        var old = this.value;
-        if (!this.mandatory) {
-            if (!target.getAttribute('active')) {
-                this.value = target.getAttribute('data-value');
-                target.setAttribute('active', '');
-            }
-            else {
-                this.value = null;
-                target.removeAttribute('active');
-            }
-        }
-        else {
-            this.value = target.getAttribute('data-value');
-            target.setAttribute('active', '');
-        }
-        if (old !== this.value) {
-            this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-        }
-    }
-};
-PropertyButtonsRadio.styles = [
-    css `
-      :host {
-        display: inline-block;
-      }
-    `
-];
-__decorate([
-    property({ type: Object })
-], PropertyButtonsRadio.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean })
-], PropertyButtonsRadio.prototype, "mandatory", void 0);
-PropertyButtonsRadio = __decorate([
-    customElement('property-buttons-radio')
-], PropertyButtonsRadio);
-export { PropertyButtonsRadio };
-//# sourceMappingURL=property-buttons-radio.js.map

package/dist/src/property-buttons-radio.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"property-buttons-radio.js","sourceRoot":"","sources":["../../src/property-buttons-radio.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE;;;;;;;;;;EAUE;AAEF,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,UAAU;IAApD;;QASE;;WAEG;QACyB,UAAK,GAAkB,IAAI,CAAA;IAuDzD,CAAC;IApDC,MAAM;QACJ,OAAO,IAAI,CAAA,iBAAiB,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAA;IAC3E,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC1D,CAAC;IAED,IAAI,OAAO;QACT,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAA;IAC/C,CAAC;IAED,eAAe,CAAC,KAAoB;QAClC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YAC5B,IAAI,KAAK,KAAK,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE;gBAC/C,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;aAClC;iBAAM;gBACL,MAAM,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;aACjC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,YAAY,CAAC,CAAQ;QACnB,IAAI,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAA;QAEpC,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,MAAM,KAAK,IAAI,EAAE;YAC5D,MAAM,GAAG,MAAM,CAAC,aAAc,CAAA;SAC/B;QAED,IAAI,MAAM,KAAK,IAAI,EAAE;YACnB,OAAM;SACP;QAED,IAAI,GAAG,GAAG,IAAI,CAAC,KAAK,CAAA;QAEpB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE;gBAClC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,CAAA;gBAC9C,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;aAClC;iBAAM;gBACL,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;gBACjB,MAAM,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;aACjC;SACF;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,CAAA;YAC9C,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;SAClC;QAED,IAAI,GAAG,KAAK,IAAI,CAAC,KAAK,EAAE;YACtB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;SACjF;IACH,CAAC;CACF,CAAA;AAlEQ,2BAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;CACF,CAAA;AAK2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAA4B;AAC1B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDAAoB;AAbrC,oBAAoB;IADhC,aAAa,CAAC,wBAAwB,CAAC;GAC3B,oBAAoB,CAmEhC;SAnEY,oBAAoB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\n/**\n여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.\n\nExample:\n\n  <property-buttons-radio @change=${e => this._onChange(e)} value=${value}>\n    <div data-value=\"top\"></div>\n    <div data-value=\"middle\"></div>\n    <div data-value=\"bottom\"></div>\n  </property-buttons-radio>\n*/\n@customElement('property-buttons-radio')\nexport class PropertyButtonsRadio extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n    `\n  ]\n\n  /**\n   * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.\n   */\n  @property({ type: Object }) value: Object | null = null\n  @property({ type: Boolean }) mandatory!: boolean\n\n  render() {\n    return html` <slot @click=${(e: Event) => this._onTapButton(e)}></slot> `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('value') && this._onValueChanged(this.value)\n  }\n\n  get buttons() {\n    return Array.from(this.querySelectorAll('*'))\n  }\n\n  _onValueChanged(value: Object | null) {\n    this.buttons.forEach(button => {\n      if (value === button.getAttribute('data-value')) {\n        button.setAttribute('active', '')\n      } else {\n        button.removeAttribute('active')\n      }\n    })\n  }\n\n  _onTapButton(e: Event) {\n    var target = e.target as HTMLElement\n\n    while (!target.hasAttribute('data-value') && target !== this) {\n      target = target.parentElement!\n    }\n\n    if (target === this) {\n      return\n    }\n\n    var old = this.value\n\n    if (!this.mandatory) {\n      if (!target.getAttribute('active')) {\n        this.value = target.getAttribute('data-value')\n        target.setAttribute('active', '')\n      } else {\n        this.value = null\n        target.removeAttribute('active')\n      }\n    } else {\n      this.value = target.getAttribute('data-value')\n      target.setAttribute('active', '')\n    }\n\n    if (old !== this.value) {\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    }\n  }\n}\n"]}

package/dist/src/property-stack.d.ts

@@ -1,21 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { LitElement } from 'lit';
-export default class PropertyStack extends LitElement {
-    static styles: import("lit").CSSResult[];
-    /**
-     * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.
-     */
-    stack: {
-        name: string;
-    }[];
-    /**
-     * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.
-     */
-    activeIndex: number;
-    render(): import("lit-html").TemplateResult<1>;
-    _onClickAddFloor(e: Event): void;
-    _onClickToActive(e: Event): void;
-    _onClickRemoveFloor(e: Event): void;
-}

package/dist/src/property-stack.js

@@ -1,108 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-let PropertyStack = class PropertyStack extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.
-         */
-        this.stack = [];
-        /**
-         * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.
-         */
-        this.activeIndex = 0;
-    }
-    render() {
-        const stack = [...this.stack].reverse();
-        const length = stack.length;
-        return html `
-      <button id="add-floor" @click=${(e) => this._onClickAddFloor(e)}>+</button>
-
-      ${stack.map((item, index) => html `
-          <div
-            ?active=${length - index - 1 == this.activeIndex}
-            @click=${(e) => this._onClickToActive(e)}
-            idx=${length - index - 1}
-          >
-            ${item.name} <button @click=${(e) => this._onClickRemoveFloor(e)}>-</button>
-          </div>
-        `)}
-    `;
-    }
-    _onClickAddFloor(e) {
-        this.stack.push({ name: String(this.stack.length + 1) });
-        this.requestUpdate();
-    }
-    _onClickToActive(e) {
-        const div = e.target;
-        if (div.tagName != 'DIV') {
-            return;
-        }
-        this.activeIndex = Number(div.getAttribute('idx'));
-    }
-    _onClickRemoveFloor(e) {
-        const div = e.target.parentElement;
-        if ((div === null || div === void 0 ? void 0 : div.tagName) != 'DIV') {
-            return;
-        }
-        const idx = Number(div.getAttribute('idx'));
-        this.stack.splice(idx, 1);
-        if (this.activeIndex == idx) {
-            this.activeIndex = 0;
-        }
-        else if (this.activeIndex >= idx) {
-            this.activeIndex--;
-        }
-        else if (this.activeIndex >= this.stack.length) {
-            this.activeIndex = 0;
-        }
-        this.requestUpdate();
-    }
-};
-PropertyStack.styles = [
-    css `
-      :host {
-        display: block;
-      }
-
-      #add-floor {
-        width: 100%;
-        height: 20px;
-        background-color: blue;
-        color: white;
-      }
-
-      div {
-        background-color: blue;
-        width: calc(100% - 40px);
-        width: -webkit-calc(100% - 40px);
-        min-height: 20px;
-      }
-
-      div[active] {
-        background-color: red;
-      }
-
-      div button {
-        position: absolute;
-        right: 10px;
-        width: 30px;
-        min-height: 20px;
-      }
-    `
-];
-__decorate([
-    property({ type: Array })
-], PropertyStack.prototype, "stack", void 0);
-__decorate([
-    property({ type: Number })
-], PropertyStack.prototype, "activeIndex", void 0);
-PropertyStack = __decorate([
-    customElement('property-stack')
-], PropertyStack);
-export default PropertyStack;
-//# sourceMappingURL=property-stack.js.map

package/dist/src/property-stack.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"property-stack.js","sourceRoot":"","sources":["../../src/property-stack.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('property-stack')\nexport default class PropertyStack extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n\n      #add-floor {\n        width: 100%;\n        height: 20px;\n        background-color: blue;\n        color: white;\n      }\n\n      div {\n        background-color: blue;\n        width: calc(100% - 40px);\n        width: -webkit-calc(100% - 40px);\n        min-height: 20px;\n      }\n\n      div[active] {\n        background-color: red;\n      }\n\n      div button {\n        position: absolute;\n        right: 10px;\n        width: 30px;\n        min-height: 20px;\n      }\n    `\n  ]\n\n  /**\n   * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.\n   */\n  @property({ type: Array }) stack: { name: string }[] = []\n\n  /**\n   * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.\n   */\n  @property({ type: Number }) activeIndex: number = 0\n\n  render() {\n    const stack = [...this.stack].reverse()\n    const length = stack.length\n\n    return html`\n      <button id=\"add-floor\" @click=${(e: Event) => this._onClickAddFloor(e)}>+</button>\n\n      ${stack.map(\n        (item, index) => html`\n          <div\n            ?active=${length - index - 1 == this.activeIndex}\n            @click=${(e: Event) => this._onClickToActive(e)}\n            idx=${length - index - 1}\n          >\n            ${item.name} <button @click=${(e: Event) => this._onClickRemoveFloor(e)}>-</button>\n          </div>\n        `\n      )}\n    `\n  }\n\n  _onClickAddFloor(e: Event) {\n    this.stack.push({ name: String(this.stack.length + 1) })\n    this.requestUpdate()\n  }\n\n  _onClickToActive(e: Event) {\n    const div = e.target as HTMLElement\n    if (div.tagName != 'DIV') {\n      return\n    }\n\n    this.activeIndex = Number(div.getAttribute('idx'))\n  }\n\n  _onClickRemoveFloor(e: Event) {\n    const div = (e.target as HTMLElement).parentElement\n\n    if (div?.tagName != 'DIV') {\n      return\n    }\n\n    const idx = Number(div.getAttribute('idx'))\n\n    this.stack.splice(idx, 1)\n\n    if (this.activeIndex == idx) {\n      this.activeIndex = 0\n    } else if (this.activeIndex >= idx) {\n      this.activeIndex--\n    } else if (this.activeIndex >= this.stack.length) {\n      this.activeIndex = 0\n    }\n\n    this.requestUpdate()\n  }\n}\n"]}

package/dist/test/property-angle.test.d.ts

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

package/dist/test/property-angle.test.js

@@ -1,23 +0,0 @@
-import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-describe('PropertyAngle', () => {
-    it('has a default title "Hey there" and angle 5', async () => {
-        const el = await fixture(html `<property-angle></property-angle>`);
-        expect(el.title).to.equal('Hey there');
-        expect(el.radian).to.equal(5);
-    });
-    it('increases the angle on button click', async () => {
-        const el = await fixture(html `<property-angle></property-angle>`);
-        el.shadowRoot.querySelector('button').click();
-        expect(el.radian).to.equal(6);
-    });
-    it('can override the title via attribute', async () => {
-        const el = await fixture(html `<property-angle title="attribute title"></property-angle>`);
-        expect(el.title).to.equal('attribute title');
-    });
-    it('passes the a11y audit', async () => {
-        const el = await fixture(html `<property-angle></property-angle>`);
-        await expect(el).shadowDom.to.be.accessible();
-    });
-});
-//# sourceMappingURL=property-angle.test.js.map

package/dist/test/property-angle.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"property-angle.test.js","sourceRoot":"","sources":["../../test/property-angle.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAGlD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;QAC3D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAgB,IAAI,CAAA,mCAAmC,CAAC,CAAA;QAEhF,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;QACtC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IAC/B,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAgB,IAAI,CAAA,mCAAmC,CAAC,CAAA;QAChF,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,KAAK,EAAE,CAAA;QAE/C,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IAC/B,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAgB,IAAI,CAAA,2DAA2D,CAAC,CAAA;QAExG,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACrC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAgB,IAAI,CAAA,mCAAmC,CAAC,CAAA;QAEhF,MAAM,MAAM,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAA;IAC/C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import { expect, fixture } from '@open-wc/testing'\n\nimport { PropertyAngle } from '../src/property-angle'\nimport { html } from 'lit'\n\ndescribe('PropertyAngle', () => {\n  it('has a default title \"Hey there\" and angle 5', async () => {\n    const el = await fixture<PropertyAngle>(html`<property-angle></property-angle>`)\n\n    expect(el.title).to.equal('Hey there')\n    expect(el.radian).to.equal(5)\n  })\n\n  it('increases the angle on button click', async () => {\n    const el = await fixture<PropertyAngle>(html`<property-angle></property-angle>`)\n    el.shadowRoot!.querySelector('button')!.click()\n\n    expect(el.radian).to.equal(6)\n  })\n\n  it('can override the title via attribute', async () => {\n    const el = await fixture<PropertyAngle>(html`<property-angle title=\"attribute title\"></property-angle>`)\n\n    expect(el.title).to.equal('attribute title')\n  })\n\n  it('passes the a11y audit', async () => {\n    const el = await fixture<PropertyAngle>(html`<property-angle></property-angle>`)\n\n    await expect(el).shadowDom.to.be.accessible()\n  })\n})\n"]}