@operato/input 9.0.0-beta.11 → 9.0.0-beta.15

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.0.0-beta.15](https://github.com/hatiolab/operato/compare/v9.0.0-beta.14...v9.0.0-beta.15) (2025-01-27)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [9.0.0-beta.14](https://github.com/hatiolab/operato/compare/v9.0.0-beta.13...v9.0.0-beta.14) (2025-01-27)
+
+
+### :rocket: New Features
+
+* module property-panel ([d78e4cf](https://github.com/hatiolab/operato/commit/d78e4cf7080b95fa74e61b42094b9f3f59f1409b))
+
+
+
 ## [9.0.0-beta.11](https://github.com/hatiolab/operato/compare/v9.0.0-beta.10...v9.0.0-beta.11) (2025-01-25)
 
 

package/dist/src/index.d.ts

@@ -14,13 +14,10 @@ export * from './ox-input-barcode.js';
 export * from './ox-input-code.js';
 export * from './ox-input-color.js';
 export * from './ox-input-multiple-colors.js';
-export * from './ox-input-color-stops.js';
-export * from './ox-input-color-gradient.js';
 export * from './ox-input-file.js';
 export * from './ox-input-image.js';
 export * from './ox-input-value-ranges.js';
 export * from './ox-input-value-map.js';
-export * from './ox-input-table.js';
 export * from './ox-input-scene-component-id.js';
 export * from './ox-input-crontab.js';
 export * from './ox-input-partition-keys.js';

package/dist/src/index.js

@@ -14,13 +14,10 @@ export * from './ox-input-barcode.js';
 export * from './ox-input-code.js';
 export * from './ox-input-color.js';
 export * from './ox-input-multiple-colors.js';
-export * from './ox-input-color-stops.js';
-export * from './ox-input-color-gradient.js';
 export * from './ox-input-file.js';
 export * from './ox-input-image.js';
 export * from './ox-input-value-ranges.js';
 export * from './ox-input-value-map.js';
-export * from './ox-input-table.js';
 export * from './ox-input-scene-component-id.js';
 export * from './ox-input-crontab.js';
 export * from './ox-input-partition-keys.js';

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mCAAmC,CAAA;AACjD,cAAc,sBAAsB,CAAA;AACpC,cAAc,yBAAyB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-switch.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-3axis.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\nexport * from './ox-input-direction.js'\nexport * from './ox-input-table-column-config.js'\nexport * from './ox-input-search.js'\nexport * from './ox-input-signature.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mCAAmC,CAAA;AACjD,cAAc,sBAAsB,CAAA;AACpC,cAAc,yBAAyB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-switch.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-3axis.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\nexport * from './ox-input-direction.js'\nexport * from './ox-input-table-column-config.js'\nexport * from './ox-input-search.js'\nexport * from './ox-input-signature.js'\n"]}

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

@@ -0,0 +1,35 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/web/icon/icon.js';
+import '@operato/i18n/ox-i18n.js';
+import '@operato/attachment/ox-attachment-selector.js';
+import './ox-input-color.js';
+import { OxFormField } from './ox-form-field.js';
+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/ox-input-background-pattern.js

@@ -0,0 +1,111 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/i18n/ox-i18n.js';
+import '@operato/attachment/ox-attachment-selector.js';
+import './ox-input-color.js';
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
+import { OxFormField } from './ox-form-field.js';
+/**
+ * 컴포넌트의 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 {
+    constructor() {
+        super(...arguments);
+        this.value = undefined;
+    }
+    static { this.styles = [
+        PropertyGridStyles,
+        css `
+      :host {
+        display: flex;
+      }
+    `
+    ]; }
+    render() {
+        const value = this.value || {};
+        return html `
+      <div class="property-grid">
+        <label> <ox-i18n msgid="label.image">image</ox-i18n> </label>
+
+        <ox-attachment-selector
+          value-key="image"
+          .value=${value.image || ''}
+          .properties=${{
+            category: 'image'
+        }}
+          class="custom-editor"
+        ></ox-attachment-selector>
+
+        <label> <ox-i18n msgid="label.align">align</ox-i18n> </label>
+
+        <select value-key="align" .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>
+
+        <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} />
+
+        <label><md-icon>format_color_fill</md-icon></label>
+        <ox-input-color class="custom-editor" value-key="color" .value=${value.color}> </ox-input-color>
+
+        <input id="fitPattern" value-key="fitPattern" type="checkbox" ?checked=${value.fitPattern} required />
+        <label for="fitPattern"> <ox-i18n msgid="label.fit">fit</ox-i18n> </label>
+
+        <input id="noRepeat" value-key="noRepeat" type="checkbox" ?checked=${value.noRepeat} required />
+        <label for="noRepeat"> <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 }));
+    }
+};
+__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/ox-input-background-pattern.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-background-pattern.js","sourceRoot":"","sources":["../../src/ox-input-background-pattern.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AACjC,OAAO,+CAA+C,CAAA;AACtD,OAAO,qBAAqB,CAAA;AAE5B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAchD;;;;;;;;GAQG;AAGI,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,WAAW;IAAlD;;QAUuB,UAAK,GAA6B,SAAS,CAAA;IA4EzE,CAAC;aArFQ,WAAM,GAAG;QACd,kBAAkB;QAClB,GAAG,CAAA;;;;KAIF;KACF,AAPY,CAOZ;IAID,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAK,EAA8B,CAAA;QAE3D,OAAO,IAAI,CAAA;;;;;;mBAMI,KAAK,CAAC,KAAK,IAAI,EAAE;wBACZ;YACZ,QAAQ,EAAE,OAAO;SAClB;;;;;;2CAMgC,KAAK,CAAC,KAAK;;;;;;;;;;;;;0DAaI,KAAK,CAAC,OAAO;;;0DAGb,KAAK,CAAC,OAAO;;;wDAGf,KAAK,CAAC,KAAK;;;yDAGV,KAAK,CAAC,MAAM;;;yEAGI,KAAK,CAAC,KAAK;;iFAEH,KAAK,CAAC,UAAU;;;6EAGpB,KAAK,CAAC,QAAQ;;;KAGtF,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;;AA3E2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA4C;AAV5D,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CAsFpC","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/attachment/ox-attachment-selector.js'\nimport './ox-input-color.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { OxFormField } from './ox-form-field.js'\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 = [\n    PropertyGridStyles,\n    css`\n      :host {\n        display: flex;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: BackgroundPatternOption = undefined\n\n  render() {\n    const value = this.value || ({} as BackgroundPatternOption)\n\n    return html`\n      <div class=\"property-grid\">\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          class=\"custom-editor\"\n        ></ox-attachment-selector>\n\n        <label> <ox-i18n msgid=\"label.align\">align</ox-i18n> </label>\n\n        <select value-key=\"align\" .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        <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\n        <label><md-icon>format_color_fill</md-icon></label>\n        <ox-input-color class=\"custom-editor\" value-key=\"color\" .value=${value.color}> </ox-input-color>\n\n        <input id=\"fitPattern\" value-key=\"fitPattern\" type=\"checkbox\" ?checked=${value.fitPattern} required />\n        <label for=\"fitPattern\"> <ox-i18n msgid=\"label.fit\">fit</ox-i18n> </label>\n\n        <input id=\"noRepeat\" value-key=\"noRepeat\" type=\"checkbox\" ?checked=${value.noRepeat} required />\n        <label for=\"noRepeat\"> <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/ox-input-color-gradient.d.ts

@@ -1,14 +1,13 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
+import '@material/web/icon/icon.js';
 import '@operato/i18n/ox-i18n.js';
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
-import '@polymer/paper-listbox/paper-listbox.js';
-import '@polymer/paper-item/paper-item.js';
-import '@operato/input/ox-input-angle.js';
-import '@operato/input/ox-input-color-stops.js';
-import { ColorStop } from './ox-input-color-stops.js';
+import './ox-select.js';
+import './ox-input-angle.js';
+import './ox-input-color-stops.js';
 import { OxFormField } from './ox-form-field.js';
+import { ColorStop } from './ox-input-color-stops.js';
 export type GradientOption = {
     type: 'linear' | 'radial';
     rotation: number;
@@ -17,10 +16,10 @@ export type GradientOption = {
     colorStops?: ColorStop[];
 };
 export declare class OxInputColorGradient extends OxFormField {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     value: GradientOption;
     firstUpdated(): void;
-    _onChange(e: Event): void;
     render(): import("lit-html").TemplateResult<1>;
-    _convertDirectionToRotation(direction: string): number;
+    private onChange;
+    private convertDirectionToRotation;
 }

package/dist/src/ox-input-color-gradient.js

@@ -2,15 +2,16 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
 import '@operato/i18n/ox-i18n.js';
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
-import '@polymer/paper-listbox/paper-listbox.js';
-import '@polymer/paper-item/paper-item.js';
-import '@operato/input/ox-input-angle.js';
-import '@operato/input/ox-input-color-stops.js';
+import './ox-select.js';
+import './ox-input-angle.js';
+import './ox-input-color-stops.js';
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
+import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
+import { GradientDirectionStyles } from '@operato/styles/gradient-direction-styles.js';
 let OxInputColorGradient = class OxInputColorGradient extends OxFormField {
     constructor() {
         super(...arguments);
@@ -20,152 +21,83 @@ let OxInputColorGradient = class OxInputColorGradient extends OxFormField {
             rotation: 0
         };
     }
-    static { this.styles = css `
-    :host {
-      display: grid;
-
-      grid-template-columns: repeat(10, 1fr);
-      grid-gap: 5px;
-      grid-auto-rows: minmax(24px, auto);
-
-      align-items: center;
-    }
-
-    :host > * {
-      align-self: stretch;
-    }
-
-    :host > label {
-      grid-column: span 2;
-      text-align: right;
-      text-transform: capitalize;
-      align-self: center;
-    }
-
-    :host > .icon-only-label {
-      grid-column: span 1;
-    }
-
-    :host > input,
-    :host > [editors] {
-      grid-column: span 8;
-    }
-
-    :host > select {
-      grid-column: span 4;
-      height: 100%;
-      border: 1px solid rgba(0, 0, 0, 0.2);
-    }
-
-    :host > ox-input-angle {
-      grid-column: span 3;
-    }
-
-    ox-input-color-stops {
-      grid-column: span 10;
-    }
-
-    .host > input[type='checkbox'] {
-      grid-column: 3 / 4;
-    }
-
-    .host > input[type='checkbox'] ~ label {
-      grid-column: span 7;
-      text-align: left;
-    }
-
-    [editors] > :not([active-selector]) {
-      display: none;
-    }
-
-    [gradient-direction] {
-      overflow: hidden;
-      max-width: 210px;
-    }
-
-    [gradient-direction] paper-item {
-      background: url(/assets/images/icon-editor-gradient-direction.png) 50% 0 no-repeat;
-      min-height: 32px;
-      padding: 3px 5px;
-      width: 30px;
-      float: left;
-    }
-
-    [gradient-direction] [name='lefttop-to-rightbottom'] {
-      background-position: 50% 4px;
-    }
-
-    [gradient-direction] [name='left-top'] {
-      background-position: 50% 4px;
-    }
-
-    [gradient-direction] [name='top-to-bottom'] {
-      background-position: 50% -46px;
-    }
-
-    [gradient-direction] [name='righttop-to-leftbottom'] {
-      background-position: 50% -96px;
-    }
-
-    [gradient-direction] [name='right-top'] {
-      background-position: 50% -96px;
-    }
-
-    [gradient-direction] [name='right-to-left'] {
-      background-position: 50% -146px;
-    }
-
-    [gradient-direction] [name='rightbottom-to-lefttop'] {
-      background-position: 50% -196px;
-    }
-
-    [gradient-direction] [name='right-bottom'] {
-      background-position: 50% -196px;
-    }
-
-    [gradient-direction] [name='bottom-to-top'] {
-      background-position: 50% -246px;
-    }
-
-    [gradient-direction] [name='leftbottom-to-righttop'] {
-      background-position: 50% -296px;
-    }
-
-    [gradient-direction] [name='left-bottom'] {
-      background-position: 50% -296px;
-    }
-
-    [gradient-direction] [name='left-to-right'] {
-      background-position: 50% -346px;
-    }
-
-    [gradient-direction] [name='center-to-corner'] {
-      background-position: 50% -396px;
-    }
-
-    [gradient-direction] [name='center'] {
-      background-position: 50% -396px;
-    }
-
-    [gradient-direction] paper-item[focused] {
-      background-color: rgba(255, 246, 143, 0.5);
-    }
-
-    .icon-only-label {
-      top: 0 !important;
-      width: 30px !important;
-      height: 24px;
-      background: url(/assets/images/icon-properties-label.png) no-repeat;
-    }
-
-    .icon-only-label.color {
-      background-position: 70% -198px;
-    }
-  `; }
+    static { this.styles = [
+        PropertyGridStyles,
+        GradientDirectionStyles,
+        css `
+      :host {
+        display: flex;
+      }
+
+      [editors] > :not([active-selector]) {
+        display: none;
+      }
+    `
+    ]; }
     firstUpdated() {
-        this.renderRoot.addEventListener('change', this._onChange.bind(this));
+        this.renderRoot.addEventListener('change', this.onChange.bind(this));
+    }
+    render() {
+        var selector = (this.value && this.value.type) || 'linear';
+        var { type = 'linear', direction = 'left-to-right', center = 'center', rotation = 0, colorStops } = this.value || {};
+        return html `
+      <div class="property-grid">
+        <label> <ox-i18n msgid="label.type">type</ox-i18n> </label>
+        <select value-key="type" .value=${type || 'linear'} ?disabled=${this.disabled}>
+          <option>linear</option>
+          <option>radial</option>
+        </select>
+
+        <label><md-icon>format_color_fill</md-icon></label>
+        <ox-input-angle value-key="rotation" .value=${rotation || 0} ?disabled=${this.disabled}> </ox-input-angle>
+
+        <label> <ox-i18n msgid="label.direction">direction</ox-i18n> </label>
+        <div class="custom-editor" editors>
+          <ox-select ?active-selector=${selector == 'linear'} .value=${direction} value-key="direction">
+            <div class="gradient-direction" value=${String(direction || '')} slot="label"></div>
+            <ox-popup-list align-left nowrap>
+              <style>
+                ${GradientDirectionStyles.cssText}
+              </style>
+              <div class="gradient-direction" value="lefttop-to-rightbottom" option></div>
+              <div class="gradient-direction" value="top-to-bottom" option></div>
+              <div class="gradient-direction" value="righttop-to-leftbottom" option></div>
+              <div class="gradient-direction" value="right-to-left" option></div>
+              <div class="gradient-direction" value="rightbottom-to-lefttop" option></div>
+              <div class="gradient-direction" value="bottom-to-top" option></div>
+              <div class="gradient-direction" value="leftbottom-to-righttop" option></div>
+              <div class="gradient-direction" value="left-to-right" option></div>
+              <div class="gradient-direction" value="center-to-corner" option></div>
+            </ox-popup-list>
+          </ox-select>
+
+          <ox-select ?active-selector=${selector == 'radial'} .value=${center} value-key="center">
+            <div class="gradient-direction" value=${String(center || '')} slot="label"></div>
+            <ox-popup-list align-left nowrap>
+              <style>
+                ${GradientDirectionStyles.cssText}
+              </style>
+              <div class="gradient-direction" value="center" option></div>
+              <div class="gradient-direction" value="left-top" option></div>
+              <div class="gradient-direction" value="right-top" option></div>
+              <div class="gradient-direction" value="right-bottom" option></div>
+              <div class="gradient-direction" value="left-bottom" option></div>
+            </ox-popup-list>
+          </ox-select>
+        </div>
+
+        <ox-input-color-stops
+          value-key="colorStops"
+          type="gradient"
+          .value=${colorStops}
+          ?disabled=${this.disabled}
+          class="property-full-bleed"
+        >
+        </ox-input-color-stops>
+      </div>
+    `;
     }
-    _onChange(e) {
+    onChange(e) {
         var element = e.target;
         var key = element.getAttribute('value-key');
         if (!key) {
@@ -185,12 +117,6 @@ let OxInputColorGradient = class OxInputColorGradient extends OxFormField {
                         value = String(element.value);
                 }
                 break;
-            case 'PAPER-BUTTON':
-                value = element.active;
-                break;
-            case 'PAPER-LISTBOX':
-                value = element.selected;
-                break;
             default:
                 value = element.value;
                 break;
@@ -198,7 +124,7 @@ let OxInputColorGradient = class OxInputColorGradient extends OxFormField {
         if (key === 'rotation') {
             this.value = {
                 ...this.value,
-                rotation: value,
+                rotation: Number(value || 0),
                 direction: undefined
             };
         }
@@ -207,7 +133,7 @@ let OxInputColorGradient = class OxInputColorGradient extends OxFormField {
                 this.value = {
                     ...this.value,
                     direction: value,
-                    rotation: this._convertDirectionToRotation(value)
+                    rotation: this.convertDirectionToRotation(String(value || 'left-to-right'))
                 };
             }
         }
@@ -219,70 +145,7 @@ let OxInputColorGradient = class OxInputColorGradient extends OxFormField {
         }
         this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
     }
-    render() {
-        var selector = (this.value && this.value.type) || 'linear';
-        var value = this.value || {};
-        return html `
-      <label> <ox-i18n msgid="label.type">type</ox-i18n> </label>
-      <select value-key="type" .value=${value.type || 'linear'} ?disabled=${this.disabled}>
-        <option>linear</option>
-        <option>radial</option>
-      </select>
-
-      <label class="icon-only-label color"></label>
-      <ox-input-angle value-key="rotation" .value=${value.rotation || 0} ?disabled=${this.disabled}> </ox-input-angle>
-
-      <label> <ox-i18n msgid="label.direction">direction</ox-i18n> </label>
-      <div editors>
-        <paper-dropdown-menu no-label-float="true" ?active-selector=${selector == 'linear'} .value=${value.direction}>
-          <paper-listbox
-            @selected-changed=${(e) => this._onChange(e)}
-            value-key="direction"
-            slot="dropdown-content"
-            gradient-direction
-            .selected=${value.direction}
-            attr-for-selected="name"
-          >
-            <paper-item name="lefttop-to-rightbottom"></paper-item>
-            <paper-item name="top-to-bottom"></paper-item>
-            <paper-item name="righttop-to-leftbottom"></paper-item>
-            <paper-item name="right-to-left"></paper-item>
-            <paper-item name="rightbottom-to-lefttop"></paper-item>
-            <paper-item name="bottom-to-top"></paper-item>
-            <paper-item name="leftbottom-to-righttop"></paper-item>
-            <paper-item name="left-to-right"></paper-item>
-            <paper-item name="center-to-corner"></paper-item>
-          </paper-listbox>
-        </paper-dropdown-menu>
-
-        <paper-dropdown-menu no-label-float="true" ?active-selector=${selector == 'radial'} .value=${value.center}>
-          <paper-listbox
-            @selected-changed=${(e) => this._onChange(e)}
-            value-key="center"
-            slot="dropdown-content"
-            gradient-direction
-            .selected=${value.center || 'center'}
-            attr-for-selected="name"
-          >
-            <paper-item name="center"></paper-item>
-            <paper-item name="left-top"></paper-item>
-            <paper-item name="right-top"></paper-item>
-            <paper-item name="right-bottom"></paper-item>
-            <paper-item name="left-bottom"></paper-item>
-          </paper-listbox>
-        </paper-dropdown-menu>
-      </div>
-
-      <ox-input-color-stops
-        value-key="colorStops"
-        type="gradient"
-        .value=${value.colorStops}
-        ?disabled=${this.disabled}
-      >
-      </ox-input-color-stops>
-    `;
-    }
-    _convertDirectionToRotation(direction) {
+    convertDirectionToRotation(direction) {
         var rotation;
         switch (direction) {
             case 'lefttop-to-rightbottom':