@operato/input 9.0.0-beta.6 → 9.0.0-beta.61

package/dist/src/ox-input-duration.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-duration.js","sourceRoot":"","sources":["../../src/ox-input-duration.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-duration')\nexport class OxInputDuration extends OxFormField {\n  static styles = css`\n    :host {\n      text-align: center;\n      padding: 10px;\n      --md-filled-icon-button-container-height: var(--form-element-height-medium);\n      --md-filled-icon-button-container-shape: var(--md-sys-shape-corner-small);\n    }\n\n    :host * {\n      box-sizing: border-box;\n    }\n\n    :host *:focus {\n      outline: none;\n    }\n\n    form {\n      display: flex;\n      flex-direction: row;\n\n      align-items: center;\n    }\n\n    [padding] {\n      min-width: 100px;\n    }\n\n    input {\n      box-sizing: border-box;\n      padding: 0 var(--spacing-small);\n      height: var(--form-element-height-medium);\n      border: 1px solid var(--md-sys-color-outline);\n      border-radius: var(--md-sys-shape-corner-small);\n      max-width: 70px;\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n      text-align: right;\n    }\n\n    input:focus {\n      outline: none;\n      border-color: var(--md-sys-color-secondary-fixed-dim);\n    }\n\n    input:invalid {\n      border-bottom: 1px solid var(--md-sys-color-error);\n      color: var(--md-sys-color-error);\n    }\n\n    label {\n      width: 100%;\n      margin-right: var(--spacing-medium);\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  `\n\n  @property({ type: Number }) value?: number\n\n  render() {\n    var d = Number(this.value || 0)\n\n    const days = Math.floor(d / (3600 * 24))\n    d -= days * 24 * 3600\n    const hours = Math.floor(d / 3600)\n    d -= hours * 3600\n    const minutes = Math.floor(d / 60)\n    const seconds = d - minutes * 60\n\n    return html`\n      <form @change=${this.onChange.bind(this)}>\n        <div padding></div>\n        <input id=\"days\" type=\"number\" .value=${String(days || 0)} pattern=\"\\\\d*\" ?disabled=${this.disabled} />\n        <label for=\"days\">${i18next.t('label.days')}</label>\n\n        <input\n          id=\"hours\"\n          type=\"number\"\n          .value=${String(hours || 0)}\n          pattern=\"[01]?\\\\d|2[0-3]\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"hour\">${i18next.t('label.hours')}</label>\n\n        <input\n          id=\"minutes\"\n          type=\"number\"\n          .value=${String(minutes || 0)}\n          pattern=\"[0-5]?\\\\d\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"minute\">${i18next.t('label.minutes')}</label>\n\n        <input\n          id=\"seconds\"\n          type=\"number\"\n          .value=${String(seconds || 0)}\n          pattern=\"[0-5]?\\\\d\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"second\">${i18next.t('label.seconds')}</label>\n\n        <md-filled-icon-button\n          type=\"button\"\n          @click=${(e: Event) => {\n            e.preventDefault()\n            e.stopPropagation()\n\n            this.value = 0\n\n            this.dispatchEvent(\n              new CustomEvent('change', {\n                bubbles: true,\n                composed: true,\n                detail: this.value\n              })\n            )\n          }}\n          ?disabled=${this.disabled}\n        >\n          <md-icon>backspace</md-icon>\n        </md-filled-icon-button>\n        <div padding></div>\n      </form>\n    `\n  }\n\n  firstUpdated() {\n    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n  }\n\n  @query('#days') days!: HTMLInputElement\n  @query('#hours') hours!: HTMLInputElement\n  @query('#minutes') minutes!: HTMLInputElement\n  @query('#seconds') seconds!: HTMLInputElement\n\n  onChange(e: Event) {\n    e.stopPropagation()\n\n    var form = this.renderRoot.querySelector('form') as HTMLFormElement\n    var valid = form.checkValidity()\n    if (!valid) {\n      form.reportValidity()\n      return\n    }\n\n    const days = Number(this.days.value)\n    const hours = Number(this.hours.value)\n    const minutes = Number(this.minutes.value)\n    const seconds = Number(this.seconds.value)\n\n    this.value = (days || 0) * 24 * 60 * 60 + (hours || 0) * 60 * 60 + (minutes || 0) * 60 + (seconds || 0)\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-duration.js","sourceRoot":"","sources":["../../src/ox-input-duration.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-duration')\nexport class OxInputDuration extends OxFormField {\n  static styles = css`\n    :host {\n      text-align: center;\n      padding: 10px;\n      --md-filled-icon-button-container-height: var(--form-element-height-medium);\n      --md-filled-icon-button-container-shape: var(--md-sys-shape-corner-small);\n    }\n\n    :host * {\n      box-sizing: border-box;\n    }\n\n    :host *:focus {\n      outline: none;\n    }\n\n    form {\n      display: flex;\n      flex-direction: row;\n\n      align-items: center;\n    }\n\n    [padding] {\n      min-width: 100px;\n    }\n\n    input {\n      box-sizing: border-box;\n      padding: 0 var(--spacing-small);\n      height: var(--form-element-height-medium);\n      border: 1px solid var(--md-sys-color-outline);\n      border-radius: var(--md-sys-shape-corner-small);\n      max-width: 70px;\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n      text-align: right;\n    }\n\n    input:focus {\n      outline: none;\n      border-color: var(--md-sys-color-secondary-fixed-dim);\n    }\n\n    input:invalid {\n      border-bottom: 1px solid var(--md-sys-color-error);\n      color: var(--md-sys-color-error);\n    }\n\n    label {\n      width: 100%;\n      margin-right: var(--spacing-medium);\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  `\n\n  @property({ type: Number }) value?: number = undefined\n\n  render() {\n    var d = Number(this.value || 0)\n\n    const days = Math.floor(d / (3600 * 24))\n    d -= days * 24 * 3600\n    const hours = Math.floor(d / 3600)\n    d -= hours * 3600\n    const minutes = Math.floor(d / 60)\n    const seconds = d - minutes * 60\n\n    return html`\n      <form @change=${this.onChange.bind(this)}>\n        <div padding></div>\n        <input id=\"days\" type=\"number\" .value=${String(days || 0)} pattern=\"\\\\d*\" ?disabled=${this.disabled} />\n        <label for=\"days\">${i18next.t('label.days')}</label>\n\n        <input\n          id=\"hours\"\n          type=\"number\"\n          .value=${String(hours || 0)}\n          pattern=\"[01]?\\\\d|2[0-3]\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"hour\">${i18next.t('label.hours')}</label>\n\n        <input\n          id=\"minutes\"\n          type=\"number\"\n          .value=${String(minutes || 0)}\n          pattern=\"[0-5]?\\\\d\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"minute\">${i18next.t('label.minutes')}</label>\n\n        <input\n          id=\"seconds\"\n          type=\"number\"\n          .value=${String(seconds || 0)}\n          pattern=\"[0-5]?\\\\d\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"second\">${i18next.t('label.seconds')}</label>\n\n        <md-filled-icon-button\n          type=\"button\"\n          @click=${(e: Event) => {\n            e.preventDefault()\n            e.stopPropagation()\n\n            this.value = 0\n\n            this.dispatchEvent(\n              new CustomEvent('change', {\n                bubbles: true,\n                composed: true,\n                detail: this.value\n              })\n            )\n          }}\n          ?disabled=${this.disabled}\n        >\n          <md-icon>backspace</md-icon>\n        </md-filled-icon-button>\n        <div padding></div>\n      </form>\n    `\n  }\n\n  firstUpdated() {\n    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n  }\n\n  @query('#days') days!: HTMLInputElement\n  @query('#hours') hours!: HTMLInputElement\n  @query('#minutes') minutes!: HTMLInputElement\n  @query('#seconds') seconds!: HTMLInputElement\n\n  onChange(e: Event) {\n    e.stopPropagation()\n\n    var form = this.renderRoot.querySelector('form') as HTMLFormElement\n    var valid = form.checkValidity()\n    if (!valid) {\n      form.reportValidity()\n      return\n    }\n\n    const days = Number(this.days.value)\n    const hours = Number(this.hours.value)\n    const minutes = Number(this.minutes.value)\n    const seconds = Number(this.seconds.value)\n\n    this.value = (days || 0) * 24 * 60 * 60 + (hours || 0) * 60 * 60 + (minutes || 0) * 60 + (seconds || 0)\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}

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

