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

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

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 (6) hide show

package/CHANGELOG.md +9 -0
package/dist/src/ox-input-color.d.ts +11 -4
package/dist/src/ox-input-color.js +116 -60
package/dist/src/ox-input-color.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +3 -3

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,15 @@
 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.29](https://github.com/hatiolab/operato/compare/v9.0.0-beta.28...v9.0.0-beta.29) (2025-01-30)
+### :rocket: New Features
+* upgrade ox-input-color ([5405d0b](https://github.com/hatiolab/operato/commit/5405d0ba3dc07051f54251d17c1eaac6b491aad9))
 ## [9.0.0-beta.28](https://github.com/hatiolab/operato/compare/v9.0.0-beta.27...v9.0.0-beta.28) (2025-01-28)

package/dist/src/ox-input-color.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@operato/color-picker/paper-color-picker.js';
+import '@simonwep/pickr/dist/themes/classic.min.css';
+import { PropertyValues } from 'lit';
 import { OxFormField } from './ox-form-field.js';
 /**
 색상을 입력하는데 사용되는 입력 컴포넌트이다.
@@ -165,10 +166,16 @@ export declare class OxInputColor extends OxFormField {
     static styles: import("lit").CSSResult;
     value?: string;
     properties: any;
+    defaultColor: string;
+    pickrElement: HTMLAnchorElement;
+    pickrButton?: HTMLButtonElement;
+    private pickr;
     render(): import("lit-html").TemplateResult<1>;
-    set colorString(colorString: string);
-    _thumbnail(): string;
-    _onInputChanged(e: Event): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    updated(changed: PropertyValues<this>): void;
+    private setColorString;
+    private onInputChanged;
     /**
      * 외부에서 호출 가능한 메쏘드임.
      */

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

@@ -1,11 +1,12 @@
+import { __decorate } from "tslib";
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import { __decorate } from "tslib";
-import '@operato/color-picker/paper-color-picker.js';
+import '@simonwep/pickr/dist/themes/classic.min.css'; // important!
 import { css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import tinycolor from 'tinycolor2';
+import Pickr from '@simonwep/pickr';
 import { OxFormField } from './ox-form-field.js';
 /**
 색상을 입력하는데 사용되는 입력 컴포넌트이다.
@@ -169,6 +170,8 @@ let OxInputColor = class OxInputColor extends OxFormField {
     constructor() {
         super(...arguments);
         this.value = undefined;
+        this.defaultColor = 'black';
+        this.pickr = null;
     }
     static { this.styles = css `
     :host {
@@ -195,7 +198,7 @@ let OxInputColor = class OxInputColor extends OxFormField {
       border-color: var(--md-sys-color-secondary-fixed-dim);
     }
-    a {
+    div {
       -webkit-appearance: none;
       display: flex;
       position: absolute;
@@ -206,21 +209,40 @@ let OxInputColor = class OxInputColor extends OxFormField {
       justify-content: center;
     }
-    span {
+    div > button {
+      position: relative;
       width: 60%;
       height: 60%;
       border: 0.5px solid rgba(0, 0, 0, 0.3);
-      border-radius: var(--border-radius);
+      padding: 0;
+      color: white;
+      outline: none;
+      cursor: pointer;
+    }
+    div > button::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
+      content: '';
+      background-size: 0.5em;
+      border-radius: 0.15em;
+      z-index: -1;
     }
-    span.transparent {
-      background-color: #fefefe;
-      background-image: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),
-        linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);
-      background-position:
-        0 0,
-        9px 9px;
-      background-size: 18px 18px;
+    div > button::after {
+      position: absolute;
+      content: '';
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      transition: background 0.3s;
+      background: var(--pcr-color);
+      border-radius: 0.15em;
     }
   `; }
     render() {
@@ -229,18 +251,80 @@ let OxInputColor = class OxInputColor extends OxFormField {
         id="text"
         type="text"
         .value=${this.value || ''}
-        @change=${(e) => this._onInputChanged(e)}
+        @change=${(e) => this.onInputChanged(e)}
         .placeholder=${this.getAttribute('placeholder') || ''}
         ?disabled=${this.disabled}
       />
-      <a @click=${(e) => this.showPicker()}>
-        <span id="color-thumbnail" .style="background-color:${this._thumbnail()}" class=${this._thumbnail()}> </span>
-      </a>
+      <div class="pickr"></div>
     `;
     }
-    set colorString(colorString) {
-        var color = tinycolor(colorString, {});
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.pickr?.destroyAndRemove();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        setTimeout(() => {
+            var color = tinycolor(this.value || this.defaultColor, {});
+            const pickr = Pickr.create({
+                el: this.pickrElement,
+                theme: 'classic',
+                default: color.toRgbString(),
+                swatches: [
+                    'rgba(244, 67, 54, 1)',
+                    'rgba(233, 30, 99, 0.95)',
+                    'rgba(156, 39, 176, 0.9)',
+                    'rgba(103, 58, 183, 0.85)',
+                    'rgba(63, 81, 181, 0.8)',
+                    'rgba(33, 150, 243, 0.75)',
+                    'rgba(3, 169, 244, 0.7)',
+                    'rgba(0, 188, 212, 0.7)',
+                    'rgba(0, 150, 136, 0.75)',
+                    'rgba(76, 175, 80, 0.8)',
+                    'rgba(139, 195, 74, 0.85)',
+                    'rgba(205, 220, 57, 0.9)',
+                    'rgba(255, 235, 59, 0.95)',
+                    'rgba(255, 193, 7, 1)'
+                ],
+                components: {
+                    preview: true,
+                    opacity: true,
+                    hue: true,
+                    interaction: {
+                        hex: true,
+                        rgba: true,
+                        hsla: true,
+                        hsva: true,
+                        cmyk: true,
+                        input: true,
+                        clear: true,
+                        save: true
+                    }
+                }
+            });
+            pickr.on('save', (color) => {
+                this.setColorString(color ? color.toRGBA().toString() : '');
+                pickr.hide();
+            });
+            this.pickr = pickr;
+        });
+    }
+    updated(changed) {
+        if (changed.has('value')) {
+            // var color = tinycolor(this.value || this.defaultColor)
+            // this.pickr?.setColor(color.toRgbString() || null, true)
+            this.pickr?.setColor(this.value || this.defaultColor, true);
+            this.pickrButton?.style.setProperty('--pcr-color', this.value || this.defaultColor);
+        }
+    }
+    setColorString(colorString) {
+        if (!colorString) {
+            this.value = '';
+            this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+            return;
+        }
+        var color = tinycolor(colorString || this.defaultColor, {});
         var { withoutAlpha, valueType } = this.properties || {};
         if (color.isValid()) {
             if (valueType == 'hex' || withoutAlpha) {
@@ -251,10 +335,7 @@ let OxInputColor = class OxInputColor extends OxFormField {
             this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
         }
     }
-    _thumbnail() {
-        return tinycolor(this.value || 'transparent', {}).toRgbString();
-    }
-    _onInputChanged(e) {
+    onInputChanged(e) {
         e.stopPropagation();
         this.value = e.target.value;
         this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
@@ -266,43 +347,9 @@ let OxInputColor = class OxInputColor extends OxFormField {
         if (this.disabled) {
             return;
         }
-        var { withoutAlpha } = this.properties || {};
-        var color = tinycolor(this.value, {});
-        var picker = document.createElement('paper-color-picker');
-        picker.shape = 'huebox';
-        picker.color = color;
-        picker.colorAsString = color.toRgbString();
-        if (!withoutAlpha) {
-            picker.allowAlpha = true;
-            picker.alwaysShowAlpha = true;
+        if (this.pickr) {
+            this.pickr.show();
         }
-        picker.type = 'hsl';
-        picker.style.setProperty('--paper-input-container-color', 'var(--md-sys-color-primary, gray)');
-        picker.style.setProperty('--primary-text-color', 'var(--md-sys-color-primary, gray)');
-        if (color.isValid()) {
-            let rgb = color.toRgb();
-            let alpha = color.getAlpha();
-            picker._initialAlphaValueHack = alpha;
-            picker.set('immediateColor.red', rgb.r);
-            picker.set('immediateColor.green', rgb.g);
-            picker.set('immediateColor.blue', rgb.b);
-            if (alpha != undefined) {
-                picker.set('immediateColor.alpha', alpha);
-            }
-        }
-        document.body.appendChild(picker);
-        var _ = (e) => {
-            if (!e?.detail?.confirmed) {
-                return;
-            }
-            if (picker.colorAsString) {
-                this.colorString = picker.colorAsString;
-            }
-            picker.removeEventListener('iron-overlay-closed', _);
-            picker.parentNode?.removeChild(picker);
-        };
-        picker.addEventListener('iron-overlay-closed', _);
-        setTimeout(() => picker.open());
     }
 };
 __decorate([
@@ -311,6 +358,15 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], OxInputColor.prototype, "properties", void 0);
+__decorate([
+    property({ type: String, attribute: 'default-color' })
+], OxInputColor.prototype, "defaultColor", void 0);
+__decorate([
+    query('.pickr')
+], OxInputColor.prototype, "pickrElement", void 0);
+__decorate([
+    query('div > button')
+], OxInputColor.prototype, "pickrButton", void 0);
 OxInputColor = __decorate([
     customElement('ox-input-color')
 ], OxInputColor);

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 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"]}
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 /\nimport '@simonwep/pickr/dist/themes/classic.min.css' // important!\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport tinycolor from 'tinycolor2'\nimport Pickr from '@simonwep/pickr'\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 div {\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 div > button {\n position: relative;\n width: 60%;\n height: 60%;\n border: 0.5px solid rgba(0, 0, 0, 0.3);\n padding: 0;\n color: white;\n outline: none;\n cursor: pointer;\n }\n\n div > button::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>');\n content: '';\n background-size: 0.5em;\n border-radius: 0.15em;\n z-index: -1;\n }\n\n div > button::after {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n transition: background 0.3s;\n background: var(--pcr-color);\n border-radius: 0.15em;\n }\n `\n\n @property({ type: String }) value?: string = undefined\n @property({ type: Object }) properties: any\n @property({ type: String, attribute: 'default-color' }) defaultColor: string = 'black'\n\n @query('.pickr') pickrElement!: HTMLAnchorElement\n @query('div > button') pickrButton?: HTMLButtonElement\n\n private pickr: Pickr \| null = null\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 <div class=\"pickr\"></div>\n `\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n\n this.pickr?.destroyAndRemove()\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n\n setTimeout(() => {\n var color = tinycolor(this.value \|\| this.defaultColor, {})\n\n const pickr = Pickr.create({\n el: this.pickrElement,\n theme: 'classic',\n default: color.toRgbString(),\n swatches: [\n 'rgba(244, 67, 54, 1)',\n 'rgba(233, 30, 99, 0.95)',\n 'rgba(156, 39, 176, 0.9)',\n 'rgba(103, 58, 183, 0.85)',\n 'rgba(63, 81, 181, 0.8)',\n 'rgba(33, 150, 243, 0.75)',\n 'rgba(3, 169, 244, 0.7)',\n 'rgba(0, 188, 212, 0.7)',\n 'rgba(0, 150, 136, 0.75)',\n 'rgba(76, 175, 80, 0.8)',\n 'rgba(139, 195, 74, 0.85)',\n 'rgba(205, 220, 57, 0.9)',\n 'rgba(255, 235, 59, 0.95)',\n 'rgba(255, 193, 7, 1)'\n ],\n components: {\n preview: true,\n opacity: true,\n hue: true,\n\n interaction: {\n hex: true,\n rgba: true,\n hsla: true,\n hsva: true,\n cmyk: true,\n input: true,\n clear: true,\n save: true\n }\n }\n })\n\n pickr.on('save', (color: any) => {\n this.setColorString(color ? color.toRGBA().toString() : '')\n pickr.hide()\n })\n\n this.pickr = pickr\n })\n }\n\n updated(changed: PropertyValues<this>) {\n if (changed.has('value')) {\n // var color = tinycolor(this.value \|\| this.defaultColor)\n\n // this.pickr?.setColor(color.toRgbString() \|\| null, true)\n\n this.pickr?.setColor(this.value \|\| this.defaultColor, true)\n this.pickrButton?.style.setProperty('--pcr-color', this.value \|\| this.defaultColor)\n }\n }\n\n private setColorString(colorString: string) {\n if (!colorString) {\n this.value = ''\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n return\n }\n\n var color = tinycolor(colorString \|\| this.defaultColor, {})\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 private 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 if (this.pickr) {\n this.pickr.show()\n }\n }\n}\n"]}