duoyun-ui 0.0.10 → 0.0.13

package/elements/checkbox.js

@@ -9,14 +9,21 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _DuoyunCheckboxElement_onClick;
-import { adoptedStyle, customElement, attribute, globalemitter, boolattribute, } from '@mantou/gem/lib/decorators';
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _DuoyunCheckboxElement_onClick, _DuoyunCheckboxGroupElement_valueSet, _DuoyunCheckboxGroupElement_onChange;
+import { adoptedStyle, customElement, attribute, globalemitter, boolattribute, property, } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 import { theme } from '../lib/theme';
 import { icons } from '../lib/icons';
 import { commonHandle } from '../lib/hotkeys';
 import { focusStyle } from '../lib/styles';
+import { groupStyle } from './radio';
 import './use';
 const style = createCSSSheet(css `
   :host {
@@ -27,6 +34,7 @@ const style = createCSSSheet(css `
   }
   :host([disabled]) {
     cursor: not-allowed;
+    opacity: 0.3;
   }
   .checkbox {
     box-sizing: border-box;
@@ -50,9 +58,6 @@ const style = createCSSSheet(css `
     padding: 2px;
     background-color: ${theme.primaryColor};
   }
-  :host([disabled]) .checkbox {
-    background-color: ${theme.disabledColor};
-  }
 `);
 /**
  * @customElement dy-checkbox
@@ -109,4 +114,65 @@ DuoyunCheckboxElement = __decorate([
     adoptedStyle(focusStyle)
 ], DuoyunCheckboxElement);
 export { DuoyunCheckboxElement };
+/**
+ * @customElement dy-checkbox-group
+ * @attr disabled
+ */
+let DuoyunCheckboxGroupElement = class DuoyunCheckboxGroupElement extends GemElement {
+    constructor() {
+        super();
+        _DuoyunCheckboxGroupElement_valueSet.set(this, void 0);
+        _DuoyunCheckboxGroupElement_onChange.set(this, (evt, value) => {
+            evt.stopPropagation();
+            const newValue = new Set(__classPrivateFieldGet(this, _DuoyunCheckboxGroupElement_valueSet, "f"));
+            if (evt.detail) {
+                newValue.add(value);
+            }
+            else {
+                newValue.delete(value);
+            }
+            this.change([...newValue]);
+        });
+        this.willMount = () => {
+            this.memo(() => {
+                __classPrivateFieldSet(this, _DuoyunCheckboxGroupElement_valueSet, new Set(this.value), "f");
+            }, () => [this.value]);
+        };
+        this.render = () => {
+            if (!this.options)
+                return null;
+            return html `${this.options.map(({ label, value }) => html `
+          <dy-checkbox
+            ?disabled=${this.disabled}
+            ?checked=${__classPrivateFieldGet(this, _DuoyunCheckboxGroupElement_valueSet, "f").has(value !== null && value !== void 0 ? value : label)}
+            @change=${(evt) => __classPrivateFieldGet(this, _DuoyunCheckboxGroupElement_onChange, "f").call(this, evt, value !== null && value !== void 0 ? value : label)}
+          >
+            ${label}
+          </dy-checkbox>
+        `)}`;
+        };
+        this.internals.role = 'group';
+    }
+};
+_DuoyunCheckboxGroupElement_valueSet = new WeakMap(), _DuoyunCheckboxGroupElement_onChange = new WeakMap();
+__decorate([
+    attribute
+], DuoyunCheckboxGroupElement.prototype, "orientation", void 0);
+__decorate([
+    boolattribute
+], DuoyunCheckboxGroupElement.prototype, "disabled", void 0);
+__decorate([
+    globalemitter
+], DuoyunCheckboxGroupElement.prototype, "change", void 0);
+__decorate([
+    property
+], DuoyunCheckboxGroupElement.prototype, "value", void 0);
+__decorate([
+    property
+], DuoyunCheckboxGroupElement.prototype, "options", void 0);
+DuoyunCheckboxGroupElement = __decorate([
+    customElement('dy-checkbox-group'),
+    adoptedStyle(groupStyle)
+], DuoyunCheckboxGroupElement);
+export { DuoyunCheckboxGroupElement };
 //# sourceMappingURL=checkbox.js.map

package/elements/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../src/elements/checkbox.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACL,YAAY,EACZ,aAAa,EACb,SAAS,EACT,aAAa,EAEb,aAAa,GACd,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,OAAO,CAAC;AAEf,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;aAgBnB,KAAK,CAAC,eAAe;wBACV,KAAK,CAAC,YAAY;qBACrB,KAAK,CAAC,UAAU;;;;;;;;wBAQb,KAAK,CAAC,YAAY;;;;wBAIlB,KAAK,CAAC,YAAY;;;wBAGlB,KAAK,CAAC,aAAa;;CAE1C,CAAC,CAAC;AAEH;;;;;;GAMG;AAIH,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,UAAU;IAOnD;QACE,KAAK,EAAE,CAAC;QAIV,yCAAW,GAAG,EAAE;YACd,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC7B,CAAC,EAAC;QAEF,WAAM,GAAG,GAAG,EAAE;YACZ,OAAO,IAAI,CAAA;;;;mBAII,YAAY;wBACP,IAAI,CAAC,QAAQ;;uBAEd,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO;;mBAE/C,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;;;KAGpD,CAAC;QACJ,CAAC,CAAC;QAtBA,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,sCAAS,CAAC,CAAC;IAChD,CAAC;CAsBF,CAAA;;AA/BgB;IAAd,aAAa;sDAAkB;AACjB;IAAd,aAAa;4DAAwB;AACvB;IAAd,aAAa;uDAAmB;AAClB;IAAd,aAAa;qDAA0B;AAC7B;IAAV,SAAS;oDAAe;AALd,qBAAqB;IAHjC,aAAa,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,KAAK,CAAC;IACnB,YAAY,CAAC,UAAU,CAAC;GACZ,qBAAqB,CAgCjC;SAhCY,qBAAqB"}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../src/elements/checkbox.ts"],"names":[],"mappings":"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"}

