@deckdeckgo/color - npm Package Compare versions

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

CHANGELOG.md

@@ -0,1 +1,15 @@
+<a name="1.0.0-rc.3-1"></a>
+# 1.0.0-rc.3-1 (2019-11-19)
+
+### Fix
+
+* double bindings (like in studio)
+
+<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>
@@ -2,0 +16,0 @@ # 1.0.0-rc.2-3 (2019-10-19)

dist/cjs/deckdeckgo-color.cjs.js

 'use strict';
 
-const core = require('./core-4cb6ec5f.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":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"selectedColorHex":[32],"selectedColorRgb":[32]}]]]], 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],"selectedCustomColorRgb":[32]}]]]], options);
 });

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

@@ -5,4 +5,15 @@ 'use strict';
 
-const core = require('./core-4cb6ec5f.js');
+const core = require('./core-952db89c.js');
 
+function debounce(func, timeout) {
+    let timer;
+    return (...args) => {
+        const next = () => func(...args);
+        if (timer) {
+            clearTimeout(timer);
+        }
+        timer = setTimeout(next, timeout && timeout > 0 ? timeout : 300);
+    };
+}
+
 const DEFAULT_PALETTE = [
@@ -94,16 +105,26 @@ {
         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.selectedCustomColorRgb = await this.hexToRgb(this.colorHex);
+            this.colorChange.emit(color);
         };
+        this.debounceInitSelectedColorPalette = debounce(async () => {
+            this.selectedColorPalette = await this.initSelectedColorPalette();
+            this.selectedCustomColorRgb = !this.selectedColorPalette ? this.selectedColorRgb : undefined;
+        }, 150);
         this.colorChange = core.createEvent(this, "colorChange", 7);
     }
