@operato/app 9.0.0-beta.6 → 9.0.0-beta.62

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "9.0.0-beta.6",
+  "version": "9.0.0-beta.62",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -11,8 +11,6 @@
     "./package.json": "./package.json",
     "./input.js": "./dist/src/input/index.js",
     "./input/ox-input-graphql.js": "./dist/src/input/ox-input-graphql.js",
-    "./input/ox-input-background-pattern.js": "./dist/src/input/ox-input-background-pattern.js",
-    "./input/ox-input-fill-style.js": "./dist/src/input/ox-input-fill-style.js",
     "./selector/ox-selector-resource-id.js": "./dist/src/selector/ox-selector-resource-id.js",
     "./selector/ox-selector-resource-object.js": "./dist/src/selector/ox-selector-resource-object.js",
     "./property-editor.js": "./dist/src/property-editor/index.js",
@@ -43,12 +41,6 @@
       "input/ox-input-graphql.js": [
         "dist/src/input/ox-input-graphql.d.ts"
       ],
-      "input/ox-input-background-pattern.js": [
-        "dist/src/input/ox-input-background-pattern.d.ts"
-      ],
-      "input/ox-input-fill-style.js": [
-        "dist/src/input/ox-input-fill-style.d.ts"
-      ],
       "selector/ox-selector-resource-id.js": [
         "dist/src/selector/ox-selector-resource-id.d.ts"
       ],
@@ -148,18 +140,19 @@
     "@graphql-tools/delegate": "^10.0.1",
     "@graphql-tools/wrap": "^8.5.0",
     "@material/web": "^2.0.0",
-    "@operato/attachment": "^9.0.0-beta.6",
-    "@operato/data-grist": "^9.0.0-beta.6",
-    "@operato/font": "^9.0.0-beta.6",
-    "@operato/form": "^9.0.0-beta.6",
-    "@operato/graphql": "^9.0.0-beta.6",
-    "@operato/i18n": "^9.0.0-beta.5",
-    "@operato/input": "^9.0.0-beta.6",
-    "@operato/layout": "^9.0.0-beta.6",
-    "@operato/property-editor": "^9.0.0-beta.6",
-    "@operato/shell": "^9.0.0-beta.6",
-    "@operato/styles": "^9.0.0-beta.6",
-    "@operato/utils": "^9.0.0-beta.6",
+    "@operato/attachment": "^9.0.0-beta.62",
+    "@operato/data-grist": "^9.0.0-beta.62",
+    "@operato/font": "^9.0.0-beta.62",
+    "@operato/form": "^9.0.0-beta.61",
+    "@operato/graphql": "^9.0.0-beta.38",
+    "@operato/i18n": "^9.0.0-beta.37",
+    "@operato/input": "^9.0.0-beta.61",
+    "@operato/layout": "^9.0.0-beta.52",
+    "@operato/property-editor": "^9.0.0-beta.62",
+    "@operato/property-panel": "^9.0.0-beta.62",
+    "@operato/shell": "^9.0.0-beta.52",
+    "@operato/styles": "^9.0.0-beta.47",
+    "@operato/utils": "^9.0.0-beta.38",
     "cm6-graphql": "^0.0.14",
     "codemirror": "^6.0.1",
     "cronstrue": "^2.2.0",
@@ -200,5 +193,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "7e4dd57049f0a3dd0cbd194f7998e81f3b2c7559"
+  "gitHead": "ce8ef98553e40dbf150cfac5f1ebe574dc22d426"
 }

package/dist/src/input/ox-input-background-pattern.d.ts

@@ -1,34 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import '@operato/i18n/ox-i18n.js';
-import '@operato/input/ox-input-color.js';
-import '@operato/attachment/ox-attachment-selector.js';
-import { OxFormField } from '@operato/input';
-export type BackgroundPatternOption = {
-    image?: HTMLImageElement | string;
-    color?: string;
-    align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom';
-    offsetX?: number;
-    offsetY?: number;
-    width?: number;
-    height?: number;
-    fitPattern?: boolean;
-    noRepeat?: boolean;
-};
-/**
- * 컴포넌트의 fill pattern을 편집하는 element
- *
- * Example:
- *  <ox-input-background-pattern
- *    @change="${e => { this.pattern = e.target.value }}"
- *    .value=${this.pattern}"
- *  ></ox-input-background-pattern>
- */
-export declare class OxInputBackgroundPattern extends OxFormField {
-    static styles: import("lit").CSSResult;
-    value?: BackgroundPatternOption;
-    render(): import("lit-html").TemplateResult<1>;
-    firstUpdated(): void;
-    _onChange(e: Event): void;
-}