package/elements/coach-mark.js

@@ -16,7 +16,7 @@ import { html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 import { createStore, updateStore } from '@mantou/gem/lib/store';
 import { splice } from '@mantou/gem/helper/i18n';
-import { theme } from '../lib/theme';
+import { theme, getSemanticColor } from '../lib/theme';
 import { locale } from '../lib/locale';
 import { ContextMenu } from './menu';
 import { DuoyunVisibleBaseElement } from './base/visible';
@@ -175,7 +175,7 @@ let DuoyunCoachMarkElement = class DuoyunCoachMarkElement extends DuoyunVisibleB
             return html `
       <style>
         :host {
-          color: ${this.color || theme.informativeColor};
+          color: ${getSemanticColor(this.color) || this.color || theme.informativeColor};
         }
       </style>
       <span class="ring"></span>

package/elements/coach-mark.js.map

@@ -1 +1 @@
-{"version":3,"file":"coach-mark.js","sourceRoot":"","sources":["../src/elements/coach-mark.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"coach-mark.js","sourceRoot":"","sources":["../src/elements/coach-mark.ts"],"names":[],"mappings":"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"}

package/elements/collapse.d.ts

@@ -7,6 +7,7 @@ declare type State = {
  * @customElement dy-collapse-panel
  */
 export declare class DuoyunCollapsePanelElement extends GemElement<State> {
+    static header: string;
     header: string;
     constructor();
     state: State;

package/elements/collapse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.d.ts","sourceRoot":"","sources":["../src/elements/collapse.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAQ,MAAM,yBAAyB,CAAC;AAQ3D,OAAO,OAAO,CAAC;AAkCf,aAAK,KAAK,GAAG;IACX,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,qBAGa,0BAA2B,SAAQ,UAAU,CAAC,KAAK,CAAC;IACpD,MAAM,EAAE,MAAM,CAAC;;IAO1B,KAAK,EAAE,KAAK,CAEV;IAEF,MAAM,8DAsBJ;CACH;AAcD;;GAEG;AACH,qBAEa,qBAAsB,SAAQ,UAAU;;CAKpD"}
+{"version":3,"file":"collapse.d.ts","sourceRoot":"","sources":["../src/elements/collapse.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAQ,MAAM,yBAAyB,CAAC;AAQ3D,OAAO,OAAO,CAAC;AAkCf,aAAK,KAAK,GAAG;IACX,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,qBAGa,0BAA2B,SAAQ,UAAU,CAAC,KAAK,CAAC;IACzD,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAEjB,MAAM,EAAE,MAAM,CAAC;;IAO1B,KAAK,EAAE,KAAK,CAEV;IAEF,MAAM,8DAsBJ;CACH;AAcD;;GAEG;AACH,qBAEa,qBAAsB,SAAQ,UAAU;;CAKpD"}

package/elements/collapse.js

@@ -4,8 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var DuoyunCollapsePanelElement_1;
 // https://ant.design/components/collapse/
-import { adoptedStyle, customElement, attribute } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, attribute, part } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
 import { icons } from '../lib/icons';
@@ -47,7 +48,7 @@ const panelStyle = createCSSSheet(css `
 /**
  * @customElement dy-collapse-panel
  */
-let DuoyunCollapsePanelElement = class DuoyunCollapsePanelElement extends GemElement {
+let DuoyunCollapsePanelElement = DuoyunCollapsePanelElement_1 = class DuoyunCollapsePanelElement extends GemElement {
     constructor() {
         super();
         this.state = {
@@ -58,7 +59,7 @@ let DuoyunCollapsePanelElement = class DuoyunCollapsePanelElement extends GemEle
             return html `
       <div
         class="header"
-        part="header"
+        part=${DuoyunCollapsePanelElement_1.header}
         tabindex="0"
         @keydown=${commonHandle}
         @click=${() => this.setState({ expand: !expand })}
@@ -81,7 +82,10 @@ let DuoyunCollapsePanelElement = class DuoyunCollapsePanelElement extends GemEle
 __decorate([
     attribute
 ], DuoyunCollapsePanelElement.prototype, "header", void 0);
-DuoyunCollapsePanelElement = __decorate([
+__decorate([
+    part
+], DuoyunCollapsePanelElement, "header", void 0);
+DuoyunCollapsePanelElement = DuoyunCollapsePanelElement_1 = __decorate([
     customElement('dy-collapse-panel'),
     adoptedStyle(panelStyle),
     adoptedStyle(focusStyle)

package/elements/collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.js","sourceRoot":"","sources":["../src/elements/collapse.ts"],"names":[],"mappings":";;;;;;AAAA,0CAA0C;AAC1C,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,OAAO,CAAC;AAEf,MAAM,UAAU,GAAG,cAAc,CAAC,GAAG,CAAA;;;oCAGD,KAAK,CAAC,WAAW;;;;;;;;kBAQnC,KAAK,CAAC,oBAAoB;;;;;;;;;;;;;;;;;oCAiBR,KAAK,CAAC,WAAW;;CAEpD,CAAC,CAAC;AAMH;;GAEG;AAIH,IAAa,0BAA0B,GAAvC,MAAa,0BAA2B,SAAQ,UAAiB;IAG/D;QACE,KAAK,EAAE,CAAC;QAIV,UAAK,GAAU;YACb,MAAM,EAAE,KAAK;SACd,CAAC;QAEF,WAAM,GAAG,GAAG,EAAE;YACZ,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAE9B,OAAO,IAAI,CAAA;;;;;mBAKI,YAAY;iBACd,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,CAAC;;wBAEjC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,aAAa,KAAK,CAAC,KAAK;8BAC1D,IAAI,CAAC,MAAM;;QAEjC,MAAM;gBACN,CAAC,CAAC,IAAI,CAAA;;;;WAIH;gBACH,CAAC,CAAC,EAAE;KACP,CAAC;QACJ,CAAC,CAAC;QA7BA,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,UAAU,CAAC;IACnC,CAAC;CA6BF,CAAA;AAlCY;IAAV,SAAS;0DAAgB;AADf,0BAA0B;IAHtC,aAAa,CAAC,mBAAmB,CAAC;IAClC,YAAY,CAAC,UAAU,CAAC;IACxB,YAAY,CAAC,UAAU,CAAC;GACZ,0BAA0B,CAmCtC;SAnCY,0BAA0B;AAqCvC,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAA;;;;qBAIX,KAAK,CAAC,WAAW;wBACd,KAAK,CAAC,WAAW;;;;;CAKxC,CAAC,CAAC;AAEH;;GAEG;AAGH,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,UAAU;IACnD;QACE,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACzB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,MAAM,CAAC;IAC/B,CAAC;CACF,CAAA;AALY,qBAAqB;IAFjC,aAAa,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,KAAK,CAAC;GACP,qBAAqB,CAKjC;SALY,qBAAqB"}
+{"version":3,"file":"collapse.js","sourceRoot":"","sources":["../src/elements/collapse.ts"],"names":[],"mappings":";;;;;;;AAAA,0CAA0C;AAC1C,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAC1F,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,OAAO,CAAC;AAEf,MAAM,UAAU,GAAG,cAAc,CAAC,GAAG,CAAA;;;oCAGD,KAAK,CAAC,WAAW;;;;;;;;kBAQnC,KAAK,CAAC,oBAAoB;;;;;;;;;;;;;;;;;oCAiBR,KAAK,CAAC,WAAW;;CAEpD,CAAC,CAAC;AAMH;;GAEG;AAIH,IAAa,0BAA0B,kCAAvC,MAAa,0BAA2B,SAAQ,UAAiB;IAK/D;QACE,KAAK,EAAE,CAAC;QAIV,UAAK,GAAU;YACb,MAAM,EAAE,KAAK;SACd,CAAC;QAEF,WAAM,GAAG,GAAG,EAAE;YACZ,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAE9B,OAAO,IAAI,CAAA;;;eAGA,4BAA0B,CAAC,MAAM;;mBAE7B,YAAY;iBACd,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,CAAC;;wBAEjC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,aAAa,KAAK,CAAC,KAAK;8BAC1D,IAAI,CAAC,MAAM;;QAEjC,MAAM;gBACN,CAAC,CAAC,IAAI,CAAA;;;;WAIH;gBACH,CAAC,CAAC,EAAE;KACP,CAAC;QACJ,CAAC,CAAC;QA7BA,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,UAAU,CAAC;IACnC,CAAC;CA6BF,CAAA;AAlCY;IAAV,SAAS;0DAAgB;AAFpB;IAAL,IAAI;gDAAuB;AADjB,0BAA0B;IAHtC,aAAa,CAAC,mBAAmB,CAAC;IAClC,YAAY,CAAC,UAAU,CAAC;IACxB,YAAY,CAAC,UAAU,CAAC;GACZ,0BAA0B,CAqCtC;SArCY,0BAA0B;AAuCvC,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAA;;;;qBAIX,KAAK,CAAC,WAAW;wBACd,KAAK,CAAC,WAAW;;;;;CAKxC,CAAC,CAAC;AAEH;;GAEG;AAGH,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,UAAU;IACnD;QACE,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACzB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,MAAM,CAAC;IAC/B,CAAC;CACF,CAAA;AALY,qBAAqB;IAFjC,aAAa,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,KAAK,CAAC;GACP,qBAAqB,CAKjC;SALY,qBAAqB"}

package/elements/color-panel.d.ts

@@ -11,6 +11,23 @@ declare type State = {
     grabbingHue: boolean;
     grabbingSV: boolean;
     grabbingA: boolean;
+    r: number;
+    g: number;
+    b: number;
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+    sa: number;
+    v: number;
+    str: string;
+    commitValue?: {
+        v?: number;
+        sa?: number;
+        h?: number;
+        a?: number;
+        str?: string;
+    };
 };
 /**
  * @customElement dy-color-panel

package/elements/color-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-panel.d.ts","sourceRoot":"","sources":["../src/elements/color-panel.ts"],"names":[],"mappings":"AACA,OAAO,EAKL,OAAO,EAER,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAQ,MAAM,yBAAyB,CAAC;AAG3D,OAAO,EACL,QAAQ,EAUT,MAAM,cAAc,CAAC;AAOtB,OAAO,WAAW,CAAC;AACnB,OAAO,OAAO,CAAC;AACf,OAAO,SAAS,CAAC;AACjB,OAAO,UAAU,CAAC;AAqHlB,aAAK,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAElC,aAAK,KAAK,GAAG;IACX,IAAI,EAAE,IAAI,CAAC;IACX,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,qBAEa,uBAAwB,SAAQ,UAAU,CAAC,KAAK,CAAC;;IACjD,KAAK,EAAE,QAAQ,CAAC;IACZ,KAAK,EAAE,OAAO,CAAC;IAEf,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;;IAOzC,KAAK,EAAE,KAAK,CAKV;IAoJF,SAAS,aAKP;IAEF,MAAM,8DAwEJ;CACH"}
+{"version":3,"file":"color-panel.d.ts","sourceRoot":"","sources":["../src/elements/color-panel.ts"],"names":[],"mappings":"AACA,OAAO,EAKL,OAAO,EAER,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAQ,MAAM,yBAAyB,CAAC;AAG3D,OAAO,EACL,QAAQ,EAUT,MAAM,cAAc,CAAC;AAOtB,OAAO,WAAW,CAAC;AACnB,OAAO,OAAO,CAAC;AACf,OAAO,SAAS,CAAC;AACjB,OAAO,UAAU,CAAC;AAqHlB,aAAK,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAElC,aAAK,KAAK,GAAG;IACX,IAAI,EAAE,IAAI,CAAC;IACX,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IAEnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IAEV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IAEV,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IAGV,GAAG,EAAE,MAAM,CAAC;IAEZ,WAAW,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACjF,CAAC;AAEF;;;;GAIG;AACH,qBAEa,uBAAwB,SAAQ,UAAU,CAAC,KAAK,CAAC;;IACjD,KAAK,EAAE,QAAQ,CAAC;IACZ,KAAK,EAAE,OAAO,CAAC;IAEf,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;;IAmBzC,KAAK,EAAE,KAAK,CAoBV;IAmGF,SAAS,aAkBP;IAEF,MAAM,8DAoEJ;CACH"}

package/elements/color-panel.js

@@ -9,13 +9,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _DuoyunColorPanelElement_r, _DuoyunColorPanelElement_g, _DuoyunColorPanelElement_b, _DuoyunColorPanelElement_h, _DuoyunColorPanelElement_s, _DuoyunColorPanelElement_l, _DuoyunColorPanelElement_a, _DuoyunColorPanelElement_sa, _DuoyunColorPanelElement_v, _DuoyunColorPanelElement_value, _DuoyunColorPanelElement_typeOptions, _DuoyunColorPanelElement_getColor, _DuoyunColorPanelElement_getPosition, _DuoyunColorPanelElement_setRgb, _DuoyunColorPanelElement_onPanHue, _DuoyunColorPanelElement_onPanSV, _DuoyunColorPanelElement_onPanA, _DuoyunColorPanelElement_onChangeType, _DuoyunColorPanelElement_onChangeValue, _DuoyunColorPanelElement_onChangeA, _DuoyunColorPanelElement_onChange, _DuoyunColorPanelElement_openEyeDropper, _DuoyunColorPanelElement_init;
+var _DuoyunColorPanelElement_instances, _DuoyunColorPanelElement_color_get, _DuoyunColorPanelElement_typeOptions, _DuoyunColorPanelElement_getPosition, _DuoyunColorPanelElement_onPanHue, _DuoyunColorPanelElement_onPanSV, _DuoyunColorPanelElement_onPanA, _DuoyunColorPanelElement_onPanEnd, _DuoyunColorPanelElement_onChangeType, _DuoyunColorPanelElement_onChangeValue, _DuoyunColorPanelElement_onChangeA, _DuoyunColorPanelElement_openEyeDropper;
 // https://spectrum.adobe.com/page/color-area/
 import { adoptedStyle, customElement, attribute, globalemitter, boolattribute, } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
@@ -150,25 +144,26 @@ const style = createCSSSheet(css `
 let DuoyunColorPanelElement = class DuoyunColorPanelElement extends GemElement {
     constructor() {
         super();
+        _DuoyunColorPanelElement_instances.add(this);
         this.state = {
             mode: 'Hex',
             grabbingHue: false,
             grabbingA: false,
             grabbingSV: false,
+            // stringify
+            r: 0,
+            g: 0,
+            b: 0,
+            h: 0,
+            s: 0,
+            l: 0,
+            a: 0,
+            // hsv
+            sa: 0,
+            v: 0,
+            // without alpha
+            str: '',
         };
-        // stringify
-        _DuoyunColorPanelElement_r.set(this, 0);
-        _DuoyunColorPanelElement_g.set(this, 0);
-        _DuoyunColorPanelElement_b.set(this, 0);
-        _DuoyunColorPanelElement_h.set(this, 0);
-        _DuoyunColorPanelElement_s.set(this, 0);
-        _DuoyunColorPanelElement_l.set(this, 0);
-        _DuoyunColorPanelElement_a.set(this, 0);
-        // hsv
-        _DuoyunColorPanelElement_sa.set(this, 0);
-        _DuoyunColorPanelElement_v.set(this, 0);
-        // without alpha
-        _DuoyunColorPanelElement_value.set(this, '');
         _DuoyunColorPanelElement_typeOptions.set(this, [
             {
                 label: 'Hex',
@@ -180,16 +175,6 @@ let DuoyunColorPanelElement = class DuoyunColorPanelElement extends GemElement {
                 label: 'HSL',
             },
         ]);
-        _DuoyunColorPanelElement_getColor.set(this, (mode) => {
-            switch (mode) {
-                case 'Hex':
-                    return rgbToHexColor([__classPrivateFieldGet(this, _DuoyunColorPanelElement_r, "f"), __classPrivateFieldGet(this, _DuoyunColorPanelElement_g, "f"), __classPrivateFieldGet(this, _DuoyunColorPanelElement_b, "f")]);
-                case 'RGB':
-                    return rgbToRgbColor([__classPrivateFieldGet(this, _DuoyunColorPanelElement_r, "f"), __classPrivateFieldGet(this, _DuoyunColorPanelElement_g, "f"), __classPrivateFieldGet(this, _DuoyunColorPanelElement_b, "f")]);
-                case 'HSL':
-                    return rgbToHslColor([__classPrivateFieldGet(this, _DuoyunColorPanelElement_r, "f"), __classPrivateFieldGet(this, _DuoyunColorPanelElement_g, "f"), __classPrivateFieldGet(this, _DuoyunColorPanelElement_b, "f")]);
-            }
-        });
         _DuoyunColorPanelElement_getPosition.set(this, (target, { clientX, clientY }) => {
             const { left, top, width, height } = target.getBoundingClientRect();
             return {
@@ -197,33 +182,42 @@ let DuoyunColorPanelElement = class DuoyunColorPanelElement extends GemElement {
                 top: clamp(0, clientY - top, height) / height,
             };
         });
-        _DuoyunColorPanelElement_setRgb.set(this, () => {
-            const [r, g, b] = hslToRgb([__classPrivateFieldGet(this, _DuoyunColorPanelElement_h, "f"), __classPrivateFieldGet(this, _DuoyunColorPanelElement_s, "f"), __classPrivateFieldGet(this, _DuoyunColorPanelElement_l, "f")]);
-            __classPrivateFieldSet(this, _DuoyunColorPanelElement_r, r, "f");
-            __classPrivateFieldSet(this, _DuoyunColorPanelElement_g, g, "f");
-            __classPrivateFieldSet(this, _DuoyunColorPanelElement_b, b, "f");
-            __classPrivateFieldSet(this, _DuoyunColorPanelElement_value, __classPrivateFieldGet(this, _DuoyunColorPanelElement_getColor, "f").call(this, 'Hex'), "f");
-        });
         _DuoyunColorPanelElement_onPanHue.set(this, ({ detail, target }) => {
-            const { top } = __classPrivateFieldGet(this, _DuoyunColorPanelElement_getPosition, "f").call(this, target, detail);
-            __classPrivateFieldSet(this, _DuoyunColorPanelElement_h, 1 - top, "f");
-            __classPrivateFieldGet(this, _DuoyunColorPanelElement_setRgb, "f").call(this);
             this.setState({ grabbingHue: true });
+            const { a, s, l } = this.state;
+            const { top } = __classPrivateFieldGet(this, _DuoyunColorPanelElement_getPosition, "f").call(this, target, detail);
+            const h = 1 - top;
+            const [r, g, b] = hslToRgb([h, s, l]);
+            const color = rgbToHexColor([r, g, b, a]);
+            this.setState({ commitValue: { h, str: color } });
+            this.change(color);
         });
         _DuoyunColorPanelElement_onPanSV.set(this, ({ detail, target }) => {
-            const { left, top } = __classPrivateFieldGet(this, _DuoyunColorPanelElement_getPosition, "f").call(this, target, detail);
-            __classPrivateFieldSet(this, _DuoyunColorPanelElement_v, 1 - top, "f");
-            __classPrivateFieldSet(this, _DuoyunColorPanelElement_sa, left, "f");
-            const [_, s, l] = hsvToHsl([__classPrivateFieldGet(this, _DuoyunColorPanelElement_h, "f"), __classPrivateFieldGet(this, _DuoyunColorPanelElement_sa, "f"), __classPrivateFieldGet(this, _DuoyunColorPanelElement_v, "f")]);
-            __classPrivateFieldSet(this, _DuoyunColorPanelElement_s, s, "f");
-            __classPrivateFieldSet(this, _DuoyunColorPanelElement_l, l, "f");
-            __classPrivateFieldGet(this, _DuoyunColorPanelElement_setRgb, "f").call(this);
             this.setState({ grabbingSV: true });
+            const { h, a, str } = this.state;
+            const { left, top } = __classPrivateFieldGet(this, _DuoyunColorPanelElement_getPosition, "f").call(this, target, detail);
+            const v = 1 - top;
+            const sa = left;
+            const [_, s, l] = hsvToHsl([h, sa, v]);
+            const [r, g, b] = hslToRgb([h, s, l]);
+            const color = rgbToHexColor([r, g, b, a]);
+            this.setState({
+                sa: color === str ? sa : this.state.sa,
+                commitValue: { str: color, v, sa, h },
+            });
+            this.change(color);
         });
         _DuoyunColorPanelElement_onPanA.set(this, ({ detail, target }) => {
-            const { top } = __classPrivateFieldGet(this, _DuoyunColorPanelElement_getPosition, "f").call(this, target, detail);
-            __classPrivateFieldSet(this, _DuoyunColorPanelElement_a, 1 - top, "f");
             this.setState({ grabbingA: true });
+            const { r, g, b } = this.state;
+            const { top } = __classPrivateFieldGet(this, _DuoyunColorPanelElement_getPosition, "f").call(this, target, detail);
+            const a = 1 - top;
+            const color = rgbToHexColor([r, g, b, a]);
+            this.setState({ commitValue: { str: color, a } });
+            this.change(color);
+        });
+        _DuoyunColorPanelElement_onPanEnd.set(this, () => {
+            this.setState({ grabbingHue: false, grabbingSV: false, grabbingA: false });
         });
         _DuoyunColorPanelElement_onChangeType.set(this, (evt) => {
             evt.stopPropagation();
@@ -231,100 +225,84 @@ let DuoyunColorPanelElement = class DuoyunColorPanelElement extends GemElement {
         });
         _DuoyunColorPanelElement_onChangeValue.set(this, (evt) => {
             evt.stopPropagation();
-            if (this.state.mode !== 'Hex') {
+            const { mode, a } = this.state;
+            if (mode !== 'Hex') {
                 this.setState({ mode: 'Hex' });
+                return;
             }
-            else {
-                __classPrivateFieldSet(this, _DuoyunColorPanelElement_value, '#' + evt.detail.trim().replace('#', '').replace(/[g-z]/gi, '').toLowerCase(), "f");
-                // valid color emit event
-                if (isValidHexColor(__classPrivateFieldGet(this, _DuoyunColorPanelElement_value, "f"))) {
-                    __classPrivateFieldGet(this, _DuoyunColorPanelElement_init, "f").call(this, __classPrivateFieldGet(this, _DuoyunColorPanelElement_value, "f"));
-                    __classPrivateFieldGet(this, _DuoyunColorPanelElement_onChange, "f").call(this);
-                }
-                else {
-                    this.update();
-                }
+            let str = '#' + evt.detail.trim().replace('#', '').replace(/[g-z]/gi, '').toLowerCase();
+            // valid color emit event
+            if (isValidHexColor(str)) {
+                const aStr = Math.round(a * 255)
+                    .toString(16)
+                    .padStart(2, '0');
+                const isShortHex = str.length === 4 && aStr[0] === aStr[1];
+                str = str.slice(0, isShortHex ? 4 : 7);
+                this.change((this.alpha && a !== 1 ? str + (isShortHex ? aStr[0] : aStr) : str));
             }
+            this.setState({ str });
         });
         _DuoyunColorPanelElement_onChangeA.set(this, (evt) => {
             evt.stopPropagation();
-            __classPrivateFieldSet(this, _DuoyunColorPanelElement_a, clamp(0, Number(evt.detail) || 0, 1), "f");
-            __classPrivateFieldGet(this, _DuoyunColorPanelElement_onChange, "f").call(this);
-        });
-        _DuoyunColorPanelElement_onChange.set(this, () => {
-            const isShort = __classPrivateFieldGet(this, _DuoyunColorPanelElement_value, "f").length === 4;
-            const aStr = Math.round(__classPrivateFieldGet(this, _DuoyunColorPanelElement_a, "f") * 255)
-                .toString(16)
-                .padStart(2, '0');
-            const supportSingle = aStr[0] === aStr[1];
-            const useShort = isShort && supportSingle;
-            if (!useShort) {
-                __classPrivateFieldSet(this, _DuoyunColorPanelElement_value, __classPrivateFieldGet(this, _DuoyunColorPanelElement_getColor, "f").call(this, 'Hex'), "f");
-            }
-            const color = (this.alpha && __classPrivateFieldGet(this, _DuoyunColorPanelElement_a, "f") !== 1 ? __classPrivateFieldGet(this, _DuoyunColorPanelElement_value, "f") + (useShort ? aStr[0] : aStr) : __classPrivateFieldGet(this, _DuoyunColorPanelElement_value, "f"));
-            this.setState({ grabbingHue: false, grabbingSV: false, grabbingA: false });
-            this.change(color);
+            const { r, g, b } = this.state;
+            this.change(rgbToHexColor([r, g, b, clamp(0, Number(evt.detail) || 0, 1)]));
         });
         _DuoyunColorPanelElement_openEyeDropper.set(this, async () => {
             const result = await new window.EyeDropper().open();
             this.change(result.sRGBHex);
         });
-        _DuoyunColorPanelElement_init.set(this, (value) => {
-            const [r, g, b, a] = parseHexColor(value);
-            const [h, s, l] = rgbToHsl([r, g, b]);
-            const [_, sa, v] = hslToHsv([h, s, l]);
-            __classPrivateFieldSet(this, _DuoyunColorPanelElement_r, r, "f");
-            __classPrivateFieldSet(this, _DuoyunColorPanelElement_g, g, "f");
-            __classPrivateFieldSet(this, _DuoyunColorPanelElement_b, b, "f");
-            __classPrivateFieldSet(this, _DuoyunColorPanelElement_a, a, "f");
-            if (v !== 0 && sa !== 0) {
-                __classPrivateFieldSet(this, _DuoyunColorPanelElement_h, h, "f");
-            }
-            __classPrivateFieldSet(this, _DuoyunColorPanelElement_s, s, "f");
-            __classPrivateFieldSet(this, _DuoyunColorPanelElement_l, l, "f");
-            if (v !== 0) {
-                __classPrivateFieldSet(this, _DuoyunColorPanelElement_sa, sa, "f");
-            }
-            __classPrivateFieldSet(this, _DuoyunColorPanelElement_v, v, "f");
-            __classPrivateFieldSet(this, _DuoyunColorPanelElement_value, value.length === 5 ? value.slice(0, 4) : value.length === 9 ? value.slice(0, 7) : value, "f");
-        });
         this.willMount = () => {
-            this.memo(() => __classPrivateFieldGet(this, _DuoyunColorPanelElement_init, "f").call(this, this.value || '#fff'), () => [this.value]);
+            this.memo(() => {
+                var _a;
+                const value = this.value || '#fff';
+                const [r, g, b, a] = parseHexColor(value);
+                const [h, s, l] = rgbToHsl([r, g, b]);
+                const [_, sa, v] = hslToHsv([h, s, l]);
+                const str = value.length === 5 ? value.slice(0, 4) : value.length === 9 ? value.slice(0, 7) : value;
+                const parseState = { r, g, b, a, h, s, l, sa, v, str };
+                if (this.value === ((_a = this.state.commitValue) === null || _a === void 0 ? void 0 : _a.str)) {
+                    this.setState({ ...parseState, ...this.state.commitValue });
+                    return;
+                }
+                else {
+                    this.setState({ ...parseState });
+                }
+            }, () => [this.value]);
         };
         this.render = () => {
-            const { mode, grabbingHue, grabbingSV, grabbingA } = this.state;
+            const { mode, grabbingHue, grabbingSV, grabbingA, h, s, l, a, sa, v, str } = this.state;
             return html `
       <style>
         :host {
-          --h: ${__classPrivateFieldGet(this, _DuoyunColorPanelElement_h, "f") * 360};
-          --s: ${__classPrivateFieldGet(this, _DuoyunColorPanelElement_s, "f") * 100}%;
-          --l: ${__classPrivateFieldGet(this, _DuoyunColorPanelElement_l, "f") * 100}%;
-          --a: ${__classPrivateFieldGet(this, _DuoyunColorPanelElement_a, "f")};
+          --h: ${h * 360};
+          --s: ${s * 100}%;
+          --l: ${l * 100}%;
+          --a: ${a};
         }
       </style>
       <div class="color">
-        <dy-gesture class="area" @pan=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onPanSV, "f")} @end=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onChange, "f")}>
+        <dy-gesture class="area" @pan=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onPanSV, "f")} @end=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onPanEnd, "f")}>
           <div
             class=${classMap({ current: true, grabbing: grabbingSV })}
-            style=${styleMap({ left: `${__classPrivateFieldGet(this, _DuoyunColorPanelElement_sa, "f") * 100}%`, top: `${(1 - __classPrivateFieldGet(this, _DuoyunColorPanelElement_v, "f")) * 100}%` })}
+            style=${styleMap({ left: `${sa * 100}%`, top: `${(1 - v) * 100}%` })}
           >
             <span></span>
           </div>
         </dy-gesture>
-        <dy-gesture class="hue-bar" @pan=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onPanHue, "f")} @end=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onChange, "f")}>
+        <dy-gesture class="hue-bar" @pan=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onPanHue, "f")} @end=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onPanEnd, "f")}>
           <div
             class=${classMap({ current: true, grabbing: grabbingHue })}
-            style=${styleMap({ top: `${(1 - __classPrivateFieldGet(this, _DuoyunColorPanelElement_h, "f")) * 100}%`, left: '50%' })}
+            style=${styleMap({ top: `${(1 - h) * 100}%`, left: '50%' })}
           >
             <span></span>
           </div>
         </dy-gesture>
         ${this.alpha
                 ? html `
-              <dy-gesture class="alpha-bar" @pan=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onPanA, "f")} @end=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onChange, "f")}>
+              <dy-gesture class="alpha-bar" @pan=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onPanA, "f")} @end=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onPanEnd, "f")}>
                 <div
                   class=${classMap({ current: true, grabbing: grabbingA })}
-                  style=${styleMap({ top: `${(1 - __classPrivateFieldGet(this, _DuoyunColorPanelElement_a, "f")) * 100}%`, left: '50%' })}
+                  style=${styleMap({ top: `${(1 - a) * 100}%`, left: '50%' })}
                 >
                   <span></span>
                 </div>
@@ -341,16 +319,12 @@ let DuoyunColorPanelElement = class DuoyunColorPanelElement extends GemElement {
           .dropdownStyle=${{ fontSize: '0.75em' }}
           @change=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onChangeType, "f")}
         ></dy-select>
-        <dy-input
-          class="value"
-          value=${mode === 'Hex' ? __classPrivateFieldGet(this, _DuoyunColorPanelElement_value, "f") : __classPrivateFieldGet(this, _DuoyunColorPanelElement_getColor, "f").call(this, mode)}
-          @change=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onChangeValue, "f")}
-        ></dy-input>
+        <dy-input class="value" value=${mode === 'Hex' ? str : __classPrivateFieldGet(this, _DuoyunColorPanelElement_instances, "a", _DuoyunColorPanelElement_color_get)} @change=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onChangeValue, "f")}></dy-input>
         <dy-input
           class=${classMap({ alpha: true, hidden: !this.alpha })}
           aria-hidden=${!this.alpha}
           type="number"
