npm - @operato/app - Versions diffs - 1.22.0 → 1.22.1 - Mend

@operato/app 1.22.0 → 1.22.1

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

package/CHANGELOG.md +9 -0
package/dist/src/input/ox-input-background-pattern.d.ts +1 -0
package/dist/src/input/ox-input-background-pattern.js +6 -1
package/dist/src/input/ox-input-background-pattern.js.map +1 -1
package/dist/src/input/ox-input-fill-style.d.ts +1 -0
package/dist/src/input/ox-input-fill-style.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +2 -2
package/src/input/ox-input-background-pattern.ts +7 -1
package/src/input/ox-input-fill-style.ts +1 -0

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.
+## [1.22.1](https://github.com/hatiolab/operato/compare/v1.22.0...v1.22.1) (2025-03-04)
+### :bug: Bug Fix
+* add guide-only option for fillstyle ([59fccca](https://github.com/hatiolab/operato/commit/59fccca503e44f761ae629783605057f64426888))
 ## [1.22.0](https://github.com/hatiolab/operato/compare/v1.21.0...v1.22.0) (2025-02-20)
 **Note:** Version bump only for package @operato/app

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

@@ -14,6 +14,7 @@ export type BackgroundPatternOption = {
     width?: number;
     height?: number;
     fitPattern?: boolean;
+    guideOnly?: boolean;
     noRepeat?: boolean;
 };
 /**

package/dist/src/input/ox-input-background-pattern.js CHANGED Viewed

@@ -74,6 +74,11 @@ let OxInputBackgroundPattern = class OxInputBackgroundPattern extends OxFormFiel
         <input value-key="noRepeat" type="checkbox" .checked=${value.noRepeat} required />
         <label> <ox-i18n msgid="label.no-repeat" auto="">no repeat</ox-i18n> </label>
       </div>
+      <div class="grid-10">
+        <input value-key="guideOnly" type="checkbox" .checked=${value.guideOnly} required />
+        <label> <ox-i18n msgid="label.guide-only" auto="">guide only</ox-i18n> </label>
+      </div>
     `;
     }
     firstUpdated() {
@@ -83,7 +88,7 @@ let OxInputBackgroundPattern = class OxInputBackgroundPattern extends OxFormFiel
         var element = e.target;
         var key = element.getAttribute('value-key');
         var value = element.value;
-        if (key === 'fitPattern' || key === 'noRepeat') {
+        if (key === 'fitPattern' || key === 'noRepeat' || key == 'guideOnly') {
             value = element.checked;
         }
         this.value = {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-input-background-pattern.js","sourceRoot":"","sources":["../../../src/input/ox-input-background-pattern.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,kCAAkC,CAAA;AACzC,OAAO,+CAA+C,CAAA;AAEtD,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,gBAAgB,CAAA;~~AAc5C~~;;;;;;;;GAQG;AAGI,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,WAAW;IA+EvD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAK,EAA8B,CAAA;QAE3D,OAAO,IAAI,CAAA;;;;;iBAKE,KAAK,CAAC,KAAK,IAAI,EAAE;sBACZ;YACZ,QAAQ,EAAE,OAAO;SAClB;;;;;;gEAMuD,KAAK,CAAC,KAAK;;;;;;;;;;;;;;0DAcjB,KAAK,CAAC,OAAO;;;0DAGb,KAAK,CAAC,OAAO;;;wDAGf,KAAK,CAAC,KAAK;;;yDAGV,KAAK,CAAC,MAAM;;;;;mDAKlB,KAAK,CAAC,KAAK;;;;iEAIG,KAAK,CAAC,UAAU;;;;;+DAKlB,KAAK,CAAC,QAAQ;;;~~KAGxE~~,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,IAAI,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAC3C,IAAI,KAAK,GAAQ,OAAO,CAAC,KAAK,CAAA;QAE9B,IAAI,GAAG,KAAK,YAAY,IAAI,GAAG,KAAK,UAAU,EAAE,CAAC;~~YAC/C~~,KAAK,GAAG,OAAO,CAAC,OAAO,CAAA;QACzB,CAAC;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,GAAI,CAAC,EAAE,KAAK;SACd,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;~~AA7JM~~,+BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0ElB,AA1EY,CA0EZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAgC;AA7EhD,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,~~CA+JpC~~","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/attachment/ox-attachment-selector.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from '@operato/input'\n\nexport type BackgroundPatternOption = {\n image?: HTMLImageElement \| string\n color?: string\n align?: 'left-top' \| 'top' \| 'right-top' \| 'left' \| 'center' \| 'right' \| 'left-bottom' \| 'bottom' \| 'right-bottom'\n offsetX?: number\n offsetY?: number\n width?: number\n height?: number\n fitPattern?: boolean\n noRepeat?: boolean\n}\n\n/\n 컴포넌트의 fill pattern을 편집하는 element\n \n Example:\n * <ox-input-background-pattern\n * @change=\"${e => { this.pattern = e.target.value }}\"\n * .value=${this.pattern}\"\n * ></ox-input-background-pattern>\n /\n\n@customElement('ox-input-background-pattern')\nexport class OxInputBackgroundPattern extends OxFormField {\n static styles = css`\n :host,\n .grid-10 {\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 5px;\n grid-auto-rows: minmax(24px, auto);\n\n align-items: center;\n }\n\n {\n align-self: stretch;\n }\n\n label {\n grid-column: span 2;\n text-align: right;\n text-transform: capitalize;\n\n align-self: center;\n }\n\n .grid-10 {\n grid-column: span 10;\n }\n\n select,\n input,\n [custom-editor] {\n grid-column: span 8;\n }\n\n select {\n height: 100%;\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n\n input[type='checkbox'] {\n grid-column: 3 / 4;\n align-self: center;\n }\n\n input[type='checkbox'] ~ label {\n grid-column: span 7;\n text-align: left;\n }\n\n .grid-10 > input[type='number'] {\n grid-column: span 3;\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n\n .grid-10 > label {\n grid-column: span 2;\n text-align: right;\n }\n\n .grid-10 > .icon-only-label {\n grid-column: span 2;\n\n background: var(--url-icon-properties-label) no-repeat;\n float: left;\n margin: 0;\n align-self: stretch;\n }\n\n .icon-only-label.color {\n background-position: 100% -500px;\n }\n\n .grid-10 > ox-input-color {\n grid-column: span 8;\n }\n `\n\n @property({ type: Object }) value?: BackgroundPatternOption\n\n render() {\n const value = this.value \|\| ({} as BackgroundPatternOption)\n\n return html`\n <label> <ox-i18n msgid=\"label.image\" auto=\"\">image</ox-i18n> </label>\n\n <ox-attachment-selector\n value-key=\"image\"\n .value=${value.image \|\| ''}\n .properties=${{\n category: 'image'\n }}\n custom-editor\n ></ox-attachment-selector>\n\n <label> <ox-i18n msgid=\"label.align\" auto=\"\">align</ox-i18n> </label>\n\n <select value-key=\"align\" class=\"select-content\" .value=${value.align}>\n <option value=\"left-top\">Left Top</option>\n <option value=\"top\">Center Top</option>\n <option value=\"right-top\">Right Top</option>\n <option value=\"left\">Left Center</option>\n <option value=\"center\">Center Center</option>\n <option value=\"right\">Right Center</option>\n <option value=\"left-bottom\">Left Bottom</option>\n <option value=\"bottom\">Center Bottom</option>\n <option value=\"right-bottom\">Right Bottom</option>\n </select>\n\n <div class=\"grid-10\">\n <label> <ox-i18n msgid=\"label.offset-x\" auto=\"\">offsetX</ox-i18n> </label>\n <input type=\"number\" value-key=\"offsetX\" .value=${value.offsetX} />\n\n <label> <ox-i18n msgid=\"label.offset-y\" auto=\"\">offsetY</ox-i18n> </label>\n <input type=\"number\" value-key=\"offsetY\" .value=${value.offsetY} />\n\n <label> <ox-i18n msgid=\"label.width\" auto=\"\">width</ox-i18n> </label>\n <input type=\"number\" value-key=\"width\" .value=${value.width} />\n\n <label> <ox-i18n msgid=\"label.height\" auto=\"\">height</ox-i18n> </label>\n <input type=\"number\" value-key=\"height\" .value=${value.height} />\n </div>\n\n <div class=\"grid-10\">\n <label class=\"icon-only-label color\"></label>\n <ox-input-color value-key=\"color\" .value=${value.color}> </ox-input-color>\n </div>\n\n <div class=\"grid-10\">\n <input value-key=\"fitPattern\" type=\"checkbox\" .checked=${value.fitPattern} required />\n <label> <ox-i18n msgid=\"label.fit\" auto=\"\">fit</ox-i18n> </label>\n </div>\n\n <div class=\"grid-10\">\n <input value-key=\"noRepeat\" type=\"checkbox\" .checked=${value.noRepeat} required />\n <label> <ox-i18n msgid=\"label.no-repeat\" auto=\"\">no repeat</ox-i18n> </label>\n </div>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n _onChange(e: Event) {\n var element = e.target as HTMLInputElement\n var key = element.getAttribute('value-key')\n var value: any = element.value\n\n if (key === 'fitPattern' \|\| key === 'noRepeat') {\n value = element.checked\n }\n\n this.value = {\n ...this.value,\n [key!]: value\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
1	+ {"version":3,"file":"ox-input-background-pattern.js","sourceRoot":"","sources":["../../../src/input/ox-input-background-pattern.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,kCAAkC,CAAA;AACzC,OAAO,+CAA+C,CAAA;AAEtD,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,gBAAgB,CAAA;AAe5C;;;;;;;;GAQG;AAGI,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,WAAW;IA+EvD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAK,EAA8B,CAAA;QAE3D,OAAO,IAAI,CAAA;;;;;iBAKE,KAAK,CAAC,KAAK,IAAI,EAAE;sBACZ;YACZ,QAAQ,EAAE,OAAO;SAClB;;;;;;gEAMuD,KAAK,CAAC,KAAK;;;;;;;;;;;;;;0DAcjB,KAAK,CAAC,OAAO;;;0DAGb,KAAK,CAAC,OAAO;;;wDAGf,KAAK,CAAC,KAAK;;;yDAGV,KAAK,CAAC,MAAM;;;;;mDAKlB,KAAK,CAAC,KAAK;;;;iEAIG,KAAK,CAAC,UAAU;;;;;+DAKlB,KAAK,CAAC,QAAQ;;;;;gEAKb,KAAK,CAAC,SAAS;;;KAG1E,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,IAAI,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAC3C,IAAI,KAAK,GAAQ,OAAO,CAAC,KAAK,CAAA;QAE9B,IAAI,GAAG,KAAK,YAAY,IAAI,GAAG,KAAK,UAAU,IAAI,GAAG,IAAI,WAAW,EAAE,CAAC;YACrE,KAAK,GAAG,OAAO,CAAC,OAAO,CAAA;QACzB,CAAC;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,GAAI,CAAC,EAAE,KAAK;SACd,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AAlKM,+BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0ElB,AA1EY,CA0EZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAgC;AA7EhD,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CAoKpC","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/attachment/ox-attachment-selector.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from '@operato/input'\n\nexport type BackgroundPatternOption = {\n image?: HTMLImageElement \| string\n color?: string\n align?: 'left-top' \| 'top' \| 'right-top' \| 'left' \| 'center' \| 'right' \| 'left-bottom' \| 'bottom' \| 'right-bottom'\n offsetX?: number\n offsetY?: number\n width?: number\n height?: number\n fitPattern?: boolean\n guideOnly?: boolean\n noRepeat?: boolean\n}\n\n/\n 컴포넌트의 fill pattern을 편집하는 element\n \n Example:\n * <ox-input-background-pattern\n * @change=\"${e => { this.pattern = e.target.value }}\"\n * .value=${this.pattern}\"\n * ></ox-input-background-pattern>\n /\n\n@customElement('ox-input-background-pattern')\nexport class OxInputBackgroundPattern extends OxFormField {\n static styles = css`\n :host,\n .grid-10 {\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 5px;\n grid-auto-rows: minmax(24px, auto);\n\n align-items: center;\n }\n\n {\n align-self: stretch;\n }\n\n label {\n grid-column: span 2;\n text-align: right;\n text-transform: capitalize;\n\n align-self: center;\n }\n\n .grid-10 {\n grid-column: span 10;\n }\n\n select,\n input,\n [custom-editor] {\n grid-column: span 8;\n }\n\n select {\n height: 100%;\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n\n input[type='checkbox'] {\n grid-column: 3 / 4;\n align-self: center;\n }\n\n input[type='checkbox'] ~ label {\n grid-column: span 7;\n text-align: left;\n }\n\n .grid-10 > input[type='number'] {\n grid-column: span 3;\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n\n .grid-10 > label {\n grid-column: span 2;\n text-align: right;\n }\n\n .grid-10 > .icon-only-label {\n grid-column: span 2;\n\n background: var(--url-icon-properties-label) no-repeat;\n float: left;\n margin: 0;\n align-self: stretch;\n }\n\n .icon-only-label.color {\n background-position: 100% -500px;\n }\n\n .grid-10 > ox-input-color {\n grid-column: span 8;\n }\n `\n\n @property({ type: Object }) value?: BackgroundPatternOption\n\n render() {\n const value = this.value \|\| ({} as BackgroundPatternOption)\n\n return html`\n <label> <ox-i18n msgid=\"label.image\" auto=\"\">image</ox-i18n> </label>\n\n <ox-attachment-selector\n value-key=\"image\"\n .value=${value.image \|\| ''}\n .properties=${{\n category: 'image'\n }}\n custom-editor\n ></ox-attachment-selector>\n\n <label> <ox-i18n msgid=\"label.align\" auto=\"\">align</ox-i18n> </label>\n\n <select value-key=\"align\" class=\"select-content\" .value=${value.align}>\n <option value=\"left-top\">Left Top</option>\n <option value=\"top\">Center Top</option>\n <option value=\"right-top\">Right Top</option>\n <option value=\"left\">Left Center</option>\n <option value=\"center\">Center Center</option>\n <option value=\"right\">Right Center</option>\n <option value=\"left-bottom\">Left Bottom</option>\n <option value=\"bottom\">Center Bottom</option>\n <option value=\"right-bottom\">Right Bottom</option>\n </select>\n\n <div class=\"grid-10\">\n <label> <ox-i18n msgid=\"label.offset-x\" auto=\"\">offsetX</ox-i18n> </label>\n <input type=\"number\" value-key=\"offsetX\" .value=${value.offsetX} />\n\n <label> <ox-i18n msgid=\"label.offset-y\" auto=\"\">offsetY</ox-i18n> </label>\n <input type=\"number\" value-key=\"offsetY\" .value=${value.offsetY} />\n\n <label> <ox-i18n msgid=\"label.width\" auto=\"\">width</ox-i18n> </label>\n <input type=\"number\" value-key=\"width\" .value=${value.width} />\n\n <label> <ox-i18n msgid=\"label.height\" auto=\"\">height</ox-i18n> </label>\n <input type=\"number\" value-key=\"height\" .value=${value.height} />\n </div>\n\n <div class=\"grid-10\">\n <label class=\"icon-only-label color\"></label>\n <ox-input-color value-key=\"color\" .value=${value.color}> </ox-input-color>\n </div>\n\n <div class=\"grid-10\">\n <input value-key=\"fitPattern\" type=\"checkbox\" .checked=${value.fitPattern} required />\n <label> <ox-i18n msgid=\"label.fit\" auto=\"\">fit</ox-i18n> </label>\n </div>\n\n <div class=\"grid-10\">\n <input value-key=\"noRepeat\" type=\"checkbox\" .checked=${value.noRepeat} required />\n <label> <ox-i18n msgid=\"label.no-repeat\" auto=\"\">no repeat</ox-i18n> </label>\n </div>\n\n <div class=\"grid-10\">\n <input value-key=\"guideOnly\" type=\"checkbox\" .checked=${value.guideOnly} required />\n <label> <ox-i18n msgid=\"label.guide-only\" auto=\"\">guide only</ox-i18n> </label>\n </div>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n _onChange(e: Event) {\n var element = e.target as HTMLInputElement\n var key = element.getAttribute('value-key')\n var value: any = element.value\n\n if (key === 'fitPattern' \|\| key === 'noRepeat' \|\| key == 'guideOnly') {\n value = element.checked\n }\n\n this.value = {\n ...this.value,\n [key!]: value\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}

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

@@ -23,6 +23,7 @@ export type FillStyle = {
     align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom';
     fitPattern?: boolean;
     noRepeat?: boolean;
+    guideOnly?: boolean;
     color?: string;
 } | 'no' | string;
 export declare class OxInputColorStyle extends OxFormField {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-input-fill-style.js","sourceRoot":"","sources":["../../../src/input/ox-input-fill-style.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/input/ox-input-color-stops.js'\nimport '@operato/input/ox-input-color-gradient.js'\nimport './ox-input-background-pattern.js'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ColorStop, GradientOption, OxFormField, OxInputColorGradient } from '@operato/input'\n\nimport { BackgroundPatternOption, OxInputBackgroundPattern } from './ox-input-background-pattern.js'\n\nexport type FillStyle =\n \| {\n type?: 'no' \| 'solid' \| 'gradient' \| 'pattern'\n gradientType?: 'linear' \| 'radial'\n colorStops?: ColorStop[]\n rotation?: number\n center?: 'center' \| 'left-top' \| 'right-top' \| 'right-bottom' \| 'left-bottom'\n image?: HTMLImageElement \| string\n offsetX?: number\n offsetY?: number\n width?: number\n height?: number\n align?: 'left-top' \| 'top' \| 'right-top' \| 'left' \| 'center' \| 'right' \| 'left-bottom' \| 'bottom' \| 'right-bottom'\n fitPattern?: boolean\n noRepeat?: boolean\n color?: string\n }\n \| 'no'\n \| string\n\n@customElement('ox-input-fill-style')\nexport class OxInputColorStyle extends OxFormField {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n }\n\n [fill-type] {\n display: flex;\n margin: 0 0 14px 0;\n }\n\n [fill-type] {\n flex: auto;\n margin: 0;\n text-align: left;\n align-self: center;\n }\n\n .grid-10 {\n display: grid;\n\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 5px;\n grid-auto-rows: minmax(24px, auto);\n }\n\n .grid-10 > ox-input-color {\n grid-column: span 4;\n }\n\n .grid-10 > .icon-only-label {\n grid-column: span 1;\n\n background: var(--url-icon-properties-label) no-repeat;\n float: left;\n margin: 0;\n }\n\n .icon-only-label.color {\n background-position: 100% -500px;\n }\n\n [editors] > :not([active]) {\n display: none;\n }\n `\n\n @property({ type: Object }) value?: FillStyle\n @property({ type: String }) fillType?: string\n @property({ type: String }) solid?: string\n @property({ type: Object }) gradient?: GradientOption\n @property({ type: Object }) pattern?: BackgroundPatternOption\n\n @property({ type: Boolean, attribute: 'color-only' }) colorOnly: boolean = false\n\n private _block_reset: boolean = false\n\n updated(changes: PropertyValues<this>) {\n changes.has('value') && this._onChangedValue(this.value \|\| {})\n }\n\n render() {\n return html`\n <div @change=${(e: Event) => this._onChangedFillType(e)} fill-type>\n <input\n type=\"radio\"\n id=\"fill-type-no\"\n name=\"fill-type\"\n value=\"no\"\n .checked=${!this.fillType \|\| this.fillType == 'no'}\n />\n <label for=\"fill-type-no\"><ox-i18n msgid=\"label.no-fill\">no fill</ox-i18n></label>\n <input type=\"radio\" id=\"fill-type-solid\" name=\"fill-type\" value=\"solid\" .checked=${this.fillType == 'solid'} />\n <label for=\"fill-type-solid\"><ox-i18n msgid=\"label.solid\">solid</ox-i18n></label>\n <input\n type=\"radio\"\n id=\"fill-type-gradient\"\n name=\"fill-type\"\n value=\"gradient\"\n .checked=${this.fillType == 'gradient'}\n />\n\n <label for=\"fill-type-gradient\"><ox-i18n msgid=\"label.gradient\">gradient</ox-i18n></label>\n\n ${this.colorOnly\n ? html``\n : html`\n <input\n type=\"radio\"\n id=\"fill-type-pattern\"\n name=\"fill-type\"\n value=\"pattern\"\n .checked=${this.fillType == 'pattern'}\n />\n <label for=\"fill-type-pattern\"><ox-i18n msgid=\"label.pattern\">pattern</ox-i18n></label>\n `}\n </div>\n\n <div editors>\n <div ?active=${this.fillType == 'no'}></div>\n\n <div class=\"grid-10\" ?active=${this.fillType == 'solid'}>\n <label class=\"icon-only-label color\"></label>\n <ox-input-color @change=${(e: Event) => this._onChangedSolid(e)} .value=${this.solid}> </ox-input-color>\n </div>\n\n <div ?active=${this.fillType == 'gradient'}>\n <ox-input-color-gradient @change=${(e: Event) => this._onChandedGradient(e)} .value=${this.gradient}>\n </ox-input-color-gradient>\n </div>\n\n <div ?active=${this.fillType == 'pattern'}>\n <ox-input-background-pattern @change=${(e: Event) => this._onChangedPattern(e)} .value=${this.pattern}>\n </ox-input-background-pattern>\n </div>\n </div>\n `\n }\n\n async _onChangedValue(value: FillStyle) {\n /\n this._block_reset의 역할은 내부 사용자 인터렉션에 의한 value의 변경시에는 각 type별 이전값을 유지하기 위함이다.\n /\n await this.requestUpdate()\n\n / 설정 값에 따라서, 멤버 속성을 설정한다. /\n if (!value) {\n this.fillType = 'no'\n\n if (!this._block_reset) {\n this.solid = undefined\n this.gradient = undefined\n this.pattern = undefined\n }\n\n this._block_reset = false\n return\n }\n\n switch (typeof value) {\n case 'string':\n this.fillType = 'solid'\n this.solid = value\n\n if (!this._block_reset) {\n this.gradient = undefined\n this.pattern = undefined\n }\n break\n case 'object':\n this.fillType = value.type\n\n if (value.type === 'gradient') {\n this.gradient = {\n type: value.gradientType \|\| 'linear',\n colorStops: value.colorStops \|\| [\n {\n position: 0,\n color: this.solid \|\| '#000000'\n },\n {\n position: 1,\n color: this.solid \|\| '#FFFFFF'\n }\n ],\n rotation: Number(value.rotation) \|\| 0,\n center: value.center\n }\n\n if (!this._block_reset) {\n this.pattern = undefined\n this.solid = undefined\n }\n } else if (value.type === 'pattern') {\n this.pattern = {\n image: value.image,\n offsetX: Number(value.offsetX) \|\| 0,\n offsetY: Number(value.offsetY) \|\| 0,\n width: Number(value.width),\n height: Number(value.height),\n align: value.align,\n fitPattern: value.fitPattern,\n noRepeat: value.noRepeat,\n color: value.color\n }\n\n if (!this._block_reset) {\n this.gradient = undefined\n this.solid = undefined\n }\n }\n\n break\n default:\n }\n\n this._block_reset = false\n }\n\n _onChangedFillType(e: Event) {\n const element = e.target as HTMLInputElement\n this.fillType = element.value\n\n switch (this.fillType) {\n case 'gradient':\n if (!this.gradient) {\n this.gradient = {\n type: 'linear',\n colorStops: [\n {\n position: 0,\n color: this.solid \|\| '#000000'\n },\n {\n position: 1,\n color: this.solid \|\| '#FFFFFF'\n }\n ],\n rotation: 0,\n center: 'center'\n }\n }\n\n this.value = {\n type: 'gradient',\n gradientType: this.gradient.type \|\| 'linear',\n colorStops: this.gradient.colorStops \|\| [\n {\n position: 0,\n color: this.solid \|\| '#000000'\n },\n {\n position: 1,\n color: this.solid \|\| '#FFFFFF'\n }\n ],\n rotation: Number(this.gradient.rotation) \|\| 0,\n center: this.gradient.center\n }\n break\n\n case 'pattern':\n if (!this.pattern) this.pattern = {}\n\n this.value = {\n type: 'pattern',\n image: this.pattern.image,\n offsetX: Number(this.pattern.offsetX) \|\| 0,\n offsetY: Number(this.pattern.offsetY) \|\| 0,\n width: Number(this.pattern.width),\n height: Number(this.pattern.height),\n align: this.pattern.align,\n fitPattern: this.pattern.fitPattern,\n noRepeat: this.pattern.noRepeat,\n color: this.pattern.color\n }\n break\n\n case 'solid':\n if (!this.solid) this.solid = '#fff'\n this.value = this.solid\n break\n\n case 'no':\n this.value = ''\n break\n }\n\n this._block_reset = true\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _onChangedSolid(e: Event) {\n if (this.fillType !== 'solid') return\n\n this.solid = (e.target as HTMLInputElement).value\n\n this.value = this.solid\n\n this._block_reset = true\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _onChandedGradient(e: Event) {\n /\n * TODO Gradient의 rotation은 symmetry 기능 등으로 외부에서 변경될 수도 있다.\n * 이 점을 감안해서, 외부 변경에 대한 대응을 해야 한다.\n */\n\n if (this.fillType !== 'gradient') {\n return\n }\n\n this.gradient = (e.target as OxInputColorGradient).value\n\n this.value = {\n type: 'gradient',\n gradientType: this.gradient.type \|\| 'linear',\n colorStops: this.gradient.colorStops \|\| [\n {\n position: 0,\n color: this.solid \|\| '#000000'\n },\n {\n position: 1,\n color: this.solid \|\| '#FFFFFF'\n }\n ],\n rotation: Number(this.gradient.rotation) \|\| 0,\n center: this.gradient.center\n }\n\n this._block_reset = true\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _onChangedPattern(e: Event) {\n if (this.fillType !== 'pattern') return\n\n this.pattern = (e.target as OxInputBackgroundPattern).value\n\n this.value = {\n type: 'pattern',\n image: this.pattern?.image,\n offsetX: Number(this.pattern?.offsetX) \|\| 0,\n offsetY: Number(this.pattern?.offsetY) \|\| 0,\n width: Number(this.pattern?.width),\n height: Number(this.pattern?.height),\n align: this.pattern?.align,\n fitPattern: this.pattern?.fitPattern,\n noRepeat: this.pattern?.noRepeat,\n color: this.pattern?.color\n }\n\n this._block_reset = true\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
1	+ {"version":3,"file":"ox-input-fill-style.js","sourceRoot":"","sources":["../../../src/input/ox-input-fill-style.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,kCAAkC,CAAA;AACzC,OAAO,wCAAwC,CAAA;AAC/C,OAAO,2CAA2C,CAAA;AAClD,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAA6B,WAAW,EAAwB,MAAM,gBAAgB,CAAA;AA0BtF,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QAsDiD,cAAS,GAAY,KAAK,CAAA;QAExE,iBAAY,GAAY,KAAK,CAAA;IA0RvC,CAAC;IAxRC,OAAO,CAAC,OAA6B;QACnC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA;IAChE,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;qBACM,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;;;;;;qBAMxC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI;;;2FAG+B,IAAI,CAAC,QAAQ,IAAI,OAAO;;;;;;;qBAO9F,IAAI,CAAC,QAAQ,IAAI,UAAU;;;;;UAKtC,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA;;;;;;2BAMW,IAAI,CAAC,QAAQ,IAAI,SAAS;;;aAGxC;;;;uBAIU,IAAI,CAAC,QAAQ,IAAI,IAAI;;uCAEL,IAAI,CAAC,QAAQ,IAAI,OAAO;;oCAE3B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,KAAK;;;uBAGvE,IAAI,CAAC,QAAQ,IAAI,UAAU;6CACL,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,QAAQ;;;;uBAItF,IAAI,CAAC,QAAQ,IAAI,SAAS;iDACA,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,OAAO;;;;KAI1G,CAAA;IACH,CAAC;IAED,KAAK,CAAC,eAAe,CAAC,KAAgB;QACpC;;WAEG;QACH,MAAM,IAAI,CAAC,aAAa,EAAE,CAAA;QAE1B,6BAA6B;QAC7B,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;YAEpB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;gBACvB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;gBACtB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;gBACzB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAA;YAC1B,CAAC;YAED,IAAI,CAAC,YAAY,GAAG,KAAK,CAAA;YACzB,OAAM;QACR,CAAC;QAED,QAAQ,OAAO,KAAK,EAAE,CAAC;YACrB,KAAK,QAAQ;gBACX,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAA;gBACvB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;gBAElB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;oBACvB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;oBACzB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAA;gBAC1B,CAAC;gBACD,MAAK;YACP,KAAK,QAAQ;gBACX,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAA;gBAE1B,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;oBAC9B,IAAI,CAAC,QAAQ,GAAG;wBACd,IAAI,EAAE,KAAK,CAAC,YAAY,IAAI,QAAQ;wBACpC,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI;4BAC9B;gCACE,QAAQ,EAAE,CAAC;gCACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS;6BAC/B;4BACD;gCACE,QAAQ,EAAE,CAAC;gCACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS;6BAC/B;yBACF;wBACD,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC;wBACrC,MAAM,EAAE,KAAK,CAAC,MAAM;qBACrB,CAAA;oBAED,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;wBACvB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAA;wBACxB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;oBACxB,CAAC;gBACH,CAAC;qBAAM,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;oBACpC,IAAI,CAAC,OAAO,GAAG;wBACb,KAAK,EAAE,KAAK,CAAC,KAAK;wBAClB,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;wBACnC,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;wBACnC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;wBAC1B,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;wBAC5B,KAAK,EAAE,KAAK,CAAC,KAAK;wBAClB,UAAU,EAAE,KAAK,CAAC,UAAU;wBAC5B,QAAQ,EAAE,KAAK,CAAC,QAAQ;wBACxB,KAAK,EAAE,KAAK,CAAC,KAAK;qBACnB,CAAA;oBAED,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;wBACvB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;wBACzB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;oBACxB,CAAC;gBACH,CAAC;gBAED,MAAK;YACP,QAAQ;QACV,CAAC;QAED,IAAI,CAAC,YAAY,GAAG,KAAK,CAAA;IAC3B,CAAC;IAED,kBAAkB,CAAC,CAAQ;QACzB,MAAM,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC5C,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAA;QAE7B,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;YACtB,KAAK,UAAU;gBACb,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;oBACnB,IAAI,CAAC,QAAQ,GAAG;wBACd,IAAI,EAAE,QAAQ;wBACd,UAAU,EAAE;4BACV;gCACE,QAAQ,EAAE,CAAC;gCACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS;6BAC/B;4BACD;gCACE,QAAQ,EAAE,CAAC;gCACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS;6BAC/B;yBACF;wBACD,QAAQ,EAAE,CAAC;wBACX,MAAM,EAAE,QAAQ;qBACjB,CAAA;gBACH,CAAC;gBAED,IAAI,CAAC,KAAK,GAAG;oBACX,IAAI,EAAE,UAAU;oBAChB,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ;oBAC5C,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI;wBACtC;4BACE,QAAQ,EAAE,CAAC;4BACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS;yBAC/B;wBACD;4BACE,QAAQ,EAAE,CAAC;4BACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS;yBAC/B;qBACF;oBACD,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC;oBAC7C,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM;iBAC7B,CAAA;gBACD,MAAK;YAEP,KAAK,SAAS;gBACZ,IAAI,CAAC,IAAI,CAAC,OAAO;oBAAE,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;gBAEpC,IAAI,CAAC,KAAK,GAAG;oBACX,IAAI,EAAE,SAAS;oBACf,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK;oBACzB,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC;oBAC1C,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC;oBAC1C,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;oBACjC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;oBACnC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK;oBACzB,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,UAAU;oBACnC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ;oBAC/B,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK;iBAC1B,CAAA;gBACD,MAAK;YAEP,KAAK,OAAO;gBACV,IAAI,CAAC,IAAI,CAAC,KAAK;oBAAE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAA;gBACpC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;gBACvB,MAAK;YAEP,KAAK,IAAI;gBACP,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;gBACf,MAAK;QACT,CAAC;QAED,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,eAAe,CAAC,CAAQ;QACtB,IAAI,IAAI,CAAC,QAAQ,KAAK,OAAO;YAAE,OAAM;QAErC,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;QAEjD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAEvB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,kBAAkB,CAAC,CAAQ;QACzB;;;WAGG;QAEH,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;YACjC,OAAM;QACR,CAAC;QAED,IAAI,CAAC,QAAQ,GAAI,CAAC,CAAC,MAA+B,CAAC,KAAK,CAAA;QAExD,IAAI,CAAC,KAAK,GAAG;YACX,IAAI,EAAE,UAAU;YAChB,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ;YAC5C,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI;gBACtC;oBACE,QAAQ,EAAE,CAAC;oBACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS;iBAC/B;gBACD;oBACE,QAAQ,EAAE,CAAC;oBACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS;iBAC/B;aACF;YACD,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC;YAC7C,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM;SAC7B,CAAA;QAED,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,iBAAiB,CAAC,CAAQ;;QACxB,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS;YAAE,OAAM;QAEvC,IAAI,CAAC,OAAO,GAAI,CAAC,CAAC,MAAmC,CAAC,KAAK,CAAA;QAE3D,IAAI,CAAC,KAAK,GAAG;YACX,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK;YAC1B,OAAO,EAAE,MAAM,CAAC,MAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,CAAC,IAAI,CAAC;YAC3C,OAAO,EAAE,MAAM,CAAC,MAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,CAAC,IAAI,CAAC;YAC3C,KAAK,EAAE,MAAM,CAAC,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,CAAC;YAClC,MAAM,EAAE,MAAM,CAAC,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,CAAC;YACpC,KAAK,EAAE,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK;YAC1B,UAAU,EAAE,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU;YACpC,QAAQ,EAAE,MAAA,IAAI,CAAC,OAAO,0CAAE,QAAQ;YAChC,KAAK,EAAE,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK;SAC3B,CAAA;QAED,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AAhVM,wBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6ClB,AA7CY,CA6CZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAA0B;AACzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAkC;AAEP;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;oDAA2B;AAtDrE,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAkV7B","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/input/ox-input-color-stops.js'\nimport '@operato/input/ox-input-color-gradient.js'\nimport './ox-input-background-pattern.js'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ColorStop, GradientOption, OxFormField, OxInputColorGradient } from '@operato/input'\n\nimport { BackgroundPatternOption, OxInputBackgroundPattern } from './ox-input-background-pattern.js'\n\nexport type FillStyle =\n \| {\n type?: 'no' \| 'solid' \| 'gradient' \| 'pattern'\n gradientType?: 'linear' \| 'radial'\n colorStops?: ColorStop[]\n rotation?: number\n center?: 'center' \| 'left-top' \| 'right-top' \| 'right-bottom' \| 'left-bottom'\n image?: HTMLImageElement \| string\n offsetX?: number\n offsetY?: number\n width?: number\n height?: number\n align?: 'left-top' \| 'top' \| 'right-top' \| 'left' \| 'center' \| 'right' \| 'left-bottom' \| 'bottom' \| 'right-bottom'\n fitPattern?: boolean\n noRepeat?: boolean\n guideOnly?: boolean\n color?: string\n }\n \| 'no'\n \| string\n\n@customElement('ox-input-fill-style')\nexport class OxInputColorStyle extends OxFormField {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n }\n\n [fill-type] {\n display: flex;\n margin: 0 0 14px 0;\n }\n\n [fill-type] {\n flex: auto;\n margin: 0;\n text-align: left;\n align-self: center;\n }\n\n .grid-10 {\n display: grid;\n\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 5px;\n grid-auto-rows: minmax(24px, auto);\n }\n\n .grid-10 > ox-input-color {\n grid-column: span 4;\n }\n\n .grid-10 > .icon-only-label {\n grid-column: span 1;\n\n background: var(--url-icon-properties-label) no-repeat;\n float: left;\n margin: 0;\n }\n\n .icon-only-label.color {\n background-position: 100% -500px;\n }\n\n [editors] > :not([active]) {\n display: none;\n }\n `\n\n @property({ type: Object }) value?: FillStyle\n @property({ type: String }) fillType?: string\n @property({ type: String }) solid?: string\n @property({ type: Object }) gradient?: GradientOption\n @property({ type: Object }) pattern?: BackgroundPatternOption\n\n @property({ type: Boolean, attribute: 'color-only' }) colorOnly: boolean = false\n\n private _block_reset: boolean = false\n\n updated(changes: PropertyValues<this>) {\n changes.has('value') && this._onChangedValue(this.value \|\| {})\n }\n\n render() {\n return html`\n <div @change=${(e: Event) => this._onChangedFillType(e)} fill-type>\n <input\n type=\"radio\"\n id=\"fill-type-no\"\n name=\"fill-type\"\n value=\"no\"\n .checked=${!this.fillType \|\| this.fillType == 'no'}\n />\n <label for=\"fill-type-no\"><ox-i18n msgid=\"label.no-fill\">no fill</ox-i18n></label>\n <input type=\"radio\" id=\"fill-type-solid\" name=\"fill-type\" value=\"solid\" .checked=${this.fillType == 'solid'} />\n <label for=\"fill-type-solid\"><ox-i18n msgid=\"label.solid\">solid</ox-i18n></label>\n <input\n type=\"radio\"\n id=\"fill-type-gradient\"\n name=\"fill-type\"\n value=\"gradient\"\n .checked=${this.fillType == 'gradient'}\n />\n\n <label for=\"fill-type-gradient\"><ox-i18n msgid=\"label.gradient\">gradient</ox-i18n></label>\n\n ${this.colorOnly\n ? html``\n : html`\n <input\n type=\"radio\"\n id=\"fill-type-pattern\"\n name=\"fill-type\"\n value=\"pattern\"\n .checked=${this.fillType == 'pattern'}\n />\n <label for=\"fill-type-pattern\"><ox-i18n msgid=\"label.pattern\">pattern</ox-i18n></label>\n `}\n </div>\n\n <div editors>\n <div ?active=${this.fillType == 'no'}></div>\n\n <div class=\"grid-10\" ?active=${this.fillType == 'solid'}>\n <label class=\"icon-only-label color\"></label>\n <ox-input-color @change=${(e: Event) => this._onChangedSolid(e)} .value=${this.solid}> </ox-input-color>\n </div>\n\n <div ?active=${this.fillType == 'gradient'}>\n <ox-input-color-gradient @change=${(e: Event) => this._onChandedGradient(e)} .value=${this.gradient}>\n </ox-input-color-gradient>\n </div>\n\n <div ?active=${this.fillType == 'pattern'}>\n <ox-input-background-pattern @change=${(e: Event) => this._onChangedPattern(e)} .value=${this.pattern}>\n </ox-input-background-pattern>\n </div>\n </div>\n `\n }\n\n async _onChangedValue(value: FillStyle) {\n /\n this._block_reset의 역할은 내부 사용자 인터렉션에 의한 value의 변경시에는 각 type별 이전값을 유지하기 위함이다.\n /\n await this.requestUpdate()\n\n / 설정 값에 따라서, 멤버 속성을 설정한다. /\n if (!value) {\n this.fillType = 'no'\n\n if (!this._block_reset) {\n this.solid = undefined\n this.gradient = undefined\n this.pattern = undefined\n }\n\n this._block_reset = false\n return\n }\n\n switch (typeof value) {\n case 'string':\n this.fillType = 'solid'\n this.solid = value\n\n if (!this._block_reset) {\n this.gradient = undefined\n this.pattern = undefined\n }\n break\n case 'object':\n this.fillType = value.type\n\n if (value.type === 'gradient') {\n this.gradient = {\n type: value.gradientType \|\| 'linear',\n colorStops: value.colorStops \|\| [\n {\n position: 0,\n color: this.solid \|\| '#000000'\n },\n {\n position: 1,\n color: this.solid \|\| '#FFFFFF'\n }\n ],\n rotation: Number(value.rotation) \|\| 0,\n center: value.center\n }\n\n if (!this._block_reset) {\n this.pattern = undefined\n this.solid = undefined\n }\n } else if (value.type === 'pattern') {\n this.pattern = {\n image: value.image,\n offsetX: Number(value.offsetX) \|\| 0,\n offsetY: Number(value.offsetY) \|\| 0,\n width: Number(value.width),\n height: Number(value.height),\n align: value.align,\n fitPattern: value.fitPattern,\n noRepeat: value.noRepeat,\n color: value.color\n }\n\n if (!this._block_reset) {\n this.gradient = undefined\n this.solid = undefined\n }\n }\n\n break\n default:\n }\n\n this._block_reset = false\n }\n\n _onChangedFillType(e: Event) {\n const element = e.target as HTMLInputElement\n this.fillType = element.value\n\n switch (this.fillType) {\n case 'gradient':\n if (!this.gradient) {\n this.gradient = {\n type: 'linear',\n colorStops: [\n {\n position: 0,\n color: this.solid \|\| '#000000'\n },\n {\n position: 1,\n color: this.solid \|\| '#FFFFFF'\n }\n ],\n rotation: 0,\n center: 'center'\n }\n }\n\n this.value = {\n type: 'gradient',\n gradientType: this.gradient.type \|\| 'linear',\n colorStops: this.gradient.colorStops \|\| [\n {\n position: 0,\n color: this.solid \|\| '#000000'\n },\n {\n position: 1,\n color: this.solid \|\| '#FFFFFF'\n }\n ],\n rotation: Number(this.gradient.rotation) \|\| 0,\n center: this.gradient.center\n }\n break\n\n case 'pattern':\n if (!this.pattern) this.pattern = {}\n\n this.value = {\n type: 'pattern',\n image: this.pattern.image,\n offsetX: Number(this.pattern.offsetX) \|\| 0,\n offsetY: Number(this.pattern.offsetY) \|\| 0,\n width: Number(this.pattern.width),\n height: Number(this.pattern.height),\n align: this.pattern.align,\n fitPattern: this.pattern.fitPattern,\n noRepeat: this.pattern.noRepeat,\n color: this.pattern.color\n }\n break\n\n case 'solid':\n if (!this.solid) this.solid = '#fff'\n this.value = this.solid\n break\n\n case 'no':\n this.value = ''\n break\n }\n\n this._block_reset = true\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _onChangedSolid(e: Event) {\n if (this.fillType !== 'solid') return\n\n this.solid = (e.target as HTMLInputElement).value\n\n this.value = this.solid\n\n this._block_reset = true\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _onChandedGradient(e: Event) {\n /\n * TODO Gradient의 rotation은 symmetry 기능 등으로 외부에서 변경될 수도 있다.\n * 이 점을 감안해서, 외부 변경에 대한 대응을 해야 한다.\n */\n\n if (this.fillType !== 'gradient') {\n return\n }\n\n this.gradient = (e.target as OxInputColorGradient).value\n\n this.value = {\n type: 'gradient',\n gradientType: this.gradient.type \|\| 'linear',\n colorStops: this.gradient.colorStops \|\| [\n {\n position: 0,\n color: this.solid \|\| '#000000'\n },\n {\n position: 1,\n color: this.solid \|\| '#FFFFFF'\n }\n ],\n rotation: Number(this.gradient.rotation) \|\| 0,\n center: this.gradient.center\n }\n\n this._block_reset = true\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _onChangedPattern(e: Event) {\n if (this.fillType !== 'pattern') return\n\n this.pattern = (e.target as OxInputBackgroundPattern).value\n\n this.value = {\n type: 'pattern',\n image: this.pattern?.image,\n offsetX: Number(this.pattern?.offsetX) \|\| 0,\n offsetY: Number(this.pattern?.offsetY) \|\| 0,\n width: Number(this.pattern?.width),\n height: Number(this.pattern?.height),\n align: this.pattern?.align,\n fitPattern: this.pattern?.fitPattern,\n noRepeat: this.pattern?.noRepeat,\n color: this.pattern?.color\n }\n\n this._block_reset = true\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}