@deckdeckgo/color - npm Package Compare versions

Comparing version 1.0.0-rc.2 to 1.0.0-rc.3

CHANGELOG.md

@@ -0,1 +1,30 @@
+<a name="1.0.0-rc.3"></a>
+# 1.0.0-rc.3 (2019-11-19)
+
+### Features
+
+* highlight custom color ([#488](https://github.com/deckgo/deckdeckgo/issues/488))
+
+<a name="1.0.0-rc.2-3"></a>
+# 1.0.0-rc.2-3 (2019-10-19)
+
+### Features
+
+* on external `colorRgb` or `colorHex` changes, render component again
+* update most recent libs
+
+<a name="1.0.0-rc.2-2"></a>
+# 1.0.0-rc.2-2 (2019-10-04)
+
+### Fix
+
+* color container `overflow` set to `visible`
+
+<a name="1.0.0-rc.2-1"></a>
+# 1.0.0-rc.2-1 (2019-09-29)
+
+### Features
+
+* when comparing rgb color to display the selection, ignore white space
+
 <a name="1.0.0-rc.2"></a>
@@ -2,0 +31,0 @@ # 1.0.0-rc.2 (2019-09-29)

dist/cjs/deckdeckgo-color.cjs.js

 'use strict';
 
-const core = require('./core-09379fe2.js');
+const core = require('./core-952db89c.js');
 
 core.patchBrowser().then(options => {
-  return core.bootstrapLazy([["deckgo-color.cjs",[[1,"deckgo-color",{"palette":[1040],"more":[4],"moreAlt":[1,"more-alt"],"colorHex":[1025,"color-hex"],"colorRgb":[1025,"color-rgb"]}]]]], options);
+  return core.bootstrapLazy([["deckgo-color.cjs",[[1,"deckgo-color",{"palette":[1040],"more":[4],"moreAlt":[1,"more-alt"],"colorHex":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"selectedColorHex":[32],"selectedColorRgb":[32],"selectedColorPalette":[32]}]]]], options);
 });

dist/cjs/deckgo-color.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const core = require('./core-09379fe2.js');
+const core = require('./core-952db89c.js');
 
@@ -94,13 +94,19 @@ const DEFAULT_PALETTE = [
         this.moreAlt = 'More';
+        this.selectedColorPalette = false;
         this.selectColor = async ($event) => {
             const selectedColor = $event.target.value;
-            this.colorHex = undefined;
-            this.colorRgb = undefined;
-            this.colorChange.emit({
+            const color = {
                 hex: selectedColor,
                 rgb: await this.hexToRgb(selectedColor)
-            });
+            };
+            this.colorHex = selectedColor;
+            this.colorChange.emit(color);
         };
         this.colorChange = core.createEvent(this, "colorChange", 7);
     }
+    async componentWillLoad() {
+        this.selectedColorHex = this.colorHex;
+        this.selectedColorRgb = this.colorRgb ? this.colorRgb : await this.hexToRgb(this.colorHex);
+        this.selectedColorPalette = await this.initSelectedColorPalette();
+    }
     async componentDidLoad() {
@@ -112,2 +118,20 @@ await this.colorPickerListener(true);
     }
+    async onColorHexChange() {
+        // To avoid quick repaint glitch
+        this.selectedColorPalette = true;
+        this.selectedColorHex = this.colorHex;
+        this.selectedColorRgb = await this.hexToRgb(this.colorHex);
+        this.selectedColorPalette = await this.initSelectedColorPalette();
+        // Render component again
+        this.palette = [...this.palette];
+    }
+    async onColorRgbChange() {
+        // To avoid quick repaint glitch
+        this.selectedColorPalette = true;
+        this.selectedColorHex = undefined;
+        this.selectedColorRgb = this.colorRgb;
+        this.selectedColorPalette = await this.initSelectedColorPalette();
+        // Render component again
+        this.palette = [...this.palette];
+    }
     pickColor(paletteColor) {
@@ -119,5 +143,6 @@ return new Promise((resolve) => {
             }
-            this.colorHex = paletteColor.color ? paletteColor.color.hex : undefined;
-            this.colorRgb = paletteColor.color ? paletteColor.color.rgb : undefined;
+            this.selectedColorHex = paletteColor.color ? paletteColor.color.hex : undefined;
+            this.selectedColorRgb = paletteColor.color ? paletteColor.color.rgb : undefined;
             this.colorChange.emit(paletteColor.color);
+            this.selectedColorPalette = true;
             resolve();
@@ -168,6 +193,6 @@ });
         }
-        if (!this.colorHex) {
+        if (!this.selectedColorHex) {
             return false;
         }
-        return this.colorHex.toUpperCase() === element.color.hex.toUpperCase();
+        return this.selectedColorHex.toUpperCase() === element.color.hex.toUpperCase();
     }
@@ -178,7 +203,19 @@ isRgbColorSelected(element) {
         }
-        if (!this.colorRgb) {
+        if (!this.selectedColorRgb) {
             return false;
         }
-        return this.colorRgb.toUpperCase() === element.color.rgb.toUpperCase();
+        return this.selectedColorRgb.replace(/\s/g, '').toUpperCase() === element.color.rgb.replace(/\s/g, '').toUpperCase();
     }
+    initSelectedColorPalette() {
+        return new Promise((resolve) => {
+            if (!this.palette || this.palette.length <= 0) {
+                resolve(false);
+                return;
+            }
+            const index = this.palette.findIndex((element) => {
+                return this.isHexColorSelected(element) || this.isRgbColorSelected(element);
+            });
+            resolve(index > -1);
+        });
+    }
     render() {
@@ -190,3 +227,3 @@ return core.h(core.Host, null, core.h("div", { class: "color-container" }, this.renderPalette(), this.renderMore()));
             return (this.palette.map((element) => {
-                let style = {
+                const style = {
                     '--deckdeckgo-palette-color-hex': `${element.color.hex}`,
@@ -204,3 +241,10 @@ '--deckdeckgo-palette-color-rgb': `${element.color.rgb}`
         if (this.more) {
-            return core.h("div", { class: "more" }, core.h("button", { "aria-label": this.more, onClick: () => this.openColorPicker() }, core.h("slot", { name: "more" })), core.h("input", { type: "color", name: "color-picker" }));
+            let style = {};
+            if (!this.selectedColorPalette && this.selectedColorHex) {
+                style['--deckdeckgo-palette-color-hex'] = this.selectedColorHex;
+            }
+            if (!this.selectedColorPalette && this.selectedColorRgb) {
+                style['--deckdeckgo-palette-color-rgb'] = this.selectedColorRgb;
+            }
+            return core.h("div", { class: "more" }, core.h("button", { "aria-label": this.more, style: style, class: !this.selectedColorPalette && (this.selectedColorHex || this.selectedColorRgb) ? 'selected' : undefined, onClick: () => this.openColorPicker() }, core.h("slot", { name: "more" })), core.h("input", { type: "color", name: "color-picker" }));
         }
@@ -212,5 +256,9 @@ else {
     get el() { return core.getElement(this); }
-    static get style() { return ":host{display:block}div.color-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:var(--deckgo-flex-wrap,wrap);flex-wrap:var(--deckgo-flex-wrap,wrap);overflow:auto}div.color-container button,div.color-container div.more{width:var(--deckgo-button-width,28px);min-width:var(--deckgo-button-width,28px);height:var(--deckgo-button-height,28px);min-height:var(--deckgo-button-height,28px);margin:var(--deckgo-button-margin,4px);padding:0;outline:var(--deckgo-button-outline,none);border:var(--deckgo-button-border,none)}div.color-container button{cursor:pointer;border-radius:var(--deckgo-button-border-radius,50%);background:var(--deckdeckgo-palette-color-hex)}div.color-container button.selected{-webkit-box-shadow:0 0 8px 4px rgba(var(--deckdeckgo-palette-color-rgb),.4);box-shadow:0 0 8px 4px rgba(var(--deckdeckgo-palette-color-rgb),.4)}div.color-container button:not(.selected):hover{-webkit-box-shadow:0 0 8px 2px rgba(var(--deckdeckgo-palette-color-rgb),.4);box-shadow:0 0 8px 2px rgba(var(--deckdeckgo-palette-color-rgb),.4)}div.color-container div.more{display:inline-block;position:relative;overflow:hidden}div.color-container div.more button,div.color-container div.more input{position:absolute}div.color-container div.more button{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);margin:0;border-radius:var(--deckgo-button-more-border-radius);border:var(--deckgo-button-more-border)}div.color-container div.more input{bottom:0;right:0;-webkit-transform:translate(100%,100%);transform:translate(100%,100%)}"; }
+    static get watchers() { return {
+        "colorHex": ["onColorHexChange"],
+        "colorRgb": ["onColorRgbChange"]
+    }; }
+    static get style() { return ":host{display:block}div.color-container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:var(--deckgo-flex-wrap,wrap);flex-wrap:var(--deckgo-flex-wrap,wrap);overflow:visible}div.color-container button,div.color-container div.more{width:var(--deckgo-button-width,28px);min-width:var(--deckgo-button-width,28px);height:var(--deckgo-button-height,28px);min-height:var(--deckgo-button-height,28px);margin:var(--deckgo-button-margin,4px);padding:0;outline:var(--deckgo-button-outline,none);border:var(--deckgo-button-border,none)}div.color-container button{cursor:pointer;border-radius:var(--deckgo-button-border-radius,50%);background:var(--deckdeckgo-palette-color-hex)}div.color-container button.selected{-webkit-box-shadow:0 0 8px 4px rgba(var(--deckdeckgo-palette-color-rgb),.4);box-shadow:0 0 8px 4px rgba(var(--deckdeckgo-palette-color-rgb),.4)}div.color-container button:not(.selected):hover{-webkit-box-shadow:0 0 8px 2px rgba(var(--deckdeckgo-palette-color-rgb),.4);box-shadow:0 0 8px 2px rgba(var(--deckdeckgo-palette-color-rgb),.4)}div.color-container div.more{display:inline-block;position:relative;outline:none;border:none}div.color-container div.more button,div.color-container div.more input{position:absolute}div.color-container div.more button{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);margin:0;border-radius:var(--deckgo-button-more-border-radius,50%);outline:var(--deckgo-button-more-outline,none);border:var(--deckgo-button-more-border,none);background:var(--deckgo-button-more-background,transparent)}div.color-container div.more input{bottom:0;right:0;width:1px;height:1px;visibility:hidden;opacity:0;-webkit-transform:translate(100%,100%);transform:translate(100%,100%)}"; }
 };
 
 exports.deckgo_color = DeckdeckgoColor;

dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ 'use strict';
 
-const core = require('./core-09379fe2.js');
+const core = require('./core-952db89c.js');
 
 const defineCustomElements = (win, options) => {
   return core.patchEsm().then(() => {
-    core.bootstrapLazy([["deckgo-color.cjs",[[1,"deckgo-color",{"palette":[1040],"more":[4],"moreAlt":[1,"more-alt"],"colorHex":[1025,"color-hex"],"colorRgb":[1025,"color-rgb"]}]]]], options);
+    core.bootstrapLazy([["deckgo-color.cjs",[[1,"deckgo-color",{"palette":[1040],"more":[4],"moreAlt":[1,"more-alt"],"colorHex":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"selectedColorHex":[32],"selectedColorRgb":[32],"selectedColorPalette":[32]}]]]], options);
   });
@@ -12,0 +12,0 @@ };

dist/collection/collection-manifest.json

@@ -7,4 +7,4 @@ {
     "name": "@stencil/core",
-    "version": "1.4.0",
-    "typescriptVersion": "3.6.2"
+    "version": "1.8.1",
+    "typescriptVersion": "3.7.2"
   },
@@ -11,0 +11,0 @@ "collections": [],

dist/collection/components/color/deckdeckgo-color.js

@@ -8,12 +8,18 @@ import { h, Host } from "@stencil/core";
         this.moreAlt = 'More';
+        this.selectedColorPalette = false;
         this.selectColor = async ($event) => {
             const selectedColor = $event.target.value;
-            this.colorHex = undefined;
-            this.colorRgb = undefined;
-            this.colorChange.emit({
+            const color = {
                 hex: selectedColor,
                 rgb: await this.hexToRgb(selectedColor)
-            });
+            };
+            this.colorHex = selectedColor;
+            this.colorChange.emit(color);
         };
     }
+    async componentWillLoad() {
+        this.selectedColorHex = this.colorHex;
+        this.selectedColorRgb = this.colorRgb ? this.colorRgb : await this.hexToRgb(this.colorHex);
+        this.selectedColorPalette = await this.initSelectedColorPalette();
+    }
     async componentDidLoad() {
@@ -25,2 +31,20 @@ await this.colorPickerListener(true);
     }
+    async onColorHexChange() {
+        // To avoid quick repaint glitch
+        this.selectedColorPalette = true;
+        this.selectedColorHex = this.colorHex;
+        this.selectedColorRgb = await this.hexToRgb(this.colorHex);
+        this.selectedColorPalette = await this.initSelectedColorPalette();
+        // Render component again
+        this.palette = [...this.palette];
+    }
+    async onColorRgbChange() {
+        // To avoid quick repaint glitch
+        this.selectedColorPalette = true;
+        this.selectedColorHex = undefined;
+        this.selectedColorRgb = this.colorRgb;
+        this.selectedColorPalette = await this.initSelectedColorPalette();
+        // Render component again
+        this.palette = [...this.palette];
+    }
     pickColor(paletteColor) {
@@ -32,5 +56,6 @@ return new Promise((resolve) => {
             }
-            this.colorHex = paletteColor.color ? paletteColor.color.hex : undefined;
-            this.colorRgb = paletteColor.color ? paletteColor.color.rgb : undefined;
+            this.selectedColorHex = paletteColor.color ? paletteColor.color.hex : undefined;
+            this.selectedColorRgb = paletteColor.color ? paletteColor.color.rgb : undefined;
             this.colorChange.emit(paletteColor.color);
+            this.selectedColorPalette = true;
             resolve();
@@ -81,6 +106,6 @@ });
         }
-        if (!this.colorHex) {
+        if (!this.selectedColorHex) {
             return false;
         }
-        return this.colorHex.toUpperCase() === element.color.hex.toUpperCase();
+        return this.selectedColorHex.toUpperCase() === element.color.hex.toUpperCase();
     }
@@ -91,7 +116,19 @@ isRgbColorSelected(element) {
         }
-        if (!this.colorRgb) {
+        if (!this.selectedColorRgb) {
             return false;
         }
-        return this.colorRgb.toUpperCase() === element.color.rgb.toUpperCase();
+        return this.selectedColorRgb.replace(/\s/g, '').toUpperCase() === element.color.rgb.replace(/\s/g, '').toUpperCase();
     }
+    initSelectedColorPalette() {
+        return new Promise((resolve) => {
+            if (!this.palette || this.palette.length <= 0) {
+                resolve(false);
+                return;
+            }
+            const index = this.palette.findIndex((element) => {
+                return this.isHexColorSelected(element) || this.isRgbColorSelected(element);
+            });
+            resolve(index > -1);
+        });
+    }
     render() {
@@ -106,3 +143,3 @@ return h(Host, null,
             return (this.palette.map((element) => {
-                let style = {
+                const style = {
                     '--deckdeckgo-palette-color-hex': `${element.color.hex}`,
@@ -120,4 +157,11 @@ '--deckdeckgo-palette-color-rgb': `${element.color.rgb}`
         if (this.more) {
+            let style = {};
+            if (!this.selectedColorPalette && this.selectedColorHex) {
+                style['--deckdeckgo-palette-color-hex'] = this.selectedColorHex;
+            }
+            if (!this.selectedColorPalette && this.selectedColorRgb) {
+                style['--deckdeckgo-palette-color-rgb'] = this.selectedColorRgb;
+            }
             return h("div", { class: "more" },
-                h("button", { "aria-label": this.more, onClick: () => this.openColorPicker() },
+                h("button", { "aria-label": this.more, style: style, class: !this.selectedColorPalette && (this.selectedColorHex || this.selectedColorRgb) ? 'selected' : undefined, onClick: () => this.openColorPicker() },
                     h("slot", { name: "more" })),
@@ -198,3 +242,3 @@ h("input", { type: "color", name: "color-picker" }));
             "type": "string",
-            "mutable": true,
+            "mutable": false,
             "complexType": {
@@ -216,3 +260,3 @@ "original": "string",
             "type": "string",
-            "mutable": true,
+            "mutable": false,
             "complexType": {
@@ -233,2 +277,7 @@ "original": "string",
     }; }
+    static get states() { return {
+        "selectedColorHex": {},
+        "selectedColorRgb": {},
+        "selectedColorPalette": {}
+    }; }
     static get events() { return [{
@@ -256,2 +305,9 @@ "method": "colorChange",
     static get elementRef() { return "el"; }
+    static get watchers() { return [{
+            "propName": "colorHex",
+            "methodName": "onColorHexChange"
+        }, {
+            "propName": "colorRgb",
+            "methodName": "onColorRgbChange"
+        }]; }
 }

dist/deckdeckgo-color.js

@@ -16,4 +16,5 @@
   scriptElm.src = url + '/deckdeckgo-color.esm.js';
+  warn.push(scriptElm.outerHTML);
+  scriptElm.setAttribute('data-stencil-namespace', 'deckdeckgo-color');
   doc.head.appendChild(scriptElm);
-  warn.push(scriptElm.outerHTML);
 
@@ -23,4 +24,5 @@ scriptElm = doc.createElement('script');
   scriptElm.src = url + '/deckdeckgo-color.js';
+  warn.push(scriptElm.outerHTML);
+  scriptElm.setAttribute('data-stencil-namespace', 'deckdeckgo-color');
   doc.head.appendChild(scriptElm);
-  warn.push(scriptElm.outerHTML);
 
@@ -27,0 +29,0 @@ console.warn(warn.join('\n'));

dist/deckdeckgo-color/deckdeckgo-color.esm.js

@@ -1,1 +0,1 @@
-import{p as o,b as r}from"./p-537bc065.js";o().then(o=>r([["p-7bi1fti6",[[1,"deckgo-color",{palette:[1040],more:[4],moreAlt:[1,"more-alt"],colorHex:[1025,"color-hex"],colorRgb:[1025,"color-rgb"]}]]]],o));
+import{p as o,b as e}from"./p-7b3bd42d.js";o().then(o=>e([["p-4qd0yn1t",[[1,"deckgo-color",{palette:[1040],more:[4],moreAlt:[1,"more-alt"],colorHex:[1,"color-hex"],colorRgb:[1,"color-rgb"],selectedColorHex:[32],selectedColorRgb:[32],selectedColorPalette:[32]}]]]],o));

dist/deckdeckgo-color/p-affe7c09.js

@@ -1,1 +0,12 @@
-const s=")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)",o=new RegExp("(-shadowcsshost"+s,"gim"),t=new RegExp("(-shadowcsscontext"+s,"gim"),n=new RegExp("(-shadowcssslotted"+s,"gim"),e=/-shadowcsshost-no-combinator([^\s]*)/,c=[/::shadow/g,/::content/g],r=/-shadowcsshost/gim,h=/:host/gim,a=/::slotted/gim,d=/:host-context/gim,g=/\/\*\s*[\s\S]*?\*\//g,i=/\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g,m=/(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g,l=/([{}])/g,u=(s,o)=>{const t=w(s);let n=0;return t.escapedString.replace(m,(...s)=>{const e=s[2];let c="",r=s[4],h="";r&&r.startsWith("{%BLOCK%")&&(c=t.blocks[n++],r=r.substring("%BLOCK%".length+1),h="{");const a=o({selector:e,content:c});return`${s[1]}${a.selector}${s[3]}${h}${a.content}${r}`})},w=s=>{const o=s.split(l),t=[],n=[];let e=0,c=[];for(let s=0;s<o.length;s++){const r=o[s];"}"===r&&e--,e>0?c.push(r):(c.length>0&&(n.push(c.join("")),t.push("%BLOCK%"),c=[]),t.push(r)),"{"===r&&e++}return c.length>0&&(n.push(c.join("")),t.push("%BLOCK%")),{escapedString:t.join(""),blocks:n}},p=(s,o,t)=>s.replace(o,(...s)=>{if(s[2]){const o=s[2].split(","),n=[];for(let e=0;e<o.length;e++){const c=o[e].trim();if(!c)break;n.push(t("-shadowcsshost-no-combinator",c,s[3]))}return n.join(",")}return"-shadowcsshost-no-combinator"+s[3]}),_=(s,o,t)=>s+o.replace("-shadowcsshost","")+t,$=(s,o,t)=>o.indexOf("-shadowcsshost")>-1?_(s,o,t):s+o+t+", "+o+" "+s+t,b=(s,o,t,n)=>u(s,s=>{let c=s.selector,h=s.content;return"@"!==s.selector[0]?c=((s,o,t,n)=>s.split(",").map(s=>n&&s.indexOf("."+n)>-1?s.trim():((s,o)=>!(s=>(s=s.replace(/\[/g,"\\[").replace(/\]/g,"\\]"),new RegExp("^("+s+")([>\\s~+[.,{:][\\s\\S]*)?$","m")))(o).test(s))(s,o)?((s,o,t)=>{const n="."+(o=o.replace(/\[is=([^\]]*)\]/g,(s,...o)=>o[0])),c=s=>{let c=s.trim();if(!c)return"";if(s.indexOf("-shadowcsshost-no-combinator")>-1)c=((s,o,t)=>{if(r.lastIndex=0,r.test(s)){const o=`.${t}`;return s.replace(e,(s,t)=>t.replace(/([^:]*)(:*)(.*)/,(s,t,n,e)=>t+o+n+e)).replace(r,o+" ")}return o+" "+s})(s,o,t);else{const o=s.replace(r,"");if(o.length>0){const s=o.match(/([^:]*)(:*)(.*)/);s&&(c=s[1]+n+s[2]+s[3])}}return c},h=(s=>{const o=[];let t,n=0;return{content:t=(s=s.replace(/(\[[^\]]*\])/g,(s,t)=>{const e=`__ph-${n}__`;return o.push(t),n++,e})).replace(/(:nth-[-\w]+)(\([^)]+\))/g,(s,t,e)=>{const c=`__ph-${n}__`;return o.push(e),n++,t+c}),placeholders:o}})(s);let a,d="",g=0;const i=/( |>|\+|~(?!=))\s*/g;let m=!((s=h.content).indexOf("-shadowcsshost-no-combinator")>-1);for(;null!==(a=i.exec(s));){const o=a[1],t=s.slice(g,a.index).trim();d+=`${(m=m||t.indexOf("-shadowcsshost-no-combinator")>-1)?c(t):t} ${o} `,g=i.lastIndex}const l=s.substring(g);return d+=(m=m||l.indexOf("-shadowcsshost-no-combinator")>-1)?c(l):l,((s,o)=>o.replace(/__ph-(\d+)__/g,(o,t)=>s[+t]))(h.placeholders,d)})(s,o,t).trim():s.trim()).join(", "))(s.selector,o,t,n):(s.selector.startsWith("@media")||s.selector.startsWith("@supports")||s.selector.startsWith("@page")||s.selector.startsWith("@document"))&&(h=b(s.content,o,t,n)),{selector:c.replace(/\s{2,}/g," ").trim(),content:h}}),f=(s,e,r)=>{const m=e+"-h",l=e+"-s",w=(s=>s.match(i)||[])(s);s=(s=>s.replace(g,""))(s);const f=[];if(r){const o=s=>{const o=`/*!@___${f.length}___*/`;return f.push({placeholder:o,comment:`/*!@${s.selector}*/`}),s.selector=o+s.selector,s};s=u(s,s=>"@"!==s.selector[0]?o(s):s.selector.startsWith("@media")||s.selector.startsWith("@supports")||s.selector.startsWith("@page")||s.selector.startsWith("@document")?(s.content=u(s.content,o),s):s)}const x=((s,e,r,g)=>(s=(s=>c.reduce((s,o)=>s.replace(o," "),s))(s=((s,o)=>s.replace(n,(...s)=>{if(s[2]){const t=s[2].trim();return"."+o+" > "+t+s[3]}return"-shadowcsshost-no-combinator"+s[3]}))(s=(s=>p(s,t,$))(s=(s=>p(s,o,_))(s=(s=>s=s.replace(d,"-shadowcsscontext").replace(h,"-shadowcsshost").replace(a,"-shadowcssslotted"))(s))),g)),e&&(s=b(s,e,r,g)),(s=(s=s.replace(/-shadowcsshost-no-combinator/g,`.${r}`)).replace(/>\s*\*\s+([^{, ]+)/gm," $1 ")).trim()))(s,e,m,l);return s=[x,...w].join("\n"),r&&f.forEach(({placeholder:o,comment:t})=>{s=s.replace(o,t)}),s};export{f as scopeCss};
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ *
+ * This file is a port of shadowCSS from webcomponents.js to TypeScript.
+ * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
+ * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
+ */
+const s=")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)",o=new RegExp("(-shadowcsshost"+s,"gim"),t=new RegExp("(-shadowcsscontext"+s,"gim"),n=new RegExp("(-shadowcssslotted"+s,"gim"),e=/-shadowcsshost-no-combinator([^\s]*)/,c=[/::shadow/g,/::content/g],r=/-shadowcsshost/gim,h=/:host/gim,a=/::slotted/gim,d=/:host-context/gim,g=/\/\*\s*[\s\S]*?\*\//g,i=/\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g,m=/(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g,l=/([{}])/g,u=(s,o)=>{const t=w(s);let n=0;return t.escapedString.replace(m,(...s)=>{const e=s[2];let c="",r=s[4],h="";r&&r.startsWith("{%BLOCK%")&&(c=t.blocks[n++],r=r.substring("%BLOCK%".length+1),h="{");const a=o({selector:e,content:c});return`${s[1]}${a.selector}${s[3]}${h}${a.content}${r}`})},w=s=>{const o=s.split(l),t=[],n=[];let e=0,c=[];for(let r=0;r<o.length;r++){const s=o[r];"}"===s&&e--,e>0?c.push(s):(c.length>0&&(n.push(c.join("")),t.push("%BLOCK%"),c=[]),t.push(s)),"{"===s&&e++}return c.length>0&&(n.push(c.join("")),t.push("%BLOCK%")),{escapedString:t.join(""),blocks:n}},p=(s,o,t)=>s.replace(o,(...s)=>{if(s[2]){const o=s[2].split(","),n=[];for(let e=0;e<o.length;e++){const c=o[e].trim();if(!c)break;n.push(t("-shadowcsshost-no-combinator",c,s[3]))}return n.join(",")}return"-shadowcsshost-no-combinator"+s[3]}),_=(s,o,t)=>s+o.replace("-shadowcsshost","")+t,$=(s,o,t)=>o.indexOf("-shadowcsshost")>-1?_(s,o,t):s+o+t+", "+o+" "+s+t,b=(s,o,t,n)=>u(s,s=>{let c=s.selector,h=s.content;return"@"!==s.selector[0]?c=((s,o,t,n)=>s.split(",").map(s=>n&&s.indexOf("."+n)>-1?s.trim():((s,o)=>!(s=>(s=s.replace(/\[/g,"\\[").replace(/\]/g,"\\]"),new RegExp("^("+s+")([>\\s~+[.,{:][\\s\\S]*)?$","m")))(o).test(s))(s,o)?((s,o,t)=>{const n="."+(o=o.replace(/\[is=([^\]]*)\]/g,(s,...o)=>o[0])),c=s=>{let c=s.trim();if(!c)return"";if(s.indexOf("-shadowcsshost-no-combinator")>-1)c=((s,o,t)=>{if(r.lastIndex=0,r.test(s)){const o=`.${t}`;return s.replace(e,(s,t)=>t.replace(/([^:]*)(:*)(.*)/,(s,t,n,e)=>t+o+n+e)).replace(r,o+" ")}return o+" "+s})(s,o,t);else{const o=s.replace(r,"");if(o.length>0){const s=o.match(/([^:]*)(:*)(.*)/);s&&(c=s[1]+n+s[2]+s[3])}}return c},h=(s=>{const o=[];let t,n=0;return{content:t=(s=s.replace(/(\[[^\]]*\])/g,(s,t)=>{const e=`__ph-${n}__`;return o.push(t),n++,e})).replace(/(:nth-[-\w]+)(\([^)]+\))/g,(s,t,e)=>{const c=`__ph-${n}__`;return o.push(e),n++,t+c}),placeholders:o}})(s);let a,d="",g=0;const i=/( |>|\+|~(?!=))\s*/g;let m=!((s=h.content).indexOf("-shadowcsshost-no-combinator")>-1);for(;null!==(a=i.exec(s));){const o=a[1],t=s.slice(g,a.index).trim();d+=`${(m=m||t.indexOf("-shadowcsshost-no-combinator")>-1)?c(t):t} ${o} `,g=i.lastIndex}const l=s.substring(g);return d+=(m=m||l.indexOf("-shadowcsshost-no-combinator")>-1)?c(l):l,((s,o)=>o.replace(/__ph-(\d+)__/g,(o,t)=>s[+t]))(h.placeholders,d)})(s,o,t).trim():s.trim()).join(", "))(s.selector,o,t,n):(s.selector.startsWith("@media")||s.selector.startsWith("@supports")||s.selector.startsWith("@page")||s.selector.startsWith("@document"))&&(h=b(s.content,o,t,n)),{selector:c.replace(/\s{2,}/g," ").trim(),content:h}}),f=(s,e,r)=>{const m=e+"-h",l=e+"-s",w=(s=>s.match(i)||[])(s);s=(s=>s.replace(g,""))(s);const f=[];if(r){const o=s=>{const o=`/*!@___${f.length}___*/`;return f.push({placeholder:o,comment:`/*!@${s.selector}*/`}),s.selector=o+s.selector,s};s=u(s,s=>"@"!==s.selector[0]?o(s):s.selector.startsWith("@media")||s.selector.startsWith("@supports")||s.selector.startsWith("@page")||s.selector.startsWith("@document")?(s.content=u(s.content,o),s):s)}const x=((s,e,r,g)=>(s=(s=>c.reduce((s,o)=>s.replace(o," "),s))(s=((s,o)=>s.replace(n,(...s)=>{if(s[2]){const t=s[2].trim();return"."+o+" > "+t+s[3]}return"-shadowcsshost-no-combinator"+s[3]}))(s=(s=>p(s,t,$))(s=(s=>p(s,o,_))(s=(s=>s=s.replace(d,"-shadowcsscontext").replace(h,"-shadowcsshost").replace(a,"-shadowcssslotted"))(s))),g)),e&&(s=b(s,e,r,g)),(s=(s=s.replace(/-shadowcsshost-no-combinator/g,`.${r}`)).replace(/>\s*\*\s+([^{, ]+)/gm," $1 ")).trim()))(s,e,m,l);return s=[x,...w].join("\n"),r&&f.forEach(({placeholder:o,comment:t})=>{s=s.replace(o,t)}),s};export{f as scopeCss};

dist/deckdeckgo-color/p-ed968002.system.js

@@ -1,1 +0,13 @@
-var __spreadArrays=this&&this.__spreadArrays||function(){for(var r=0,e=0,t=arguments.length;e<t;e++)r+=arguments[e].length;for(var n=Array(r),a=0,e=0;e<t;e++)for(var s=arguments[e],c=0,o=s.length;c<o;c++,a++)n[a]=s[c];return n};System.register([],(function(r){"use strict";return{execute:function(){var e=function(r){var e=[];var t=0;var n;r=r.replace(/(\[[^\]]*\])/g,(function(r,n){var a="__ph-"+t+"__";e.push(n);t++;return a}));n=r.replace(/(:nth-[-\w]+)(\([^)]+\))/g,(function(r,n,a){var s="__ph-"+t+"__";e.push(a);t++;return n+s}));var a={content:n,placeholders:e};return a};var t=function(r,e){return e.replace(/__ph-(\d+)__/g,(function(e,t){return r[+t]}))};var n="-shadowcsshost";var a="-shadowcssslotted";var s="-shadowcsscontext";var c=")(?:\\(("+"(?:\\([^)(]*\\)|[^)(]*)+?"+")\\))?([^,{]*)";var o=new RegExp("("+n+c,"gim");var i=new RegExp("("+s+c,"gim");var v=new RegExp("("+a+c,"gim");var u=n+"-no-combinator";var l=/-shadowcsshost-no-combinator([^\s]*)/;var f=[/::shadow/g,/::content/g];var p="([>\\s~+[.,{:][\\s\\S]*)?$";var h=/-shadowcsshost/gim;var g=/:host/gim;var d=/::slotted/gim;var m=/:host-context/gim;var _=/\/\*\s*[\s\S]*?\*\//g;var x=function(r){return r.replace(_,"")};var w=/\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;var W=function(r){return r.match(w)||[]};var b=/(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;var O=/([{}])/g;var j="{";var S="}";var y="%BLOCK%";var E=function(r,e){var t=R(r);var n=0;return t.escapedString.replace(b,(function(){var r=[];for(var a=0;a<arguments.length;a++){r[a]=arguments[a]}var s=r[2];var c="";var o=r[4];var i="";if(o&&o.startsWith("{"+y)){c=t.blocks[n++];o=o.substring(y.length+1);i="{"}var v={selector:s,content:c};var u=e(v);return""+r[1]+u.selector+r[3]+i+u.content+o}))};var R=function(r){var e=r.split(O);var t=[];var n=[];var a=0;var s=[];for(var c=0;c<e.length;c++){var o=e[c];if(o===S){a--}if(a>0){s.push(o)}else{if(s.length>0){n.push(s.join(""));t.push(y);s=[]}t.push(o)}if(o===j){a++}}if(s.length>0){n.push(s.join(""));t.push(y)}var i={escapedString:t.join(""),blocks:n};return i};var A=function(r){r=r.replace(m,s).replace(g,n).replace(d,a);return r};var k=function(r,e,t){return r.replace(e,(function(){var r=[];for(var e=0;e<arguments.length;e++){r[e]=arguments[e]}if(r[2]){var n=r[2].split(",");var a=[];for(var s=0;s<n.length;s++){var c=n[s].trim();if(!c)break;a.push(t(u,c,r[3]))}return a.join(",")}else{return u+r[3]}}))};var C=function(r,e,t){return r+e.replace(n,"")+t};var L=function(r){return k(r,o,C)};var B=function(r,e,t){if(e.indexOf(n)>-1){return C(r,e,t)}else{return r+e+t+", "+e+" "+r+t}};var I=function(r,e){var t=v;return r.replace(t,(function(){var r=[];for(var t=0;t<arguments.length;t++){r[t]=arguments[t]}if(r[2]){var n=r[2].trim();var a=r[3];var s="."+e+" > "+n+a;return s}else{return u+r[3]}}))};var K=function(r){return k(r,i,B)};var $=function(r){return f.reduce((function(r,e){return r.replace(e," ")}),r)};var M=function(r){var e=/\[/g;var t=/\]/g;r=r.replace(e,"\\[").replace(t,"\\]");return new RegExp("^("+r+")"+p,"m")};var U=function(r,e){var t=M(e);return!t.test(r)};var q=function(r,e,t){h.lastIndex=0;if(h.test(r)){var n="."+t;return r.replace(l,(function(r,e){return e.replace(/([^:]*)(:*)(.*)/,(function(r,e,t,a){return e+n+t+a}))})).replace(h,n+" ")}return e+" "+r};var z=function(r,n,a){var s=/\[is=([^\]]*)\]/g;n=n.replace(s,(function(r){var e=[];for(var t=1;t<arguments.length;t++){e[t-1]=arguments[t]}return e[0]}));var c="."+n;var o=function(r){var e=r.trim();if(!e){return""}if(r.indexOf(u)>-1){e=q(r,n,a)}else{var t=r.replace(h,"");if(t.length>0){var s=t.match(/([^:]*)(:*)(.*)/);if(s){e=s[1]+c+s[2]+s[3]}}}return e};var i=e(r);r=i.content;var v="";var l=0;var f;var p=/( |>|\+|~(?!=))\s*/g;var g=r.indexOf(u)>-1;var d=!g;while((f=p.exec(r))!==null){var m=f[1];var _=r.slice(l,f.index).trim();d=d||_.indexOf(u)>-1;var x=d?o(_):_;v+=x+" "+m+" ";l=p.lastIndex}var w=r.substring(l);d=d||w.indexOf(u)>-1;v+=d?o(w):w;return t(i.placeholders,v)};var D=function(r,e,t,n){return r.split(",").map((function(r){if(n&&r.indexOf("."+n)>-1){return r.trim()}if(U(r,e)){return z(r,e,t).trim()}else{return r.trim()}})).join(", ")};var F=function(r,e,t,n,a){return E(r,(function(r){var a=r.selector;var s=r.content;if(r.selector[0]!=="@"){a=D(r.selector,e,t,n)}else if(r.selector.startsWith("@media")||r.selector.startsWith("@supports")||r.selector.startsWith("@page")||r.selector.startsWith("@document")){s=F(r.content,e,t,n)}var c={selector:a.replace(/\s{2,}/g," ").trim(),content:s};return c}))};var G=function(r,e,t,n,a){r=A(r);r=L(r);r=K(r);r=I(r,n);r=$(r);if(e){r=F(r,e,t,n)}r=r.replace(/-shadowcsshost-no-combinator/g,"."+t);r=r.replace(/>\s*\*\s+([^{, ]+)/gm," $1 ");return r.trim()};var H=r("scopeCss",(function(r,e,t){var n=e+"-h";var a=e+"-s";var s=W(r);r=x(r);var c=[];if(t){var o=function(r){var e="/*!@___"+c.length+"___*/";var t="/*!@"+r.selector+"*/";c.push({placeholder:e,comment:t});r.selector=e+r.selector;return r};r=E(r,(function(r){if(r.selector[0]!=="@"){return o(r)}else if(r.selector.startsWith("@media")||r.selector.startsWith("@supports")||r.selector.startsWith("@page")||r.selector.startsWith("@document")){r.content=E(r.content,o);return r}return r}))}var i=G(r,e,n,a);r=__spreadArrays([i],s).join("\n");if(t){c.forEach((function(e){var t=e.placeholder,n=e.comment;r=r.replace(t,n)}))}return r}))}}}));
+var __spreadArrays=this&&this.__spreadArrays||function(){for(var r=0,e=0,t=arguments.length;e<t;e++)r+=arguments[e].length;for(var n=Array(r),a=0,e=0;e<t;e++)for(var s=arguments[e],c=0,o=s.length;c<o;c++,a++)n[a]=s[c];return n};System.register([],(function(r){"use strict";return{execute:function(){
+/**
+             * @license
+             * Copyright Google Inc. All Rights Reserved.
+             *
+             * Use of this source code is governed by an MIT-style license that can be
+             * found in the LICENSE file at https://angular.io/license
+             *
+             * This file is a port of shadowCSS from webcomponents.js to TypeScript.
+             * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
+             * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
+             */
+var e=function(r){var e=[];var t=0;var n;r=r.replace(/(\[[^\]]*\])/g,(function(r,n){var a="__ph-"+t+"__";e.push(n);t++;return a}));n=r.replace(/(:nth-[-\w]+)(\([^)]+\))/g,(function(r,n,a){var s="__ph-"+t+"__";e.push(a);t++;return n+s}));var a={content:n,placeholders:e};return a};var t=function(r,e){return e.replace(/__ph-(\d+)__/g,(function(e,t){return r[+t]}))};var n="-shadowcsshost";var a="-shadowcssslotted";var s="-shadowcsscontext";var c=")(?:\\(("+"(?:\\([^)(]*\\)|[^)(]*)+?"+")\\))?([^,{]*)";var o=new RegExp("("+n+c,"gim");var i=new RegExp("("+s+c,"gim");var v=new RegExp("("+a+c,"gim");var u=n+"-no-combinator";var l=/-shadowcsshost-no-combinator([^\s]*)/;var f=[/::shadow/g,/::content/g];var p="([>\\s~+[.,{:][\\s\\S]*)?$";var h=/-shadowcsshost/gim;var g=/:host/gim;var d=/::slotted/gim;var m=/:host-context/gim;var _=/\/\*\s*[\s\S]*?\*\//g;var x=function(r){return r.replace(_,"")};var w=/\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;var W=function(r){return r.match(w)||[]};var b=/(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;var O=/([{}])/g;var j="{";var S="}";var y="%BLOCK%";var E=function(r,e){var t=R(r);var n=0;return t.escapedString.replace(b,(function(){var r=[];for(var a=0;a<arguments.length;a++){r[a]=arguments[a]}var s=r[2];var c="";var o=r[4];var i="";if(o&&o.startsWith("{"+y)){c=t.blocks[n++];o=o.substring(y.length+1);i="{"}var v={selector:s,content:c};var u=e(v);return""+r[1]+u.selector+r[3]+i+u.content+o}))};var R=function(r){var e=r.split(O);var t=[];var n=[];var a=0;var s=[];for(var c=0;c<e.length;c++){var o=e[c];if(o===S){a--}if(a>0){s.push(o)}else{if(s.length>0){n.push(s.join(""));t.push(y);s=[]}t.push(o)}if(o===j){a++}}if(s.length>0){n.push(s.join(""));t.push(y)}var i={escapedString:t.join(""),blocks:n};return i};var A=function(r){r=r.replace(m,s).replace(g,n).replace(d,a);return r};var k=function(r,e,t){return r.replace(e,(function(){var r=[];for(var e=0;e<arguments.length;e++){r[e]=arguments[e]}if(r[2]){var n=r[2].split(",");var a=[];for(var s=0;s<n.length;s++){var c=n[s].trim();if(!c)break;a.push(t(u,c,r[3]))}return a.join(",")}else{return u+r[3]}}))};var C=function(r,e,t){return r+e.replace(n,"")+t};var L=function(r){return k(r,o,C)};var B=function(r,e,t){if(e.indexOf(n)>-1){return C(r,e,t)}else{return r+e+t+", "+e+" "+r+t}};var I=function(r,e){var t=v;return r.replace(t,(function(){var r=[];for(var t=0;t<arguments.length;t++){r[t]=arguments[t]}if(r[2]){var n=r[2].trim();var a=r[3];var s="."+e+" > "+n+a;return s}else{return u+r[3]}}))};var K=function(r){return k(r,i,B)};var $=function(r){return f.reduce((function(r,e){return r.replace(e," ")}),r)};var M=function(r){var e=/\[/g;var t=/\]/g;r=r.replace(e,"\\[").replace(t,"\\]");return new RegExp("^("+r+")"+p,"m")};var U=function(r,e){var t=M(e);return!t.test(r)};var q=function(r,e,t){h.lastIndex=0;if(h.test(r)){var n="."+t;return r.replace(l,(function(r,e){return e.replace(/([^:]*)(:*)(.*)/,(function(r,e,t,a){return e+n+t+a}))})).replace(h,n+" ")}return e+" "+r};var z=function(r,n,a){var s=/\[is=([^\]]*)\]/g;n=n.replace(s,(function(r){var e=[];for(var t=1;t<arguments.length;t++){e[t-1]=arguments[t]}return e[0]}));var c="."+n;var o=function(r){var e=r.trim();if(!e){return""}if(r.indexOf(u)>-1){e=q(r,n,a)}else{var t=r.replace(h,"");if(t.length>0){var s=t.match(/([^:]*)(:*)(.*)/);if(s){e=s[1]+c+s[2]+s[3]}}}return e};var i=e(r);r=i.content;var v="";var l=0;var f;var p=/( |>|\+|~(?!=))\s*/g;var g=r.indexOf(u)>-1;var d=!g;while((f=p.exec(r))!==null){var m=f[1];var _=r.slice(l,f.index).trim();d=d||_.indexOf(u)>-1;var x=d?o(_):_;v+=x+" "+m+" ";l=p.lastIndex}var w=r.substring(l);d=d||w.indexOf(u)>-1;v+=d?o(w):w;return t(i.placeholders,v)};var D=function(r,e,t,n){return r.split(",").map((function(r){if(n&&r.indexOf("."+n)>-1){return r.trim()}if(U(r,e)){return z(r,e,t).trim()}else{return r.trim()}})).join(", ")};var F=function(r,e,t,n,a){return E(r,(function(r){var a=r.selector;var s=r.content;if(r.selector[0]!=="@"){a=D(r.selector,e,t,n)}else if(r.selector.startsWith("@media")||r.selector.startsWith("@supports")||r.selector.startsWith("@page")||r.selector.startsWith("@document")){s=F(r.content,e,t,n)}var c={selector:a.replace(/\s{2,}/g," ").trim(),content:s};return c}))};var G=function(r,e,t,n,a){r=A(r);r=L(r);r=K(r);r=I(r,n);r=$(r);if(e){r=F(r,e,t,n)}r=r.replace(/-shadowcsshost-no-combinator/g,"."+t);r=r.replace(/>\s*\*\s+([^{, ]+)/gm," $1 ");return r.trim()};var H=r("scopeCss",(function(r,e,t){var n=e+"-h";var a=e+"-s";var s=W(r);r=x(r);var c=[];if(t){var o=function(r){var e="/*!@___"+c.length+"___*/";var t="/*!@"+r.selector+"*/";c.push({placeholder:e,comment:t});r.selector=e+r.selector;return r};r=E(r,(function(r){if(r.selector[0]!=="@"){return o(r)}else if(r.selector.startsWith("@media")||r.selector.startsWith("@supports")||r.selector.startsWith("@page")||r.selector.startsWith("@document")){r.content=E(r.content,o);return r}return r}))}var i=G(r,e,n,a);r=__spreadArrays([i],s).join("\n");if(t){c.forEach((function(e){var t=e.placeholder,n=e.comment;r=r.replace(t,n)}))}return r}))}}}));

dist/esm-es5/deckgo-color.entry.js

@@ -37,3 +37,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 };
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-957f2bbe.js';
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-72f5b133.js';
 var DEFAULT_PALETTE = [
@@ -125,12 +132,10 @@ {
         this.moreAlt = 'More';
+        this.selectedColorPalette = false;
         this.selectColor = function ($event) { return __awaiter(_this, void 0, void 0, function () {
-            var selectedColor, _a, _b, _c;
-            return __generator(this, function (_d) {
-                switch (_d.label) {
+            var selectedColor, color, _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
                         selectedColor = $event.target.value;
-                        this.colorHex = undefined;
-                        this.colorRgb = undefined;
-                        _b = (_a = this.colorChange).emit;
-                        _c = {
+                        _a = {
                             hex: selectedColor
@@ -140,4 +145,6 @@ };
                     case 1:
-                        _b.apply(_a, [(_c.rgb = _d.sent(),
-                                _c)]);
+                        color = (_a.rgb = _b.sent(),
+                            _a);
+                        this.colorHex = selectedColor;
+                        this.colorChange.emit(color);
                         return [2 /*return*/];
@@ -149,2 +156,28 @@ }
     }
+    class_1.prototype.componentWillLoad = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, _b, _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        this.selectedColorHex = this.colorHex;
+                        _a = this;
+                        if (!this.colorRgb) return [3 /*break*/, 1];
+                        _b = this.colorRgb;
+                        return [3 /*break*/, 3];
+                    case 1: return [4 /*yield*/, this.hexToRgb(this.colorHex)];
+                    case 2:
+                        _b = _d.sent();
+                        _d.label = 3;
+                    case 3:
+                        _a.selectedColorRgb = _b;
+                        _c = this;
+                        return [4 /*yield*/, this.initSelectedColorPalette()];
+                    case 4:
+                        _c.selectedColorPalette = _d.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     class_1.prototype.componentDidLoad = function () {
@@ -174,2 +207,47 @@ return __awaiter(this, void 0, void 0, function () {
     };
+    class_1.prototype.onColorHexChange = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        // To avoid quick repaint glitch
+                        this.selectedColorPalette = true;
+                        this.selectedColorHex = this.colorHex;
+                        _a = this;
+                        return [4 /*yield*/, this.hexToRgb(this.colorHex)];
+                    case 1:
+                        _a.selectedColorRgb = _c.sent();
+                        _b = this;
+                        return [4 /*yield*/, this.initSelectedColorPalette()];
+                    case 2:
+                        _b.selectedColorPalette = _c.sent();
+                        // Render component again
+                        this.palette = __spreadArrays(this.palette);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    class_1.prototype.onColorRgbChange = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        // To avoid quick repaint glitch
+                        this.selectedColorPalette = true;
+                        this.selectedColorHex = undefined;
+                        this.selectedColorRgb = this.colorRgb;
+                        _a = this;
+                        return [4 /*yield*/, this.initSelectedColorPalette()];
+                    case 1:
+                        _a.selectedColorPalette = _b.sent();
+                        // Render component again
+                        this.palette = __spreadArrays(this.palette);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     class_1.prototype.pickColor = function (paletteColor) {
@@ -182,5 +260,6 @@ var _this = this;
             }
-            _this.colorHex = paletteColor.color ? paletteColor.color.hex : undefined;
-            _this.colorRgb = paletteColor.color ? paletteColor.color.rgb : undefined;
+            _this.selectedColorHex = paletteColor.color ? paletteColor.color.hex : undefined;
+            _this.selectedColorRgb = paletteColor.color ? paletteColor.color.rgb : undefined;
             _this.colorChange.emit(paletteColor.color);
+            _this.selectedColorPalette = true;
             resolve();
@@ -237,6 +316,6 @@ });
         }
-        if (!this.colorHex) {
+        if (!this.selectedColorHex) {
             return false;
         }
-        return this.colorHex.toUpperCase() === element.color.hex.toUpperCase();
+        return this.selectedColorHex.toUpperCase() === element.color.hex.toUpperCase();
     };
@@ -247,7 +326,20 @@ class_1.prototype.isRgbColorSelected = function (element) {
         }
-        if (!this.colorRgb) {
+        if (!this.selectedColorRgb) {
             return false;
         }
-        return this.colorRgb.toUpperCase() === element.color.rgb.toUpperCase();
+        return this.selectedColorRgb.replace(/\s/g, '').toUpperCase() === element.color.rgb.replace(/\s/g, '').toUpperCase();
     };
+    class_1.prototype.initSelectedColorPalette = function () {
+        var _this = this;
+        return new Promise(function (resolve) {
+            if (!_this.palette || _this.palette.length <= 0) {
+                resolve(false);
+                return;
+            }
+            var index = _this.palette.findIndex(function (element) {
+                return _this.isHexColorSelected(element) || _this.isRgbColorSelected(element);
+            });
+            resolve(index > -1);
+        });
+    };
     class_1.prototype.render = function () {
@@ -274,3 +366,10 @@ return h(Host, null, h("div", { class: "color-container" }, this.renderPalette(), this.renderMore()));
         if (this.more) {
-            return h("div", { class: "more" }, h("button", { "aria-label": this.more, onClick: function () { return _this.openColorPicker(); } }, h("slot", { name: "more" })), h("input", { type: "color", name: "color-picker" }));
+            var style = {};
+            if (!this.selectedColorPalette && this.selectedColorHex) {
+                style['--deckdeckgo-palette-color-hex'] = this.selectedColorHex;
+            }
+            if (!this.selectedColorPalette && this.selectedColorRgb) {
+                style['--deckdeckgo-palette-color-rgb'] = this.selectedColorRgb;
+            }
+            return h("div", { class: "more" }, h("button", { "aria-label": this.more, style: style, class: !this.selectedColorPalette && (this.selectedColorHex || this.selectedColorRgb) ? 'selected' : undefined, onClick: function () { return _this.openColorPicker(); } }, h("slot", { name: "more" })), h("input", { type: "color", name: "color-picker" }));
         }
@@ -286,4 +385,14 @@ else {
     });
+    Object.defineProperty(class_1, "watchers", {
+        get: function () {
+            return {
+                "colorHex": ["onColorHexChange"],
+                "colorRgb": ["onColorRgbChange"]
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(class_1, "style", {
-        get: function () { return ":host{display:block}div.color-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:var(--deckgo-flex-wrap,wrap);flex-wrap:var(--deckgo-flex-wrap,wrap);overflow:auto}div.color-container button,div.color-container div.more{width:var(--deckgo-button-width,28px);min-width:var(--deckgo-button-width,28px);height:var(--deckgo-button-height,28px);min-height:var(--deckgo-button-height,28px);margin:var(--deckgo-button-margin,4px);padding:0;outline:var(--deckgo-button-outline,none);border:var(--deckgo-button-border,none)}div.color-container button{cursor:pointer;border-radius:var(--deckgo-button-border-radius,50%);background:var(--deckdeckgo-palette-color-hex)}div.color-container button.selected{-webkit-box-shadow:0 0 8px 4px rgba(var(--deckdeckgo-palette-color-rgb),.4);box-shadow:0 0 8px 4px rgba(var(--deckdeckgo-palette-color-rgb),.4)}div.color-container button:not(.selected):hover{-webkit-box-shadow:0 0 8px 2px rgba(var(--deckdeckgo-palette-color-rgb),.4);box-shadow:0 0 8px 2px rgba(var(--deckdeckgo-palette-color-rgb),.4)}div.color-container div.more{display:inline-block;position:relative;overflow:hidden}div.color-container div.more button,div.color-container div.more input{position:absolute}div.color-container div.more button{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);margin:0;border-radius:var(--deckgo-button-more-border-radius);border:var(--deckgo-button-more-border)}div.color-container div.more input{bottom:0;right:0;-webkit-transform:translate(100%,100%);transform:translate(100%,100%)}"; },
+        get: function () { return ":host{display:block}div.color-container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:var(--deckgo-flex-wrap,wrap);flex-wrap:var(--deckgo-flex-wrap,wrap);overflow:visible}div.color-container button,div.color-container div.more{width:var(--deckgo-button-width,28px);min-width:var(--deckgo-button-width,28px);height:var(--deckgo-button-height,28px);min-height:var(--deckgo-button-height,28px);margin:var(--deckgo-button-margin,4px);padding:0;outline:var(--deckgo-button-outline,none);border:var(--deckgo-button-border,none)}div.color-container button{cursor:pointer;border-radius:var(--deckgo-button-border-radius,50%);background:var(--deckdeckgo-palette-color-hex)}div.color-container button.selected{-webkit-box-shadow:0 0 8px 4px rgba(var(--deckdeckgo-palette-color-rgb),.4);box-shadow:0 0 8px 4px rgba(var(--deckdeckgo-palette-color-rgb),.4)}div.color-container button:not(.selected):hover{-webkit-box-shadow:0 0 8px 2px rgba(var(--deckdeckgo-palette-color-rgb),.4);box-shadow:0 0 8px 2px rgba(var(--deckdeckgo-palette-color-rgb),.4)}div.color-container div.more{display:inline-block;position:relative;outline:none;border:none}div.color-container div.more button,div.color-container div.more input{position:absolute}div.color-container div.more button{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);margin:0;border-radius:var(--deckgo-button-more-border-radius,50%);outline:var(--deckgo-button-more-outline,none);border:var(--deckgo-button-more-border,none);background:var(--deckgo-button-more-background,transparent)}div.color-container div.more input{bottom:0;right:0;width:1px;height:1px;visibility:hidden;opacity:0;-webkit-transform:translate(100%,100%);transform:translate(100%,100%)}"; },
         enumerable: true,
@@ -290,0 +399,0 @@ configurable: true

dist/esm/deckgo-color.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-957f2bbe.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-72f5b133.js';
 
@@ -89,13 +89,19 @@ const DEFAULT_PALETTE = [
         this.moreAlt = 'More';
+        this.selectedColorPalette = false;
         this.selectColor = async ($event) => {
             const selectedColor = $event.target.value;
-            this.colorHex = undefined;
-            this.colorRgb = undefined;
-            this.colorChange.emit({
+            const color = {
                 hex: selectedColor,
                 rgb: await this.hexToRgb(selectedColor)
-            });
+            };
+            this.colorHex = selectedColor;
+            this.colorChange.emit(color);
         };
         this.colorChange = createEvent(this, "colorChange", 7);
     }
+    async componentWillLoad() {
+        this.selectedColorHex = this.colorHex;
+        this.selectedColorRgb = this.colorRgb ? this.colorRgb : await this.hexToRgb(this.colorHex);
+        this.selectedColorPalette = await this.initSelectedColorPalette();
+    }
     async componentDidLoad() {
@@ -107,2 +113,20 @@ await this.colorPickerListener(true);
     }
+    async onColorHexChange() {
+        // To avoid quick repaint glitch
+        this.selectedColorPalette = true;
+        this.selectedColorHex = this.colorHex;
+        this.selectedColorRgb = await this.hexToRgb(this.colorHex);
+        this.selectedColorPalette = await this.initSelectedColorPalette();
+        // Render component again
+        this.palette = [...this.palette];
+    }
+    async onColorRgbChange() {
+        // To avoid quick repaint glitch
+        this.selectedColorPalette = true;
+        this.selectedColorHex = undefined;
+        this.selectedColorRgb = this.colorRgb;
+        this.selectedColorPalette = await this.initSelectedColorPalette();
+        // Render component again
+        this.palette = [...this.palette];
+    }
     pickColor(paletteColor) {
@@ -114,5 +138,6 @@ return new Promise((resolve) => {
             }
-            this.colorHex = paletteColor.color ? paletteColor.color.hex : undefined;
-            this.colorRgb = paletteColor.color ? paletteColor.color.rgb : undefined;
+            this.selectedColorHex = paletteColor.color ? paletteColor.color.hex : undefined;
+            this.selectedColorRgb = paletteColor.color ? paletteColor.color.rgb : undefined;
             this.colorChange.emit(paletteColor.color);
+            this.selectedColorPalette = true;
             resolve();
@@ -163,6 +188,6 @@ });
         }
-        if (!this.colorHex) {
+        if (!this.selectedColorHex) {
             return false;
         }
-        return this.colorHex.toUpperCase() === element.color.hex.toUpperCase();
+        return this.selectedColorHex.toUpperCase() === element.color.hex.toUpperCase();
     }
@@ -173,7 +198,19 @@ isRgbColorSelected(element) {
         }
-        if (!this.colorRgb) {
+        if (!this.selectedColorRgb) {
             return false;
         }
-        return this.colorRgb.toUpperCase() === element.color.rgb.toUpperCase();
+        return this.selectedColorRgb.replace(/\s/g, '').toUpperCase() === element.color.rgb.replace(/\s/g, '').toUpperCase();
     }
+    initSelectedColorPalette() {
+        return new Promise((resolve) => {
+            if (!this.palette || this.palette.length <= 0) {
+                resolve(false);
+                return;
+            }
+            const index = this.palette.findIndex((element) => {
+                return this.isHexColorSelected(element) || this.isRgbColorSelected(element);
+            });
+            resolve(index > -1);
+        });
+    }
     render() {
@@ -185,3 +222,3 @@ return h(Host, null, h("div", { class: "color-container" }, this.renderPalette(), this.renderMore()));
             return (this.palette.map((element) => {
-                let style = {
+                const style = {
                     '--deckdeckgo-palette-color-hex': `${element.color.hex}`,
@@ -199,3 +236,10 @@ '--deckdeckgo-palette-color-rgb': `${element.color.rgb}`
         if (this.more) {
-            return h("div", { class: "more" }, h("button", { "aria-label": this.more, onClick: () => this.openColorPicker() }, h("slot", { name: "more" })), h("input", { type: "color", name: "color-picker" }));
+            let style = {};
+            if (!this.selectedColorPalette && this.selectedColorHex) {
+                style['--deckdeckgo-palette-color-hex'] = this.selectedColorHex;
+            }
+            if (!this.selectedColorPalette && this.selectedColorRgb) {
+                style['--deckdeckgo-palette-color-rgb'] = this.selectedColorRgb;
+            }
+            return h("div", { class: "more" }, h("button", { "aria-label": this.more, style: style, class: !this.selectedColorPalette && (this.selectedColorHex || this.selectedColorRgb) ? 'selected' : undefined, onClick: () => this.openColorPicker() }, h("slot", { name: "more" })), h("input", { type: "color", name: "color-picker" }));
         }
@@ -207,5 +251,9 @@ else {
     get el() { return getElement(this); }
-    static get style() { return ":host{display:block}div.color-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:var(--deckgo-flex-wrap,wrap);flex-wrap:var(--deckgo-flex-wrap,wrap);overflow:auto}div.color-container button,div.color-container div.more{width:var(--deckgo-button-width,28px);min-width:var(--deckgo-button-width,28px);height:var(--deckgo-button-height,28px);min-height:var(--deckgo-button-height,28px);margin:var(--deckgo-button-margin,4px);padding:0;outline:var(--deckgo-button-outline,none);border:var(--deckgo-button-border,none)}div.color-container button{cursor:pointer;border-radius:var(--deckgo-button-border-radius,50%);background:var(--deckdeckgo-palette-color-hex)}div.color-container button.selected{-webkit-box-shadow:0 0 8px 4px rgba(var(--deckdeckgo-palette-color-rgb),.4);box-shadow:0 0 8px 4px rgba(var(--deckdeckgo-palette-color-rgb),.4)}div.color-container button:not(.selected):hover{-webkit-box-shadow:0 0 8px 2px rgba(var(--deckdeckgo-palette-color-rgb),.4);box-shadow:0 0 8px 2px rgba(var(--deckdeckgo-palette-color-rgb),.4)}div.color-container div.more{display:inline-block;position:relative;overflow:hidden}div.color-container div.more button,div.color-container div.more input{position:absolute}div.color-container div.more button{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);margin:0;border-radius:var(--deckgo-button-more-border-radius);border:var(--deckgo-button-more-border)}div.color-container div.more input{bottom:0;right:0;-webkit-transform:translate(100%,100%);transform:translate(100%,100%)}"; }
+    static get watchers() { return {
+        "colorHex": ["onColorHexChange"],
+        "colorRgb": ["onColorRgbChange"]
+    }; }
+    static get style() { return ":host{display:block}div.color-container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:var(--deckgo-flex-wrap,wrap);flex-wrap:var(--deckgo-flex-wrap,wrap);overflow:visible}div.color-container button,div.color-container div.more{width:var(--deckgo-button-width,28px);min-width:var(--deckgo-button-width,28px);height:var(--deckgo-button-height,28px);min-height:var(--deckgo-button-height,28px);margin:var(--deckgo-button-margin,4px);padding:0;outline:var(--deckgo-button-outline,none);border:var(--deckgo-button-border,none)}div.color-container button{cursor:pointer;border-radius:var(--deckgo-button-border-radius,50%);background:var(--deckdeckgo-palette-color-hex)}div.color-container button.selected{-webkit-box-shadow:0 0 8px 4px rgba(var(--deckdeckgo-palette-color-rgb),.4);box-shadow:0 0 8px 4px rgba(var(--deckdeckgo-palette-color-rgb),.4)}div.color-container button:not(.selected):hover{-webkit-box-shadow:0 0 8px 2px rgba(var(--deckdeckgo-palette-color-rgb),.4);box-shadow:0 0 8px 2px rgba(var(--deckdeckgo-palette-color-rgb),.4)}div.color-container div.more{display:inline-block;position:relative;outline:none;border:none}div.color-container div.more button,div.color-container div.more input{position:absolute}div.color-container div.more button{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);margin:0;border-radius:var(--deckgo-button-more-border-radius,50%);outline:var(--deckgo-button-more-outline,none);border:var(--deckgo-button-more-border,none);background:var(--deckgo-button-more-background,transparent)}div.color-container div.more input{bottom:0;right:0;width:1px;height:1px;visibility:hidden;opacity:0;-webkit-transform:translate(100%,100%);transform:translate(100%,100%)}"; }
 };
 
 export { DeckdeckgoColor as deckgo_color };

dist/esm/polyfills/css-shim.js

@@ -436,5 +436,9 @@ /*
 function addGlobalStyle(globalScopes, styleEl) {
-    var css = parseCSS(styleEl.innerHTML);
+    if (globalScopes.some(function (css) { return css.styleEl === styleEl; })) {
+        return false;
+    }
+    var css = parseCSS(styleEl.textContent);
     css.styleEl = styleEl;
     globalScopes.push(css);
+    return true;
 }
@@ -446,3 +450,3 @@ function updateGlobalScopes(scopes) {
         if (scope.usesCssVars) {
-            scope.styleEl.innerHTML = executeTemplate(scope.template, props);
+            scope.styleEl.textContent = executeTemplate(scope.template, props);
         }
@@ -475,5 +479,13 @@ });
 }
+function startWatcher(doc, globalScopes) {
+    var mutation = new MutationObserver(function () {
+        if (loadDocumentStyles(doc, globalScopes)) {
+            updateGlobalScopes(globalScopes);
+        }
+    });
+    mutation.observe(document.head, { childList: true });
+}
 function loadDocumentLinks(doc, globalScopes) {
     var promises = [];
-    var linkElms = doc.querySelectorAll('link[rel="stylesheet"][href]');
+    var linkElms = doc.querySelectorAll('link[rel="stylesheet"][href]:not([data-no-shim])');
     for (var i = 0; i < linkElms.length; i++) {
@@ -485,6 +497,6 @@ promises.push(addGlobalLink(doc, globalScopes, linkElms[i]));
 function loadDocumentStyles(doc, globalScopes) {
-    var styleElms = doc.querySelectorAll('style:not([data-styles])');
-    for (var i = 0; i < styleElms.length; i++) {
-        addGlobalStyle(globalScopes, styleElms[i]);
-    }
+    var styleElms = Array.from(doc.querySelectorAll('style:not([data-styles]):not([data-no-shim])'));
+    return styleElms
+        .map(function (style) { return addGlobalStyle(globalScopes, style); })
+        .some(Boolean);
 }
@@ -500,3 +512,3 @@ function addGlobalLink(doc, globalScopes, linkElm) {
             styleEl.setAttribute('data-styles', '');
-            styleEl.innerHTML = text;
+            styleEl.textContent = text;
             addGlobalStyle(globalScopes, styleEl);
@@ -525,3 +537,3 @@ linkElm.parentNode.insertBefore(styleEl, linkElm);
 // This regexp find all url() usages with relative urls
-var CSS_URL_REGEXP = /url[\s]*\([\s]*['"]?(?![http|/])([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;
+var CSS_URL_REGEXP = /url[\s]*\([\s]*['"]?(?!(?:https?|data)\:|\/)([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;
 function hasRelativeUrls(css) {
@@ -551,10 +563,18 @@ CSS_URL_REGEXP.lastIndex = 0;
         this.scopesMap = new Map();
+        this.didInit = false;
     }
     CustomStyle.prototype.initShim = function () {
         var _this = this;
-        return new Promise(function (resolve) {
-            _this.win.requestAnimationFrame(function () {
-                loadDocument(_this.doc, _this.globalScopes).then(function () { return resolve(); });
+        if (this.didInit) {
+            return Promise.resolve();
+        }
+        else {
+            this.didInit = true;
+            return new Promise(function (resolve) {
+                _this.win.requestAnimationFrame(function () {
+                    startWatcher(_this.doc, _this.globalScopes);
+                    loadDocument(_this.doc, _this.globalScopes).then(function () { return resolve(); });
+                });
             });
-        });
+        }
     };
@@ -568,4 +588,5 @@ CustomStyle.prototype.addLink = function (linkEl) {
     CustomStyle.prototype.addGlobalStyle = function (styleEl) {
-        addGlobalStyle(this.globalScopes, styleEl);
-        this.updateGlobal();
+        if (addGlobalStyle(this.globalScopes, styleEl)) {
+            this.updateGlobal();
+        }
     };
@@ -578,5 +599,6 @@ CustomStyle.prototype.createHostStyle = function (hostEl, cssScopeId, cssText, isScoped) {
         var styleEl = this.doc.createElement('style');
+        styleEl.setAttribute('data-no-shim', '');
         if (!baseScope.usesCssVars) {
             // This component does not use (read) css variables
-            styleEl.innerHTML = cssText;
+            styleEl.textContent = cssText;
         }
@@ -586,3 +608,3 @@ else if (isScoped) {
             styleEl['s-sc'] = cssScopeId = baseScope.scopeId + "-" + this.count;
-            styleEl.innerHTML = '/*needs update*/';
+            styleEl.textContent = '/*needs update*/';
             this.hostStyleMap.set(hostEl, styleEl);
@@ -596,3 +618,3 @@ this.hostScopeMap.set(hostEl, reScope(baseScope, cssScopeId));
             if (!baseScope.usesCssVars) {
-                styleEl.innerHTML = executeTemplate(baseScope.template, {});
+                styleEl.textContent = executeTemplate(baseScope.template, {});
             }
@@ -620,3 +642,3 @@ this.globalScopes.push(baseScope);
                 var props = resolveValues(selectors);
-                styleEl.innerHTML = executeTemplate(scope.template, props);
+                styleEl.textContent = executeTemplate(scope.template, props);
             }
@@ -623,0 +645,0 @@ }

dist/esm/polyfills/dom.js

 (function(){
   /*
-
     Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
@@ -97,5 +96,21 @@ This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 */
-(function(c){function d(a){a=b(a);return 11===a.nodeType?d(a.host):a}function b(a){return a.parentNode?b(a.parentNode):a}"function"!==typeof c.getRootNode&&(c.getRootNode=function(a){return a&&a.composed?d(this):b(this)})})(Element.prototype);
+(function(c){function d(a){a=b(a);return a&&11===a.nodeType?d(a.host):a}function b(a){return a&&a.parentNode?b(a.parentNode):a}"function"!==typeof c.getRootNode&&(c.getRootNode=function(a){return a&&a.composed?d(this):b(this)})})(Element.prototype);
 
 /*!
+Element.isConnected()
+*/
+(function(prototype) {
+  if (!("isConnected" in prototype)) {
+    Object.defineProperty(prototype, 'isConnected', {
+      configurable: true,
+      enumerable: true,
+      get: function() {
+        var root = this.getRootNode({composed: true});
+        return root && root.nodeType === 9;
+      }
+    })
+  }
+})(Element.prototype);
+
+/*!
 Element.remove()
@@ -109,1 +124,25 @@ */
 !function(e){'classList'in e||Object.defineProperty(e,"classList",{get:function(){var e=this,t=(e.getAttribute("class")||"").replace(/^\s+|\s$/g,"").split(/\s+/g);function n(){t.length>0?e.setAttribute("class",t.join(" ")):e.removeAttribute("class")}return""===t[0]&&t.splice(0,1),t.toggle=function(e,i){void 0!==i?i?t.add(e):t.remove(e):-1!==t.indexOf(e)?t.splice(t.indexOf(e),1):t.push(e),n()},t.add=function(){for(var e=[].slice.call(arguments),i=0,s=e.length;i<s;i++)-1===t.indexOf(e[i])&&t.push(e[i]);n()},t.remove=function(){for(var e=[].slice.call(arguments),i=0,s=e.length;i<s;i++)-1!==t.indexOf(e[i])&&t.splice(t.indexOf(e[i]),1);n()},t.item=function(e){return t[e]},t.contains=function(e){return-1!==t.indexOf(e)},t.replace=function(e,i){-1!==t.indexOf(e)&&t.splice(t.indexOf(e),1,i),n()},t.value=e.getAttribute("class")||"",t}})}(Element.prototype);
+
+/*!
+DOMTokenList
+*/
+(function(prototype){
+  try {
+    document.body.classList.add();
+  } catch (e) {
+    var originalAdd = prototype.add;
+    var originalRemove = prototype.remove;
+
+    prototype.add = function() {
+      for (var i = 0; i < arguments.length; i++) {
+        originalAdd.call(this, arguments[i]);
+      }
+    };
+
+    prototype.remove = function() {
+      for (var i = 0; i < arguments.length; i++) {
+        originalRemove.call(this, arguments[i]);
+      }
+    };
+  }
+}(DOMTokenList.prototype));

dist/esm/polyfills/index.js

@@ -31,6 +31,3 @@ export function applyPolyfills() {
   }
-  if (!(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'))) {
-    promises.push(import('./css-shim.js'));
-  }
   return Promise.all(promises);
 }

dist/types/components.d.ts

@@ -0,1 +1,2 @@
+/* eslint-disable */
 /* tslint:disable */
@@ -38,3 +39,3 @@ /**
 declare namespace LocalJSX {
-  interface DeckgoColor extends JSXBase.HTMLAttributes<HTMLDeckgoColorElement> {
+  interface DeckgoColor {
     'colorHex'?: string;
@@ -58,3 +59,5 @@ 'colorRgb'?: string;
   export namespace JSX {
-    interface IntrinsicElements extends LocalJSX.IntrinsicElements {}
+    interface IntrinsicElements {
+      'deckgo-color': LocalJSX.DeckgoColor & JSXBase.HTMLAttributes<HTMLDeckgoColorElement>;
+    }
   }
@@ -61,0 +64,0 @@ }

dist/types/components/color/deckdeckgo-color.d.ts

@@ -10,5 +10,11 @@ import { EventEmitter } from '../../stencil.core';
     colorRgb: string;
+    private selectedColorHex;
+    private selectedColorRgb;
+    private selectedColorPalette;
     colorChange: EventEmitter<DeckdeckgoPaletteColor>;
+    componentWillLoad(): Promise<void>;
     componentDidLoad(): Promise<void>;
     componentDidUnload(): Promise<void>;
+    onColorHexChange(): Promise<void>;
+    onColorRgbChange(): Promise<void>;
     private pickColor;
@@ -21,2 +27,3 @@ private openColorPicker;
     private isRgbColorSelected;
+    private initSelectedColorPalette;
     render(): any;
@@ -23,0 +30,0 @@ private renderPalette;

dist/types/stencil.core.d.ts

@@ -463,2 +463,3 @@ /**
     name?: string;
+    referrerPolicy?: ReferrerPolicy;
     sandbox?: string;
@@ -1314,10 +1315,10 @@ scrolling?: string;
 export interface VNode {
-  $tag$?: string | number | Function;
-  $key$?: string | number;
-  $text$?: string;
-  $children$?: VNode[];
+  $flags$: number;
+  $tag$: string | number | Function;
+  $elm$: any;
+  $text$: string;
+  $children$: VNode[];
   $attrs$?: any;
   $name$?: string;
-  $flags$: number;
-  $elm$?: any;
+  $key$?: string | number;
 }
@@ -1324,0 +1325,0 @@

package.json

 {
   "name": "@deckdeckgo/color",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.3",
   "description": "A color picker developed with Web Components",
@@ -26,6 +26,6 @@ "main": "dist/index.js",
   "devDependencies": {
-    "@stencil/core": "^1.4.0",
+    "@stencil/core": "^1.8.1",
     "@stencil/postcss": "^1.0.1",
-    "@stencil/sass": "^1.0.1",
-    "autoprefixer": "^9.6.1"
+    "@stencil/sass": "^1.1.1",
+    "autoprefixer": "^9.7.2"
   },
@@ -32,0 +32,0 @@ "license": "MIT",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

859144

increased by4.11%

Number of package files

70

increased by2.94%

Lines of code

14092

increased by6.76%

Worsened metrics

Number of medium supply chain risk alerts

11

increased by10%

No dependency changes