-    componentWillLoad() {
+    async componentWillLoad() {
         this.selectedColorHex = this.colorHex;
-        this.selectedColorRgb = this.colorRgb;
+        this.selectedColorRgb = this.colorRgb ? this.colorRgb : await this.hexToRgb(this.colorHex);
+        this.selectedColorPalette = await this.initSelectedColorPalette();
+        if (!this.selectedColorPalette) {
+            this.selectedCustomColorRgb = this.selectedColorRgb;
+        }
     }
@@ -116,11 +137,13 @@ async componentDidLoad() {
     }
-    onColorHexChange() {
+    async onColorHexChange() {
         this.selectedColorHex = this.colorHex;
         this.selectedColorRgb = undefined;
+        this.debounceInitSelectedColorPalette();
         // Render component again
         this.palette = [...this.palette];
     }
-    onColorRgbChange() {
+    async onColorRgbChange() {
         this.selectedColorHex = undefined;
         this.selectedColorRgb = this.colorRgb;
+        this.debounceInitSelectedColorPalette();
         // Render component again
@@ -138,2 +161,4 @@ this.palette = [...this.palette];
             this.colorChange.emit(paletteColor.color);
+            this.selectedColorPalette = true;
+            this.selectedCustomColorRgb = undefined;
             resolve();
@@ -198,2 +223,14 @@ });
     }
+    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() {
@@ -205,3 +242,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}`,
@@ -219,3 +256,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.selectedCustomColorRgb) {
+                style['--deckdeckgo-palette-color-rgb'] = this.selectedCustomColorRgb;
+            }
+            return core.h("div", { class: "more" }, core.h("button", { "aria-label": this.more, style: style, class: !this.selectedColorPalette && (this.selectedColorHex || this.selectedCustomColorRgb) ? 'selected' : undefined, onClick: () => this.openColorPicker() }, core.h("slot", { name: "more" })), core.h("input", { type: "color", name: "color-picker" }));
         }
@@ -231,5 +275,5 @@ else {
     }; }
-    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: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;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 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-4cb6ec5f.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":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"selectedColorHex":[32],"selectedColorRgb":[32]}]]]], 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],"selectedCustomColorRgb":[32]}]]]], options);
   });
@@ -12,0 +12,0 @@ };

dist/collection/collection-manifest.json

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

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

 import { h, Host } from "@stencil/core";
+import { debounce } from '@deckdeckgo/utils';
 import { DEFAULT_PALETTE } from '../utils/deckdeckgo-palette';
@@ -8,15 +9,25 @@ export class DeckdeckgoColor {
         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.selectedCustomColorRgb = await this.hexToRgb(this.colorHex);
+            this.colorChange.emit(color);
         };
+        this.debounceInitSelectedColorPalette = debounce(async () => {
+            this.selectedColorPalette = await this.initSelectedColorPalette();
+            this.selectedCustomColorRgb = !this.selectedColorPalette ? this.selectedColorRgb : undefined;
+        }, 150);
     }
-    componentWillLoad() {
+    async componentWillLoad() {
         this.selectedColorHex = this.colorHex;
-        this.selectedColorRgb = this.colorRgb;
+        this.selectedColorRgb = this.colorRgb ? this.colorRgb : await this.hexToRgb(this.colorHex);
+        this.selectedColorPalette = await this.initSelectedColorPalette();
+        if (!this.selectedColorPalette) {
+            this.selectedCustomColorRgb = this.selectedColorRgb;
+        }
     }
@@ -29,11 +40,13 @@ async componentDidLoad() {
     }
-    onColorHexChange() {
+    async onColorHexChange() {
         this.selectedColorHex = this.colorHex;
         this.selectedColorRgb = undefined;
+        this.debounceInitSelectedColorPalette();
         // Render component again
         this.palette = [...this.palette];
     }
-    onColorRgbChange() {
+    async onColorRgbChange() {
         this.selectedColorHex = undefined;
         this.selectedColorRgb = this.colorRgb;
+        this.debounceInitSelectedColorPalette();
         // Render component again
@@ -51,2 +64,4 @@ this.palette = [...this.palette];
             this.colorChange.emit(paletteColor.color);
+            this.selectedColorPalette = true;
+            this.selectedCustomColorRgb = undefined;
             resolve();
@@ -111,2 +126,14 @@ });
     }
+    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() {
@@ -121,3 +148,3 @@ return h(Host, null,
             return (this.palette.map((element) => {
-                let style = {
+                const style = {
                     '--deckdeckgo-palette-color-hex': `${element.color.hex}`,
@@ -135,4 +162,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.selectedCustomColorRgb) {
+                style['--deckdeckgo-palette-color-rgb'] = this.selectedCustomColorRgb;
+            }
             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.selectedCustomColorRgb) ? 'selected' : undefined, onClick: () => this.openColorPicker() },
                     h("slot", { name: "more" })),
@@ -248,3 +282,5 @@ h("input", { type: "color", name: "color-picker" }));
         "selectedColorHex": {},
-        "selectedColorRgb": {}
+        "selectedColorRgb": {},
+        "selectedColorPalette": {},
+        "selectedCustomColorRgb": {}
     }; }
@@ -251,0 +287,0 @@ static get events() { return [{

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

@@ -1,1 +0,1 @@
-import{p as o,b as e}from"./p-79437f2e.js";o().then(o=>e([["p-sxiwlzw3",[[1,"deckgo-color",{palette:[1040],more:[4],moreAlt:[1,"more-alt"],colorHex:[1,"color-hex"],colorRgb:[1,"color-rgb"],selectedColorHex:[32],selectedColorRgb:[32]}]]]],o));
+import{p as o,b as e}from"./p-7b3bd42d.js";o().then(o=>e([["p-ghdvfcbi",[[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],selectedCustomColorRgb:[32]}]]]],o));

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

@@ -44,3 +44,17 @@ 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-e44f4499.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-72f5b133.js';
+function debounce(func, timeout) {
+    var timer;
+    return function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        var next = function () { return func.apply(void 0, args); };
+        if (timer) {
+            clearTimeout(timer);
+        }
+        timer = setTimeout(next, timeout && timeout > 0 ? timeout : 300);
+    };
+}
 var DEFAULT_PALETTE = [
@@ -132,12 +146,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, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
                     case 0:
                         selectedColor = $event.target.value;
-                        this.colorHex = undefined;
-                        this.colorRgb = undefined;
-                        _b = (_a = this.colorChange).emit;
-                        _c = {
+                        _a = {
                             hex: selectedColor
@@ -147,4 +159,10 @@ };
                     case 1:
-                        _b.apply(_a, [(_c.rgb = _d.sent(),
-                                _c)]);
+                        color = (_a.rgb = _c.sent(),
+                            _a);
+                        this.colorHex = selectedColor;
+                        _b = this;
+                        return [4 /*yield*/, this.hexToRgb(this.colorHex)];
+                    case 2:
+                        _b.selectedCustomColorRgb = _c.sent();
+                        this.colorChange.emit(color);
                         return [2 /*return*/];
@@ -154,7 +172,46 @@ }
         }); };
+        this.debounceInitSelectedColorPalette = debounce(function () { return __awaiter(_this, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this;
+                        return [4 /*yield*/, this.initSelectedColorPalette()];
+                    case 1:
+                        _a.selectedColorPalette = _b.sent();
+                        this.selectedCustomColorRgb = !this.selectedColorPalette ? this.selectedColorRgb : undefined;
+                        return [2 /*return*/];
+                }
+            });
+        }); }, 150);
         this.colorChange = createEvent(this, "colorChange", 7);
     }
     class_1.prototype.componentWillLoad = function () {
-        this.selectedColorHex = this.colorHex;
-        this.selectedColorRgb = this.colorRgb;
+        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();
+                        if (!this.selectedColorPalette) {
+                            this.selectedCustomColorRgb = this.selectedColorRgb;
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
@@ -186,12 +243,24 @@ class_1.prototype.componentDidLoad = function () {
     class_1.prototype.onColorHexChange = function () {
-        this.selectedColorHex = this.colorHex;
-        this.selectedColorRgb = undefined;
-        // Render component again
-        this.palette = __spreadArrays(this.palette);
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                this.selectedColorHex = this.colorHex;
+                this.selectedColorRgb = undefined;
+                this.debounceInitSelectedColorPalette();
+                // Render component again
+                this.palette = __spreadArrays(this.palette);
+                return [2 /*return*/];
+            });
+        });
     };
     class_1.prototype.onColorRgbChange = function () {
-        this.selectedColorHex = undefined;
-        this.selectedColorRgb = this.colorRgb;
-        // Render component again
-        this.palette = __spreadArrays(this.palette);
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                this.selectedColorHex = undefined;
+                this.selectedColorRgb = this.colorRgb;
+                this.debounceInitSelectedColorPalette();
+                // Render component again
+                this.palette = __spreadArrays(this.palette);
+                return [2 /*return*/];
+            });
+        });
     };
@@ -208,2 +277,4 @@ class_1.prototype.pickColor = function (paletteColor) {
             _this.colorChange.emit(paletteColor.color);
+            _this.selectedColorPalette = true;
+            _this.selectedCustomColorRgb = undefined;
             resolve();
@@ -274,2 +345,15 @@ });
     };
+    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 () {
@@ -296,3 +380,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.selectedCustomColorRgb) {
+                style['--deckdeckgo-palette-color-rgb'] = this.selectedCustomColorRgb;
+            }
+            return h("div", { class: "more" }, h("button", { "aria-label": this.more, style: style, class: !this.selectedColorPalette && (this.selectedColorHex || this.selectedCustomColorRgb) ? 'selected' : undefined, onClick: function () { return _this.openColorPicker(); } }, h("slot", { name: "more" })), h("input", { type: "color", name: "color-picker" }));
         }
@@ -319,3 +410,3 @@ else {
     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: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;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,
@@ -322,0 +413,0 @@ configurable: true

dist/esm/deckgo-color.entry.js

@@ -1,3 +0,14 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-e44f4499.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-72f5b133.js';
 
+function debounce(func, timeout) {
+    let timer;
+    return (...args) => {
+        const next = () => func(...args);
+        if (timer) {
+            clearTimeout(timer);
+        }
+        timer = setTimeout(next, timeout && timeout > 0 ? timeout : 300);
+    };
+}
+
 const DEFAULT_PALETTE = [
@@ -89,16 +100,26 @@ {
         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.selectedCustomColorRgb = await this.hexToRgb(this.colorHex);
+            this.colorChange.emit(color);
         };
+        this.debounceInitSelectedColorPalette = debounce(async () => {
+            this.selectedColorPalette = await this.initSelectedColorPalette();
+            this.selectedCustomColorRgb = !this.selectedColorPalette ? this.selectedColorRgb : undefined;
+        }, 150);
         this.colorChange = createEvent(this, "colorChange", 7);
     }
-    componentWillLoad() {
+    async componentWillLoad() {
         this.selectedColorHex = this.colorHex;
-        this.selectedColorRgb = this.colorRgb;
+        this.selectedColorRgb = this.colorRgb ? this.colorRgb : await this.hexToRgb(this.colorHex);
+        this.selectedColorPalette = await this.initSelectedColorPalette();
+        if (!this.selectedColorPalette) {
+            this.selectedCustomColorRgb = this.selectedColorRgb;
+        }
     }
@@ -111,11 +132,13 @@ async componentDidLoad() {
     }
-    onColorHexChange() {
+    async onColorHexChange() {
         this.selectedColorHex = this.colorHex;
         this.selectedColorRgb = undefined;
+        this.debounceInitSelectedColorPalette();
         // Render component again
         this.palette = [...this.palette];
     }
-    onColorRgbChange() {
+    async onColorRgbChange() {
         this.selectedColorHex = undefined;
         this.selectedColorRgb = this.colorRgb;
+        this.debounceInitSelectedColorPalette();
         // Render component again
@@ -133,2 +156,4 @@ this.palette = [...this.palette];
             this.colorChange.emit(paletteColor.color);
+            this.selectedColorPalette = true;
+            this.selectedCustomColorRgb = undefined;
             resolve();
@@ -193,2 +218,14 @@ });
     }
+    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() {
@@ -200,3 +237,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}`,
@@ -214,3 +251,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.selectedCustomColorRgb) {
+                style['--deckdeckgo-palette-color-rgb'] = this.selectedCustomColorRgb;
+            }
+            return h("div", { class: "more" }, h("button", { "aria-label": this.more, style: style, class: !this.selectedColorPalette && (this.selectedColorHex || this.selectedCustomColorRgb) ? 'selected' : undefined, onClick: () => this.openColorPicker() }, h("slot", { name: "more" })), h("input", { type: "color", name: "color-picker" }));
         }