-          value=${String(formatToPrecision(__classPrivateFieldGet(this, _DuoyunColorPanelElement_a, "f")))}
+          value=${String(formatToPrecision(a))}
           step=${0.1}
           @change=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onChangeA, "f")}
         ></dy-input>
@@ -367,7 +341,17 @@ let DuoyunColorPanelElement = class DuoyunColorPanelElement extends GemElement {
         this.internals.role = 'widget';
     }
 };
-_DuoyunColorPanelElement_r = new WeakMap(), _DuoyunColorPanelElement_g = new WeakMap(), _DuoyunColorPanelElement_b = new WeakMap(), _DuoyunColorPanelElement_h = new WeakMap(), _DuoyunColorPanelElement_s = new WeakMap(), _DuoyunColorPanelElement_l = new WeakMap(), _DuoyunColorPanelElement_a = new WeakMap(), _DuoyunColorPanelElement_sa = new WeakMap(), _DuoyunColorPanelElement_v = new WeakMap(), _DuoyunColorPanelElement_value = new WeakMap(), _DuoyunColorPanelElement_typeOptions = new WeakMap(), _DuoyunColorPanelElement_getColor = new WeakMap(), _DuoyunColorPanelElement_getPosition = new WeakMap(), _DuoyunColorPanelElement_setRgb = new WeakMap(), _DuoyunColorPanelElement_onPanHue = new WeakMap(), _DuoyunColorPanelElement_onPanSV = new WeakMap(), _DuoyunColorPanelElement_onPanA = new WeakMap(), _DuoyunColorPanelElement_onChangeType = new WeakMap(), _DuoyunColorPanelElement_onChangeValue = new WeakMap(), _DuoyunColorPanelElement_onChangeA = new WeakMap(), _DuoyunColorPanelElement_onChange = new WeakMap(), _DuoyunColorPanelElement_openEyeDropper = new WeakMap(), _DuoyunColorPanelElement_init = new WeakMap();
+_DuoyunColorPanelElement_typeOptions = new WeakMap(), _DuoyunColorPanelElement_getPosition = new WeakMap(), _DuoyunColorPanelElement_onPanHue = new WeakMap(), _DuoyunColorPanelElement_onPanSV = new WeakMap(), _DuoyunColorPanelElement_onPanA = new WeakMap(), _DuoyunColorPanelElement_onPanEnd = new WeakMap(), _DuoyunColorPanelElement_onChangeType = new WeakMap(), _DuoyunColorPanelElement_onChangeValue = new WeakMap(), _DuoyunColorPanelElement_onChangeA = new WeakMap(), _DuoyunColorPanelElement_openEyeDropper = new WeakMap(), _DuoyunColorPanelElement_instances = new WeakSet(), _DuoyunColorPanelElement_color_get = function _DuoyunColorPanelElement_color_get() {
+    const { r, g, b, mode } = this.state;
+    switch (mode) {
+        case 'Hex':
+            return rgbToHexColor([r, g, b]);
+        case 'RGB':
+            return rgbToRgbColor([r, g, b]);
+        case 'HSL':
+            return rgbToHslColor([r, g, b]);
+    }
+};
 __decorate([
     attribute
 ], DuoyunColorPanelElement.prototype, "value", void 0);