npm - @operato/input - Versions diffs - 9.0.0-beta.20 → 9.0.0-beta.28 - Mend

@operato/input 9.0.0-beta.20 → 9.0.0-beta.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/CHANGELOG.md +19 -0
package/dist/src/ox-input-angle.js +1 -3
package/dist/src/ox-input-angle.js.map +1 -1
package/dist/src/ox-input-color-gradient.js +2 -2
package/dist/src/ox-input-color-gradient.js.map +1 -1
package/dist/src/ox-input-color-stops.js +5 -5
package/dist/src/ox-input-color-stops.js.map +1 -1
package/dist/src/ox-input-color.js +10 -7
package/dist/src/ox-input-color.js.map +1 -1
package/dist/src/ox-input-range.js +2 -0
package/dist/src/ox-input-range.js.map +1 -1
package/dist/src/ox-input-table.js +4 -4
package/dist/src/ox-input-table.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +4 -4

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,25 @@
 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.28](https://github.com/hatiolab/operato/compare/v9.0.0-beta.27...v9.0.0-beta.28) (2025-01-28)
+### :rocket: New Features
+* module property-panel ([d3dd184](https://github.com/hatiolab/operato/commit/d3dd18461756814dc17e33157a397d8d679650a6))
+## [9.0.0-beta.21](https://github.com/hatiolab/operato/compare/v9.0.0-beta.20...v9.0.0-beta.21) (2025-01-28)
+### :rocket: New Features
+* module property-panel ([4f308a0](https://github.com/hatiolab/operato/commit/4f308a0ace57bb156e489eef7998cf443c38fa11))
+* module property-panel ([b3e2576](https://github.com/hatiolab/operato/commit/b3e2576bfeb9d6d00eed64786764ff6e823bcb85))
 ## [9.0.0-beta.20](https://github.com/hatiolab/operato/compare/v9.0.0-beta.19...v9.0.0-beta.20) (2025-01-27)

package/dist/src/ox-input-angle.js CHANGED Viewed

@@ -15,10 +15,8 @@ let OxInputAngle = class OxInputAngle extends OxFormField {
       input {
         width: 100%;
         height: 100%;
-        min-height: var(--form-element-height-medium);
-        padding: 0 var(--spacing-small);
         box-sizing: border-box;
-        border: var(--input-border, 1px solid var(--md-sys-color-outline));
+        border: none;
         border-radius: var(--md-sys-shape-corner-small);
         background-color: var(--md-sys-color-on-primary);
         font-size: var(--md-sys-typescale-label-large-size, 0.875rem);

package/dist/src/ox-input-angle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-input-angle.js","sourceRoot":"","sources":["../../src/ox-input-angle.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG;QACd,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;KAsBF~~;KACF,~~AAxBY~~,~~CAwBZ~~;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;uBAC5B,IAAI,CAAC,WAAW,IAAI,IAAI;kBAC7B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;oBAClC,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAE7C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;IAED,SAAS,CAAC,KAAkC;QAC1C,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAED,SAAS,CAAC,MAAmC;QAC3C,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,CAAA;IAC7E,CAAC;;AAlC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAqB;AAEhC;IAAf,KAAK,CAAC,OAAO,CAAC;2CAAyB;~~AA7B7B~~,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,~~CA8DxB~~","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 { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-angle')\nexport class OxInputAngle extends OxFormField {\n static styles = [\n css`\n :host {\n display: inline-block;\n }\n\n input {\n width: 100%;\n height: 100%;\n ~~min-height: var(--form-element-height-medium);\n padding: 0 var(--spacing-small);\n~~ box-sizing: border-box;\n border: ~~var(--input-border, 1px solid var(--md-sys-color-outline))~~;\n border-radius: var(--md-sys-shape-corner-small);\n background-color: var(--md-sys-color-on-primary);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n input:focus {\n outline: var(--input-focus-outline, inherit);\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n `\n ]\n\n @property({ type: String }) placeholder?: string\n\n @query('input') input!: HTMLInputElement\n\n render() {\n return html`\n <input\n type=\"number\"\n .value=${String(this._toDegree(this.value))}\n .placeholder=${this.placeholder \|\| '0°'}\n @change=${(e: Event) => this._onChangeValue(e)}\n ?disabled=${this.disabled}\n />\n `\n }\n\n _onChangeValue(e: Event) {\n this.value = this._toRadian(this.input.value)\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n _toDegree(value: string \| number \| undefined) {\n return Math.round(((Number(value) \|\| 0) 180) / Math.PI)\n }\n\n _toRadian(degree: string \| number \| undefined) {\n return isNaN(Number(degree)) ? undefined : Number(degree) * (Math.PI / 180)\n }\n}\n"]}
1	+ {"version":3,"file":"ox-input-angle.js","sourceRoot":"","sources":["../../src/ox-input-angle.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;KAoBF;KACF,AAtBY,CAsBZ;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;uBAC5B,IAAI,CAAC,WAAW,IAAI,IAAI;kBAC7B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;oBAClC,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAE7C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;IAED,SAAS,CAAC,KAAkC;QAC1C,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAED,SAAS,CAAC,MAAmC;QAC3C,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,CAAA;IAC7E,CAAC;;AAlC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAqB;AAEhC;IAAf,KAAK,CAAC,OAAO,CAAC;2CAAyB;AA3B7B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA4DxB","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 { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-angle')\nexport class OxInputAngle extends OxFormField {\n static styles = [\n css`\n :host {\n display: inline-block;\n }\n\n input {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border: none;\n border-radius: var(--md-sys-shape-corner-small);\n background-color: var(--md-sys-color-on-primary);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n input:focus {\n outline: var(--input-focus-outline, inherit);\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n `\n ]\n\n @property({ type: String }) placeholder?: string\n\n @query('input') input!: HTMLInputElement\n\n render() {\n return html`\n <input\n type=\"number\"\n .value=${String(this._toDegree(this.value))}\n .placeholder=${this.placeholder \|\| '0°'}\n @change=${(e: Event) => this._onChangeValue(e)}\n ?disabled=${this.disabled}\n />\n `\n }\n\n _onChangeValue(e: Event) {\n this.value = this._toRadian(this.input.value)\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n _toDegree(value: string \| number \| undefined) {\n return Math.round(((Number(value) \|\| 0) 180) / Math.PI)\n }\n\n _toRadian(degree: string \| number \| undefined) {\n return isNaN(Number(degree)) ? undefined : Number(degree) * (Math.PI / 180)\n }\n}\n"]}

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

@@ -49,7 +49,7 @@ let OxInputColorGradient = class OxInputColorGradient extends OxFormField {
           <option>radial</option>
         </select>
-        <label><md-icon>format_color_fill</md-icon></label>
+        <label><md-icon>reset_iso</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>
@@ -92,7 +92,7 @@ let OxInputColorGradient = class OxInputColorGradient extends OxFormField {
           type="gradient"
           .value=${colorStops}
           ?disabled=${this.disabled}
-          class="property-full-bleed"
+          class="fullwidth"
         >
         </ox-input-color-stops>
       </div>

package/dist/src/ox-input-color-gradient.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-input-color-gradient.js","sourceRoot":"","sources":["../../src/ox-input-color-gradient.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-select.js'\nimport './ox-input-angle.js'\nimport './ox-input-color-stops.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { GradientDirectionStyles } from '@operato/styles/gradient-direction-styles.js'\n\nimport { ColorStop } from './ox-input-color-stops.js'\n\ntype GradientDirection =\n \| 'left-to-right'\n \| 'lefttop-to-rightbottom'\n \| 'top-to-bottom'\n \| 'righttop-to-leftbottom'\n \| 'right-to-left'\n \| 'rightbottom-to-lefttop'\n \| 'bottom-to-top'\n \| 'leftbottom-to-righttop'\n \| 'left-to-right'\n \| 'center-to-corner'\n\nexport type GradientOption = {\n type: 'linear' \| 'radial'\n rotation: number\n direction?: GradientDirection\n center?: 'center' \| 'left-top' \| 'right-top' \| 'right-bottom' \| 'left-bottom'\n colorStops?: ColorStop[]\n}\n\n@customElement('ox-input-color-gradient')\nexport class OxInputColorGradient extends OxFormField {\n static styles = [\n PropertyGridStyles,\n GradientDirectionStyles,\n css`\n :host {\n display: flex;\n }\n\n [editors] > :not([active-selector]) {\n display: none;\n }\n `\n ]\n\n @property({ type: Object }) value: GradientOption = {\n type: 'linear',\n direction: 'left-to-right',\n rotation: 0\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this.onChange.bind(this))\n }\n\n render() {\n var selector = (this.value && this.value.type) \|\| 'linear'\n var { type = 'linear', center = 'center', rotation = 0, colorStops } = this.value \|\| {}\n var direction = type == 'linear' ? this.convertRotationToDirection(rotation) : ''\n\n return html`\n <div class=\"property-grid\">\n <label> <ox-i18n msgid=\"label.type\">type</ox-i18n> </label>\n <select value-key=\"type\" .value=${type \|\| 'linear'} ?disabled=${this.disabled}>\n <option>linear</option>\n <option>radial</option>\n </select>\n\n <label><md-icon>format_color_fill</md-icon></label>\n <ox-input-angle value-key=\"rotation\" .value=${rotation \|\| 0} ?disabled=${this.disabled}> </ox-input-angle>\n\n <label> <ox-i18n msgid=\"label.direction\">direction</ox-i18n> </label>\n <div class=\"custom-editor\" editors>\n <ox-select ?active-selector=${selector == 'linear'} .value=${direction} value-key=\"direction\">\n <div class=\"gradient-direction\" value=${String(direction \|\| '')} slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${GradientDirectionStyles.cssText}\n </style>\n <div class=\"gradient-direction\" value=\"lefttop-to-rightbottom\" option></div>\n <div class=\"gradient-direction\" value=\"top-to-bottom\" option></div>\n <div class=\"gradient-direction\" value=\"righttop-to-leftbottom\" option></div>\n <div class=\"gradient-direction\" value=\"right-to-left\" option></div>\n <div class=\"gradient-direction\" value=\"rightbottom-to-lefttop\" option></div>\n <div class=\"gradient-direction\" value=\"bottom-to-top\" option></div>\n <div class=\"gradient-direction\" value=\"leftbottom-to-righttop\" option></div>\n <div class=\"gradient-direction\" value=\"left-to-right\" option></div>\n <div class=\"gradient-direction\" value=\"center-to-corner\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <ox-select ?active-selector=${selector == 'radial'} .value=${center} value-key=\"center\">\n <div class=\"gradient-direction\" value=${String(center \|\| '')} slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${GradientDirectionStyles.cssText}\n </style>\n <div class=\"gradient-direction\" value=\"center\" option></div>\n <div class=\"gradient-direction\" value=\"left-top\" option></div>\n <div class=\"gradient-direction\" value=\"right-top\" option></div>\n <div class=\"gradient-direction\" value=\"right-bottom\" option></div>\n <div class=\"gradient-direction\" value=\"left-bottom\" option></div>\n </ox-popup-list>\n </ox-select>\n </div>\n\n <ox-input-color-stops\n value-key=\"colorStops\"\n type=\"gradient\"\n .value=${colorStops}\n ?disabled=${this.disabled}\n class=\"property-full-bleed\"\n >\n </ox-input-color-stops>\n </div>\n `\n }\n\n private onChange(e: Event) {\n var element = e.target as HTMLElement & { type: string }\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n var value\n\n switch (element.tagName) {\n case 'INPUT':\n switch (element.type) {\n case 'checkbox':\n value = (element as HTMLInputElement).checked\n break\n case 'number':\n value = Number((element as HTMLInputElement).value) \|\| 0\n break\n case 'text':\n value = String((element as HTMLInputElement).value)\n }\n break\n\n default:\n value = (element as HTMLInputElement).value\n break\n }\n\n if (key === 'rotation') {\n this.value = {\n ...this.value,\n rotation: Number(value \|\| 0),\n direction: this.convertRotationToDirection(Number(value))\n }\n } else if (key === 'direction') {\n if (value) {\n this.value = {\n ...this.value,\n direction: value as any,\n rotation: this.convertDirectionToRotation(String(value \|\| 'left-to-right'))\n }\n }\n } else {\n this.value = {\n ...this.value,\n [key]: value\n }\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n private convertDirectionToRotation(direction: string): number {\n var rotation\n switch (direction) {\n case 'lefttop-to-rightbottom':\n rotation = 45\n break\n case 'top-to-bottom':\n rotation = 90\n break\n case 'righttop-to-leftbottom':\n rotation = 135\n break\n case 'right-to-left':\n rotation = 180\n break\n case 'rightbottom-to-lefttop':\n rotation = 215\n break\n case 'bottom-to-top':\n rotation = 270\n break\n case 'leftbottom-to-righttop':\n rotation = 315\n break\n case 'left-to-right':\n default:\n rotation = 0\n break\n }\n\n return (rotation / 360) Math.PI * 2\n }\n\n private convertRotationToDirection(rotation: number): GradientDirection {\n var degrees = (rotation / (Math.PI * 2)) * 360\n if (Math.abs(degrees - 45) <= 10) return 'lefttop-to-rightbottom'\n if (Math.abs(degrees - 90) <= 10) return 'top-to-bottom'\n if (Math.abs(degrees - 135) <= 10) return 'righttop-to-leftbottom'\n if (Math.abs(degrees - 180) <= 10) return 'right-to-left'\n if (Math.abs(degrees - 215) <= 10) return 'rightbottom-to-lefttop'\n if (Math.abs(degrees - 270) <= 10) return 'bottom-to-top'\n if (Math.abs(degrees - 315) <= 10) return 'leftbottom-to-righttop'\n return 'left-to-right'\n }\n}\n"]}
1	+ {"version":3,"file":"ox-input-color-gradient.js","sourceRoot":"","sources":["../../src/ox-input-color-gradient.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-select.js'\nimport './ox-input-angle.js'\nimport './ox-input-color-stops.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { GradientDirectionStyles } from '@operato/styles/gradient-direction-styles.js'\n\nimport { ColorStop } from './ox-input-color-stops.js'\n\ntype GradientDirection =\n \| 'left-to-right'\n \| 'lefttop-to-rightbottom'\n \| 'top-to-bottom'\n \| 'righttop-to-leftbottom'\n \| 'right-to-left'\n \| 'rightbottom-to-lefttop'\n \| 'bottom-to-top'\n \| 'leftbottom-to-righttop'\n \| 'left-to-right'\n \| 'center-to-corner'\n\nexport type GradientOption = {\n type: 'linear' \| 'radial'\n rotation: number\n direction?: GradientDirection\n center?: 'center' \| 'left-top' \| 'right-top' \| 'right-bottom' \| 'left-bottom'\n colorStops?: ColorStop[]\n}\n\n@customElement('ox-input-color-gradient')\nexport class OxInputColorGradient extends OxFormField {\n static styles = [\n PropertyGridStyles,\n GradientDirectionStyles,\n css`\n :host {\n display: flex;\n }\n\n [editors] > :not([active-selector]) {\n display: none;\n }\n `\n ]\n\n @property({ type: Object }) value: GradientOption = {\n type: 'linear',\n direction: 'left-to-right',\n rotation: 0\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this.onChange.bind(this))\n }\n\n render() {\n var selector = (this.value && this.value.type) \|\| 'linear'\n var { type = 'linear', center = 'center', rotation = 0, colorStops } = this.value \|\| {}\n var direction = type == 'linear' ? this.convertRotationToDirection(rotation) : ''\n\n return html`\n <div class=\"property-grid\">\n <label> <ox-i18n msgid=\"label.type\">type</ox-i18n> </label>\n <select value-key=\"type\" .value=${type \|\| 'linear'} ?disabled=${this.disabled}>\n <option>linear</option>\n <option>radial</option>\n </select>\n\n <label><md-icon>reset_iso</md-icon></label>\n <ox-input-angle value-key=\"rotation\" .value=${rotation \|\| 0} ?disabled=${this.disabled}> </ox-input-angle>\n\n <label> <ox-i18n msgid=\"label.direction\">direction</ox-i18n> </label>\n <div class=\"custom-editor\" editors>\n <ox-select ?active-selector=${selector == 'linear'} .value=${direction} value-key=\"direction\">\n <div class=\"gradient-direction\" value=${String(direction \|\| '')} slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${GradientDirectionStyles.cssText}\n </style>\n <div class=\"gradient-direction\" value=\"lefttop-to-rightbottom\" option></div>\n <div class=\"gradient-direction\" value=\"top-to-bottom\" option></div>\n <div class=\"gradient-direction\" value=\"righttop-to-leftbottom\" option></div>\n <div class=\"gradient-direction\" value=\"right-to-left\" option></div>\n <div class=\"gradient-direction\" value=\"rightbottom-to-lefttop\" option></div>\n <div class=\"gradient-direction\" value=\"bottom-to-top\" option></div>\n <div class=\"gradient-direction\" value=\"leftbottom-to-righttop\" option></div>\n <div class=\"gradient-direction\" value=\"left-to-right\" option></div>\n <div class=\"gradient-direction\" value=\"center-to-corner\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <ox-select ?active-selector=${selector == 'radial'} .value=${center} value-key=\"center\">\n <div class=\"gradient-direction\" value=${String(center \|\| '')} slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${GradientDirectionStyles.cssText}\n </style>\n <div class=\"gradient-direction\" value=\"center\" option></div>\n <div class=\"gradient-direction\" value=\"left-top\" option></div>\n <div class=\"gradient-direction\" value=\"right-top\" option></div>\n <div class=\"gradient-direction\" value=\"right-bottom\" option></div>\n <div class=\"gradient-direction\" value=\"left-bottom\" option></div>\n </ox-popup-list>\n </ox-select>\n </div>\n\n <ox-input-color-stops\n value-key=\"colorStops\"\n type=\"gradient\"\n .value=${colorStops}\n ?disabled=${this.disabled}\n class=\"fullwidth\"\n >\n </ox-input-color-stops>\n </div>\n `\n }\n\n private onChange(e: Event) {\n var element = e.target as HTMLElement & { type: string }\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n var value\n\n switch (element.tagName) {\n case 'INPUT':\n switch (element.type) {\n case 'checkbox':\n value = (element as HTMLInputElement).checked\n break\n case 'number':\n value = Number((element as HTMLInputElement).value) \|\| 0\n break\n case 'text':\n value = String((element as HTMLInputElement).value)\n }\n break\n\n default:\n value = (element as HTMLInputElement).value\n break\n }\n\n if (key === 'rotation') {\n this.value = {\n ...this.value,\n rotation: Number(value \|\| 0),\n direction: this.convertRotationToDirection(Number(value))\n }\n } else if (key === 'direction') {\n if (value) {\n this.value = {\n ...this.value,\n direction: value as any,\n rotation: this.convertDirectionToRotation(String(value \|\| 'left-to-right'))\n }\n }\n } else {\n this.value = {\n ...this.value,\n [key]: value\n }\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n private convertDirectionToRotation(direction: string): number {\n var rotation\n switch (direction) {\n case 'lefttop-to-rightbottom':\n rotation = 45\n break\n case 'top-to-bottom':\n rotation = 90\n break\n case 'righttop-to-leftbottom':\n rotation = 135\n break\n case 'right-to-left':\n rotation = 180\n break\n case 'rightbottom-to-lefttop':\n rotation = 215\n break\n case 'bottom-to-top':\n rotation = 270\n break\n case 'leftbottom-to-righttop':\n rotation = 315\n break\n case 'left-to-right':\n default:\n rotation = 0\n break\n }\n\n return (rotation / 360) Math.PI * 2\n }\n\n private convertRotationToDirection(rotation: number): GradientDirection {\n var degrees = (rotation / (Math.PI * 2)) * 360\n if (Math.abs(degrees - 45) <= 10) return 'lefttop-to-rightbottom'\n if (Math.abs(degrees - 90) <= 10) return 'top-to-bottom'\n if (Math.abs(degrees - 135) <= 10) return 'righttop-to-leftbottom'\n if (Math.abs(degrees - 180) <= 10) return 'right-to-left'\n if (Math.abs(degrees - 215) <= 10) return 'rightbottom-to-lefttop'\n if (Math.abs(degrees - 270) <= 10) return 'bottom-to-top'\n if (Math.abs(degrees - 315) <= 10) return 'leftbottom-to-righttop'\n return 'left-to-right'\n }\n}\n"]}

package/dist/src/ox-input-color-stops.js CHANGED Viewed

@@ -145,7 +145,7 @@ let OxInputColorStops = class OxInputColorStops extends OxFormField {
     render() {
         return html `
       <div class="property-grid">
-        <div id="color-stops" class="property-full-bleed">
+        <div id="color-stops" class="fullwidth">
           <div id="colorbar" @dblclick=${(e) => this._onDblClickColorbar(e)}>
             <div
               id="markers"
@@ -166,17 +166,17 @@ let OxInputColorStops = class OxInputColorStops extends OxFormField {
           </div>
         </div>
-        <label class="icon-only-label property-twothird-label"><md-icon>format_color_fill</md-icon></label>
+        <label class="icon-only-label twothird-label"><md-icon>format_color_fill</md-icon></label>
         <ox-input-color
           id="color-editor"
           .value=${this.focused && this.focused.color}
           @change=${(e) => this._onChangeSubComponent(e)}
           ?disabled=${this.disabled}
-          class="property-twothird-input"
+          class="twothird-editor"
         >
         </ox-input-color>
-        <label class="icon-only-label property-twothird-label"><md-icon>arrows_outward</md-icon></label>
+        <label class="icon-only-label twothird-label"><md-icon>arrows_outward</md-icon></label>
         <input
           type="number"
           id="color-position"
@@ -184,7 +184,7 @@ let OxInputColorStops = class OxInputColorStops extends OxFormField {
           @change=${(e) => this._onChangeSubComponent(e)}
           step="0.01"
           ?disabled=${this.disabled}
-          class="property-onethird-input"
+          class="onethird-editor"
         />
       </div>
     `;

package/dist/src/ox-input-color-stops.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-input-color-stops.js","sourceRoot":"","sources":["../../src/ox-input-color-stops.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 './ox-input-color.js'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport deepEquals from 'lodash-es/isEqual.js'\n\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputColor } from './ox-input-color.js'\n\nexport type ColorStop = {\n color: string\n position: number\n}\n\n/\n This component allows editing an array of color sets (position and color) within a range.\n \n The preview bar shows the color sets in gradient or solid form.\n \n To add a new color set, double-click the preview bar.\n * To remove a color set, drag the color set marker downward.\n * To move the position of a color set, drag the color set marker left or right, or select the color set marker with the mouse and directly edit the position in the position input editor.\n * To change the color of a color set, double-click the color set marker to pop up the color palette and select a color, or directly edit the color in the color input editor.\n \n Example:\n \n <ox-input-color-stops type=\"gradient\" .value=${gradient.colorStops}>\n * </ox-input-color-stops>\n /\n@customElement('ox-input-color-stops')\nexport class OxInputColorStops extends OxFormField {\n static styles = [\n PropertyGridStyles,\n css`\n :host {\n display: flex;\n }\n\n #color-stops {\n clear: both;\n margin-bottom: -3px;\n }\n\n #colorbar {\n width: 95%;\n height: 12px;\n margin: auto;\n margin-bottom: 25px;\n border: 1px solid #ccc;\n }\n\n #markers {\n position: relative;\n top: 30px;\n }\n\n #markers div {\n width: 10px;\n height: 10px;\n margin-top: -15px;\n position: absolute;\n border: 2px solid #fff;\n cursor: pointer;\n -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n }\n\n #markers div::before {\n border-bottom: 6px solid #fff;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n content: '';\n width: 0;\n height: 0;\n left: -2px;\n position: absolute;\n top: -8px;\n }\n\n #markers div[focused] {\n border-color: var(--things-editor-colorbar-marker-focused-color, #585858);\n }\n\n #markers div[focused]:before {\n border-bottom: 7px solid var(--things-editor-colorbar-marker-focused-color, #585858);\n }\n `\n ]\n\n /\n `type` indicates how the color-stop bar is displayed.\n * - 'solid': Fills with solid color from one color stop to the next.\n * - 'gradient': Fills with gradient color from one color stop to the next.\n /\n @property({ type: String }) type: 'solid' \| 'gradient' = 'solid'\n /\n `min` indicates the minimum value of the color-stop bar's position range.\n /\n @property({ type: Number }) min: number = 0\n /\n `max` indicates the maximum value of the color-stop bar's position range.\n /\n @property({ type: Number }) max: number = 1\n /\n `value` maintains the array of color stops created by the color-stops.\n /\n @property({ type: Array }) value?: ColorStop[] = undefined\n /\n Represents the focused state of the input component.\n * This property can be of any type.\n /\n @property({ type: Object }) focused: any\n\n @query('#colorbar') colorbar!: HTMLElement\n @query('#color-editor') colorEditor!: OxInputColor\n\n private _dragImage?: HTMLImageElement\n\n connectedCallback() {\n super.connectedCallback()\n\n this._dragImage = new Image()\n this._dragImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='\n }\n\n firstUpdated() {\n window.addEventListener('resize', () => {\n this.requestUpdate()\n })\n }\n\n updated(changes: PropertyValues<this>) {\n var needRerenderColorBar = false\n\n if (changes.has('value') && this.value instanceof Array) {\n var oldValue = changes.get('value')\n if (\n this.focused &&\n (!oldValue \|\|\n this.value.findIndex(v => v.position == this.focused.position && v.color == this.focused.color) == -1)\n ) {\n / Clear focused if there was no previous value.\n * Even if there was a previous value, focused can only be selected and modified within this editor, so if there is no value with the same position, it is considered that a new editor has started and focused is cleared.\n /\n this.focused = null\n }\n\n if (!deepEquals(oldValue, this.value)) {\n needRerenderColorBar = true\n }\n }\n\n if (needRerenderColorBar \|\| changes.has('min') \|\| changes.has('max')) {\n if (!this.value) {\n this.value = [\n { color: 'white', position: this.min },\n { color: 'white', position: this.max }\n ]\n }\n\n this._renderColorBar(this.min, this.max, this.type)\n this.requestUpdate()\n }\n }\n\n render() {\n return html`\n <div class=\"property-grid\">\n <div id=\"color-stops\" class=\"property-full-bleed\">\n <div id=\"colorbar\" @dblclick=${(e: MouseEvent) => this._onDblClickColorbar(e)}>\n <div\n id=\"markers\"\n @dblclick=${(e: MouseEvent) => this._onDblClickMarkers(e)}\n @pointerdown=${(e: PointerEvent) => this._onPointerDown(e)}\n @dragstart=${(e: DragEvent) => this._onDragStart(e)}\n @drag=${this._throttled(100, this._onDrag.bind(this))}\n @dragend=${(e: DragEvent) => this._onDragEnd(e)}\n >\n ${this._refinedValue(this.value).map(\n (item, index) => html`\n <div\n .style=\"background-color:${item.color};margin-left:${this._calculatePosition(\n item.position,\n this.min,\n this.max\n )}px;\"\n marker-index=${index}\n draggable=\"true\"\n ></div>\n `\n )}\n </div>\n </div>\n </div>\n\n <label class=\"icon-only-label property-twothird-label\"><md-icon>format_color_fill</md-icon></label>\n <ox-input-color\n id=\"color-editor\"\n .value=${this.focused && this.focused.color}\n @change=${(e: Event) => this._onChangeSubComponent(e)}\n ?disabled=${this.disabled}\n class=\"property-twothird-input\"\n >\n </ox-input-color>\n\n <label class=\"icon-only-label property-twothird-label\"><md-icon>arrows_outward</md-icon></label>\n <input\n type=\"number\"\n id=\"color-position\"\n .value=${this.focused && this.focused.position}\n @change=${(e: Event) => this._onChangeSubComponent(e)}\n step=\"0.01\"\n ?disabled=${this.disabled}\n class=\"property-onethird-input\"\n />\n </div>\n `\n }\n\n _refinedValue(value: any) {\n return value instanceof Array ? value : []\n }\n\n _setFocused(index: number) {\n if (this.focused && this.focused.index === index) {\n return\n }\n\n var marker = this.renderRoot.querySelector(`#markers div[marker-index='${index}']`) as HTMLElement\n var olds = this.renderRoot.querySelectorAll('#markers div[focused]')\n olds.length > 0 && olds.forEach(old => old.removeAttribute('focused'))\n marker && marker.setAttribute('focused', '')\n\n if (!marker) {\n this.focused = null\n return\n }\n\n var colorStop = this.value![index]\n\n this._changeFocused({\n index: index,\n color: colorStop.color,\n position: Math.max(this.min, Math.min(colorStop.position, this.max))\n })\n }\n\n _changeFocused(focused: any) {\n if (!focused) {\n this._setFocused(-1) // clear focused marker\n\n return\n }\n\n this.focused = focused\n\n this.value = this.value!.map((colorStop, index): ColorStop => {\n if (index != focused.index) {\n return colorStop\n }\n\n return {\n color: focused.color,\n position: focused.position\n }\n }).sort((a: ColorStop, b: ColorStop) => {\n return b.position < a.position ? 1 : -1\n })\n\n var colorStop = this.value[focused.index]\n\n if (focused.position != colorStop.position \|\| focused.color != colorStop.color) {\n var index = -1\n for (var i = 0; i < this.value.length; i++) {\n colorStop = this.value[i]\n if (focused.position == colorStop.position && focused.color == colorStop.color) {\n index = i\n break\n }\n }\n\n this._setFocused(index)\n }\n }\n\n _renderColorBar(min: number, max: number, type: 'solid' \| 'gradient') {\n var value = this._refinedValue(this.value)\n var gradient = ''\n\n if (value instanceof Array && value.length > 0) {\n if (this.type == 'gradient') {\n var stopsStrings = (value \|\| []).map(function (stop) {\n var position = (stop.position - min) / (max - min)\n return `${stop.color} ${position 100}%`\n })\n } else {\n var stops = value \|\| []\n var last: ColorStop \| undefined\n var last_position = 0\n var stopsStrings = stops.map(function (stop) {\n var stop_position = (stop.position - min) / (max - min)\n if (last) {\n last_position = (last.position - min) / (max - min)\n var step = `${stop.color} ${last_position * 100}%, ${stop.color} ${stop_position * 100}%`\n } else {\n var step = `${stop.color} ${stop_position * 100}%`\n }\n last = stop\n return step\n })\n if (last) {\n last_position = (last.position - min) / (max - min)\n stopsStrings.push(`${last.color} ${last_position * 100}%, white ${last_position * 100}%, white 100%`)\n }\n }\n\n gradient = stopsStrings.join(',')\n } else {\n gradient = 'black 0%, black 100%'\n }\n\n this.colorbar!.style.background = `linear-gradient(to right, ${gradient})`\n /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ /\n }\n\n _onChangeSubComponent(e: Event) {\n var element = e.target as HTMLInputElement\n var id = element.id\n\n if (!this.focused) {\n return\n }\n\n switch (id) {\n case 'color-editor':\n this._changeFocused({\n ...this.focused,\n color: element.value\n })\n break\n case 'color-position':\n this._changeFocused({\n ...this.focused,\n position: Math.max(this.min, Math.min(Number(element.value), this.max))\n })\n break\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _onDblClickColorbar(e: MouseEvent) {\n if (this.disabled) {\n return\n }\n\n / Filter out cases where the marker is clicked. /\n if (e.target !== this.colorbar) return\n\n var width = this.colorbar.offsetWidth\n var position = this.min + (this.max - this.min) (e.offsetX / width)\n var colorStops = this.value ? this.value.slice() : []\n\n for (var i = 0; i < colorStops.length; i++) {\n if (colorStops[i].position > position) break\n }\n\n colorStops.splice(i, 0, {\n position: position,\n color: '#fff'\n })\n\n this.value = colorStops\n\n this.focused = null\n this._setFocused(i)\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _onDblClickMarkers(e: MouseEvent) {\n if (this.disabled) {\n return\n }\n\n this.colorEditor.showPicker()\n }\n\n _onPointerDown(e: PointerEvent) {\n if (this.disabled) {\n return\n }\n\n var marker = e.target as HTMLElement\n var index = marker.getAttribute('marker-index')\n\n this._setFocused(Number(index))\n }\n\n private dragstart: { position: number; x: number; y: number } = { position: 0, x: 0, y: 0 }\n\n _onDragStart(e: DragEvent) {\n if (this.disabled) {\n return\n }\n\n /* Prevent ghost image from appearing during drag /\n e.dataTransfer?.setDragImage(this._dragImage!, 0, 0)\n\n this.dragstart = {\n position: this.focused.position,\n x: e.clientX,\n y: e.clientY\n }\n }\n\n // TODO onDrag event keeps occurring, causing performance degradation. So throttling is applied.\n _throttled(delay: number, fn: (...args: any[]) => any) {\n let lastCall = 0\n return function (...args: any[]) {\n const now = new Date().getTime()\n if (now - lastCall < delay) {\n return\n }\n lastCall = now\n return fn(...args)\n }\n }\n\n _onDrag(e: DragEvent) {\n if (this.disabled) {\n return\n }\n\n if (e.clientX <= 0) {\n return\n }\n\n var width = this.colorbar.offsetWidth\n var position = this.dragstart.position + ((e.clientX - this.dragstart.x) / width) (this.max - this.min)\n\n if (position != this.focused.position) {\n this._changeFocused({\n ...this.focused,\n position: Math.max(this.min, Math.min(position, this.max))\n })\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n }\n\n _onDragEnd(e: DragEvent) {\n if (this.disabled) {\n return\n }\n\n if (e.clientY - this.dragstart.y > 40) {\n this.value!.splice(this.focused.index, 1)\n this.value = this.value!.slice()\n\n this._setFocused(-1)\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n }\n\n _calculatePosition(position: number, min: number, max: number) {\n /* TODO 7 ==> Should be calculated as half the marker width. /\n var calculated = position\n\n if (calculated > this.max) calculated = this.max\n else if (calculated < this.min) calculated = this.min\n\n var width = (this.colorbar && this.colorbar.offsetWidth) \|\| 0\n\n return ((calculated - this.min) / (this.max - this.min)) width - 7\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"]}
1	+ {"version":3,"file":"ox-input-color-stops.js","sourceRoot":"","sources":["../../src/ox-input-color-stops.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 './ox-input-color.js'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport deepEquals from 'lodash-es/isEqual.js'\n\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputColor } from './ox-input-color.js'\n\nexport type ColorStop = {\n color: string\n position: number\n}\n\n/\n This component allows editing an array of color sets (position and color) within a range.\n \n The preview bar shows the color sets in gradient or solid form.\n \n To add a new color set, double-click the preview bar.\n * To remove a color set, drag the color set marker downward.\n * To move the position of a color set, drag the color set marker left or right, or select the color set marker with the mouse and directly edit the position in the position input editor.\n * To change the color of a color set, double-click the color set marker to pop up the color palette and select a color, or directly edit the color in the color input editor.\n \n Example:\n \n <ox-input-color-stops type=\"gradient\" .value=${gradient.colorStops}>\n * </ox-input-color-stops>\n /\n@customElement('ox-input-color-stops')\nexport class OxInputColorStops extends OxFormField {\n static styles = [\n PropertyGridStyles,\n css`\n :host {\n display: flex;\n }\n\n #color-stops {\n clear: both;\n margin-bottom: -3px;\n }\n\n #colorbar {\n width: 95%;\n height: 12px;\n margin: auto;\n margin-bottom: 25px;\n border: 1px solid #ccc;\n }\n\n #markers {\n position: relative;\n top: 30px;\n }\n\n #markers div {\n width: 10px;\n height: 10px;\n margin-top: -15px;\n position: absolute;\n border: 2px solid #fff;\n cursor: pointer;\n -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n }\n\n #markers div::before {\n border-bottom: 6px solid #fff;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n content: '';\n width: 0;\n height: 0;\n left: -2px;\n position: absolute;\n top: -8px;\n }\n\n #markers div[focused] {\n border-color: var(--things-editor-colorbar-marker-focused-color, #585858);\n }\n\n #markers div[focused]:before {\n border-bottom: 7px solid var(--things-editor-colorbar-marker-focused-color, #585858);\n }\n `\n ]\n\n /\n `type` indicates how the color-stop bar is displayed.\n * - 'solid': Fills with solid color from one color stop to the next.\n * - 'gradient': Fills with gradient color from one color stop to the next.\n /\n @property({ type: String }) type: 'solid' \| 'gradient' = 'solid'\n /\n `min` indicates the minimum value of the color-stop bar's position range.\n /\n @property({ type: Number }) min: number = 0\n /\n `max` indicates the maximum value of the color-stop bar's position range.\n /\n @property({ type: Number }) max: number = 1\n /\n `value` maintains the array of color stops created by the color-stops.\n /\n @property({ type: Array }) value?: ColorStop[] = undefined\n /\n Represents the focused state of the input component.\n * This property can be of any type.\n /\n @property({ type: Object }) focused: any\n\n @query('#colorbar') colorbar!: HTMLElement\n @query('#color-editor') colorEditor!: OxInputColor\n\n private _dragImage?: HTMLImageElement\n\n connectedCallback() {\n super.connectedCallback()\n\n this._dragImage = new Image()\n this._dragImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='\n }\n\n firstUpdated() {\n window.addEventListener('resize', () => {\n this.requestUpdate()\n })\n }\n\n updated(changes: PropertyValues<this>) {\n var needRerenderColorBar = false\n\n if (changes.has('value') && this.value instanceof Array) {\n var oldValue = changes.get('value')\n if (\n this.focused &&\n (!oldValue \|\|\n this.value.findIndex(v => v.position == this.focused.position && v.color == this.focused.color) == -1)\n ) {\n / Clear focused if there was no previous value.\n * Even if there was a previous value, focused can only be selected and modified within this editor, so if there is no value with the same position, it is considered that a new editor has started and focused is cleared.\n /\n this.focused = null\n }\n\n if (!deepEquals(oldValue, this.value)) {\n needRerenderColorBar = true\n }\n }\n\n if (needRerenderColorBar \|\| changes.has('min') \|\| changes.has('max')) {\n if (!this.value) {\n this.value = [\n { color: 'white', position: this.min },\n { color: 'white', position: this.max }\n ]\n }\n\n this._renderColorBar(this.min, this.max, this.type)\n this.requestUpdate()\n }\n }\n\n render() {\n return html`\n <div class=\"property-grid\">\n <div id=\"color-stops\" class=\"fullwidth\">\n <div id=\"colorbar\" @dblclick=${(e: MouseEvent) => this._onDblClickColorbar(e)}>\n <div\n id=\"markers\"\n @dblclick=${(e: MouseEvent) => this._onDblClickMarkers(e)}\n @pointerdown=${(e: PointerEvent) => this._onPointerDown(e)}\n @dragstart=${(e: DragEvent) => this._onDragStart(e)}\n @drag=${this._throttled(100, this._onDrag.bind(this))}\n @dragend=${(e: DragEvent) => this._onDragEnd(e)}\n >\n ${this._refinedValue(this.value).map(\n (item, index) => html`\n <div\n .style=\"background-color:${item.color};margin-left:${this._calculatePosition(\n item.position,\n this.min,\n this.max\n )}px;\"\n marker-index=${index}\n draggable=\"true\"\n ></div>\n `\n )}\n </div>\n </div>\n </div>\n\n <label class=\"icon-only-label twothird-label\"><md-icon>format_color_fill</md-icon></label>\n <ox-input-color\n id=\"color-editor\"\n .value=${this.focused && this.focused.color}\n @change=${(e: Event) => this._onChangeSubComponent(e)}\n ?disabled=${this.disabled}\n class=\"twothird-editor\"\n >\n </ox-input-color>\n\n <label class=\"icon-only-label twothird-label\"><md-icon>arrows_outward</md-icon></label>\n <input\n type=\"number\"\n id=\"color-position\"\n .value=${this.focused && this.focused.position}\n @change=${(e: Event) => this._onChangeSubComponent(e)}\n step=\"0.01\"\n ?disabled=${this.disabled}\n class=\"onethird-editor\"\n />\n </div>\n `\n }\n\n _refinedValue(value: any) {\n return value instanceof Array ? value : []\n }\n\n _setFocused(index: number) {\n if (this.focused && this.focused.index === index) {\n return\n }\n\n var marker = this.renderRoot.querySelector(`#markers div[marker-index='${index}']`) as HTMLElement\n var olds = this.renderRoot.querySelectorAll('#markers div[focused]')\n olds.length > 0 && olds.forEach(old => old.removeAttribute('focused'))\n marker && marker.setAttribute('focused', '')\n\n if (!marker) {\n this.focused = null\n return\n }\n\n var colorStop = this.value![index]\n\n this._changeFocused({\n index: index,\n color: colorStop.color,\n position: Math.max(this.min, Math.min(colorStop.position, this.max))\n })\n }\n\n _changeFocused(focused: any) {\n if (!focused) {\n this._setFocused(-1) // clear focused marker\n\n return\n }\n\n this.focused = focused\n\n this.value = this.value!.map((colorStop, index): ColorStop => {\n if (index != focused.index) {\n return colorStop\n }\n\n return {\n color: focused.color,\n position: focused.position\n }\n }).sort((a: ColorStop, b: ColorStop) => {\n return b.position < a.position ? 1 : -1\n })\n\n var colorStop = this.value[focused.index]\n\n if (focused.position != colorStop.position \|\| focused.color != colorStop.color) {\n var index = -1\n for (var i = 0; i < this.value.length; i++) {\n colorStop = this.value[i]\n if (focused.position == colorStop.position && focused.color == colorStop.color) {\n index = i\n break\n }\n }\n\n this._setFocused(index)\n }\n }\n\n _renderColorBar(min: number, max: number, type: 'solid' \| 'gradient') {\n var value = this._refinedValue(this.value)\n var gradient = ''\n\n if (value instanceof Array && value.length > 0) {\n if (this.type == 'gradient') {\n var stopsStrings = (value \|\| []).map(function (stop) {\n var position = (stop.position - min) / (max - min)\n return `${stop.color} ${position 100}%`\n })\n } else {\n var stops = value \|\| []\n var last: ColorStop \| undefined\n var last_position = 0\n var stopsStrings = stops.map(function (stop) {\n var stop_position = (stop.position - min) / (max - min)\n if (last) {\n last_position = (last.position - min) / (max - min)\n var step = `${stop.color} ${last_position * 100}%, ${stop.color} ${stop_position * 100}%`\n } else {\n var step = `${stop.color} ${stop_position * 100}%`\n }\n last = stop\n return step\n })\n if (last) {\n last_position = (last.position - min) / (max - min)\n stopsStrings.push(`${last.color} ${last_position * 100}%, white ${last_position * 100}%, white 100%`)\n }\n }\n\n gradient = stopsStrings.join(',')\n } else {\n gradient = 'black 0%, black 100%'\n }\n\n this.colorbar!.style.background = `linear-gradient(to right, ${gradient})`\n /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ /\n }\n\n _onChangeSubComponent(e: Event) {\n var element = e.target as HTMLInputElement\n var id = element.id\n\n if (!this.focused) {\n return\n }\n\n switch (id) {\n case 'color-editor':\n this._changeFocused({\n ...this.focused,\n color: element.value\n })\n break\n case 'color-position':\n this._changeFocused({\n ...this.focused,\n position: Math.max(this.min, Math.min(Number(element.value), this.max))\n })\n break\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _onDblClickColorbar(e: MouseEvent) {\n if (this.disabled) {\n return\n }\n\n / Filter out cases where the marker is clicked. /\n if (e.target !== this.colorbar) return\n\n var width = this.colorbar.offsetWidth\n var position = this.min + (this.max - this.min) (e.offsetX / width)\n var colorStops = this.value ? this.value.slice() : []\n\n for (var i = 0; i < colorStops.length; i++) {\n if (colorStops[i].position > position) break\n }\n\n colorStops.splice(i, 0, {\n position: position,\n color: '#fff'\n })\n\n this.value = colorStops\n\n this.focused = null\n this._setFocused(i)\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _onDblClickMarkers(e: MouseEvent) {\n if (this.disabled) {\n return\n }\n\n this.colorEditor.showPicker()\n }\n\n _onPointerDown(e: PointerEvent) {\n if (this.disabled) {\n return\n }\n\n var marker = e.target as HTMLElement\n var index = marker.getAttribute('marker-index')\n\n this._setFocused(Number(index))\n }\n\n private dragstart: { position: number; x: number; y: number } = { position: 0, x: 0, y: 0 }\n\n _onDragStart(e: DragEvent) {\n if (this.disabled) {\n return\n }\n\n /* Prevent ghost image from appearing during drag /\n e.dataTransfer?.setDragImage(this._dragImage!, 0, 0)\n\n this.dragstart = {\n position: this.focused.position,\n x: e.clientX,\n y: e.clientY\n }\n }\n\n // TODO onDrag event keeps occurring, causing performance degradation. So throttling is applied.\n _throttled(delay: number, fn: (...args: any[]) => any) {\n let lastCall = 0\n return function (...args: any[]) {\n const now = new Date().getTime()\n if (now - lastCall < delay) {\n return\n }\n lastCall = now\n return fn(...args)\n }\n }\n\n _onDrag(e: DragEvent) {\n if (this.disabled) {\n return\n }\n\n if (e.clientX <= 0) {\n return\n }\n\n var width = this.colorbar.offsetWidth\n var position = this.dragstart.position + ((e.clientX - this.dragstart.x) / width) (this.max - this.min)\n\n if (position != this.focused.position) {\n this._changeFocused({\n ...this.focused,\n position: Math.max(this.min, Math.min(position, this.max))\n })\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n }\n\n _onDragEnd(e: DragEvent) {\n if (this.disabled) {\n return\n }\n\n if (e.clientY - this.dragstart.y > 40) {\n this.value!.splice(this.focused.index, 1)\n this.value = this.value!.slice()\n\n this._setFocused(-1)\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n }\n\n _calculatePosition(position: number, min: number, max: number) {\n /* TODO 7 ==> Should be calculated as half the marker width. /\n var calculated = position\n\n if (calculated > this.max) calculated = this.max\n else if (calculated < this.min) calculated = this.min\n\n var width = (this.colorbar && this.colorbar.offsetWidth) \|\| 0\n\n return ((calculated - this.min) / (this.max - this.min)) width - 7\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-color.js CHANGED Viewed

@@ -179,24 +179,27 @@ let OxInputColor = class OxInputColor extends OxFormField {
     }
     input[type='text'] {
+      box-sizing: border-box;
       width: 100%;
+      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);
-      padding-right: 35px;
+      padding-right: 26px;
+      border-radius: inherit;
+      background-color: inherit;
     }
     input:focus {
-      outline: none;
-      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
+      outline: var(--input-focus-outline, inherit);
+      border-color: var(--md-sys-color-secondary-fixed-dim);
     }
     a {
       -webkit-appearance: none;
       display: flex;
       position: absolute;
-      width: 24px;
+      width: 26px;
       height: 100%;
       box-sizing: border-box;
       align-items: center;
@@ -204,7 +207,7 @@ let OxInputColor = class OxInputColor extends OxFormField {
     }
     span {
-      width: 80%;
+      width: 60%;
       height: 60%;
       border: 0.5px solid rgba(0, 0, 0, 0.3);
       border-radius: var(--border-radius);

package/dist/src/ox-input-color.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-input-color.js","sourceRoot":"","sources":["../../src/ox-input-color.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@operato/color-picker/paper-color-picker.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport tinycolor from 'tinycolor2'\n\nimport { OxFormField } from './ox-form-field.js'\n\n/\n색상을 입력하는데 사용되는 입력 컴포넌트이다.\n화면상에는 두개의 입력 필드가 보이며, 하나는 색상값을 키보드로 직접 입력하는 입력 픽드이며,\n다른 하나는 마우스로 클릭하여 컬러 파레트를 팝업 시키는 입력 필드이다.\n컬러 파레트를 팝업시키는 입력필드는 현재 입력된 색상으로 표시된다.\n\n색상값을 직접 입력하는 필드에서는 'white', 'red', 'yellow' 등 색상의미 단어를 사용할 수도 있고,\n#fff, #123456 와 같이 스타일에서 지정하는 방식의 3자리 및 6자리 숫자 표현도 가능하다.\n컬러 파레트를 팝업시키는 입력 필드에서 색상을 지정하게되면, 모두 6자리 숫자 표현방식만을 사용한다.\n\n의미 단어를 지원하는 색상은 다음과 같다.\n\naliceblue : #f0f8ff<br>\nantiquewhite : #faebd7<br>\naqua : #00ffff<br>\naquamarine : #7fffd4<br>\nazure : #f0ffff<br>\nbeige : #f5f5dc<br>\nbisque : #ffe4c4<br>\nblack : #000000<br>\nblanchedalmond : #ffebcd<br>\nblue : #0000ff<br>\nblueviolet : #8a2be2<br>\nbrown : #a52a2a<br>\nburlywood : #deb887<br>\ncadetblue : #5f9ea0<br>\nchartreuse : #7fff00<br>\nchocolate : #d2691e<br>\ncoral : #ff7f50<br>\ncornflowerblue : #6495ed<br>\ncornsilk : #fff8dc<br>\ncrimson : #dc143c<br>\ncyan : #00ffff<br>\ndarkblue : #00008b<br>\ndarkcyan : #008b8b<br>\ndarkgoldenrod : #b8860b<br>\ndarkgray : #a9a9a9<br>\ndarkgreen : #006400<br>\ndarkkhaki : #bdb76b<br>\ndarkmagenta : #8b008b<br>\ndarkolivegreen : #556b2f<br>\ndarkorange : #ff8c00<br>\ndarkorchid : #9932cc<br>\ndarkred : #8b0000<br>\ndarksalmon : #e9967a<br>\ndarkseagreen : #8fbc8f<br>\ndarkslateblue : #483d8b<br>\ndarkslategray : #2f4f4f<br>\ndarkturquoise : #00ced1<br>\ndarkviolet : #9400d3<br>\ndeeppink : #ff1493<br>\ndeepskyblue : #00bfff<br>\ndimgray : #696969<br>\ndodgerblue : #1e90ff<br>\nfirebrick : #b22222<br>\nfloralwhite : #fffaf0<br>\nforestgreen : #228b22<br>\nfuchsia : #ff00ff<br>\ngainsboro : #dcdcdc<br>\nghostwhite : #f8f8ff<br>\ngold : #ffd700<br>\ngoldenrod : #daa520<br>\ngray : #808080<br>\ngreen : #008000<br>\ngreenyellow : #adff2f<br>\nhoneydew : #f0fff0<br>\nhotpink : #ff69b4<br>\nindianred : #cd5c5c<br>\nindigo : #4b0082<br>\nivory : #fffff0<br>\nkhaki : #f0e68c<br>\nlavender : #e6e6fa<br>\nlavenderblush : #fff0f5<br>\nlawngreen : #7cfc00<br>\nlemonchiffon : #fffacd<br>\nlightblue : #add8e6<br>\nlightcoral : #f08080<br>\nlightcyan : #e0ffff<br>\nlightgoldenrodyellow : #fafad2<br>\nlightgrey : #d3d3d3<br>\nlightgreen : #90ee90<br>\nlightpink : #ffb6c1<br>\nlightsalmon : #ffa07a<br>\nlightseagreen : #20b2aa<br>\nlightskyblue : #87cefa<br>\nlightslategray : #778899<br>\nlightsteelblue : #b0c4de<br>\nlightyellow : #ffffe0<br>\nlime : #00ff00<br>\nlimegreen : #32cd32<br>\nlinen : #faf0e6<br>\nmagenta : #ff00ff<br>\nmaroon : #800000<br>\nmediumaquamarine : #66cdaa<br>\nmediumblue : #0000cd<br>\nmediumorchid : #ba55d3<br>\nmediumpurple : #9370d8<br>\nmediumseagreen : #3cb371<br>\nmediumslateblue : #7b68ee<br>\nmediumspringgreen : #00fa9a<br>\nmediumturquoise : #48d1cc<br>\nmediumvioletred : #c71585<br>\nmidnightblue : #191970<br>\nmintcream : #f5fffa<br>\nmistyrose : #ffe4e1<br>\nmoccasin : #ffe4b5<br>\nnavajowhite : #ffdead<br>\nnavy : #000080<br>\noldlace : #fdf5e6<br>\nolive : #808000<br>\nolivedrab : #6b8e23<br>\norange : #ffa500<br>\norangered : #ff4500<br>\norchid : #da70d6<br>\npalegoldenrod : #eee8aa<br>\npalegreen : #98fb98<br>\npaleturquoise : #afeeee<br>\npalevioletred : #d87093<br>\npapayawhip : #ffefd5<br>\npeachpuff : #ffdab9<br>\nperu : #cd853f<br>\npink : #ffc0cb<br>\nplum : #dda0dd<br>\npowderblue : #b0e0e6<br>\npurple : #800080<br>\nred : #ff0000<br>\nrosybrown : #bc8f8f<br>\nroyalblue : #4169e1<br>\nsaddlebrown : #8b4513<br>\nsalmon : #fa8072<br>\nsandybrown : #f4a460<br>\nseagreen : #2e8b57<br>\nseashell : #fff5ee<br>\nsienna : #a0522d<br>\nsilver : #c0c0c0<br>\nskyblue : #87ceeb<br>\nslateblue : #6a5acd<br>\nslategray : #708090<br>\nsnow : #fffafa<br>\nspringgreen : #00ff7f<br>\nsteelblue : #4682b4<br>\ntan : #d2b48c<br>\nteal : #008080<br>\nthistle : #d8bfd8<br>\ntomato : #ff6347<br>\nturquoise : #40e0d0<br>\nviolet : #ee82ee<br>\nwheat : #f5deb3<br>\nwhite : #ffffff<br>\nwhitesmoke : #f5f5f5<br>\nyellow : #ffff00<br>\nyellowgreen : #9acd32<br>\n\nExample:\n\n <ox-input-color .value=${color}>\n </ox-input-color>\n/\n\n@customElement('ox-input-color')\nexport class OxInputColor extends OxFormField {\n static styles = css`\n :host {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: flex-end;\n }\n\n input[type='text'] {\n width: 100%;\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 padding-right: 35px;\n }\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n }\n\n a {\n -webkit-appearance: none;\n display: flex;\n position: absolute;\n width: 24px;\n height: 100%;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n }\n\n span {\n width: 80%;\n height: 60%;\n border: 0.5px solid rgba(0, 0, 0, 0.3);\n border-radius: var(--border-radius);\n }\n\n span.transparent {\n background-color: #fefefe;\n background-image: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),\n linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);\n background-position:\n 0 0,\n 9px 9px;\n background-size: 18px 18px;\n }\n `\n\n @property({ type: String }) value?: string = undefined\n @property({ type: Object }) properties: any\n\n render() {\n return html`\n <input\n id=\"text\"\n type=\"text\"\n .value=${this.value \|\| ''}\n @change=${(e: Event) => this._onInputChanged(e)}\n .placeholder=${this.getAttribute('placeholder') \|\| ''}\n ?disabled=${this.disabled}\n />\n\n <a @click=${(e: MouseEvent) => this.showPicker()}>\n <span id=\"color-thumbnail\" .style=\"background-color:${this._thumbnail()}\" class=${this._thumbnail()}> </span>\n </a>\n `\n }\n\n set colorString(colorString: string) {\n var color = tinycolor(colorString, {})\n var { withoutAlpha, valueType } = this.properties \|\| {}\n\n if (color.isValid()) {\n if (valueType == 'hex' \|\| withoutAlpha) {\n this.value = color.toHexString()\n } else this.value = color.toRgbString()\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n }\n\n _thumbnail() {\n return tinycolor(this.value \|\| 'transparent', {}).toRgbString()\n }\n\n _onInputChanged(e: Event) {\n e.stopPropagation()\n this.value = (e.target as HTMLInputElement).value\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n /*\n 외부에서 호출 가능한 메쏘드임.\n */\n showPicker() {\n if (this.disabled) {\n return\n }\n\n var { withoutAlpha } = this.properties \|\| {}\n\n var color = tinycolor(this.value, {})\n\n var picker = document.createElement('paper-color-picker') as HTMLElement & {\n shape: string\n color: any\n colorAsString: string\n allowAlpha: boolean\n alwaysShowAlpha: boolean\n type: string\n _initialAlphaValueHack: number\n set: (name: string, value: number) => void\n open: () => void\n }\n\n picker.shape = 'huebox'\n picker.color = color\n picker.colorAsString = color.toRgbString()\n if (!withoutAlpha) {\n picker.allowAlpha = true\n picker.alwaysShowAlpha = true\n }\n picker.type = 'hsl'\n picker.style.setProperty('--paper-input-container-color', 'var(--md-sys-color-primary, gray)')\n picker.style.setProperty('--primary-text-color', 'var(--md-sys-color-primary, gray)')\n\n if (color.isValid()) {\n let rgb = color.toRgb() as { r: number; g: number; b: number }\n let alpha = color.getAlpha()\n\n picker._initialAlphaValueHack = alpha\n\n picker.set('immediateColor.red', rgb.r)\n picker.set('immediateColor.green', rgb.g)\n picker.set('immediateColor.blue', rgb.b)\n\n if (alpha != undefined) {\n picker.set('immediateColor.alpha', alpha)\n }\n }\n\n document.body.appendChild(picker)\n\n var _ = (e: Event) => {\n if (!(e as CustomEvent)?.detail?.confirmed) {\n return\n }\n\n if (picker.colorAsString) {\n this.colorString = picker.colorAsString\n }\n\n picker.removeEventListener('iron-overlay-closed', _)\n picker.parentNode?.removeChild(picker)\n }\n picker.addEventListener('iron-overlay-closed', _)\n\n setTimeout(() => picker.open())\n }\n}\n"]}
1	+ {"version":3,"file":"ox-input-color.js","sourceRoot":"","sources":["../../src/ox-input-color.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@operato/color-picker/paper-color-picker.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport tinycolor from 'tinycolor2'\n\nimport { OxFormField } from './ox-form-field.js'\n\n/\n색상을 입력하는데 사용되는 입력 컴포넌트이다.\n화면상에는 두개의 입력 필드가 보이며, 하나는 색상값을 키보드로 직접 입력하는 입력 픽드이며,\n다른 하나는 마우스로 클릭하여 컬러 파레트를 팝업 시키는 입력 필드이다.\n컬러 파레트를 팝업시키는 입력필드는 현재 입력된 색상으로 표시된다.\n\n색상값을 직접 입력하는 필드에서는 'white', 'red', 'yellow' 등 색상의미 단어를 사용할 수도 있고,\n#fff, #123456 와 같이 스타일에서 지정하는 방식의 3자리 및 6자리 숫자 표현도 가능하다.\n컬러 파레트를 팝업시키는 입력 필드에서 색상을 지정하게되면, 모두 6자리 숫자 표현방식만을 사용한다.\n\n의미 단어를 지원하는 색상은 다음과 같다.\n\naliceblue : #f0f8ff<br>\nantiquewhite : #faebd7<br>\naqua : #00ffff<br>\naquamarine : #7fffd4<br>\nazure : #f0ffff<br>\nbeige : #f5f5dc<br>\nbisque : #ffe4c4<br>\nblack : #000000<br>\nblanchedalmond : #ffebcd<br>\nblue : #0000ff<br>\nblueviolet : #8a2be2<br>\nbrown : #a52a2a<br>\nburlywood : #deb887<br>\ncadetblue : #5f9ea0<br>\nchartreuse : #7fff00<br>\nchocolate : #d2691e<br>\ncoral : #ff7f50<br>\ncornflowerblue : #6495ed<br>\ncornsilk : #fff8dc<br>\ncrimson : #dc143c<br>\ncyan : #00ffff<br>\ndarkblue : #00008b<br>\ndarkcyan : #008b8b<br>\ndarkgoldenrod : #b8860b<br>\ndarkgray : #a9a9a9<br>\ndarkgreen : #006400<br>\ndarkkhaki : #bdb76b<br>\ndarkmagenta : #8b008b<br>\ndarkolivegreen : #556b2f<br>\ndarkorange : #ff8c00<br>\ndarkorchid : #9932cc<br>\ndarkred : #8b0000<br>\ndarksalmon : #e9967a<br>\ndarkseagreen : #8fbc8f<br>\ndarkslateblue : #483d8b<br>\ndarkslategray : #2f4f4f<br>\ndarkturquoise : #00ced1<br>\ndarkviolet : #9400d3<br>\ndeeppink : #ff1493<br>\ndeepskyblue : #00bfff<br>\ndimgray : #696969<br>\ndodgerblue : #1e90ff<br>\nfirebrick : #b22222<br>\nfloralwhite : #fffaf0<br>\nforestgreen : #228b22<br>\nfuchsia : #ff00ff<br>\ngainsboro : #dcdcdc<br>\nghostwhite : #f8f8ff<br>\ngold : #ffd700<br>\ngoldenrod : #daa520<br>\ngray : #808080<br>\ngreen : #008000<br>\ngreenyellow : #adff2f<br>\nhoneydew : #f0fff0<br>\nhotpink : #ff69b4<br>\nindianred : #cd5c5c<br>\nindigo : #4b0082<br>\nivory : #fffff0<br>\nkhaki : #f0e68c<br>\nlavender : #e6e6fa<br>\nlavenderblush : #fff0f5<br>\nlawngreen : #7cfc00<br>\nlemonchiffon : #fffacd<br>\nlightblue : #add8e6<br>\nlightcoral : #f08080<br>\nlightcyan : #e0ffff<br>\nlightgoldenrodyellow : #fafad2<br>\nlightgrey : #d3d3d3<br>\nlightgreen : #90ee90<br>\nlightpink : #ffb6c1<br>\nlightsalmon : #ffa07a<br>\nlightseagreen : #20b2aa<br>\nlightskyblue : #87cefa<br>\nlightslategray : #778899<br>\nlightsteelblue : #b0c4de<br>\nlightyellow : #ffffe0<br>\nlime : #00ff00<br>\nlimegreen : #32cd32<br>\nlinen : #faf0e6<br>\nmagenta : #ff00ff<br>\nmaroon : #800000<br>\nmediumaquamarine : #66cdaa<br>\nmediumblue : #0000cd<br>\nmediumorchid : #ba55d3<br>\nmediumpurple : #9370d8<br>\nmediumseagreen : #3cb371<br>\nmediumslateblue : #7b68ee<br>\nmediumspringgreen : #00fa9a<br>\nmediumturquoise : #48d1cc<br>\nmediumvioletred : #c71585<br>\nmidnightblue : #191970<br>\nmintcream : #f5fffa<br>\nmistyrose : #ffe4e1<br>\nmoccasin : #ffe4b5<br>\nnavajowhite : #ffdead<br>\nnavy : #000080<br>\noldlace : #fdf5e6<br>\nolive : #808000<br>\nolivedrab : #6b8e23<br>\norange : #ffa500<br>\norangered : #ff4500<br>\norchid : #da70d6<br>\npalegoldenrod : #eee8aa<br>\npalegreen : #98fb98<br>\npaleturquoise : #afeeee<br>\npalevioletred : #d87093<br>\npapayawhip : #ffefd5<br>\npeachpuff : #ffdab9<br>\nperu : #cd853f<br>\npink : #ffc0cb<br>\nplum : #dda0dd<br>\npowderblue : #b0e0e6<br>\npurple : #800080<br>\nred : #ff0000<br>\nrosybrown : #bc8f8f<br>\nroyalblue : #4169e1<br>\nsaddlebrown : #8b4513<br>\nsalmon : #fa8072<br>\nsandybrown : #f4a460<br>\nseagreen : #2e8b57<br>\nseashell : #fff5ee<br>\nsienna : #a0522d<br>\nsilver : #c0c0c0<br>\nskyblue : #87ceeb<br>\nslateblue : #6a5acd<br>\nslategray : #708090<br>\nsnow : #fffafa<br>\nspringgreen : #00ff7f<br>\nsteelblue : #4682b4<br>\ntan : #d2b48c<br>\nteal : #008080<br>\nthistle : #d8bfd8<br>\ntomato : #ff6347<br>\nturquoise : #40e0d0<br>\nviolet : #ee82ee<br>\nwheat : #f5deb3<br>\nwhite : #ffffff<br>\nwhitesmoke : #f5f5f5<br>\nyellow : #ffff00<br>\nyellowgreen : #9acd32<br>\n\nExample:\n\n <ox-input-color .value=${color}>\n </ox-input-color>\n/\n\n@customElement('ox-input-color')\nexport class OxInputColor extends OxFormField {\n static styles = css`\n :host {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: flex-end;\n }\n\n input[type='text'] {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border: 0;\n font: var(--input-font);\n color: var(--md-sys-color-on-primary-container);\n padding-right: 26px;\n border-radius: inherit;\n background-color: inherit;\n }\n\n input:focus {\n outline: var(--input-focus-outline, inherit);\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n\n a {\n -webkit-appearance: none;\n display: flex;\n position: absolute;\n width: 26px;\n height: 100%;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n }\n\n span {\n width: 60%;\n height: 60%;\n border: 0.5px solid rgba(0, 0, 0, 0.3);\n border-radius: var(--border-radius);\n }\n\n span.transparent {\n background-color: #fefefe;\n background-image: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),\n linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);\n background-position:\n 0 0,\n 9px 9px;\n background-size: 18px 18px;\n }\n `\n\n @property({ type: String }) value?: string = undefined\n @property({ type: Object }) properties: any\n\n render() {\n return html`\n <input\n id=\"text\"\n type=\"text\"\n .value=${this.value \|\| ''}\n @change=${(e: Event) => this._onInputChanged(e)}\n .placeholder=${this.getAttribute('placeholder') \|\| ''}\n ?disabled=${this.disabled}\n />\n\n <a @click=${(e: MouseEvent) => this.showPicker()}>\n <span id=\"color-thumbnail\" .style=\"background-color:${this._thumbnail()}\" class=${this._thumbnail()}> </span>\n </a>\n `\n }\n\n set colorString(colorString: string) {\n var color = tinycolor(colorString, {})\n var { withoutAlpha, valueType } = this.properties \|\| {}\n\n if (color.isValid()) {\n if (valueType == 'hex' \|\| withoutAlpha) {\n this.value = color.toHexString()\n } else this.value = color.toRgbString()\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n }\n\n _thumbnail() {\n return tinycolor(this.value \|\| 'transparent', {}).toRgbString()\n }\n\n _onInputChanged(e: Event) {\n e.stopPropagation()\n this.value = (e.target as HTMLInputElement).value\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n /*\n 외부에서 호출 가능한 메쏘드임.\n */\n showPicker() {\n if (this.disabled) {\n return\n }\n\n var { withoutAlpha } = this.properties \|\| {}\n\n var color = tinycolor(this.value, {})\n\n var picker = document.createElement('paper-color-picker') as HTMLElement & {\n shape: string\n color: any\n colorAsString: string\n allowAlpha: boolean\n alwaysShowAlpha: boolean\n type: string\n _initialAlphaValueHack: number\n set: (name: string, value: number) => void\n open: () => void\n }\n\n picker.shape = 'huebox'\n picker.color = color\n picker.colorAsString = color.toRgbString()\n if (!withoutAlpha) {\n picker.allowAlpha = true\n picker.alwaysShowAlpha = true\n }\n picker.type = 'hsl'\n picker.style.setProperty('--paper-input-container-color', 'var(--md-sys-color-primary, gray)')\n picker.style.setProperty('--primary-text-color', 'var(--md-sys-color-primary, gray)')\n\n if (color.isValid()) {\n let rgb = color.toRgb() as { r: number; g: number; b: number }\n let alpha = color.getAlpha()\n\n picker._initialAlphaValueHack = alpha\n\n picker.set('immediateColor.red', rgb.r)\n picker.set('immediateColor.green', rgb.g)\n picker.set('immediateColor.blue', rgb.b)\n\n if (alpha != undefined) {\n picker.set('immediateColor.alpha', alpha)\n }\n }\n\n document.body.appendChild(picker)\n\n var _ = (e: Event) => {\n if (!(e as CustomEvent)?.detail?.confirmed) {\n return\n }\n\n if (picker.colorAsString) {\n this.colorString = picker.colorAsString\n }\n\n picker.removeEventListener('iron-overlay-closed', _)\n picker.parentNode?.removeChild(picker)\n }\n picker.addEventListener('iron-overlay-closed', _)\n\n setTimeout(() => picker.open())\n }\n}\n"]}

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

@@ -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);

package/dist/src/ox-input-range.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-input-range.js","sourceRoot":"","sources":["../../src/ox-input-range.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,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,oBAAoB,CAAA;AAGhD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAAtC;;~~QAmG8B~~,UAAK,GAAW,CAAC,CAAA;QACjB,SAAI,GAAW,CAAC,CAAA;QAChB,QAAG,GAAW,CAAC,GAAG,CAAA;QAClB,QAAG,GAAW,GAAG,CAAA;IAiC/C,CAAC;~~aAtIQ~~,WAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgGlB~~,~~AAhGY~~,~~CAgGZ~~;IAOD,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,KAAK;gBACX,IAAI,CAAC,IAAI;eACV,IAAI,CAAC,GAAG;eACR,IAAI,CAAC,GAAG;iBACN,CAAC,CAAa,EAAE,EAAE;YACzB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;oBACW,IAAI,CAAC,QAAQ;;;;;iBAKhB,IAAI,CAAC,KAAK;gBACX,IAAI,CAAC,IAAI;eACV,IAAI,CAAC,GAAG;eACR,IAAI,CAAC,GAAG;kBACL,CAAC,CAAQ,EAAE,EAAE;YACrB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;oBACW,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;;AAnC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAkB;~~AAtGzC~~,YAAY;IADjB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,YAAY,~~CAuIjB~~","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-range')\nclass OxInputRange extends OxFormField {\n static styles = css`\n :host {\n display: flex;\n gap: var(--spacing-medium);\n align-items: center;\n\n width: 100%;\n user-select: text;\n }\n\n input[type='number'] {\n width: 48px;\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[type='number']:focus {\n outline: none;\n border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n }\n\n input[type='range'] {\n -webkit-appearance: none;\n border: none;\n outline: none;\n width: 100%;\n flex: 1;\n height: 16px;\n background-color: transparent;\n }\n input[type='range']::-webkit-slider-runnable-track {\n width: 100%;\n height: 7px;\n background-color: rgba(0, 0, 0, 0.02);\n border: 1px solid rgba(0, 0, 0, 0.05);\n border-radius: 5px;\n }\n input[type='range']::-webkit-slider-thumb {\n -webkit-appearance: none;\n border: none;\n height: 16px;\n width: 16px;\n border-radius: 50%;\n background: var(--md-sys-color-on-primary-container);\n margin-top: -6px;\n box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n }\n input[type='range']:focus {\n outline: none;\n }\n\n input[type='range']::-moz-range-track {\n width: 100%;\n height: 7px;\n background-color: rgba(0, 0, 0, 0.02);\n border: 1px solid rgba(0, 0, 0, 0.05);\n border-radius: 5px;\n }\n input[type='range']::-moz-range-thumb {\n border: none;\n height: 16px;\n width: 16px;\n border-radius: 50%;\n background: var(--md-sys-color-on-primary-container);\n margin-top: -6px;\n box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n }\n\n input[type='range']:-moz-focusring {\n outline: 1px solid black;\n outline-offset: -1px;\n }\n\n input[type='range']::-ms-track {\n width: 100%;\n height: 7px;\n background-color: rgba(0, 0, 0, 0.02);\n border: 1px solid rgba(0, 0, 0, 0.05);\n border-radius: 5px;\n }\n input[type='range']::-ms-thumb {\n border: none;\n height: 16px;\n width: 16px;\n border-radius: 50%;\n background: var(--md-sys-color-on-primary-container);\n margin-top: -6px;\n box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n }\n\n input:focus {\n outline: none;\n opacity: 1;\n }\n `\n\n @property({ type: Number }) value: number = 0\n @property({ type: Number }) step: number = 1\n @property({ type: Number }) min: number = -100\n @property({ type: Number }) max: number = 100\n\n render() {\n return html`\n <input\n type=\"range\"\n .value=${this.value}\n .step=${this.step}\n .min=${this.min}\n .max=${this.max}\n @input=${(e: InputEvent) => {\n e.stopPropagation()\n this.value = Number((e.target as HTMLInputElement).value)\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }}\n ?disabled=${this.disabled}\n />\n\n <input\n type=\"number\"\n .value=${this.value}\n .step=${this.step}\n .min=${this.min}\n .max=${this.max}\n @change=${(e: Event) => {\n e.stopPropagation()\n this.value = Number((e.target as HTMLInputElement).value)\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }}\n ?disabled=${this.disabled}\n />\n `\n }\n}\n"]}
1	+ {"version":3,"file":"ox-input-range.js","sourceRoot":"","sources":["../../src/ox-input-range.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,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,oBAAoB,CAAA;AAGhD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAAtC;;QAqG8B,UAAK,GAAW,CAAC,CAAA;QACjB,SAAI,GAAW,CAAC,CAAA;QAChB,QAAG,GAAW,CAAC,GAAG,CAAA;QAClB,QAAG,GAAW,GAAG,CAAA;IAiC/C,CAAC;aAxIQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkGlB,AAlGY,CAkGZ;IAOD,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,KAAK;gBACX,IAAI,CAAC,IAAI;eACV,IAAI,CAAC,GAAG;eACR,IAAI,CAAC,GAAG;iBACN,CAAC,CAAa,EAAE,EAAE;YACzB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;oBACW,IAAI,CAAC,QAAQ;;;;;iBAKhB,IAAI,CAAC,KAAK;gBACX,IAAI,CAAC,IAAI;eACV,IAAI,CAAC,GAAG;eACR,IAAI,CAAC,GAAG;kBACL,CAAC,CAAQ,EAAE,EAAE;YACrB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;oBACW,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;;AAnC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAkB;AAxGzC,YAAY;IADjB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,YAAY,CAyIjB","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-range')\nclass OxInputRange extends OxFormField {\n static styles = css`\n :host {\n display: flex;\n gap: var(--spacing-medium);\n align-items: center;\n\n width: 100%;\n user-select: text;\n }\n\n input[type='number'] {\n width: 48px;\n height: 100%;\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\n input[type='number']:focus {\n outline: none;\n border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n }\n\n input[type='range'] {\n -webkit-appearance: none;\n border: none;\n outline: none;\n width: 100%;\n flex: 1;\n height: 16px;\n background-color: transparent;\n }\n input[type='range']::-webkit-slider-runnable-track {\n width: 100%;\n height: 7px;\n background-color: rgba(0, 0, 0, 0.02);\n border: 1px solid rgba(0, 0, 0, 0.05);\n border-radius: 5px;\n }\n input[type='range']::-webkit-slider-thumb {\n -webkit-appearance: none;\n border: none;\n height: 16px;\n width: 16px;\n border-radius: 50%;\n background: var(--md-sys-color-on-primary-container);\n margin-top: -6px;\n box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n }\n input[type='range']:focus {\n outline: none;\n }\n\n input[type='range']::-moz-range-track {\n width: 100%;\n height: 7px;\n background-color: rgba(0, 0, 0, 0.02);\n border: 1px solid rgba(0, 0, 0, 0.05);\n border-radius: 5px;\n }\n input[type='range']::-moz-range-thumb {\n border: none;\n height: 16px;\n width: 16px;\n border-radius: 50%;\n background: var(--md-sys-color-on-primary-container);\n margin-top: -6px;\n box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n }\n\n input[type='range']:-moz-focusring {\n outline: 1px solid black;\n outline-offset: -1px;\n }\n\n input[type='range']::-ms-track {\n width: 100%;\n height: 7px;\n background-color: rgba(0, 0, 0, 0.02);\n border: 1px solid rgba(0, 0, 0, 0.05);\n border-radius: 5px;\n }\n input[type='range']::-ms-thumb {\n border: none;\n height: 16px;\n width: 16px;\n border-radius: 50%;\n background: var(--md-sys-color-on-primary-container);\n margin-top: -6px;\n box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n }\n\n input:focus {\n outline: none;\n opacity: 1;\n }\n `\n\n @property({ type: Number }) value: number = 0\n @property({ type: Number }) step: number = 1\n @property({ type: Number }) min: number = -100\n @property({ type: Number }) max: number = 100\n\n render() {\n return html`\n <input\n type=\"range\"\n .value=${this.value}\n .step=${this.step}\n .min=${this.min}\n .max=${this.max}\n @input=${(e: InputEvent) => {\n e.stopPropagation()\n this.value = Number((e.target as HTMLInputElement).value)\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }}\n ?disabled=${this.disabled}\n />\n\n <input\n type=\"number\"\n .value=${this.value}\n .step=${this.step}\n .min=${this.min}\n .max=${this.max}\n @change=${(e: Event) => {\n e.stopPropagation()\n this.value = Number((e.target as HTMLInputElement).value)\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }}\n ?disabled=${this.disabled}\n />\n `\n }\n}\n"]}

package/dist/src/ox-input-table.js CHANGED Viewed

@@ -139,19 +139,19 @@ let OxInputTable = class OxInputTable extends OxFormField {
             </ox-popup-list>
           </ox-select>
-          <label class="property-half-label"> <md-icon>line_weight</md-icon></label>
+          <label class="half-label"> <md-icon>line_weight</md-icon></label>
           <input
             type="number"
             id="border-width"
-            class="property-half-input"
+            class="half-editor"
             @change=${(e) => (this.borderWidth = Number(e.target.value))}
             .value=${String(this.borderWidth || '')}
           />
-          <label class="property-half-label"> <md-icon>border_color</md-icon></label>
+          <label class="half-label"> <md-icon>border_color</md-icon></label>
           <ox-input-color
             id="border-color"
-            class="property-half-input"
+            class="half-editor"
             @change=${(e) => (this.borderColor = e.target.value)}
             .value=${this.borderColor}
           >

package/dist/src/ox-input-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-input-table.js","sourceRoot":"","sources":["../../src/ox-input-table.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AACjC,OAAO,qBAAqB,CAAA;AAE5B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAA;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAYhD;;;;;GAKG;AAGI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAAtC;;QAuEuB,gBAAW,GAAW,CAAC,CAAA;QACvB,gBAAW,GAAW,OAAO,CAAA;QAC7B,gBAAW,GAAgB,OAAO,CAAA;QAClC,UAAK,GAAQ,IAAI,CAAA;IA2M/C,CAAC;IApRC,MAAM,KAAK,MAAM;QACf,OAAO;YACL,kBAAkB;YAClB,UAAU;YACV,gBAAgB;YAChB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6DF;SACF,CAAA;IACH,CAAC;IASD,YAAY;QACV,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC9E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;mBAOI,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;mDAiBF,IAAI,CAAC,WAAW;oCAC/B,IAAI,CAAC,WAAW;;;kBAGlC,UAAU,CAAC,OAAO;;;;;;;;;;;;;;;;;;sBAkBd,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;qBAChF,MAAM,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC;;;;;;;sBAO7B,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAI,CAAC,CAAC,MAAc,CAAC,KAAK,CAAC;qBAC3D,IAAI,CAAC,WAAW;;;;;;4CAMO,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;;;;;;;;;;;;;;KAczE,CAAA;IACH,CAAC;IAED,YAAY,CAAC,CAAQ;QACnB,IAAI,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAA;QAEpC,MAAM,KAAK,GAAG,MAAM,EAAE,OAAO,CAAC,eAAe,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;QACpE,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAM;QACR,CAAC;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,QAAQ,EAAE,CAAC,QAAe,EAAE,EAAE;oBAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAA;oBAEhC,QAAQ,KAAK,EAAE,CAAC;wBACd,KAAK,YAAY;4BACf,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAA;4BAC1B,MAAK;wBACP,KAAK,eAAe;4BAClB,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;4BAC7B,MAAK;wBACP,KAAK,cAAc;4BACjB,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAA;4BAChC,MAAK;wBACP,KAAK,cAAc;4BACjB,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAA;4BAChC,MAAK;wBACP,KAAK,aAAa;4BAChB,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;4BAC/B,MAAK;wBACP,KAAK,cAAc;4BACjB,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAA;4BAChC,MAAK;wBACP,KAAK,aAAa;4BAChB,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAA;4BAC1B,MAAK;wBACP,KAAK,aAAa;4BAChB,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAA;4BAC1B,MAAK;wBACP,KAAK,uBAAuB;4BAC1B,KAAK,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAA;4BACpC,MAAK;wBACP,KAAK,qBAAqB;4BACxB,KAAK,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAA;4BAClC,MAAK;oBACT,CAAC;gBACH,CAAC;aACF;SACF,CAAC,CACH,CAAA;QAED,IAAI,CAAC,KAAK,GAAG;YACX,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,CAAA;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,KAAK;YAClB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;QAED,CAAC,CAAC,eAAe,EAAE,CAAA;IACrB,CAAC;IAED,YAAY,CAAC,CAAQ;QACnB,IAAI,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAA;QAEpC,MAAM,KAAK,GAAG,MAAM,EAAE,OAAO,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,YAAY,CAAC,CAAA;QACzE,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAM;QACR,CAAC;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,QAAQ,EAAE,CAAC,QAAe,EAAE,EAAE;oBAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAA;oBAEhC,KAAK,CAAC,aAAa,CACjB,QAAQ,EACR;wBACE,WAAW,EAAE,IAAI,CAAC,WAAW;wBAC7B,QAAQ,EAAE,IAAI,CAAC,WAAW;wBAC1B,SAAS,EAAE,IAAI,CAAC,WAAW;qBAC5B,EACD,KAAK,CACN,CAAA;gBACH,CAAC;aACF;SACF,CAAC,CACH,CAAA;QAED,IAAI,CAAC,KAAK,GAAG;YACX,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,CAAA;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,KAAK;YAClB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;QAED,CAAC,CAAC,eAAe,EAAE,CAAA;IACrB,CAAC;CACF,CAAA;AA9M6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAA8B;AAC7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAkB;AAElB;IAA1B,KAAK,CAAC,kBAAkB,CAAC;oDAA6B;AA5E5C,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAqRxB","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'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { TableEventStyles } from '@operato/styles/table-event-styles.js'\nimport { LineStyles } from '@operato/styles/line-styles.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\ntype BorderStyle =\n \| 'solid'\n \| 'round-dot'\n \| 'square-dot'\n \| 'dash'\n \| 'dash-dot'\n \| 'long-dash'\n \| 'long-dash-dot'\n \| 'long-dash-dot-dot'\n\n/\n 테이블 셀의 좌,우,상,하 경계선의 스타일을 편집하는 컴포넌트이다.\n * Example:\n * <ox-input-table value=${border}>\n * </ox-input-table>\n */\n\n@customElement('ox-input-table')\nexport class OxInputTable extends OxFormField {\n static get styles() {\n return [\n PropertyGridStyles,\n LineStyles,\n TableEventStyles,\n css`\n :host {\n display: block;\n }\n\n fieldset {\n border: none;\n border-bottom: 1px solid #cfd8dc;\n color: var(--md-sys-color-on-primary-container);\n font-size: 12px;\n padding: 0 0 10px 0;\n margin: 0 0 10px 0;\n }\n\n fieldset legend {\n padding: 5px 0 0 5px;\n font-size: 11px;\n color: #e46c2e;\n font-weight: bold;\n text-transform: capitalize;\n }\n\n #border-set {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n grid-gap: 5px;\n margin: 5px 0;\n place-items: center;\n }\n\n #border-set > md-icon {\n margin: 0 0 0 8px;\n width: 32px;\n height: 32px;\n }\n\n #table-event {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n grid-gap: 5px;\n margin: 5px 0;\n place-items: center;\n }\n\n .table-event {\n position: relative;\n width: 100%;\n min-height: 65px;\n place-items: center;\n }\n\n .table-event span {\n position: absolute;\n bottom: 0;\n width: 100%;\n font-size: 0.9em;\n line-height: 1.2;\n text-transform: capitalize;\n text-align: center;\n vertical-align: bottom;\n }\n `\n ]\n }\n\n @property({ type: Number }) borderWidth: number = 1\n @property({ type: String }) borderColor: string = 'black'\n @property({ type: String }) borderStyle: BorderStyle = 'solid'\n @property({ type: Object }) value: any = null\n\n @query('#border-fieldset') borderFieldSet!: HTMLElement\n\n firstUpdated() {\n this.borderFieldSet.addEventListener('change', this._onClickType.bind(this))\n }\n\n render() {\n return html`\n <fieldset id=\"border-fieldset\">\n <legend><ox-i18n msgid=\"label.border-style\">border style</ox-i18n></legend>\n\n <div\n id=\"border-set\"\n border-style-btn\"\n @click=${(e: Event) => this._onClickType(e)}\n >\n <md-icon data-value=\"out\">border_outer</md-icon>\n <md-icon data-value=\"in\">border_inner</md-icon>\n <md-icon data-value=\"all\">border_all</md-icon>\n <md-icon data-value=\"left\">border_left</md-icon>\n <md-icon data-value=\"center\">border_vertical</md-icon>\n <md-icon data-value=\"right\">border_right</md-icon>\n <md-icon data-value=\"top\">border_top</md-icon>\n <md-icon data-value=\"middle\">border_horizontal</md-icon>\n <md-icon data-value=\"bottom\">border_bottom</md-icon>\n <md-icon data-value=\"clear\">border_clear</md-icon>\n </div>\n\n <div class=\"property-grid\">\n\n <label> <ox-i18n msgid=\"label.border-type\">border type</ox-i18n> </label>\n <ox-select value-key=\"lineDash\" .value=${this.borderStyle} class=\"custom-editor\">\n <div class=\"line-type ${this.borderStyle}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"line-type solid\" value=\"solid\" option></div>\n <div class=\"line-type round-dot\" value=\"round-dot\" option></div>\n <div class=\"line-type square-dot\" value=\"square-dot\" option></div>\n <div class=\"line-type dash\" value=\"dash\" option></div>\n <div class=\"line-type dash-dot\" value=\"dash-dot\" option></div>\n <div class=\"line-type long-dash\" value=\"long-dash\" option></div>\n <div class=\"line-type long-dash-dot\" value=\"long-dash-dot\" option></div>\n <div class=\"line-type long-dash-dot-dot\" value=\"long-dash-dot-dot\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <label class=\"property-half-label\"> <md-icon>line_weight</md-icon></label>\n <input\n type=\"number\"\n id=\"border-width\"\n class=\"property-half-input\"\n @change=${(e: Event) => (this.borderWidth = Number((e.target as HTMLInputElement).value))}\n .value=${String(this.borderWidth \|\| '')}\n />\n\n <label class=\"property-half-label\"> <md-icon>border_color</md-icon></label>\n <ox-input-color\n id=\"border-color\"\n class=\"property-half-input\"\n @change=${(e: Event) => (this.borderColor = (e.target as any).value)}\n .value=${this.borderColor}\n >\n </ox-input-color>\n </div>\n </fieldset>\n\n <fieldset id=\"cell-fieldset\" @click=${(e: Event) => this._onClickCell(e)}>\n <div id=\"table-event\">\n <div name=\"merge-cells\" class=\"table-event\"><span>merge cells</span></div>\n <div name=\"split-cells\" class=\"table-event\"><span>split cells</span></div>\n <div name=\"delete-row\" class=\"table-event\"><span>delete row</span></div>\n <div name=\"delete-column\" class=\"table-event\"><span>delete column</span></div>\n <div name=\"insert-above\" class=\"table-event\"><span>insert above</span></div>\n <div name=\"insert-below\" class=\"table-event\"><span>insert below</span></div>\n <div name=\"insert-left\" class=\"table-event\"><span>insert left</span></div>\n <div name=\"insert-right\" class=\"table-event\"><span>insert right</span></div>\n <div name=\"distribute-horizontal\" class=\"table-event\"><span>distribute horizontal</span></div>\n <div name=\"distribute-vertical\" class=\"table-event\"><span>distribute vertical</span></div>\n </div>\n </fieldset>\n `\n }\n\n _onClickCell(e: Event) {\n var target = e.target as HTMLElement\n\n const event = target?.closest('[table-event]')?.getAttribute('name')\n if (!event) {\n return\n }\n\n this.dispatchEvent(\n new CustomEvent('i-need-selected', {\n bubbles: true,\n composed: true,\n detail: {\n callback: (selected: any[]) => {\n const table = selected[0].parent\n\n switch (event) {\n case 'delete-row':\n table.deleteRows(selected)\n break\n case 'delete-column':\n table.deleteColumns(selected)\n break\n case 'insert-above':\n table.insertCellsAbove(selected)\n break\n case 'insert-below':\n table.insertCellsBelow(selected)\n break\n case 'insert-left':\n table.insertCellsLeft(selected)\n break\n case 'insert-right':\n table.insertCellsRight(selected)\n break\n case 'merge-cells':\n table.mergeCells(selected)\n break\n case 'split-cells':\n table.splitCells(selected)\n break\n case 'distribute-horizontal':\n table.distributeHorizontal(selected)\n break\n case 'distribute-vertical':\n table.distributeVertical(selected)\n break\n }\n }\n }\n })\n )\n\n this.value = {\n borderWidth: this.borderWidth,\n borderColor: this.borderColor,\n borderStyle: this.borderStyle\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value,\n bubbles: true,\n composed: true\n })\n )\n\n e.stopPropagation()\n }\n\n _onClickType(e: Event) {\n var target = e.target as HTMLElement\n\n const where = target?.closest('[data-value]')?.getAttribute('data-value')\n if (!where) {\n return\n }\n\n this.dispatchEvent(\n new CustomEvent('i-need-selected', {\n bubbles: true,\n composed: true,\n detail: {\n callback: (selected: any[]) => {\n const table = selected[0].parent\n\n table.setCellsStyle(\n selected,\n {\n strokeStyle: this.borderColor,\n lineDash: this.borderStyle,\n lineWidth: this.borderWidth\n },\n where\n )\n }\n }\n })\n )\n\n this.value = {\n borderWidth: this.borderWidth,\n borderColor: this.borderColor,\n borderStyle: this.borderStyle\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value,\n bubbles: true,\n composed: true\n })\n )\n\n e.stopPropagation()\n }\n}\n"]}
1	+ {"version":3,"file":"ox-input-table.js","sourceRoot":"","sources":["../../src/ox-input-table.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'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { TableEventStyles } from '@operato/styles/table-event-styles.js'\nimport { LineStyles } from '@operato/styles/line-styles.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\ntype BorderStyle =\n \| 'solid'\n \| 'round-dot'\n \| 'square-dot'\n \| 'dash'\n \| 'dash-dot'\n \| 'long-dash'\n \| 'long-dash-dot'\n \| 'long-dash-dot-dot'\n\n/\n 테이블 셀의 좌,우,상,하 경계선의 스타일을 편집하는 컴포넌트이다.\n * Example:\n * <ox-input-table value=${border}>\n * </ox-input-table>\n */\n\n@customElement('ox-input-table')\nexport class OxInputTable extends OxFormField {\n static get styles() {\n return [\n PropertyGridStyles,\n LineStyles,\n TableEventStyles,\n css`\n :host {\n display: block;\n }\n\n fieldset {\n border: none;\n border-bottom: 1px solid #cfd8dc;\n color: var(--md-sys-color-on-primary-container);\n font-size: 12px;\n padding: 0 0 10px 0;\n margin: 0 0 10px 0;\n }\n\n fieldset legend {\n padding: 5px 0 0 5px;\n font-size: 11px;\n color: #e46c2e;\n font-weight: bold;\n text-transform: capitalize;\n }\n\n #border-set {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n grid-gap: 5px;\n margin: 5px 0;\n place-items: center;\n }\n\n #border-set > md-icon {\n margin: 0 0 0 8px;\n width: 32px;\n height: 32px;\n }\n\n #table-event {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n grid-gap: 5px;\n margin: 5px 0;\n place-items: center;\n }\n\n .table-event {\n position: relative;\n width: 100%;\n min-height: 65px;\n place-items: center;\n }\n\n .table-event span {\n position: absolute;\n bottom: 0;\n width: 100%;\n font-size: 0.9em;\n line-height: 1.2;\n text-transform: capitalize;\n text-align: center;\n vertical-align: bottom;\n }\n `\n ]\n }\n\n @property({ type: Number }) borderWidth: number = 1\n @property({ type: String }) borderColor: string = 'black'\n @property({ type: String }) borderStyle: BorderStyle = 'solid'\n @property({ type: Object }) value: any = null\n\n @query('#border-fieldset') borderFieldSet!: HTMLElement\n\n firstUpdated() {\n this.borderFieldSet.addEventListener('change', this._onClickType.bind(this))\n }\n\n render() {\n return html`\n <fieldset id=\"border-fieldset\">\n <legend><ox-i18n msgid=\"label.border-style\">border style</ox-i18n></legend>\n\n <div\n id=\"border-set\"\n border-style-btn\"\n @click=${(e: Event) => this._onClickType(e)}\n >\n <md-icon data-value=\"out\">border_outer</md-icon>\n <md-icon data-value=\"in\">border_inner</md-icon>\n <md-icon data-value=\"all\">border_all</md-icon>\n <md-icon data-value=\"left\">border_left</md-icon>\n <md-icon data-value=\"center\">border_vertical</md-icon>\n <md-icon data-value=\"right\">border_right</md-icon>\n <md-icon data-value=\"top\">border_top</md-icon>\n <md-icon data-value=\"middle\">border_horizontal</md-icon>\n <md-icon data-value=\"bottom\">border_bottom</md-icon>\n <md-icon data-value=\"clear\">border_clear</md-icon>\n </div>\n\n <div class=\"property-grid\">\n\n <label> <ox-i18n msgid=\"label.border-type\">border type</ox-i18n> </label>\n <ox-select value-key=\"lineDash\" .value=${this.borderStyle} class=\"custom-editor\">\n <div class=\"line-type ${this.borderStyle}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"line-type solid\" value=\"solid\" option></div>\n <div class=\"line-type round-dot\" value=\"round-dot\" option></div>\n <div class=\"line-type square-dot\" value=\"square-dot\" option></div>\n <div class=\"line-type dash\" value=\"dash\" option></div>\n <div class=\"line-type dash-dot\" value=\"dash-dot\" option></div>\n <div class=\"line-type long-dash\" value=\"long-dash\" option></div>\n <div class=\"line-type long-dash-dot\" value=\"long-dash-dot\" option></div>\n <div class=\"line-type long-dash-dot-dot\" value=\"long-dash-dot-dot\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <label class=\"half-label\"> <md-icon>line_weight</md-icon></label>\n <input\n type=\"number\"\n id=\"border-width\"\n class=\"half-editor\"\n @change=${(e: Event) => (this.borderWidth = Number((e.target as HTMLInputElement).value))}\n .value=${String(this.borderWidth \|\| '')}\n />\n\n <label class=\"half-label\"> <md-icon>border_color</md-icon></label>\n <ox-input-color\n id=\"border-color\"\n class=\"half-editor\"\n @change=${(e: Event) => (this.borderColor = (e.target as any).value)}\n .value=${this.borderColor}\n >\n </ox-input-color>\n </div>\n </fieldset>\n\n <fieldset id=\"cell-fieldset\" @click=${(e: Event) => this._onClickCell(e)}>\n <div id=\"table-event\">\n <div name=\"merge-cells\" class=\"table-event\"><span>merge cells</span></div>\n <div name=\"split-cells\" class=\"table-event\"><span>split cells</span></div>\n <div name=\"delete-row\" class=\"table-event\"><span>delete row</span></div>\n <div name=\"delete-column\" class=\"table-event\"><span>delete column</span></div>\n <div name=\"insert-above\" class=\"table-event\"><span>insert above</span></div>\n <div name=\"insert-below\" class=\"table-event\"><span>insert below</span></div>\n <div name=\"insert-left\" class=\"table-event\"><span>insert left</span></div>\n <div name=\"insert-right\" class=\"table-event\"><span>insert right</span></div>\n <div name=\"distribute-horizontal\" class=\"table-event\"><span>distribute horizontal</span></div>\n <div name=\"distribute-vertical\" class=\"table-event\"><span>distribute vertical</span></div>\n </div>\n </fieldset>\n `\n }\n\n _onClickCell(e: Event) {\n var target = e.target as HTMLElement\n\n const event = target?.closest('[table-event]')?.getAttribute('name')\n if (!event) {\n return\n }\n\n this.dispatchEvent(\n new CustomEvent('i-need-selected', {\n bubbles: true,\n composed: true,\n detail: {\n callback: (selected: any[]) => {\n const table = selected[0].parent\n\n switch (event) {\n case 'delete-row':\n table.deleteRows(selected)\n break\n case 'delete-column':\n table.deleteColumns(selected)\n break\n case 'insert-above':\n table.insertCellsAbove(selected)\n break\n case 'insert-below':\n table.insertCellsBelow(selected)\n break\n case 'insert-left':\n table.insertCellsLeft(selected)\n break\n case 'insert-right':\n table.insertCellsRight(selected)\n break\n case 'merge-cells':\n table.mergeCells(selected)\n break\n case 'split-cells':\n table.splitCells(selected)\n break\n case 'distribute-horizontal':\n table.distributeHorizontal(selected)\n break\n case 'distribute-vertical':\n table.distributeVertical(selected)\n break\n }\n }\n }\n })\n )\n\n this.value = {\n borderWidth: this.borderWidth,\n borderColor: this.borderColor,\n borderStyle: this.borderStyle\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value,\n bubbles: true,\n composed: true\n })\n )\n\n e.stopPropagation()\n }\n\n _onClickType(e: Event) {\n var target = e.target as HTMLElement\n\n const where = target?.closest('[data-value]')?.getAttribute('data-value')\n if (!where) {\n return\n }\n\n this.dispatchEvent(\n new CustomEvent('i-need-selected', {\n bubbles: true,\n composed: true,\n detail: {\n callback: (selected: any[]) => {\n const table = selected[0].parent\n\n table.setCellsStyle(\n selected,\n {\n strokeStyle: this.borderColor,\n lineDash: this.borderStyle,\n lineWidth: this.borderWidth\n },\n where\n )\n }\n }\n })\n )\n\n this.value = {\n borderWidth: this.borderWidth,\n borderColor: this.borderColor,\n borderStyle: this.borderStyle\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value,\n bubbles: true,\n composed: true\n })\n )\n\n e.stopPropagation()\n }\n}\n"]}