@operato/input 9.0.0-beta.53 → 9.0.0-beta.55
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.
- package/CHANGELOG.md +18 -0
- package/dist/src/ox-form-field.d.ts +2 -5
- package/dist/src/ox-form-field.js +2 -5
- package/dist/src/ox-form-field.js.map +1 -1
- package/dist/src/ox-input-fill-style.js +2 -0
- package/dist/src/ox-input-fill-style.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,24 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
+
## [9.0.0-beta.55](https://github.com/hatiolab/operato/compare/v9.0.0-beta.54...v9.0.0-beta.55) (2025-03-05)
|
7
|
+
|
8
|
+
|
9
|
+
### :bug: Bug Fix
|
10
|
+
|
11
|
+
* add input for flow-anchor ([3e28ea9](https://github.com/hatiolab/operato/commit/3e28ea9b9505826c1cb72c0db13beae93e6a9820))
|
12
|
+
|
13
|
+
|
14
|
+
|
15
|
+
## [9.0.0-beta.54](https://github.com/hatiolab/operato/compare/v9.0.0-beta.53...v9.0.0-beta.54) (2025-03-04)
|
16
|
+
|
17
|
+
|
18
|
+
### :bug: Bug Fix
|
19
|
+
|
20
|
+
* add guide-only option for scene fillstyle ([b9c2544](https://github.com/hatiolab/operato/commit/b9c2544c0c7e9fb44d6f84f366a590587cfbc066))
|
21
|
+
|
22
|
+
|
23
|
+
|
6
24
|
## [9.0.0-beta.53](https://github.com/hatiolab/operato/compare/v9.0.0-beta.52...v9.0.0-beta.53) (2025-03-04)
|
7
25
|
|
8
26
|
|
@@ -1,11 +1,8 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright © HatioLab Inc. All rights reserved.
|
3
|
-
*/
|
4
1
|
import { LitElement } from 'lit';
|
5
|
-
export declare abstract class OxFormField extends LitElement {
|
2
|
+
export declare abstract class OxFormField<T = any> extends LitElement {
|
6
3
|
name?: string;
|
7
4
|
disabled?: boolean;
|
8
|
-
value?:
|
5
|
+
value?: T;
|
9
6
|
protected _form: HTMLFormElement | null;
|
10
7
|
protected _formdataEventHandler: EventListener | null;
|
11
8
|
connectedCallback(): void;
|
@@ -1,6 +1,3 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright © HatioLab Inc. All rights reserved.
|
3
|
-
*/
|
4
1
|
import { __decorate } from "tslib";
|
5
2
|
import { LitElement } from 'lit';
|
6
3
|
import { property } from 'lit/decorators.js';
|
@@ -31,11 +28,11 @@ export class OxFormField extends LitElement {
|
|
31
28
|
appendFormData({ formData }) {
|
32
29
|
if (!this.name)
|
33
30
|
return;
|
34
|
-
|
31
|
+
let values = this.value;
|
35
32
|
if (!(values instanceof Array)) {
|
36
33
|
values = [this.value];
|
37
34
|
}
|
38
|
-
values.forEach(
|
35
|
+
values.forEach(value => {
|
39
36
|
formData.append(this.name, typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value));
|
40
37
|
});
|
41
38
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ox-form-field.js","sourceRoot":"","sources":["../../src/ox-form-field.ts"],"names":[],"mappings":"AAAA
|
1
|
+
{"version":3,"file":"ox-form-field.js","sourceRoot":"","sources":["../../src/ox-form-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,MAAM,OAAgB,WAAqB,SAAQ,UAAU;IAA7D;;QAKY,UAAK,GAA2B,IAAI,CAAA;QACpC,0BAAqB,GAAyB,IAAI,CAAA;IAuC9D,CAAC;IArCU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;YACjC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;gBAC5E,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAA;YACrE,CAAC;QACH,CAAC;IACH,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAsB,CAAC,CAAA;YACvE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;YACjB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAA;QACnC,CAAC;IACH,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAM;QAEtB,IAAI,MAAM,GAAY,IAAI,CAAC,KAAM,CAAA;QACjC,IAAI,CAAC,CAAC,MAAM,YAAY,KAAK,CAAC,EAAE,CAAC;YAC/B,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAQ,CAAA;QAC9B,CAAC;QAED,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACrB,QAAQ,CAAC,MAAM,CACb,IAAI,CAAC,IAAK,EACV,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CACvG,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AA5C8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;yCAAc;AAC7B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAmB;AACnC;IAAX,QAAQ,EAAE;0CAAU","sourcesContent":["import { LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nexport abstract class OxFormField<T = any> extends LitElement {\n @property({ type: String, attribute: true }) name?: string\n @property({ type: Boolean }) disabled?: boolean\n @property() value?: T\n\n protected _form: HTMLFormElement | null = null\n protected _formdataEventHandler: EventListener | null = null\n\n override connectedCallback(): void {\n super.connectedCallback()\n\n if (this.name) {\n this._form = this.closest('form')\n if (this._form) {\n this._formdataEventHandler = this.appendFormData.bind(this) as EventListener\n this._form.addEventListener('formdata', this._formdataEventHandler)\n }\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback()\n\n if (this._form) {\n this._form.removeEventListener('formdata', this._formdataEventHandler!)\n this._form = null\n this._formdataEventHandler = null\n }\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n if (!this.name) return\n\n let values: T | T[] = this.value!\n if (!(values instanceof Array)) {\n values = [this.value] as T[]\n }\n\n values.forEach(value => {\n formData.append(\n this.name!,\n typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n )\n })\n }\n}\n"]}
|
@@ -232,6 +232,7 @@ let OxInputColorStyle = class OxInputColorStyle extends OxFormField {
|
|
232
232
|
align: this.pattern.align,
|
233
233
|
fitPattern: this.pattern.fitPattern,
|
234
234
|
noRepeat: this.pattern.noRepeat,
|
235
|
+
guideOnly: this.pattern.guideOnly,
|
235
236
|
color: this.pattern.color
|
236
237
|
};
|
237
238
|
break;
|
@@ -297,6 +298,7 @@ let OxInputColorStyle = class OxInputColorStyle extends OxFormField {
|
|
297
298
|
align: this.pattern?.align,
|
298
299
|
fitPattern: this.pattern?.fitPattern,
|
299
300
|
noRepeat: this.pattern?.noRepeat,
|
301
|
+
guideOnly: this.pattern?.guideOnly,
|
300
302
|
color: this.pattern?.color
|
301
303
|
};
|
302
304
|
this._block_reset = true;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ox-input-fill-style.js","sourceRoot":"","sources":["../../src/ox-input-fill-style.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AACjC,OAAO,qBAAqB,CAAA;AAC5B,OAAO,2BAA2B,CAAA;AAClC,OAAO,8BAA8B,CAAA;AACrC,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,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AA2BzC,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QA2BuB,UAAK,GAAe,SAAS,CAAA;QAMH,cAAS,GAAY,KAAK,CAAA;QAExE,iBAAY,GAAY,KAAK,CAAA;IAgSvC,CAAC;aAlUQ,WAAM,GAAG;QACd,kBAAkB;QAClB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;KAqBF;KACF,AAxBY,CAwBZ;IAYD,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;;6CAEC,IAAI,CAAC,QAAQ,IAAI,OAAO;;0DAEX,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,KAAK;;;;;oBAKhG,IAAI,CAAC,QAAQ,IAAI,UAAU;oBAC3B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;mBACzC,IAAI,CAAC,QAAS;;;;;oBAKb,IAAI,CAAC,QAAQ,IAAI,SAAS;oBAC1B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;mBACxC,IAAI,CAAC,OAAO;;;;KAI1B,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,SAAS,EAAE,KAAK,CAAC,SAAS;wBAC1B,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,IAAI,CAAC,OAAO,EAAE,KAAK;YAC1B,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC;YAC3C,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC;YAC3C,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC;YAClC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC;YACpC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK;YAC1B,UAAU,EAAE,IAAI,CAAC,OAAO,EAAE,UAAU;YACpC,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ;YAChC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,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;;AAvS2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA8B;AAC7B;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;AAjCrE,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAmU7B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport './ox-input-color.js'\nimport './ox-input-color-stops.js'\nimport './ox-input-color-gradient.js'\nimport './ox-input-background-pattern.js'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { ColorStop } from './ox-input-color-stops.js'\nimport { GradientOption, OxInputColorGradient } from './ox-input-color-gradient.js'\nimport { BackgroundPatternOption, OxInputBackgroundPattern } from './ox-input-background-pattern.js'\n\nexport type FillStyle =\n | {\n type?: 'no' | 'solid' | 'gradient' | 'pattern'\n gradientType?: 'linear' | 'radial'\n colorStops?: ColorStop[]\n rotation?: number\n center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom'\n image?: HTMLImageElement | string\n offsetX?: number\n offsetY?: number\n width?: number\n height?: number\n align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'\n fitPattern?: boolean\n noRepeat?: boolean\n guideOnly?: boolean\n color?: string\n }\n | 'no'\n | string\n\n@customElement('ox-input-fill-style')\nexport class OxInputColorStyle extends OxFormField {\n static styles = [\n PropertyGridStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n }\n\n [fill-type] {\n display: flex;\n margin: 0 0 14px 0;\n }\n\n [fill-type] * {\n flex: auto;\n margin: 0;\n text-align: left;\n align-self: center;\n }\n\n [editors] > :not([active]) {\n display: none;\n }\n `\n ]\n\n @property({ type: Object }) value?: FillStyle = undefined\n @property({ type: String }) fillType?: string\n @property({ type: String }) solid?: string\n @property({ type: Object }) gradient?: GradientOption\n @property({ type: Object }) pattern?: BackgroundPatternOption\n\n @property({ type: Boolean, attribute: 'color-only' }) colorOnly: boolean = false\n\n private _block_reset: boolean = false\n\n updated(changes: PropertyValues<this>) {\n changes.has('value') && this._onChangedValue(this.value || {})\n }\n\n render() {\n return html`\n <div @change=${(e: Event) => this._onChangedFillType(e)} fill-type>\n <input\n type=\"radio\"\n id=\"fill-type-no\"\n name=\"fill-type\"\n value=\"no\"\n .checked=${!this.fillType || this.fillType == 'no'}\n />\n <label for=\"fill-type-no\"><ox-i18n msgid=\"label.no-fill\">no fill</ox-i18n></label>\n <input type=\"radio\" id=\"fill-type-solid\" name=\"fill-type\" value=\"solid\" .checked=${this.fillType == 'solid'} />\n <label for=\"fill-type-solid\"><ox-i18n msgid=\"label.solid\">solid</ox-i18n></label>\n <input\n type=\"radio\"\n id=\"fill-type-gradient\"\n name=\"fill-type\"\n value=\"gradient\"\n .checked=${this.fillType == 'gradient'}\n />\n\n <label for=\"fill-type-gradient\"><ox-i18n msgid=\"label.gradient\">gradient</ox-i18n></label>\n\n ${this.colorOnly\n ? html``\n : html`\n <input\n type=\"radio\"\n id=\"fill-type-pattern\"\n name=\"fill-type\"\n value=\"pattern\"\n .checked=${this.fillType == 'pattern'}\n />\n <label for=\"fill-type-pattern\"><ox-i18n msgid=\"label.pattern\">pattern</ox-i18n></label>\n `}\n </div>\n\n <div editors>\n <div ?active=${this.fillType == 'no'}></div>\n\n <div class=\"property-grid\" ?active=${this.fillType == 'solid'}>\n <label><md-icon>format_color_fill</md-icon></label>\n <ox-input-color class=\"custom-editor\" @change=${(e: Event) => this._onChangedSolid(e)} .value=${this.solid}>\n </ox-input-color>\n </div>\n\n <ox-input-color-gradient\n ?active=${this.fillType == 'gradient'}\n @change=${(e: Event) => this._onChandedGradient(e)}\n .value=${this.gradient!}\n >\n </ox-input-color-gradient>\n\n <ox-input-background-pattern\n ?active=${this.fillType == 'pattern'}\n @change=${(e: Event) => this._onChangedPattern(e)}\n .value=${this.pattern}\n >\n </ox-input-background-pattern>\n </div>\n `\n }\n\n async _onChangedValue(value: FillStyle) {\n /*\n * this._block_reset의 역할은 내부 사용자 인터렉션에 의한 value의 변경시에는 각 type별 이전값을 유지하기 위함이다.\n */\n await this.requestUpdate()\n\n /* 설정 값에 따라서, 멤버 속성을 설정한다. */\n if (!value) {\n this.fillType = 'no'\n\n if (!this._block_reset) {\n this.solid = undefined\n this.gradient = undefined\n this.pattern = undefined\n }\n\n this._block_reset = false\n return\n }\n\n switch (typeof value) {\n case 'string':\n this.fillType = 'solid'\n this.solid = value\n\n if (!this._block_reset) {\n this.gradient = undefined\n this.pattern = undefined\n }\n break\n case 'object':\n this.fillType = value.type\n\n if (value.type === 'gradient') {\n this.gradient = {\n type: value.gradientType || 'linear',\n colorStops: value.colorStops || [\n {\n position: 0,\n color: this.solid || '#000000'\n },\n {\n position: 1,\n color: this.solid || '#FFFFFF'\n }\n ],\n rotation: Number(value.rotation) || 0,\n center: value.center\n }\n\n if (!this._block_reset) {\n this.pattern = undefined\n this.solid = undefined\n }\n } else if (value.type === 'pattern') {\n this.pattern = {\n image: value.image,\n offsetX: Number(value.offsetX) || 0,\n offsetY: Number(value.offsetY) || 0,\n width: Number(value.width),\n height: Number(value.height),\n align: value.align,\n fitPattern: value.fitPattern,\n noRepeat: value.noRepeat,\n guideOnly: value.guideOnly,\n color: value.color\n }\n\n if (!this._block_reset) {\n this.gradient = undefined\n this.solid = undefined\n }\n }\n\n break\n default:\n }\n\n this._block_reset = false\n }\n\n _onChangedFillType(e: Event) {\n const element = e.target as HTMLInputElement\n this.fillType = element.value\n\n switch (this.fillType) {\n case 'gradient':\n if (!this.gradient) {\n this.gradient = {\n type: 'linear',\n colorStops: [\n {\n position: 0,\n color: this.solid || '#000000'\n },\n {\n position: 1,\n color: this.solid || '#FFFFFF'\n }\n ],\n rotation: 0,\n center: 'center'\n }\n }\n\n this.value = {\n type: 'gradient',\n gradientType: this.gradient.type || 'linear',\n colorStops: this.gradient.colorStops || [\n {\n position: 0,\n color: this.solid || '#000000'\n },\n {\n position: 1,\n color: this.solid || '#FFFFFF'\n }\n ],\n rotation: Number(this.gradient.rotation) || 0,\n center: this.gradient.center\n }\n break\n\n case 'pattern':\n if (!this.pattern) this.pattern = {}\n\n this.value = {\n type: 'pattern',\n image: this.pattern.image,\n offsetX: Number(this.pattern.offsetX) || 0,\n offsetY: Number(this.pattern.offsetY) || 0,\n width: Number(this.pattern.width),\n height: Number(this.pattern.height),\n align: this.pattern.align,\n fitPattern: this.pattern.fitPattern,\n noRepeat: this.pattern.noRepeat,\n 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/ox-input-fill-style.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport './ox-input-color.js'\nimport './ox-input-color-stops.js'\nimport './ox-input-color-gradient.js'\nimport './ox-input-background-pattern.js'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { ColorStop } from './ox-input-color-stops.js'\nimport { GradientOption, OxInputColorGradient } from './ox-input-color-gradient.js'\nimport { BackgroundPatternOption, OxInputBackgroundPattern } from './ox-input-background-pattern.js'\n\nexport type FillStyle =\n | {\n type?: 'no' | 'solid' | 'gradient' | 'pattern'\n gradientType?: 'linear' | 'radial'\n colorStops?: ColorStop[]\n rotation?: number\n center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom'\n image?: HTMLImageElement | string\n offsetX?: number\n offsetY?: number\n width?: number\n height?: number\n align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'\n fitPattern?: boolean\n noRepeat?: boolean\n guideOnly?: boolean\n color?: string\n }\n | 'no'\n | string\n\n@customElement('ox-input-fill-style')\nexport class OxInputColorStyle extends OxFormField {\n static styles = [\n PropertyGridStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n }\n\n [fill-type] {\n display: flex;\n margin: 0 0 14px 0;\n }\n\n [fill-type] * {\n flex: auto;\n margin: 0;\n text-align: left;\n align-self: center;\n }\n\n [editors] > :not([active]) {\n display: none;\n }\n `\n ]\n\n @property({ type: Object }) value?: FillStyle = undefined\n @property({ type: String }) fillType?: string\n @property({ type: String }) solid?: string\n @property({ type: Object }) gradient?: GradientOption\n @property({ type: Object }) pattern?: BackgroundPatternOption\n\n @property({ type: Boolean, attribute: 'color-only' }) colorOnly: boolean = false\n\n private _block_reset: boolean = false\n\n updated(changes: PropertyValues<this>) {\n changes.has('value') && this._onChangedValue(this.value || {})\n }\n\n render() {\n return html`\n <div @change=${(e: Event) => this._onChangedFillType(e)} fill-type>\n <input\n type=\"radio\"\n id=\"fill-type-no\"\n name=\"fill-type\"\n value=\"no\"\n .checked=${!this.fillType || this.fillType == 'no'}\n />\n <label for=\"fill-type-no\"><ox-i18n msgid=\"label.no-fill\">no fill</ox-i18n></label>\n <input type=\"radio\" id=\"fill-type-solid\" name=\"fill-type\" value=\"solid\" .checked=${this.fillType == 'solid'} />\n <label for=\"fill-type-solid\"><ox-i18n msgid=\"label.solid\">solid</ox-i18n></label>\n <input\n type=\"radio\"\n id=\"fill-type-gradient\"\n name=\"fill-type\"\n value=\"gradient\"\n .checked=${this.fillType == 'gradient'}\n />\n\n <label for=\"fill-type-gradient\"><ox-i18n msgid=\"label.gradient\">gradient</ox-i18n></label>\n\n ${this.colorOnly\n ? html``\n : html`\n <input\n type=\"radio\"\n id=\"fill-type-pattern\"\n name=\"fill-type\"\n value=\"pattern\"\n .checked=${this.fillType == 'pattern'}\n />\n <label for=\"fill-type-pattern\"><ox-i18n msgid=\"label.pattern\">pattern</ox-i18n></label>\n `}\n </div>\n\n <div editors>\n <div ?active=${this.fillType == 'no'}></div>\n\n <div class=\"property-grid\" ?active=${this.fillType == 'solid'}>\n <label><md-icon>format_color_fill</md-icon></label>\n <ox-input-color class=\"custom-editor\" @change=${(e: Event) => this._onChangedSolid(e)} .value=${this.solid}>\n </ox-input-color>\n </div>\n\n <ox-input-color-gradient\n ?active=${this.fillType == 'gradient'}\n @change=${(e: Event) => this._onChandedGradient(e)}\n .value=${this.gradient!}\n >\n </ox-input-color-gradient>\n\n <ox-input-background-pattern\n ?active=${this.fillType == 'pattern'}\n @change=${(e: Event) => this._onChangedPattern(e)}\n .value=${this.pattern}\n >\n </ox-input-background-pattern>\n </div>\n `\n }\n\n async _onChangedValue(value: FillStyle) {\n /*\n * this._block_reset의 역할은 내부 사용자 인터렉션에 의한 value의 변경시에는 각 type별 이전값을 유지하기 위함이다.\n */\n await this.requestUpdate()\n\n /* 설정 값에 따라서, 멤버 속성을 설정한다. */\n if (!value) {\n this.fillType = 'no'\n\n if (!this._block_reset) {\n this.solid = undefined\n this.gradient = undefined\n this.pattern = undefined\n }\n\n this._block_reset = false\n return\n }\n\n switch (typeof value) {\n case 'string':\n this.fillType = 'solid'\n this.solid = value\n\n if (!this._block_reset) {\n this.gradient = undefined\n this.pattern = undefined\n }\n break\n case 'object':\n this.fillType = value.type\n\n if (value.type === 'gradient') {\n this.gradient = {\n type: value.gradientType || 'linear',\n colorStops: value.colorStops || [\n {\n position: 0,\n color: this.solid || '#000000'\n },\n {\n position: 1,\n color: this.solid || '#FFFFFF'\n }\n ],\n rotation: Number(value.rotation) || 0,\n center: value.center\n }\n\n if (!this._block_reset) {\n this.pattern = undefined\n this.solid = undefined\n }\n } else if (value.type === 'pattern') {\n this.pattern = {\n image: value.image,\n offsetX: Number(value.offsetX) || 0,\n offsetY: Number(value.offsetY) || 0,\n width: Number(value.width),\n height: Number(value.height),\n align: value.align,\n fitPattern: value.fitPattern,\n noRepeat: value.noRepeat,\n guideOnly: value.guideOnly,\n color: value.color\n }\n\n if (!this._block_reset) {\n this.gradient = undefined\n this.solid = undefined\n }\n }\n\n break\n default:\n }\n\n this._block_reset = false\n }\n\n _onChangedFillType(e: Event) {\n const element = e.target as HTMLInputElement\n this.fillType = element.value\n\n switch (this.fillType) {\n case 'gradient':\n if (!this.gradient) {\n this.gradient = {\n type: 'linear',\n colorStops: [\n {\n position: 0,\n color: this.solid || '#000000'\n },\n {\n position: 1,\n color: this.solid || '#FFFFFF'\n }\n ],\n rotation: 0,\n center: 'center'\n }\n }\n\n this.value = {\n type: 'gradient',\n gradientType: this.gradient.type || 'linear',\n colorStops: this.gradient.colorStops || [\n {\n position: 0,\n color: this.solid || '#000000'\n },\n {\n position: 1,\n color: this.solid || '#FFFFFF'\n }\n ],\n rotation: Number(this.gradient.rotation) || 0,\n center: this.gradient.center\n }\n break\n\n case 'pattern':\n if (!this.pattern) this.pattern = {}\n\n this.value = {\n type: 'pattern',\n image: this.pattern.image,\n offsetX: Number(this.pattern.offsetX) || 0,\n offsetY: Number(this.pattern.offsetY) || 0,\n width: Number(this.pattern.width),\n height: Number(this.pattern.height),\n align: this.pattern.align,\n fitPattern: this.pattern.fitPattern,\n noRepeat: this.pattern.noRepeat,\n guideOnly: this.pattern.guideOnly,\n color: this.pattern.color\n }\n break\n\n case 'solid':\n if (!this.solid) this.solid = '#fff'\n this.value = this.solid\n break\n\n case 'no':\n this.value = ''\n break\n }\n\n this._block_reset = true\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _onChangedSolid(e: Event) {\n if (this.fillType !== 'solid') return\n\n this.solid = (e.target as HTMLInputElement).value\n\n this.value = this.solid\n\n this._block_reset = true\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _onChandedGradient(e: Event) {\n /*\n * TODO Gradient의 rotation은 symmetry 기능 등으로 외부에서 변경될 수도 있다.\n * 이 점을 감안해서, 외부 변경에 대한 대응을 해야 한다.\n */\n\n if (this.fillType !== 'gradient') {\n return\n }\n\n this.gradient = (e.target as OxInputColorGradient).value\n\n this.value = {\n type: 'gradient',\n gradientType: this.gradient.type || 'linear',\n colorStops: this.gradient.colorStops || [\n {\n position: 0,\n color: this.solid || '#000000'\n },\n {\n position: 1,\n color: this.solid || '#FFFFFF'\n }\n ],\n rotation: Number(this.gradient.rotation) || 0,\n center: this.gradient.center\n }\n\n this._block_reset = true\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _onChangedPattern(e: Event) {\n if (this.fillType !== 'pattern') return\n\n this.pattern = (e.target as OxInputBackgroundPattern).value\n\n this.value = {\n type: 'pattern',\n image: this.pattern?.image,\n offsetX: Number(this.pattern?.offsetX) || 0,\n offsetY: Number(this.pattern?.offsetY) || 0,\n width: Number(this.pattern?.width),\n height: Number(this.pattern?.height),\n align: this.pattern?.align,\n fitPattern: this.pattern?.fitPattern,\n noRepeat: this.pattern?.noRepeat,\n guideOnly: this.pattern?.guideOnly,\n color: this.pattern?.color\n }\n\n this._block_reset = true\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
|