@@ -0,0 +1,48 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/web/icon/icon.js';
+import '@operato/i18n/ox-i18n.js';
+import './ox-input-color.js';
+import './ox-input-color-stops.js';
+import './ox-input-color-gradient.js';
+import './ox-input-background-pattern.js';
+import { PropertyValues } from 'lit';
+import { OxFormField } from './ox-form-field.js';
+import { ColorStop } from './ox-input-color-stops.js';
+import { GradientOption } from './ox-input-color-gradient.js';
+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;
+    guideOnly?: 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/ox-input-fill-style.js

@@ -0,0 +1,330 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/i18n/ox-i18n.js';
+import './ox-input-color.js';
+import './ox-input-color-stops.js';
+import './ox-input-color-gradient.js';
+import './ox-input-background-pattern.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';
+let OxInputColorStyle = class OxInputColorStyle extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.value = undefined;
+        this.colorOnly = false;
+        this._block_reset = false;
+    }
+    static { this.styles = [
+        PropertyGridStyles,
+        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;
+      }
+
+      [editors] > :not([active]) {
+        display: none;
+      }
+    `
+    ]; }
+    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="property-grid" ?active=${this.fillType == 'solid'}>
+          <label><md-icon>format_color_fill</md-icon></label>
+          <ox-input-color class="custom-editor" @change=${(e) => this._onChangedSolid(e)} .value=${this.solid}>
+          </ox-input-color>
+        </div>
+
+        <ox-input-color-gradient
+          ?active=${this.fillType == 'gradient'}
+          @change=${(e) => this._onChandedGradient(e)}
+          .value=${this.gradient}
+        >
+        </ox-input-color-gradient>
+
+        <ox-input-background-pattern
+          ?active=${this.fillType == 'pattern'}
+          @change=${(e) => this._onChangedPattern(e)}
+          .value=${this.pattern}
+        >
+        </ox-input-background-pattern>
+      </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,
+                        guideOnly: value.guideOnly,
+                        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,
+                    guideOnly: this.pattern.guideOnly,
+                    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) {
+        if (this.fillType !== 'pattern')
+            return;
+        this.pattern = e.target.value;
+        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,
+            guideOnly: this.pattern?.guideOnly,
+            color: this.pattern?.color
+        };
+        this._block_reset = true;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+};
+__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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-fill-style.js","sourceRoot":"","sources":["../../src/ox-input-fill-style.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport './ox-input-color.js'\nimport './ox-input-color-stops.js'\nimport './ox-input-color-gradient.js'\nimport './ox-input-background-pattern.js'\n\nimport { css, html, PropertyValues } 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'\nimport { ColorStop } from './ox-input-color-stops.js'\nimport { GradientOption, OxInputColorGradient } from './ox-input-color-gradient.js'\nimport { BackgroundPatternOption, OxInputBackgroundPattern } from './ox-input-background-pattern.js'\n\nexport type FillStyle =\n  | {\n      type?: 'no' | 'solid' | 'gradient' | 'pattern'\n      gradientType?: 'linear' | 'radial'\n      colorStops?: ColorStop[]\n      rotation?: number\n      center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom'\n      image?: HTMLImageElement | string\n      offsetX?: number\n      offsetY?: number\n      width?: number\n      height?: number\n      align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'\n      fitPattern?: boolean\n      noRepeat?: boolean\n      guideOnly?: boolean\n      color?: string\n    }\n  | 'no'\n  | string\n\n@customElement('ox-input-fill-style')\nexport class OxInputColorStyle extends OxFormField {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n      }\n\n      [fill-type] {\n        display: flex;\n        margin: 0 0 14px 0;\n      }\n\n      [fill-type] * {\n        flex: auto;\n        margin: 0;\n        text-align: left;\n        align-self: center;\n      }\n\n      [editors] > :not([active]) {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: FillStyle = undefined\n  @property({ type: String }) fillType?: string\n  @property({ type: String }) solid?: string\n  @property({ type: Object }) gradient?: GradientOption\n  @property({ type: Object }) pattern?: BackgroundPatternOption\n\n  @property({ type: Boolean, attribute: 'color-only' }) colorOnly: boolean = false\n\n  private _block_reset: boolean = false\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('value') && this._onChangedValue(this.value || {})\n  }\n\n  render() {\n    return html`\n      <div @change=${(e: Event) => this._onChangedFillType(e)} fill-type>\n        <input\n          type=\"radio\"\n          id=\"fill-type-no\"\n          name=\"fill-type\"\n          value=\"no\"\n          .checked=${!this.fillType || this.fillType == 'no'}\n        />\n        <label for=\"fill-type-no\"><ox-i18n msgid=\"label.no-fill\">no fill</ox-i18n></label>\n        <input type=\"radio\" id=\"fill-type-solid\" name=\"fill-type\" value=\"solid\" .checked=${this.fillType == 'solid'} />\n        <label for=\"fill-type-solid\"><ox-i18n msgid=\"label.solid\">solid</ox-i18n></label>\n        <input\n          type=\"radio\"\n          id=\"fill-type-gradient\"\n          name=\"fill-type\"\n          value=\"gradient\"\n          .checked=${this.fillType == 'gradient'}\n        />\n\n        <label for=\"fill-type-gradient\"><ox-i18n msgid=\"label.gradient\">gradient</ox-i18n></label>\n\n        ${this.colorOnly\n          ? html``\n          : html`\n              <input\n                type=\"radio\"\n                id=\"fill-type-pattern\"\n                name=\"fill-type\"\n                value=\"pattern\"\n                .checked=${this.fillType == 'pattern'}\n              />\n              <label for=\"fill-type-pattern\"><ox-i18n msgid=\"label.pattern\">pattern</ox-i18n></label>\n            `}\n      </div>\n\n      <div editors>\n        <div ?active=${this.fillType == 'no'}></div>\n\n        <div class=\"property-grid\" ?active=${this.fillType == 'solid'}>\n          <label><md-icon>format_color_fill</md-icon></label>\n          <ox-input-color class=\"custom-editor\" @change=${(e: Event) => this._onChangedSolid(e)} .value=${this.solid}>\n          </ox-input-color>\n        </div>\n\n        <ox-input-color-gradient\n          ?active=${this.fillType == 'gradient'}\n          @change=${(e: Event) => this._onChandedGradient(e)}\n          .value=${this.gradient!}\n        >\n        </ox-input-color-gradient>\n\n        <ox-input-background-pattern\n          ?active=${this.fillType == 'pattern'}\n          @change=${(e: Event) => this._onChangedPattern(e)}\n          .value=${this.pattern}\n        >\n        </ox-input-background-pattern>\n      </div>\n    `\n  }\n\n  async _onChangedValue(value: FillStyle) {\n    /*\n     * this._block_reset의 역할은 내부 사용자 인터렉션에 의한 value의 변경시에는 각 type별 이전값을 유지하기 위함이다.\n     */\n    await this.requestUpdate()\n\n    /* 설정 값에 따라서, 멤버 속성을 설정한다. */\n    if (!value) {\n      this.fillType = 'no'\n\n      if (!this._block_reset) {\n        this.solid = undefined\n        this.gradient = undefined\n        this.pattern = undefined\n      }\n\n      this._block_reset = false\n      return\n    }\n\n    switch (typeof value) {\n      case 'string':\n        this.fillType = 'solid'\n        this.solid = value\n\n        if (!this._block_reset) {\n          this.gradient = undefined\n          this.pattern = undefined\n        }\n        break\n      case 'object':\n        this.fillType = value.type\n\n        if (value.type === 'gradient') {\n          this.gradient = {\n            type: value.gradientType || 'linear',\n            colorStops: value.colorStops || [\n              {\n                position: 0,\n                color: this.solid || '#000000'\n              },\n              {\n                position: 1,\n                color: this.solid || '#FFFFFF'\n              }\n            ],\n            rotation: Number(value.rotation) || 0,\n            center: value.center\n          }\n\n          if (!this._block_reset) {\n            this.pattern = undefined\n            this.solid = undefined\n          }\n        } else if (value.type === 'pattern') {\n          this.pattern = {\n            image: value.image,\n            offsetX: Number(value.offsetX) || 0,\n            offsetY: Number(value.offsetY) || 0,\n            width: Number(value.width),\n            height: Number(value.height),\n            align: value.align,\n            fitPattern: value.fitPattern,\n            noRepeat: value.noRepeat,\n            guideOnly: value.guideOnly,\n            color: value.color\n          }\n\n          if (!this._block_reset) {\n            this.gradient = undefined\n            this.solid = undefined\n          }\n        }\n\n        break\n      default:\n    }\n\n    this._block_reset = false\n  }\n\n  _onChangedFillType(e: Event) {\n    const element = e.target as HTMLInputElement\n    this.fillType = element.value\n\n    switch (this.fillType) {\n      case 'gradient':\n        if (!this.gradient) {\n          this.gradient = {\n            type: 'linear',\n            colorStops: [\n              {\n                position: 0,\n                color: this.solid || '#000000'\n              },\n              {\n                position: 1,\n                color: this.solid || '#FFFFFF'\n              }\n            ],\n            rotation: 0,\n            center: 'center'\n          }\n        }\n\n        this.value = {\n          type: 'gradient',\n          gradientType: this.gradient.type || 'linear',\n          colorStops: this.gradient.colorStops || [\n            {\n              position: 0,\n              color: this.solid || '#000000'\n            },\n            {\n              position: 1,\n              color: this.solid || '#FFFFFF'\n            }\n          ],\n          rotation: Number(this.gradient.rotation) || 0,\n          center: this.gradient.center\n        }\n        break\n\n      case 'pattern':\n        if (!this.pattern) this.pattern = {}\n\n        this.value = {\n          type: 'pattern',\n          image: this.pattern.image,\n          offsetX: Number(this.pattern.offsetX) || 0,\n          offsetY: Number(this.pattern.offsetY) || 0,\n          width: Number(this.pattern.width),\n          height: Number(this.pattern.height),\n          align: this.pattern.align,\n          fitPattern: this.pattern.fitPattern,\n          noRepeat: this.pattern.noRepeat,\n          guideOnly: this.pattern.guideOnly,\n          color: this.pattern.color\n        }\n        break\n\n      case 'solid':\n        if (!this.solid) this.solid = '#fff'\n        this.value = this.solid\n        break\n\n      case 'no':\n        this.value = ''\n        break\n    }\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onChangedSolid(e: Event) {\n    if (this.fillType !== 'solid') return\n\n    this.solid = (e.target as HTMLInputElement).value\n\n    this.value = this.solid\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onChandedGradient(e: Event) {\n    /*\n     * TODO Gradient의 rotation은 symmetry 기능 등으로 외부에서 변경될 수도 있다.\n     * 이 점을 감안해서, 외부 변경에 대한 대응을 해야 한다.\n     */\n\n    if (this.fillType !== 'gradient') {\n      return\n    }\n\n    this.gradient = (e.target as OxInputColorGradient).value\n\n    this.value = {\n      type: 'gradient',\n      gradientType: this.gradient.type || 'linear',\n      colorStops: this.gradient.colorStops || [\n        {\n          position: 0,\n          color: this.solid || '#000000'\n        },\n        {\n          position: 1,\n          color: this.solid || '#FFFFFF'\n        }\n      ],\n      rotation: Number(this.gradient.rotation) || 0,\n      center: this.gradient.center\n    }\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onChangedPattern(e: Event) {\n    if (this.fillType !== 'pattern') return\n\n    this.pattern = (e.target as OxInputBackgroundPattern).value\n\n    this.value = {\n      type: 'pattern',\n      image: this.pattern?.image,\n      offsetX: Number(this.pattern?.offsetX) || 0,\n      offsetY: Number(this.pattern?.offsetY) || 0,\n      width: Number(this.pattern?.width),\n      height: Number(this.pattern?.height),\n      align: this.pattern?.align,\n      fitPattern: this.pattern?.fitPattern,\n      noRepeat: this.pattern?.noRepeat,\n      guideOnly: this.pattern?.guideOnly,\n      color: this.pattern?.color\n    }\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/src/ox-input-multiple-colors.js

@@ -73,7 +73,7 @@ let OxInputMultipleColors = class OxInputMultipleColors extends OxFormField {
       <div id="colors-container">
         ${(this.value || []).map((item, index) => html `
             <div>
-              <button @tap=${(e) => this._appendEditorColor(e)} data-index=${index} ?disabled=${this.disabled}>
+              <button @click=${(e) => this._appendEditorColor(e)} data-index=${index} ?disabled=${this.disabled}>
                 <md-icon>add</md-icon>
               </button>
               <ox-input-color .value=${item} ?disabled=${this.disabled}> </ox-input-color>
@@ -81,7 +81,7 @@ let OxInputMultipleColors = class OxInputMultipleColors extends OxFormField {
               ${(this.value || []).length > 1
             ? html `
                     <button
-                      @tap=${(e) => this._removeEditorColor(e)}
+                      @click=${(e) => this._removeEditorColor(e)}
                       data-index=${index}
                       ?disabled=${this.disabled}
                     >

package/dist/src/ox-input-multiple-colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-multiple-colors.js","sourceRoot":"","sources":["../../src/ox-input-multiple-colors.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-color.js'\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\nimport { random as randomColor, TinyColor } from '@ctrl/tinycolor'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputColor } from './ox-input-color.js'\n\n/**\n색상 배열을 편집하는 컴포넌트이다.\n\n새로운 색상을 추가하고자 할 때는 `+` 버튼을 클릭한다.<br />\n색상을 제거하고자 할 때는 `-` 버튼을 클릭한다.<br />\n\nExample:\n\n    <ox-input-multiple-colors values=${values}>\n    </ox-input-multiple-colors>\n*/\n\n@customElement('ox-input-multiple-colors')\nexport class OxInputMultipleColors extends OxFormField {\n  static styles = css`\n    :host {\n      display: inline-block;\n\n      --md-icon-size: var(--fontsize-default, 14px);\n    }\n\n    #colors-container > div {\n      display: grid;\n      grid-template-columns: 34px 1fr 34px;\n      grid-gap: var(--spacing-medium);\n      align-items: center;\n      justify-content: left;\n      margin-bottom: var(--spacing-tiny, 2px);\n    }\n\n    ox-input-color {\n      width: 100%;\n    }\n\n    md-icon {\n      pointer-events: none;\n    }\n\n    button {\n      height: 100%;\n      border: var(--button-border);\n      border-radius: 0;\n      background-color: transparent;\n      line-height: 0.8;\n      color: var(--md-sys-color-on-surface);\n      cursor: pointer;\n    }\n\n    button:hover,\n    button:active {\n      border: var(--button-activ-border);\n      background-color: var(--md-sys-color-on-primary);\n      color: var(--md-sys-color-primary);\n    }\n  `\n\n  @property({ type: Array }) value: string[] = []\n\n  @query('#colors-container') colorsContainer!: HTMLDivElement\n  @queryAll('ox-input-color') colors!: NodeListOf<OxInputColor>\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChanged.bind(this))\n  }\n\n  render() {\n    return html`\n      <div id=\"colors-container\">\n        ${(this.value || []).map(\n          (item, index) => html`\n            <div>\n              <button @tap=${(e: Event) => this._appendEditorColor(e)} data-index=${index} ?disabled=${this.disabled}>\n                <md-icon>add</md-icon>\n              </button>\n              <ox-input-color .value=${item} ?disabled=${this.disabled}> </ox-input-color>\n\n              ${(this.value || []).length > 1\n                ? html`\n                    <button\n                      @tap=${(e: Event) => this._removeEditorColor(e)}\n                      data-index=${index}\n                      ?disabled=${this.disabled}\n                    >\n                      <md-icon>remove</md-icon>\n                    </button>\n                  `\n                : html``}\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  _onValueChanged() {\n    this.value = Array.from(this.colors).map(color => color.value!)\n  }\n\n  _appendEditorColor(e: Event) {\n    const idx = Number((e.target as HTMLElement).getAttribute('data-index'))\n    const hue = this.value[idx] || '#fff'\n    this.value.splice(idx + 1, 0, randomColor({ hue }).toRgbString())\n    this.value = [...this.value]\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _removeEditorColor(e: Event) {\n    var values = []\n    for (var i = 0; i < this.value.length; i++) {\n      if (i == Number((e.target as HTMLElement).getAttribute('data-index'))) {\n        continue\n      } else {\n        values.push(this.value[i])\n      }\n    }\n\n    this.value = values\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"ox-input-multiple-colors.js","sourceRoot":"","sources":["../../src/ox-input-multiple-colors.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,qBAAqB,CAAA;AAC5B,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAa,MAAM,iBAAiB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD;;;;;;;;;;EAUE;AAGK,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,WAAW;IAA/C;;QA2CsB,UAAK,GAAa,EAAE,CAAA;IAgEjD,CAAC;aA1GQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwClB,AAxCY,CAwCZ;IAOD,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC7E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CACtB,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;+BAEA,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,eAAe,KAAK,cAAc,IAAI,CAAC,QAAQ;;;uCAG/E,IAAI,cAAc,IAAI,CAAC,QAAQ;;gBAEtD,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC;YAC7B,CAAC,CAAC,IAAI,CAAA;;+BAES,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;mCACpC,KAAK;kCACN,IAAI,CAAC,QAAQ;;;;mBAI5B;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;WAEb,CACF;;KAEJ,CAAA;IACH,CAAC;IAED,eAAe;QACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAM,CAAC,CAAA;IACjE,CAAC;IAED,kBAAkB,CAAC,CAAQ;QACzB,MAAM,GAAG,GAAG,MAAM,CAAE,CAAC,CAAC,MAAsB,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAA;QACxE,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,MAAM,CAAA;QACrC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,CAAA;QACjE,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAA;QAE5B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,kBAAkB,CAAC,CAAQ;QACzB,IAAI,MAAM,GAAG,EAAE,CAAA;QACf,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC3C,IAAI,CAAC,IAAI,MAAM,CAAE,CAAC,CAAC,MAAsB,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC;gBACtE,SAAQ;YACV,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;YAC5B,CAAC;QACH,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,MAAM,CAAA;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AA/D0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAAqB;AAEnB;IAA3B,KAAK,CAAC,mBAAmB,CAAC;8DAAiC;AAChC;IAA3B,QAAQ,CAAC,gBAAgB,CAAC;qDAAkC;AA9ClD,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CA2GjC","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-color.js'\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\nimport { random as randomColor, TinyColor } from '@ctrl/tinycolor'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputColor } from './ox-input-color.js'\n\n/**\n색상 배열을 편집하는 컴포넌트이다.\n\n새로운 색상을 추가하고자 할 때는 `+` 버튼을 클릭한다.<br />\n색상을 제거하고자 할 때는 `-` 버튼을 클릭한다.<br />\n\nExample:\n\n    <ox-input-multiple-colors values=${values}>\n    </ox-input-multiple-colors>\n*/\n\n@customElement('ox-input-multiple-colors')\nexport class OxInputMultipleColors extends OxFormField {\n  static styles = css`\n    :host {\n      display: inline-block;\n\n      --md-icon-size: var(--fontsize-default, 14px);\n    }\n\n    #colors-container > div {\n      display: grid;\n      grid-template-columns: 34px 1fr 34px;\n      grid-gap: var(--spacing-medium);\n      align-items: center;\n      justify-content: left;\n      margin-bottom: var(--spacing-tiny, 2px);\n    }\n\n    ox-input-color {\n      width: 100%;\n    }\n\n    md-icon {\n      pointer-events: none;\n    }\n\n    button {\n      height: 100%;\n      border: var(--button-border);\n      border-radius: 0;\n      background-color: transparent;\n      line-height: 0.8;\n      color: var(--md-sys-color-on-surface);\n      cursor: pointer;\n    }\n\n    button:hover,\n    button:active {\n      border: var(--button-activ-border);\n      background-color: var(--md-sys-color-on-primary);\n      color: var(--md-sys-color-primary);\n    }\n  `\n\n  @property({ type: Array }) value: string[] = []\n\n  @query('#colors-container') colorsContainer!: HTMLDivElement\n  @queryAll('ox-input-color') colors!: NodeListOf<OxInputColor>\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChanged.bind(this))\n  }\n\n  render() {\n    return html`\n      <div id=\"colors-container\">\n        ${(this.value || []).map(\n          (item, index) => html`\n            <div>\n              <button @click=${(e: Event) => this._appendEditorColor(e)} data-index=${index} ?disabled=${this.disabled}>\n                <md-icon>add</md-icon>\n              </button>\n              <ox-input-color .value=${item} ?disabled=${this.disabled}> </ox-input-color>\n\n              ${(this.value || []).length > 1\n                ? html`\n                    <button\n                      @click=${(e: Event) => this._removeEditorColor(e)}\n                      data-index=${index}\n                      ?disabled=${this.disabled}\n                    >\n                      <md-icon>remove</md-icon>\n                    </button>\n                  `\n                : html``}\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  _onValueChanged() {\n    this.value = Array.from(this.colors).map(color => color.value!)\n  }\n\n  _appendEditorColor(e: Event) {\n    const idx = Number((e.target as HTMLElement).getAttribute('data-index'))\n    const hue = this.value[idx] || '#fff'\n    this.value.splice(idx + 1, 0, randomColor({ hue }).toRgbString())\n    this.value = [...this.value]\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _removeEditorColor(e: Event) {\n    var values = []\n    for (var i = 0; i < this.value.length; i++) {\n      if (i == Number((e.target as HTMLElement).getAttribute('data-index'))) {\n        continue\n      } else {\n        values.push(this.value[i])\n      }\n    }\n\n    this.value = values\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/src/ox-input-options.js

@@ -17,7 +17,6 @@ let OxInputOptions = class OxInputOptions extends OxFormField {
       display: flex;
       flex-direction: column;
       overflow: hidden;
-      margin-bottom: var(--spacing-large);
 
       --md-icon-size: var(--fontsize-default, 14px);
     }

package/dist/src/ox-input-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-options.js","sourceRoot":"","sources":["../../src/ox-input-options.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\ntype Option = { text: string; value: string }\n\n@customElement('ox-input-options')\nexport class OxInputOptions extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      margin-bottom: var(--spacing-large);\n\n      --md-icon-size: var(--fontsize-default, 14px);\n    }\n\n    div {\n      display: flex;\n      flex-flow: row nowrap;\n      gap: var(--spacing-medium);\n      margin-bottom: var(--spacing-small);\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--border-radius);\n      background-color: var(--button-background-color);\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button + button {\n      margin-left: -5px;\n    }\n    button:focus,\n    button:hover,\n    button:active {\n      border: var(--button-activ-border);\n      background-color: var(--button-background-focus-color);\n      color: var(--md-sys-color-primary-container);\n    }\n\n    input {\n      flex: 1;\n      min-width: 80px;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: var(--spacing-tiny);\n      font: var(--input-font);\n      color: var(--md-sys-color-on-primary-container);\n    }\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n    button.hidden {\n      opacity: 0;\n      cursor: default;\n    }\n  `\n\n  @property({ type: Array }) value: Option[] = []\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  render() {\n    const options = this.value instanceof Array ? this.value : []\n\n    return html`\n      ${(options || []).map(\n        item => html`\n          <div data-record>\n            <input type=\"text\" data-text=\"\" placeholder=\"text\" .value=${item.text} ?disabled=${this.disabled} />\n            <input type=\"text\" data-value=\"\" placeholder=\"value\" .value=${item.value} ?disabled=${this.disabled} />\n            <button\n              class=\"record-action\"\n              @click=${(e: MouseEvent) => this._delete(e)}\n              tabindex=\"-1\"\n              ?disabled=${this.disabled}\n            >\n              <md-icon>remove</md-icon>\n            </button>\n          </div>\n        `\n      )}\n      ${this.disabled\n        ? nothing\n        : html`\n            <div data-record-new>\n              <input type=\"text\" data-text=\"\" placeholder=\"text\" value=\"\" />\n              <input type=\"text\" data-value=\"\" placeholder=\"value\" value=\"\" @change=${(e: Event) => this._add()} />\n              <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">\n                <md-icon>add</md-icon>\n              </button>\n            </div>\n          `}\n    `\n  }\n\n  private _changingNow: boolean = false\n\n  _onChange(e: Event) {\n    if (this._changingNow) return\n\n    this._changingNow = true\n\n    var input = e.target as HTMLInputElement\n    var value = input.value\n\n    var div = input.parentElement\n\n    if (div && div.hasAttribute('data-record') && input.hasAttribute('data-value')) {\n      var dataList = div.querySelectorAll('[data-value]:not([hidden])') as NodeListOf<HTMLInputElement>\n\n      for (var i = 0; i < dataList.length; i++) {\n        if (dataList[i] !== input) {\n          dataList[i].value = value || ''\n        }\n      }\n    }\n\n    if (div && div.hasAttribute('data-record')) {\n      this._build(true)\n    } else if (div && div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n      this._add()\n    }\n\n    e.stopPropagation()\n\n    this._changingNow = false\n  }\n\n  _build(includeNewRecord?: any) {\n    if (includeNewRecord) {\n      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n    } else {\n      var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n    }\n\n    var newoptions: Option[] = []\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      var text = (record.querySelector('[data-text]') as HTMLInputElement).value\n      var inputs = record.querySelectorAll('[data-value]:not([style*=\"display: none\"])') as NodeListOf<HTMLInputElement>\n      if (!inputs || inputs.length == 0) continue\n\n      var input = inputs[inputs.length - 1]\n      var value = input.value\n\n      if (text) newoptions.push({ text: text, value: value || text })\n    }\n\n    this.value = newoptions\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  sort() {\n    var sorter = function (a: Option, b: Option) {\n      return b.text < a.text ? 1 : -1\n    }\n\n    this.value = [...this.value.sort(sorter)]\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  _add() {\n    this._build(true)\n\n    var inputs = this.renderRoot.querySelectorAll(\n      '[data-record-new] input:not([style*=\"display: none\"])'\n    ) as NodeListOf<HTMLInputElement>\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i]\n      input.value = ''\n    }\n\n    inputs[0].focus()\n  }\n\n  _delete(e: Event) {\n    const record = (e.target as HTMLElement).parentElement\n    const input = record && (record.querySelector('[data-text]') as HTMLInputElement)\n\n    if (input) {\n      input.value = ''\n    }\n\n    this._build()\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    if (!this.name) return\n\n    const value = this.value\n\n    formData.append(\n      this.name!,\n      typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-options.js","sourceRoot":"","sources":["../../src/ox-input-options.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\ntype Option = { text: string; value: string }\n\n@customElement('ox-input-options')\nexport class OxInputOptions extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n\n      --md-icon-size: var(--fontsize-default, 14px);\n    }\n\n    div {\n      display: flex;\n      flex-flow: row nowrap;\n      gap: var(--spacing-medium);\n      margin-bottom: var(--spacing-small);\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--border-radius);\n      background-color: var(--button-background-color);\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button + button {\n      margin-left: -5px;\n    }\n    button:focus,\n    button:hover,\n    button:active {\n      border: var(--button-activ-border);\n      background-color: var(--button-background-focus-color);\n      color: var(--md-sys-color-primary-container);\n    }\n\n    input {\n      flex: 1;\n      min-width: 80px;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: var(--spacing-tiny);\n      font: var(--input-font);\n      color: var(--md-sys-color-on-primary-container);\n    }\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n    button.hidden {\n      opacity: 0;\n      cursor: default;\n    }\n  `\n\n  @property({ type: Array }) value: Option[] = []\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  render() {\n    const options = this.value instanceof Array ? this.value : []\n\n    return html`\n      ${(options || []).map(\n        item => html`\n          <div data-record>\n            <input type=\"text\" data-text=\"\" placeholder=\"text\" .value=${item.text} ?disabled=${this.disabled} />\n            <input type=\"text\" data-value=\"\" placeholder=\"value\" .value=${item.value} ?disabled=${this.disabled} />\n            <button\n              class=\"record-action\"\n              @click=${(e: MouseEvent) => this._delete(e)}\n              tabindex=\"-1\"\n              ?disabled=${this.disabled}\n            >\n              <md-icon>remove</md-icon>\n            </button>\n          </div>\n        `\n      )}\n      ${this.disabled\n        ? nothing\n        : html`\n            <div data-record-new>\n              <input type=\"text\" data-text=\"\" placeholder=\"text\" value=\"\" />\n              <input type=\"text\" data-value=\"\" placeholder=\"value\" value=\"\" @change=${(e: Event) => this._add()} />\n              <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">\n                <md-icon>add</md-icon>\n              </button>\n            </div>\n          `}\n    `\n  }\n\n  private _changingNow: boolean = false\n\n  _onChange(e: Event) {\n    if (this._changingNow) return\n\n    this._changingNow = true\n\n    var input = e.target as HTMLInputElement\n    var value = input.value\n\n    var div = input.parentElement\n\n    if (div && div.hasAttribute('data-record') && input.hasAttribute('data-value')) {\n      var dataList = div.querySelectorAll('[data-value]:not([hidden])') as NodeListOf<HTMLInputElement>\n\n      for (var i = 0; i < dataList.length; i++) {\n        if (dataList[i] !== input) {\n          dataList[i].value = value || ''\n        }\n      }\n    }\n\n    if (div && div.hasAttribute('data-record')) {\n      this._build(true)\n    } else if (div && div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n      this._add()\n    }\n\n    e.stopPropagation()\n\n    this._changingNow = false\n  }\n\n  _build(includeNewRecord?: any) {\n    if (includeNewRecord) {\n      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n    } else {\n      var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n    }\n\n    var newoptions: Option[] = []\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      var text = (record.querySelector('[data-text]') as HTMLInputElement).value\n      var inputs = record.querySelectorAll('[data-value]:not([style*=\"display: none\"])') as NodeListOf<HTMLInputElement>\n      if (!inputs || inputs.length == 0) continue\n\n      var input = inputs[inputs.length - 1]\n      var value = input.value\n\n      if (text) newoptions.push({ text: text, value: value || text })\n    }\n\n    this.value = newoptions\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  sort() {\n    var sorter = function (a: Option, b: Option) {\n      return b.text < a.text ? 1 : -1\n    }\n\n    this.value = [...this.value.sort(sorter)]\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  _add() {\n    this._build(true)\n\n    var inputs = this.renderRoot.querySelectorAll(\n      '[data-record-new] input:not([style*=\"display: none\"])'\n    ) as NodeListOf<HTMLInputElement>\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i]\n      input.value = ''\n    }\n\n    inputs[0].focus()\n  }\n\n  _delete(e: Event) {\n    const record = (e.target as HTMLElement).parentElement\n    const input = record && (record.querySelector('[data-text]') as HTMLInputElement)\n\n    if (input) {\n      input.value = ''\n    }\n\n    this._build()\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    if (!this.name) return\n\n    const value = this.value\n\n    formData.append(\n      this.name!,\n      typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n    )\n  }\n}\n"]}

package/dist/src/ox-input-privilege.js

@@ -10,6 +10,7 @@ import { OxFormField } from './ox-form-field.js';
 let OxInputPrivilege = class OxInputPrivilege extends OxFormField {
     constructor() {
         super(...arguments);
+        this.value = null;
         this.privileges = [];
     }
     static { this.styles = css `

package/dist/src/ox-input-privilege.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-privilege.js","sourceRoot":"","sources":["../../src/ox-input-privilege.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-privilege')\nexport class OxInputPrivilege extends OxFormField {\n  static styles = css`\n    :host {\n      text-align: center;\n      padding: 10px;\n    }\n\n    :host * {\n      box-sizing: border-box;\n    }\n\n    :host *:focus {\n      outline: none;\n    }\n\n    form {\n      width: 100%;\n      height: 100%;\n    }\n\n    select {\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: var(--spacing-tiny);\n      font: var(--input-font);\n      color: var(--md-sys-color-on-primary-container);\n\n      max-height: 35px;\n    }\n\n    select:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    div[values] {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      grid-gap: 10px;\n    }\n\n    div[values] > [col1] {\n      text-align: right;\n      align-self: center;\n    }\n\n    div[values] > [col2] {\n      text-align: left;\n      align-self: center;\n      margin-right: auto;\n    }\n\n    input {\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: var(--spacing-tiny);\n      padding-right: 0;\n      max-width: 70px;\n      font: var(--input-font);\n      color: var(--md-sys-color-on-primary-container);\n      text-align: right;\n    }\n\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    label {\n      margin-right: var(--spacing-medium);\n      font: normal 0.8em var(--theme-font);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  `\n\n  @property({ type: Object }) value?: {\n    category: string\n    privilege: string\n    owner?: boolean\n    super?: boolean\n  } | null\n\n  @property({ type: Array }) privileges: { privilege: string; category: string; description: string }[] = []\n\n  @query('form') private form!: HTMLFormElement\n\n  render() {\n    const { category, privilege, owner, super: superUser } = this.value || {}\n    const privileges = this.privileges || []\n\n    return html`\n      <form @change=${this.onChange.bind(this)}>\n        <div values>\n          <label for=\"privilege\" col1>${i18next.t('label.privilege')}</label>\n          <select id=\"privilege\" name=\"privilege\" value=${ifDefined(privilege)} ?disabled=${this.disabled}>\n            <option value=\"\">&nbsp;</option>\n            ${privileges.map(\n              p =>\n                html`<option\n                  value=${`${p.category}:${p.privilege}`}\n                  ?selected=${category == p.category && privilege == p.privilege}\n                >\n                  ${p.description}\n                </option>`\n            )}\n          </select>\n\n          <label for=\"owner\" col1>${i18next.t('label.domain-owner')}</label>\n          <input id=\"owner\" type=\"checkbox\" name=\"owner\" ?checked=${owner} col2 ?disabled=${this.disabled} />\n\n          <label for=\"super\" col1>${i18next.t('label.superuser')}</label>\n          <input id=\"super\" type=\"checkbox\" name=\"super\" ?checked=${superUser} col2 ?disabled=${this.disabled} />\n        </div>\n      </form>\n    `\n  }\n\n  buildValue() {\n    const formData = new FormData(this.form)\n\n    const [category = '', privilege = ''] = (formData.get('privilege') as string).split(':')\n    const owner = formData.get('owner') as string\n    const superUser = formData.get('super') as string\n\n    return {\n      category,\n      privilege,\n      owner: owner == 'on',\n      super: superUser == 'on'\n    }\n  }\n\n  firstUpdated() {\n    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n  }\n\n  onChange(e: Event) {\n    e.stopPropagation()\n\n    this.value = this.buildValue()\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-privilege.js","sourceRoot":"","sources":["../../src/ox-input-privilege.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-privilege')\nexport class OxInputPrivilege extends OxFormField {\n  static styles = css`\n    :host {\n      text-align: center;\n      padding: 10px;\n    }\n\n    :host * {\n      box-sizing: border-box;\n    }\n\n    :host *:focus {\n      outline: none;\n    }\n\n    form {\n      width: 100%;\n      height: 100%;\n    }\n\n    select {\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: var(--spacing-tiny);\n      font: var(--input-font);\n      color: var(--md-sys-color-on-primary-container);\n\n      max-height: 35px;\n    }\n\n    select:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    div[values] {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      grid-gap: 10px;\n    }\n\n    div[values] > [col1] {\n      text-align: right;\n      align-self: center;\n    }\n\n    div[values] > [col2] {\n      text-align: left;\n      align-self: center;\n      margin-right: auto;\n    }\n\n    input {\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: var(--spacing-tiny);\n      padding-right: 0;\n      max-width: 70px;\n      font: var(--input-font);\n      color: var(--md-sys-color-on-primary-container);\n      text-align: right;\n    }\n\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    label {\n      margin-right: var(--spacing-medium);\n      font: normal 0.8em var(--theme-font);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  `\n\n  @property({ type: Object }) value?: {\n    category: string\n    privilege: string\n    owner?: boolean\n    super?: boolean\n  } | null = null\n\n  @property({ type: Array }) privileges: { privilege: string; category: string; description: string }[] = []\n\n  @query('form') private form!: HTMLFormElement\n\n  render() {\n    const { category, privilege, owner, super: superUser } = this.value || {}\n    const privileges = this.privileges || []\n\n    return html`\n      <form @change=${this.onChange.bind(this)}>\n        <div values>\n          <label for=\"privilege\" col1>${i18next.t('label.privilege')}</label>\n          <select id=\"privilege\" name=\"privilege\" value=${ifDefined(privilege)} ?disabled=${this.disabled}>\n            <option value=\"\">&nbsp;</option>\n            ${privileges.map(\n              p =>\n                html`<option\n                  value=${`${p.category}:${p.privilege}`}\n                  ?selected=${category == p.category && privilege == p.privilege}\n                >\n                  ${p.description}\n                </option>`\n            )}\n          </select>\n\n          <label for=\"owner\" col1>${i18next.t('label.domain-owner')}</label>\n          <input id=\"owner\" type=\"checkbox\" name=\"owner\" ?checked=${owner} col2 ?disabled=${this.disabled} />\n\n          <label for=\"super\" col1>${i18next.t('label.superuser')}</label>\n          <input id=\"super\" type=\"checkbox\" name=\"super\" ?checked=${superUser} col2 ?disabled=${this.disabled} />\n        </div>\n      </form>\n    `\n  }\n\n  buildValue() {\n    const formData = new FormData(this.form)\n\n    const [category = '', privilege = ''] = (formData.get('privilege') as string).split(':')\n    const owner = formData.get('owner') as string\n    const superUser = formData.get('super') as string\n\n    return {\n      category,\n      privilege,\n      owner: owner == 'on',\n      super: superUser == 'on'\n    }\n  }\n\n  firstUpdated() {\n    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n  }\n\n  onChange(e: Event) {\n    e.stopPropagation()\n\n    this.value = this.buildValue()\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}

package/dist/src/ox-input-range.js

@@ -25,12 +25,14 @@ let OxInputRange = class OxInputRange extends OxFormField {
 
     input[type='number'] {
       width: 48px;
+      height: 100%;
       border: 0;
       border-bottom: 1px solid rgba(0, 0, 0, 0.15);
       padding: var(--spacing-tiny);
       font: var(--input-font);
       color: var(--md-sys-color-on-primary-container);
     }
+
     input[type='number']:focus {
       outline: none;
       border-bottom: 1px solid var(--md-sys-color-on-primary-container);