@@ -226,5 +270,5 @@ else {
     }; }
-    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: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;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 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/types/components.d.ts

@@ -29,3 +29,3 @@ /* eslint-disable */
   interface HTMLDeckgoColorElement extends Components.DeckgoColor, HTMLStencilElement {}
-  const HTMLDeckgoColorElement: {
+  var HTMLDeckgoColorElement: {
     prototype: HTMLDeckgoColorElement;
@@ -32,0 +32,0 @@ new (): HTMLDeckgoColorElement;

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

@@ -12,8 +12,12 @@ import { EventEmitter } from '../../stencil.core';
     private selectedColorRgb;
+    private selectedColorPalette;
+    private selectedCustomColorRgb;
     colorChange: EventEmitter<DeckdeckgoPaletteColor>;
-    componentWillLoad(): void;
+    private readonly debounceInitSelectedColorPalette;
+    constructor();
+    componentWillLoad(): Promise<void>;
     componentDidLoad(): Promise<void>;
     componentDidUnload(): Promise<void>;
-    onColorHexChange(): void;
-    onColorRgbChange(): void;
+    onColorHexChange(): Promise<void>;
+    onColorRgbChange(): Promise<void>;
     private pickColor;
@@ -26,2 +30,3 @@ private openColorPicker;
     private isRgbColorSelected;
+    private initSelectedColorPalette;
     render(): any;
@@ -28,0 +33,0 @@ private renderPalette;

dist/types/stencil.core.d.ts

@@ -463,2 +463,3 @@ /**
     name?: string;
+    referrerPolicy?: ReferrerPolicy;
     sandbox?: string;
@@ -465,0 +466,0 @@ scrolling?: string;

package.json

 {
   "name": "@deckdeckgo/color",
-  "version": "1.0.0-rc.2-3",
+  "version": "1.0.0-rc.3-1",
   "description": "A color picker developed with Web Components",
@@ -26,6 +26,6 @@ "main": "dist/index.js",
   "devDependencies": {
-    "@stencil/core": "^1.7.3",
+    "@stencil/core": "^1.8.1",
     "@stencil/postcss": "^1.0.1",
-    "@stencil/sass": "^1.0.1",
-    "autoprefixer": "^9.6.5"
+    "@stencil/sass": "^1.1.1",
+    "autoprefixer": "^9.7.2"
   },
@@ -55,3 +55,6 @@ "license": "MIT",
     "color-picker"
-  ]
+  ],
+  "dependencies": {
+    "@deckdeckgo/utils": "^1.0.0-rc.1-4"
+  }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

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

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Improved metrics

Total package byte prevSize

862630

increased by1.86%

Lines of code

14151

increased by1.7%

Number of medium supply chain risk alerts

10

decreased by-9.09%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Added@deckdeckgo/utils@^1.0.0-rc.1-4

• + Added@deckdeckgo/utils@1.8.1(transitive)