package/dist/src/input/ox-input-background-pattern.js

@@ -1,178 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import '@operato/i18n/ox-i18n.js';
-import '@operato/input/ox-input-color.js';
-import '@operato/attachment/ox-attachment-selector.js';
-import { css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { OxFormField } from '@operato/input';
-/**
- * 컴포넌트의 fill pattern을 편집하는 element
- *
- * Example:
- *  <ox-input-background-pattern
- *    @change="${e => { this.pattern = e.target.value }}"
- *    .value=${this.pattern}"
- *  ></ox-input-background-pattern>
- */
-let OxInputBackgroundPattern = class OxInputBackgroundPattern extends OxFormField {
-    render() {
-        const value = this.value || {};
-        return html `
-      <label> <ox-i18n msgid="label.image">image</ox-i18n> </label>
-
-      <ox-attachment-selector
-        value-key="image"
-        .value=${value.image || ''}
-        .properties=${{
-            category: 'image'
-        }}
-        custom-editor
-      ></ox-attachment-selector>
-
-      <label> <ox-i18n msgid="label.align">align</ox-i18n> </label>
-
-      <select value-key="align" class="select-content" .value=${value.align}>
-        <option value="left-top">Left Top</option>
-        <option value="top">Center Top</option>
-        <option value="right-top">Right Top</option>
-        <option value="left">Left Center</option>
-        <option value="center">Center Center</option>
-        <option value="right">Right Center</option>
-        <option value="left-bottom">Left Bottom</option>
-        <option value="bottom">Center Bottom</option>
-        <option value="right-bottom">Right Bottom</option>
-      </select>
-
-      <div class="grid-10">
-        <label> <ox-i18n msgid="label.offset-x">offsetX</ox-i18n> </label>
-        <input type="number" value-key="offsetX" .value=${value.offsetX} />
-
-        <label> <ox-i18n msgid="label.offset-y">offsetY</ox-i18n> </label>
-        <input type="number" value-key="offsetY" .value=${value.offsetY} />
-
-        <label> <ox-i18n msgid="label.width">width</ox-i18n> </label>
-        <input type="number" value-key="width" .value=${value.width} />
-
-        <label> <ox-i18n msgid="label.height">height</ox-i18n> </label>
-        <input type="number" value-key="height" .value=${value.height} />
-      </div>
-
-      <div class="grid-10">
-        <label class="icon-only-label color"></label>
-        <ox-input-color value-key="color" .value=${value.color}> </ox-input-color>
-      </div>
-
-      <div class="grid-10">
-        <input value-key="fitPattern" type="checkbox" .checked=${value.fitPattern} required />
-        <label> <ox-i18n msgid="label.fit">fit</ox-i18n> </label>
-      </div>
-
-      <div class="grid-10">
-        <input value-key="noRepeat" type="checkbox" .checked=${value.noRepeat} required />
-        <label> <ox-i18n msgid="label.no-repeat">no repeat</ox-i18n> </label>
-      </div>
-    `;
-    }
-    firstUpdated() {
-        this.renderRoot.addEventListener('change', this._onChange.bind(this));
-    }
-    _onChange(e) {
-        var element = e.target;
-        var key = element.getAttribute('value-key');
-        var value = element.value;
-        if (key === 'fitPattern' || key === 'noRepeat') {
-            value = element.checked;
-        }
-        this.value = {
-            ...this.value,
-            [key]: value
-        };
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-    }
-};
-OxInputBackgroundPattern.styles = css `
-    :host,
-    .grid-10 {
-      display: grid;
-      grid-template-columns: repeat(10, 1fr);
-      grid-gap: 5px;
-      grid-auto-rows: minmax(24px, auto);
-
-      align-items: center;
-    }
-
-    * {
-      align-self: stretch;
-    }
-
-    label {
-      grid-column: span 2;
-      text-align: right;
-      text-transform: capitalize;
-
-      align-self: center;
-    }
-
-    .grid-10 {
-      grid-column: span 10;
-    }
-
-    select,
-    input,
-    [custom-editor] {
-      grid-column: span 8;
-    }
-
-    select {
-      height: 100%;
-      border: 1px solid rgba(0, 0, 0, 0.2);
-    }
-
-    input[type='checkbox'] {
-      grid-column: 3 / 4;
-      align-self: center;
-    }
-
-    input[type='checkbox'] ~ label {
-      grid-column: span 7;
-      text-align: left;
-    }
-
-    .grid-10 > input[type='number'] {
-      grid-column: span 3;
-      border: 1px solid rgba(0, 0, 0, 0.2);
-    }
-
-    .grid-10 > label {
-      grid-column: span 2;
-      text-align: right;
-    }
-
-    .grid-10 > .icon-only-label {
-      grid-column: span 2;
-
-      background: var(--url-icon-properties-label) no-repeat;
-      float: left;
-      margin: 0;
-      align-self: stretch;
-    }
-
-    .icon-only-label.color {
-      background-position: 100% -500px;
-    }
-
-    .grid-10 > ox-input-color {
-      grid-column: span 8;
-    }
-  `;
-__decorate([
-    property({ type: Object })
-], OxInputBackgroundPattern.prototype, "value", void 0);
-OxInputBackgroundPattern = __decorate([
-    customElement('ox-input-background-pattern')
-], OxInputBackgroundPattern);
-export { OxInputBackgroundPattern };
-//# sourceMappingURL=ox-input-background-pattern.js.map

package/dist/src/input/ox-input-background-pattern.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-background-pattern.js","sourceRoot":"","sources":["../../../src/input/ox-input-background-pattern.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,kCAAkC,CAAA;AACzC,OAAO,+CAA+C,CAAA;AAEtD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAc5C;;;;;;;;GAQG;AAGI,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,WAAW;IA+EvD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAK,EAA8B,CAAA;QAE3D,OAAO,IAAI,CAAA;;;;;iBAKE,KAAK,CAAC,KAAK,IAAI,EAAE;sBACZ;YACZ,QAAQ,EAAE,OAAO;SAClB;;;;;;gEAMuD,KAAK,CAAC,KAAK;;;;;;;;;;;;;;0DAcjB,KAAK,CAAC,OAAO;;;0DAGb,KAAK,CAAC,OAAO;;;wDAGf,KAAK,CAAC,KAAK;;;yDAGV,KAAK,CAAC,MAAM;;;;;mDAKlB,KAAK,CAAC,KAAK;;;;iEAIG,KAAK,CAAC,UAAU;;;;;+DAKlB,KAAK,CAAC,QAAQ;;;KAGxE,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,IAAI,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAC3C,IAAI,KAAK,GAAQ,OAAO,CAAC,KAAK,CAAA;QAE9B,IAAI,GAAG,KAAK,YAAY,IAAI,GAAG,KAAK,UAAU,EAAE,CAAC;YAC/C,KAAK,GAAG,OAAO,CAAC,OAAO,CAAA;QACzB,CAAC;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,GAAI,CAAC,EAAE,KAAK;SACd,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AA7JM,+BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0ElB,AA1EY,CA0EZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAgC;AA7EhD,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CA+JpC","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/attachment/ox-attachment-selector.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from '@operato/input'\n\nexport type BackgroundPatternOption = {\n  image?: HTMLImageElement | string\n  color?: string\n  align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'\n  offsetX?: number\n  offsetY?: number\n  width?: number\n  height?: number\n  fitPattern?: boolean\n  noRepeat?: boolean\n}\n\n/**\n * 컴포넌트의 fill pattern을 편집하는 element\n *\n * Example:\n *  <ox-input-background-pattern\n *    @change=\"${e => { this.pattern = e.target.value }}\"\n *    .value=${this.pattern}\"\n *  ></ox-input-background-pattern>\n */\n\n@customElement('ox-input-background-pattern')\nexport class OxInputBackgroundPattern extends OxFormField {\n  static styles = css`\n    :host,\n    .grid-10 {\n      display: grid;\n      grid-template-columns: repeat(10, 1fr);\n      grid-gap: 5px;\n      grid-auto-rows: minmax(24px, auto);\n\n      align-items: center;\n    }\n\n    * {\n      align-self: stretch;\n    }\n\n    label {\n      grid-column: span 2;\n      text-align: right;\n      text-transform: capitalize;\n\n      align-self: center;\n    }\n\n    .grid-10 {\n      grid-column: span 10;\n    }\n\n    select,\n    input,\n    [custom-editor] {\n      grid-column: span 8;\n    }\n\n    select {\n      height: 100%;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n\n    input[type='checkbox'] {\n      grid-column: 3 / 4;\n      align-self: center;\n    }\n\n    input[type='checkbox'] ~ label {\n      grid-column: span 7;\n      text-align: left;\n    }\n\n    .grid-10 > input[type='number'] {\n      grid-column: span 3;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n\n    .grid-10 > label {\n      grid-column: span 2;\n      text-align: right;\n    }\n\n    .grid-10 > .icon-only-label {\n      grid-column: span 2;\n\n      background: var(--url-icon-properties-label) no-repeat;\n      float: left;\n      margin: 0;\n      align-self: stretch;\n    }\n\n    .icon-only-label.color {\n      background-position: 100% -500px;\n    }\n\n    .grid-10 > ox-input-color {\n      grid-column: span 8;\n    }\n  `\n\n  @property({ type: Object }) value?: BackgroundPatternOption\n\n  render() {\n    const value = this.value || ({} as BackgroundPatternOption)\n\n    return html`\n      <label> <ox-i18n msgid=\"label.image\">image</ox-i18n> </label>\n\n      <ox-attachment-selector\n        value-key=\"image\"\n        .value=${value.image || ''}\n        .properties=${{\n          category: 'image'\n        }}\n        custom-editor\n      ></ox-attachment-selector>\n\n      <label> <ox-i18n msgid=\"label.align\">align</ox-i18n> </label>\n\n      <select value-key=\"align\" class=\"select-content\" .value=${value.align}>\n        <option value=\"left-top\">Left Top</option>\n        <option value=\"top\">Center Top</option>\n        <option value=\"right-top\">Right Top</option>\n        <option value=\"left\">Left Center</option>\n        <option value=\"center\">Center Center</option>\n        <option value=\"right\">Right Center</option>\n        <option value=\"left-bottom\">Left Bottom</option>\n        <option value=\"bottom\">Center Bottom</option>\n        <option value=\"right-bottom\">Right Bottom</option>\n      </select>\n\n      <div class=\"grid-10\">\n        <label> <ox-i18n msgid=\"label.offset-x\">offsetX</ox-i18n> </label>\n        <input type=\"number\" value-key=\"offsetX\" .value=${value.offsetX} />\n\n        <label> <ox-i18n msgid=\"label.offset-y\">offsetY</ox-i18n> </label>\n        <input type=\"number\" value-key=\"offsetY\" .value=${value.offsetY} />\n\n        <label> <ox-i18n msgid=\"label.width\">width</ox-i18n> </label>\n        <input type=\"number\" value-key=\"width\" .value=${value.width} />\n\n        <label> <ox-i18n msgid=\"label.height\">height</ox-i18n> </label>\n        <input type=\"number\" value-key=\"height\" .value=${value.height} />\n      </div>\n\n      <div class=\"grid-10\">\n        <label class=\"icon-only-label color\"></label>\n        <ox-input-color value-key=\"color\" .value=${value.color}> </ox-input-color>\n      </div>\n\n      <div class=\"grid-10\">\n        <input value-key=\"fitPattern\" type=\"checkbox\" .checked=${value.fitPattern} required />\n        <label> <ox-i18n msgid=\"label.fit\">fit</ox-i18n> </label>\n      </div>\n\n      <div class=\"grid-10\">\n        <input value-key=\"noRepeat\" type=\"checkbox\" .checked=${value.noRepeat} required />\n        <label> <ox-i18n msgid=\"label.no-repeat\">no repeat</ox-i18n> </label>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  _onChange(e: Event) {\n    var element = e.target as HTMLInputElement\n    var key = element.getAttribute('value-key')\n    var value: any = element.value\n\n    if (key === 'fitPattern' || key === 'noRepeat') {\n      value = element.checked\n    }\n\n    this.value = {\n      ...this.value,\n      [key!]: value\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/src/input/ox-input-fill-style.d.ts

@@ -1,44 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import '@operato/i18n/ox-i18n.js';
-import '@operato/input/ox-input-color.js';
-import '@operato/input/ox-input-color-stops.js';
-import '@operato/input/ox-input-color-gradient.js';
-import './ox-input-background-pattern.js';
-import { PropertyValues } from 'lit';
-import { ColorStop, GradientOption, OxFormField } from '@operato/input';
-import { BackgroundPatternOption } from './ox-input-background-pattern.js';
-export type FillStyle = {
-    type?: 'no' | 'solid' | 'gradient' | 'pattern';
-    gradientType?: 'linear' | 'radial';
-    colorStops?: ColorStop[];
-    rotation?: number;
-    center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom';
-    image?: HTMLImageElement | string;
-    offsetX?: number;
-    offsetY?: number;
-    width?: number;
-    height?: number;
-    align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom';
-    fitPattern?: boolean;
-    noRepeat?: boolean;
-    color?: string;
-} | 'no' | string;
-export declare class OxInputColorStyle extends OxFormField {
-    static styles: import("lit").CSSResult;
-    value?: FillStyle;
-    fillType?: string;
-    solid?: string;
-    gradient?: GradientOption;
-    pattern?: BackgroundPatternOption;
-    colorOnly: boolean;
-    private _block_reset;
-    updated(changes: PropertyValues<this>): void;
-    render(): import("lit-html").TemplateResult<1>;
-    _onChangedValue(value: FillStyle): Promise<void>;
-    _onChangedFillType(e: Event): void;
-    _onChangedSolid(e: Event): void;
-    _onChandedGradient(e: Event): void;
-    _onChangedPattern(e: Event): void;
-}

package/dist/src/input/ox-input-fill-style.js

@@ -1,341 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import '@operato/i18n/ox-i18n.js';
-import '@operato/input/ox-input-color.js';
-import '@operato/input/ox-input-color-stops.js';
-import '@operato/input/ox-input-color-gradient.js';
-import './ox-input-background-pattern.js';
-import { css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { OxFormField } from '@operato/input';
-let OxInputColorStyle = class OxInputColorStyle extends OxFormField {
-    constructor() {
-        super(...arguments);
-        this.colorOnly = false;
-        this._block_reset = false;
-    }
-    updated(changes) {
-        changes.has('value') && this._onChangedValue(this.value || {});
-    }
-    render() {
-        return html `
-      <div @change=${(e) => this._onChangedFillType(e)} fill-type>
-        <input
-          type="radio"
-          id="fill-type-no"
-          name="fill-type"
-          value="no"
-          .checked=${!this.fillType || this.fillType == 'no'}
-        />
-        <label for="fill-type-no"><ox-i18n msgid="label.no-fill">no fill</ox-i18n></label>
-        <input type="radio" id="fill-type-solid" name="fill-type" value="solid" .checked=${this.fillType == 'solid'} />
-        <label for="fill-type-solid"><ox-i18n msgid="label.solid">solid</ox-i18n></label>
-        <input
-          type="radio"
-          id="fill-type-gradient"
-          name="fill-type"
-          value="gradient"
-          .checked=${this.fillType == 'gradient'}
-        />
-
-        <label for="fill-type-gradient"><ox-i18n msgid="label.gradient">gradient</ox-i18n></label>
-
-        ${this.colorOnly
-            ? html ``
-            : html `
-              <input
-                type="radio"
-                id="fill-type-pattern"
-                name="fill-type"
-                value="pattern"
-                .checked=${this.fillType == 'pattern'}
-              />
-              <label for="fill-type-pattern"><ox-i18n msgid="label.pattern">pattern</ox-i18n></label>
-            `}
-      </div>
-
-      <div editors>
-        <div ?active=${this.fillType == 'no'}></div>
-
-        <div class="grid-10" ?active=${this.fillType == 'solid'}>
-          <label class="icon-only-label color"></label>
-          <ox-input-color @change=${(e) => this._onChangedSolid(e)} .value=${this.solid}> </ox-input-color>
-        </div>
-
-        <div ?active=${this.fillType == 'gradient'}>
-          <ox-input-color-gradient @change=${(e) => this._onChandedGradient(e)} .value=${this.gradient}>
-          </ox-input-color-gradient>
-        </div>
-
-        <div ?active=${this.fillType == 'pattern'}>
-          <ox-input-background-pattern @change=${(e) => this._onChangedPattern(e)} .value=${this.pattern}>
-          </ox-input-background-pattern>
-        </div>
-      </div>
-    `;
-    }
-    async _onChangedValue(value) {
-        /*
-         * this._block_reset의 역할은 내부 사용자 인터렉션에 의한 value의 변경시에는 각 type별 이전값을 유지하기 위함이다.
-         */
-        await this.requestUpdate();
-        /* 설정 값에 따라서, 멤버 속성을 설정한다. */
-        if (!value) {
-            this.fillType = 'no';
-            if (!this._block_reset) {
-                this.solid = undefined;
-                this.gradient = undefined;
-                this.pattern = undefined;
-            }
-            this._block_reset = false;
-            return;
-        }
-        switch (typeof value) {
-            case 'string':
-                this.fillType = 'solid';
-                this.solid = value;
-                if (!this._block_reset) {
-                    this.gradient = undefined;
-                    this.pattern = undefined;
-                }
-                break;
-            case 'object':
-                this.fillType = value.type;
-                if (value.type === 'gradient') {
-                    this.gradient = {
-                        type: value.gradientType || 'linear',
-                        colorStops: value.colorStops || [
-                            {
-                                position: 0,
-                                color: this.solid || '#000000'
-                            },
-                            {
-                                position: 1,
-                                color: this.solid || '#FFFFFF'
-                            }
-                        ],
-                        rotation: Number(value.rotation) || 0,
-                        center: value.center
-                    };
-                    if (!this._block_reset) {
-                        this.pattern = undefined;
-                        this.solid = undefined;
-                    }
-                }
-                else if (value.type === 'pattern') {
-                    this.pattern = {
-                        image: value.image,
-                        offsetX: Number(value.offsetX) || 0,
-                        offsetY: Number(value.offsetY) || 0,
-                        width: Number(value.width),
-                        height: Number(value.height),
-                        align: value.align,
-                        fitPattern: value.fitPattern,
-                        noRepeat: value.noRepeat,
-                        color: value.color
-                    };
-                    if (!this._block_reset) {
-                        this.gradient = undefined;
-                        this.solid = undefined;
-                    }
-                }
-                break;
-            default:
-        }
-        this._block_reset = false;
-    }
-    _onChangedFillType(e) {
-        const element = e.target;
-        this.fillType = element.value;
-        switch (this.fillType) {
-            case 'gradient':
-                if (!this.gradient) {
-                    this.gradient = {
-                        type: 'linear',
-                        colorStops: [
-                            {
-                                position: 0,
-                                color: this.solid || '#000000'
-                            },
-                            {
-                                position: 1,
-                                color: this.solid || '#FFFFFF'
-                            }
-                        ],
-                        rotation: 0,
-                        center: 'center'
-                    };
-                }
-                this.value = {
-                    type: 'gradient',
-                    gradientType: this.gradient.type || 'linear',
-                    colorStops: this.gradient.colorStops || [
-                        {
-                            position: 0,
-                            color: this.solid || '#000000'
-                        },
-                        {
-                            position: 1,
-                            color: this.solid || '#FFFFFF'
-                        }
-                    ],
-                    rotation: Number(this.gradient.rotation) || 0,
-                    center: this.gradient.center
-                };
-                break;
-            case 'pattern':
-                if (!this.pattern)
-                    this.pattern = {};
-                this.value = {
-                    type: 'pattern',
-                    image: this.pattern.image,
-                    offsetX: Number(this.pattern.offsetX) || 0,
-                    offsetY: Number(this.pattern.offsetY) || 0,
-                    width: Number(this.pattern.width),
-                    height: Number(this.pattern.height),
-                    align: this.pattern.align,
-                    fitPattern: this.pattern.fitPattern,
-                    noRepeat: this.pattern.noRepeat,
-                    color: this.pattern.color
-                };
-                break;
-            case 'solid':
-                if (!this.solid)
-                    this.solid = '#fff';
-                this.value = this.solid;
-                break;
-            case 'no':
-                this.value = '';
-                break;
-        }
-        this._block_reset = true;
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-    }
-    _onChangedSolid(e) {
-        if (this.fillType !== 'solid')
-            return;
-        this.solid = e.target.value;
-        this.value = this.solid;
-        this._block_reset = true;
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-    }
-    _onChandedGradient(e) {
-        /*
-         * TODO Gradient의 rotation은 symmetry 기능 등으로 외부에서 변경될 수도 있다.
-         * 이 점을 감안해서, 외부 변경에 대한 대응을 해야 한다.
-         */
-        if (this.fillType !== 'gradient') {
-            return;
-        }
-        this.gradient = e.target.value;
-        this.value = {
-            type: 'gradient',
-            gradientType: this.gradient.type || 'linear',
-            colorStops: this.gradient.colorStops || [
-                {
-                    position: 0,
-                    color: this.solid || '#000000'
-                },
-                {
-                    position: 1,
-                    color: this.solid || '#FFFFFF'
-                }
-            ],
-            rotation: Number(this.gradient.rotation) || 0,
-            center: this.gradient.center
-        };
-        this._block_reset = true;
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-    }
-    _onChangedPattern(e) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        if (this.fillType !== 'pattern')
-            return;
-        this.pattern = e.target.value;
-        this.value = {
-            type: 'pattern',
-            image: (_a = this.pattern) === null || _a === void 0 ? void 0 : _a.image,
-            offsetX: Number((_b = this.pattern) === null || _b === void 0 ? void 0 : _b.offsetX) || 0,
-            offsetY: Number((_c = this.pattern) === null || _c === void 0 ? void 0 : _c.offsetY) || 0,
-            width: Number((_d = this.pattern) === null || _d === void 0 ? void 0 : _d.width),
-            height: Number((_e = this.pattern) === null || _e === void 0 ? void 0 : _e.height),
-            align: (_f = this.pattern) === null || _f === void 0 ? void 0 : _f.align,
-            fitPattern: (_g = this.pattern) === null || _g === void 0 ? void 0 : _g.fitPattern,
-            noRepeat: (_h = this.pattern) === null || _h === void 0 ? void 0 : _h.noRepeat,
-            color: (_j = this.pattern) === null || _j === void 0 ? void 0 : _j.color
-        };
-        this._block_reset = true;
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-    }
-};
-OxInputColorStyle.styles = css `
-    :host {
-      display: flex;
-      flex-direction: column;
-    }
-
-    [fill-type] {
-      display: flex;
-      margin: 0 0 14px 0;
-    }
-
-    [fill-type] * {
-      flex: auto;
-      margin: 0;
-      text-align: left;
-      align-self: center;
-    }
-
-    .grid-10 {
-      display: grid;
-
-      grid-template-columns: repeat(10, 1fr);
-      grid-gap: 5px;
-      grid-auto-rows: minmax(24px, auto);
-    }
-
-    .grid-10 > ox-input-color {
-      grid-column: span 4;
-    }
-
-    .grid-10 > .icon-only-label {
-      grid-column: span 1;
-
-      background: var(--url-icon-properties-label) no-repeat;
-      float: left;
-      margin: 0;
-    }
-
-    .icon-only-label.color {
-      background-position: 100% -500px;
-    }
-
-    [editors] > :not([active]) {
-      display: none;
-    }
-  `;
-__decorate([
-    property({ type: Object })
-], OxInputColorStyle.prototype, "value", void 0);
-__decorate([
-    property({ type: String })
-], OxInputColorStyle.prototype, "fillType", void 0);
-__decorate([
-    property({ type: String })
-], OxInputColorStyle.prototype, "solid", void 0);
-__decorate([
-    property({ type: Object })
-], OxInputColorStyle.prototype, "gradient", void 0);
-__decorate([
-    property({ type: Object })
-], OxInputColorStyle.prototype, "pattern", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'color-only' })
-], OxInputColorStyle.prototype, "colorOnly", void 0);
-OxInputColorStyle = __decorate([
-    customElement('ox-input-fill-style')
-], OxInputColorStyle);
-export { OxInputColorStyle };
-//# sourceMappingURL=ox-input-fill-style.js.map