@operato/input 1.0.0-alpha.9 → 1.0.0-beta.10

package/src/ox-input-work-shift.ts

@@ -0,0 +1,251 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './ox-input-color'
+
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field.js'
+
+type WorkShift = { name: string; fromDate: number; fromTime: string; toDate: number; toTime: string }
+
+/**
+work-shift array value editor element
+
+Example:
+
+  <ox-input-work-shift
+    .value=${value}
+  </ox-input-work-shift>
+*/
+
+@customElement('ox-input-work-shift')
+export class OxInputWorkShift extends OxFormField {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-content: center;
+
+      width: 100%;
+      overflow: hidden;
+      border: 1px solid #ccc;
+    }
+
+    div {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+
+      border-bottom: 1px solid #c0c0c0;
+    }
+
+    div:last-child {
+      border-bottom: none;
+    }
+
+    div > * {
+      min-width: 0px;
+      margin: 2px;
+      padding: 0;
+    }
+
+    button,
+    empty-element {
+      width: 20px;
+      text-align: center;
+    }
+
+    input,
+    select,
+    span {
+      flex: 1;
+    }
+
+    input:required:invalid {
+      border: 1px dashed red;
+    }
+
+    [placeholder='value'] {
+      flex: 2;
+    }
+
+    div {
+      border-bottom: 1px solid #c0c0c0;
+    }
+
+    div:last-child {
+      border-bottom: none;
+    }
+  `
+
+  @property({ type: Object }) value: WorkShift[] = []
+
+  private _changingNow: boolean = false
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this._onChange.bind(this))
+  }
+
+  render() {
+    return html`
+      <div data-header>
+        <span>name</span>
+        <span>from date</span>
+        <span>from time</span>
+        <span>to date</span>
+        <span>to time</span>
+        <empty-element></empty-element>
+      </div>
+
+      ${this.value.map(
+        item => html`
+          <div data-record>
+            <input type="text" data-name .value=${item.name} required />
+
+            <select data-from-date .value=${item.fromDate || 0}>
+              <option value="-1">The day before</option>
+              <option value="0">The day</option>
+              <option value="1">The day after</option>
+            </select>
+            <input type="time" data-from-time .value=${item.fromTime} step="1800" required />
+
+            <select data-to-date .value=${item.toDate || 0}>
+              <option value="-1">The day before</option>
+              <option value="0">The day</option>
+              <option value="1">The day after</option>
+            </select>
+            <input type="time" data-to-time .value=${item.toTime} step="1800" required />
+
+            <button class="record-action" @click=${(e: Event) => this._delete(e)} tabindex="-1">-</button>
+          </div>
+        `
+      )}
+
+      <div data-record-new>
+        <input type="text" data-name />
+
+        <select data-from-date>
+          <option value="-1">The day before</option>
+          <option value="0" selected>The day</option>
+          <option value="+1">The day after</option>
+        </select>
+        <input type="time" data-from-time step="1800" />
+
+        <select data-to-date>
+          <option value="-1">The day before</option>
+          <option value="0" selected>The day</option>
+          <option value="+1">The day after</option>
+        </select>
+        <input type="time" data-to-time step="1800" />
+
+        <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">+</button>
+      </div>
+    `
+  }
+
+  _onChange(e: Event) {
+    if (this._changingNow) {
+      return
+    }
+
+    this._changingNow = true
+
+    const input = e.target as HTMLInputElement
+
+    const div = input.parentElement as HTMLDivElement
+
+    if (div.hasAttribute('data-record')) {
+      this._build()
+    } else if (div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {
+      this._add()
+    }
+
+    this._changingNow = false
+  }
+
+  _build(includeNewRecord?: boolean) {
+    if (includeNewRecord) {
+      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')
+    } else {
+      var records = this.renderRoot.querySelectorAll('[data-record]')
+    }
+
+    var value: WorkShift[] = []
+    for (var i = 0; i < records.length; i++) {
+      const record = records[i]
+
+      const name = (record.querySelector('[data-name]') as HTMLInputElement).value
+
+      const fromDate = (record.querySelector('[data-from-date]') as HTMLSelectElement).value
+      const fromTime = (record.querySelector('[data-from-time]') as HTMLInputElement).value
+      const toDate = (record.querySelector('[data-to-date]') as HTMLSelectElement).value
+      const toTime = (record.querySelector('[data-to-time]') as HTMLInputElement).value
+
+      if (!name) {
+        ;(record.querySelector('[data-name]') as HTMLInputElement).focus()
+        return
+      }
+
+      if (!fromDate) {
+        ;(record.querySelector('[data-from-date]') as HTMLInputElement).focus()
+        return
+      }
+
+      if (!fromTime) {
+        ;(record.querySelector('[data-from-time]') as HTMLInputElement).focus()
+        return
+      }
+
+      if (!toDate) {
+        ;(record.querySelector('[data-to-date]') as HTMLInputElement).focus()
+        return
+      }
+
+      if (!toTime) {
+        ;(record.querySelector('[data-to-time]') as HTMLInputElement).focus()
+        return
+      }
+
+      if (name) {
+        value.push({
+          name,
+          fromDate: Number(fromDate),
+          fromTime,
+          toDate: Number(toDate),
+          toTime
+        })
+      }
+    }
+
+    this.value = value
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+
+  _add() {
+    this._build(true)
+
+    const inputs = this.renderRoot.querySelectorAll(
+      '[data-record-new] input:not([style*="display: none"])'
+    ) as NodeListOf<HTMLInputElement & { value: any; type: string }>
+
+    for (var i = 0; i < inputs.length; i++) {
+      let input = inputs[i]
+      input.value = ''
+    }
+
+    inputs[0].focus()
+  }
+
+  _delete(e: Event) {
+    const record = (e.target as Element).parentElement
+
+    const dataName = record!.querySelector('[data-name]') as HTMLInputElement
+    dataName.name = ''
+
+    this._build()
+  }
+}

package/src/ox-select.ts

@@ -5,16 +5,30 @@
 import '@material/mwc-icon'
 import '@operato/popup/ox-popup-list.js'
 
-import { css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { PropertyValues, css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
+import { OxFormField } from './ox-form-field.js'
 import { OxPopupList } from '@operato/popup'
+import { TooltipStyles } from '@operato/styles'
+import { detectOverflow } from '@operato/utils'
 
-import { OxFormField } from './ox-form-field.js'
+function onmouseover(e: Event) {
+  const element = e.target as HTMLSpanElement
+  if (detectOverflow(element)) {
+    element.setAttribute('data-tooltip', element.textContent!)
+  }
+}
+
+function onmouseout(e: Event) {
+  const element = e.target as HTMLSpanElement
+  element.removeAttribute('data-tooltip')
+}
 
 @customElement('ox-select')
 export class Select extends OxFormField {
   static styles = [
+    TooltipStyles,
     css`
       :host {
         display: block;
@@ -54,12 +68,14 @@ export class Select extends OxFormField {
   @property({ type: String }) name: string = ''
   @property({ type: String }) placeholder: string = ''
 
+  @state() label: string | string[] = ''
+
   render() {
-    const label = (this.value instanceof Array ? this.value.join(', ') : this.value) || this.placeholder || ''
+    const label = (this.label instanceof Array ? this.label.join(', ') : this.label?.trim()) || this.placeholder || ''
 
     return html`
       <div @click=${this.expand}>
-        <span>${label}</span>
+        <span @mouseover=${onmouseover} @mouseout=${onmouseout}>${label}</span>
         <mwc-icon>expand_more</mwc-icon>
       </div>
 
@@ -93,6 +109,16 @@ export class Select extends OxFormField {
     })
   }
 
+  async updated(changes: PropertyValues<this>) {
+    if (changes.has('value')) {
+      const popupList = this.querySelector('ox-popup-list') as OxPopupList
+      popupList.value = this.value
+
+      await this.requestUpdate()
+      this.label = popupList.getSelectedLabels()
+    }
+  }
+
   expand() {
     const popupList = this.querySelector('ox-popup-list') as OxPopupList
 

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

@@ -1,31 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import '@operato/i18n/ox-i18n.js';
-import './things-editor-attachment-selector';
-import { OxFormField } from './ox-form-field';
-export declare type BackgroundPatternOption = {
-    image?: HTMLImageElement | 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;
-};
-/**
- * 컴포넌트의 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

@@ -1,147 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import '@operato/i18n/ox-i18n.js';
-import './things-editor-attachment-selector';
-import { css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { OxFormField } from './ox-form-field';
-/**
- * 컴포넌트의 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 {
-    static { this.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;
-    }
-  `; }
-    render() {
-        const value = this.value || {};
-        return html `
-      <label> <ox-i18n msgid="label.image" auto="">image</ox-i18n> </label>
-
-      <things-editor-attachment-selector
-        value-key="image"
-        .value=${value.image || ''}
-        custom-editor
-      ></things-editor-attachment-selector>
-
-      <label> <ox-i18n msgid="label.align" auto="">align</ox-i18n> </label>
-
-      <select value-key="align" class="select-content" .value=${value.align}>
-        <option value="left-top">Left Top</option>
-        <option value="top">Top</option>
-        <option value="right-top">Right Top</option>
-        <option value="left">Left</option>
-        <option value="center">Center</option>
-        <option value="right">Right</option>
-        <option value="left-bottom">Left Bottom</option>
-        <option value="bottom">Bottom</option>
-        <option value="right-bottom">Right Bottom</option>
-      </select>
-
-      <div class="grid-10">
-        <label> <ox-i18n msgid="label.offset-x" auto="">offsetX</ox-i18n> </label>
-        <input type="number" value-key="offsetX" .value=${value.offsetX} />
-
-        <label> <ox-i18n msgid="label.offset-y" auto="">offsetY</ox-i18n> </label>
-        <input type="number" value-key="offsetY" .value=${value.offsetY} />
-
-        <label> <ox-i18n msgid="label.width" auto="">width</ox-i18n> </label>
-        <input type="number" value-key="width" .value=${value.width} />
-
-        <label> <ox-i18n msgid="label.height" auto="">height</ox-i18n> </label>
-        <input type="number" value-key="height" .value=${value.height} />
-      </div>
-
-      <div class="grid-10">
-        <input value-key="fitPattern" type="checkbox" .checked=${value.fitPattern} required />
-        <label> <ox-i18n msgid="label.fit" auto="">Fit</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') {
-            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

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-background-pattern.js","sourceRoot":"","sources":["../../src/ox-input-background-pattern.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,qCAAqC,CAAA;AAE5C,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,iBAAiB,CAAA;AAY7C;;;;;;;;GAQG;AAGH,IAAa,wBAAwB,GAArC,MAAa,wBAAyB,SAAQ,WAAW;aAChD,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDlB,CAAA;IAID,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAK,EAA8B,CAAA;QAE3D,OAAO,IAAI,CAAA;;;;;iBAKE,KAAK,CAAC,KAAK,IAAI,EAAE;;;;;;gEAM8B,KAAK,CAAC,KAAK;;;;;;;;;;;;;;0DAcjB,KAAK,CAAC,OAAO;;;0DAGb,KAAK,CAAC,OAAO;;;wDAGf,KAAK,CAAC,KAAK;;;yDAGV,KAAK,CAAC,MAAM;;;;iEAIJ,KAAK,CAAC,UAAU;;;KAG5E,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,IAAI,YAAY,EAAE;YACvB,KAAK,GAAG,OAAO,CAAC,OAAO,CAAA;SACxB;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;CACF,CAAA;AArE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAgC;AA5DhD,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CAiIpC;SAjIY,wBAAwB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport './things-editor-attachment-selector'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\nexport type BackgroundPatternOption = {\n  image?: HTMLImageElement | 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}\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\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\" auto=\"\">image</ox-i18n> </label>\n\n      <things-editor-attachment-selector\n        value-key=\"image\"\n        .value=${value.image || ''}\n        custom-editor\n      ></things-editor-attachment-selector>\n\n      <label> <ox-i18n msgid=\"label.align\" auto=\"\">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\">Top</option>\n        <option value=\"right-top\">Right Top</option>\n        <option value=\"left\">Left</option>\n        <option value=\"center\">Center</option>\n        <option value=\"right\">Right</option>\n        <option value=\"left-bottom\">Left Bottom</option>\n        <option value=\"bottom\">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\" auto=\"\">offsetX</ox-i18n> </label>\n        <input type=\"number\" value-key=\"offsetX\" .value=${value.offsetX} />\n\n        <label> <ox-i18n msgid=\"label.offset-y\" auto=\"\">offsetY</ox-i18n> </label>\n        <input type=\"number\" value-key=\"offsetY\" .value=${value.offsetY} />\n\n        <label> <ox-i18n msgid=\"label.width\" auto=\"\">width</ox-i18n> </label>\n        <input type=\"number\" value-key=\"width\" .value=${value.width} />\n\n        <label> <ox-i18n msgid=\"label.height\" auto=\"\">height</ox-i18n> </label>\n        <input type=\"number\" value-key=\"height\" .value=${value.height} />\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\" auto=\"\">Fit</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') {\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-fill-style.d.ts

@@ -1,42 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import '@operato/i18n/ox-i18n.js';
-import './ox-input-color';
-import './ox-input-color-gradient';
-import './ox-input-background-pattern';
-import { BackgroundPatternOption } from './ox-input-background-pattern';
-import { GradientOption } from './ox-input-color-gradient';
-import { PropertyValues } from 'lit';
-import { ColorStop } from './ox-input-color-stops';
-import { OxFormField } from './ox-form-field';
-export declare 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;
-} | 'no' | string;
-export declare class OxInputColorStyle extends OxFormField {
-    static styles: import("lit").CSSResult;
-    value?: FillStyle;
-    fillType?: string;
-    solid?: string;
-    gradient?: GradientOption;
-    pattern?: BackgroundPatternOption;
-    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;
-}