@operato/app 9.0.0-beta.7 → 9.0.0-beta.73

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.7",
+  "version": "9.0.0-beta.73",
   "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.7",
-    "@operato/data-grist": "^9.0.0-beta.7",
-    "@operato/font": "^9.0.0-beta.7",
-    "@operato/form": "^9.0.0-beta.7",
-    "@operato/graphql": "^9.0.0-beta.6",
-    "@operato/i18n": "^9.0.0-beta.5",
-    "@operato/input": "^9.0.0-beta.7",
-    "@operato/layout": "^9.0.0-beta.6",
-    "@operato/property-editor": "^9.0.0-beta.7",
-    "@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.70",
+    "@operato/data-grist": "^9.0.0-beta.70",
+    "@operato/font": "^9.0.0-beta.70",
+    "@operato/form": "^9.0.0-beta.70",
+    "@operato/graphql": "^9.0.0-beta.38",
+    "@operato/i18n": "^9.0.0-beta.37",
+    "@operato/input": "^9.0.0-beta.70",
+    "@operato/layout": "^9.0.0-beta.52",
+    "@operato/property-editor": "^9.0.0-beta.70",
+    "@operato/property-panel": "^9.0.0-beta.73",
+    "@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": "5651545395e34a4ffa3e915d09fc2d2b9c433df3"
+  "gitHead": "e9e8d672bc2782f3514d99fd79e67e9d57f34d3d"
 }

package/dist/src/grist-editor/ox-popup-code-input.d.ts

@@ -1,14 +0,0 @@
-import '@material/web/icon/icon.js';
-import '@operato/input/ox-input-code.js';
-import { LitElement } from 'lit';
-export declare class OxPopupCodeInput extends LitElement {
-    static styles: import("lit").CSSResult[];
-    value: any;
-    mode: string;
-    confirmCallback: (newval: any) => void;
-    language?: string;
-    render(): import("lit-html").TemplateResult<1>;
-    private onChange;
-    private onCancel;
-    private onConfirm;
-}

package/dist/src/grist-editor/ox-popup-code-input.js

@@ -1,78 +0,0 @@
-import { __decorate } from "tslib";
-import '@material/web/icon/icon.js';
-import '@operato/input/ox-input-code.js';
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { i18next } from '@operato/i18n';
-import { closePopup } from '@operato/popup';
-import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
-let OxPopupCodeInput = class OxPopupCodeInput extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.mode = 'javascript';
-        this.language = 'javascript';
-    }
-    render() {
-        return html `
-      <ox-input-code .value=${this.value} @change=${this.onChange.bind(this)} .language=${this.language}>
-      </ox-input-code>
-
-      <div class="footer">
-        <div filler></div>
-        <button @click=${this.onCancel.bind(this)} danger>
-          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
-        </button>
-        <button @click=${this.onConfirm.bind(this)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
-      </div>
-    `;
-    }
-    onChange(e) {
-        e.stopPropagation();
-        this.value = e.detail;
-    }
-    onCancel(e) {
-        closePopup(this);
-    }
-    onConfirm(e) {
-        this.confirmCallback && this.confirmCallback(this.value);
-        closePopup(this);
-    }
-};
-OxPopupCodeInput.styles = [
-    CommonHeaderStyles,
-    ScrollbarStyles,
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: var(--md-sys-color-surface);
-
-        width: var(--overlay-center-normal-width, 50%);
-        height: var(--overlay-center-normal-height, 50%);
-      }
-
-      ox-input-code {
-        flex: 1;
-        overflow-y: auto;
-        margin: var(--spacing-small);
-      }
-    `
-];
-__decorate([
-    property({ type: Object })
-], OxPopupCodeInput.prototype, "value", void 0);
-__decorate([
-    property({ type: String })
-], OxPopupCodeInput.prototype, "mode", void 0);
-__decorate([
-    property({ type: Object })
-], OxPopupCodeInput.prototype, "confirmCallback", void 0);
-__decorate([
-    property({ type: String })
-], OxPopupCodeInput.prototype, "language", void 0);
-OxPopupCodeInput = __decorate([
-    customElement('ox-popup-code-input')
-], OxPopupCodeInput);
-export { OxPopupCodeInput };
-//# sourceMappingURL=ox-popup-code-input.js.map

package/dist/src/grist-editor/ox-popup-code-input.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-popup-code-input.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-popup-code-input.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG9D,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAwBuB,SAAI,GAAW,YAAY,CAAA;QAE3B,aAAQ,GAAY,YAAY,CAAA;IA+B9D,CAAC;IA7BC,MAAM;QACJ,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,QAAQ;;;;;yBAK9E,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;qCACZ,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;yBAEtC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,gCAAgC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAExG,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;IACvB,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;;AAvDM,uBAAM,GAAG;IACd,kBAAkB;IAClB,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;KAgBF;CACF,AApBY,CAoBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAwC;AACvC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAiC;AA1BjD,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CAyD5B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-code.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-popup-code-input')\nexport class OxPopupCodeInput extends LitElement {\n  static styles = [\n    CommonHeaderStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n\n        width: var(--overlay-center-normal-width, 50%);\n        height: var(--overlay-center-normal-height, 50%);\n      }\n\n      ox-input-code {\n        flex: 1;\n        overflow-y: auto;\n        margin: var(--spacing-small);\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n  @property({ type: String }) mode: string = 'javascript'\n  @property({ type: Object }) confirmCallback!: (newval: any) => void\n  @property({ type: String }) language?: string = 'javascript'\n\n  render() {\n    return html`\n      <ox-input-code .value=${this.value} @change=${this.onChange.bind(this)} .language=${this.language}>\n      </ox-input-code>\n\n      <div class=\"footer\">\n        <div filler></div>\n        <button @click=${this.onCancel.bind(this)} danger>\n          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}\n        </button>\n        <button @click=${this.onConfirm.bind(this)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>\n      </div>\n    `\n  }\n\n  private onChange(e: CustomEvent) {\n    e.stopPropagation()\n\n    this.value = e.detail\n  }\n\n  private onCancel(e: Event) {\n    closePopup(this)\n  }\n\n  private onConfirm(e: Event) {\n    this.confirmCallback && this.confirmCallback(this.value)\n    closePopup(this)\n  }\n}\n"]}

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;
-}