@deckdeckgo/color - npm Package Compare versions

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

CHANGELOG.md

@@ -0,1 +1,15 @@
+<a name="1.0.0-rc.2"></a>
+# 1.0.0-rc.2 (2019-09-29)
+
+### Features
+
+* add a new property `color-rgb` in case you rather like to highlight a rgb color rather than an hex one
+
+<a name="1.0.0-rc.1-1"></a>
+# 1.0.0-rc.1-1 (2019-09-21)
+
+### Features
+
+* improvements for mobile `@deckdeckgo/inline-editor`
+
 <a name="1.0.0-rc.1"></a>
@@ -2,0 +16,0 @@ # 1.0.0-rc.1 (2019-09-21)

dist/cjs/deckdeckgo-color.cjs.js

@@ -6,3 +6,3 @@ 'use strict';
 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"]}]]]], 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);
 });

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

@@ -96,2 +96,3 @@ 'use strict';
             this.colorHex = undefined;
+            this.colorRgb = undefined;
             this.colorChange.emit({
@@ -117,2 +118,3 @@ hex: selectedColor,
             this.colorHex = paletteColor.color ? paletteColor.color.hex : undefined;
+            this.colorRgb = paletteColor.color ? paletteColor.color.rgb : undefined;
             this.colorChange.emit(paletteColor.color);
@@ -169,2 +171,11 @@ resolve();
     }
+    isRgbColorSelected(element) {
+        if (!element || !element.color || !element.color.rgb) {
+            return false;
+        }
+        if (!this.colorRgb) {
+            return false;
+        }
+        return this.colorRgb.toUpperCase() === element.color.rgb.toUpperCase();
+    }
     render() {
@@ -180,3 +191,3 @@ return core.h(core.Host, null, core.h("div", { class: "color-container" }, this.renderPalette(), this.renderMore()));
                 };
-                return core.h("button", { "aria-label": element.alt, class: this.isHexColorSelected(element) ? 'selected' : undefined, style: style, onClick: () => this.pickColor(element) });
+                return core.h("button", { "aria-label": element.alt, class: this.isHexColorSelected(element) || this.isRgbColorSelected(element) ? 'selected' : undefined, style: style, onClick: () => this.pickColor(element) });
             }));
@@ -197,5 +208,5 @@ }
     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:wrap;flex-wrap:wrap}div.color-container button,div.color-container div.more{width:var(--deckgo-button-width,28px);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:-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%)}"; }
 };
 
 exports.deckgo_color = DeckdeckgoColor;

dist/cjs/loader.cjs.js

@@ -9,3 +9,3 @@ 'use strict';
   return core.patchEsm().then(() => {
-    core.bootstrapLazy([["deckgo-color.cjs",[[1,"deckgo-color",{"palette":[1040],"more":[4],"moreAlt":[1,"more-alt"],"colorHex":[1025,"color-hex"]}]]]], options);
+    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);
   });
@@ -12,0 +12,0 @@ };

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

@@ -11,2 +11,3 @@ import { h, Host } from "@stencil/core";
             this.colorHex = undefined;
+            this.colorRgb = undefined;
             this.colorChange.emit({
@@ -31,2 +32,3 @@ hex: selectedColor,
             this.colorHex = paletteColor.color ? paletteColor.color.hex : undefined;
+            this.colorRgb = paletteColor.color ? paletteColor.color.rgb : undefined;
             this.colorChange.emit(paletteColor.color);
@@ -83,2 +85,11 @@ resolve();
     }
+    isRgbColorSelected(element) {
+        if (!element || !element.color || !element.color.rgb) {
+            return false;
+        }
+        if (!this.colorRgb) {
+            return false;
+        }
+        return this.colorRgb.toUpperCase() === element.color.rgb.toUpperCase();
+    }
     render() {
@@ -97,3 +108,3 @@ return h(Host, null,
                 };
-                return h("button", { "aria-label": element.alt, class: this.isHexColorSelected(element) ? 'selected' : undefined, style: style, onClick: () => this.pickColor(element) });
+                return h("button", { "aria-label": element.alt, class: this.isHexColorSelected(element) || this.isRgbColorSelected(element) ? 'selected' : undefined, style: style, onClick: () => this.pickColor(element) });
             }));
@@ -198,2 +209,19 @@ }
             "reflect": false
+        },
+        "colorRgb": {
+            "type": "string",
+            "mutable": true,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "color-rgb",
+            "reflect": false
         }
@@ -200,0 +228,0 @@ }; }

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-ut9i4frr",[[1,"deckgo-color",{palette:[1040],more:[4],moreAlt:[1,"more-alt"],colorHex:[1025,"color-hex"]}]]]],o));
+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));

dist/deckdeckgo-color/p-09a57cb0.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-8ee87969.system.js"],(function(){"use strict";var e,t;return{setters:[function(r){e=r.p;t=r.b}],execute:function(){e().then((function(e){return t([["p-vjfqinlt.system",[[1,"deckgo-color",{palette:[1040],more:[4],moreAlt:[1,"more-alt"],colorHex:[1025,"color-hex"]}]]]],e)}))}}}));
+System.register(["./p-8ee87969.system.js"],(function(){"use strict";var e,t;return{setters:[function(o){e=o.p;t=o.b}],execute:function(){e().then((function(e){return t([["p-f4ietam6.system",[[1,"deckgo-color",{palette:[1040],more:[4],moreAlt:[1,"more-alt"],colorHex:[1025,"color-hex"],colorRgb:[1025,"color-rgb"]}]]]],e)}))}}}));

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

@@ -131,2 +131,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
                         this.colorHex = undefined;
+                        this.colorRgb = undefined;
                         _b = (_a = this.colorChange).emit;
@@ -178,2 +179,3 @@ _c = {
             _this.colorHex = paletteColor.color ? paletteColor.color.hex : undefined;
+            _this.colorRgb = paletteColor.color ? paletteColor.color.rgb : undefined;
             _this.colorChange.emit(paletteColor.color);
@@ -236,2 +238,11 @@ resolve();
     };
+    class_1.prototype.isRgbColorSelected = function (element) {
+        if (!element || !element.color || !element.color.rgb) {
+            return false;
+        }
+        if (!this.colorRgb) {
+            return false;
+        }
+        return this.colorRgb.toUpperCase() === element.color.rgb.toUpperCase();
+    };
     class_1.prototype.render = function () {
@@ -248,3 +259,3 @@ return h(Host, null, h("div", { class: "color-container" }, this.renderPalette(), this.renderMore()));
                 };
-                return h("button", { "aria-label": element.alt, class: _this.isHexColorSelected(element) ? 'selected' : undefined, style: style, onClick: function () { return _this.pickColor(element); } });
+                return h("button", { "aria-label": element.alt, class: _this.isHexColorSelected(element) || _this.isRgbColorSelected(element) ? 'selected' : undefined, style: style, onClick: function () { return _this.pickColor(element); } });
             }));
@@ -271,3 +282,3 @@ }
     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:wrap;flex-wrap:wrap}div.color-container button,div.color-container div.more{width:var(--deckgo-button-width,28px);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:-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%)}"; },
         enumerable: true,
@@ -274,0 +285,0 @@ configurable: true

dist/esm/deckgo-color.entry.js

@@ -92,2 +92,3 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-957f2bbe.js';
             this.colorHex = undefined;
+            this.colorRgb = undefined;
             this.colorChange.emit({
@@ -113,2 +114,3 @@ hex: selectedColor,
             this.colorHex = paletteColor.color ? paletteColor.color.hex : undefined;
+            this.colorRgb = paletteColor.color ? paletteColor.color.rgb : undefined;
             this.colorChange.emit(paletteColor.color);
@@ -165,2 +167,11 @@ resolve();
     }
+    isRgbColorSelected(element) {
+        if (!element || !element.color || !element.color.rgb) {
+            return false;
+        }
+        if (!this.colorRgb) {
+            return false;
+        }
+        return this.colorRgb.toUpperCase() === element.color.rgb.toUpperCase();
+    }
     render() {
@@ -176,3 +187,3 @@ return h(Host, null, h("div", { class: "color-container" }, this.renderPalette(), this.renderMore()));
                 };
-                return h("button", { "aria-label": element.alt, class: this.isHexColorSelected(element) ? 'selected' : undefined, style: style, onClick: () => this.pickColor(element) });
+                return h("button", { "aria-label": element.alt, class: this.isHexColorSelected(element) || this.isRgbColorSelected(element) ? 'selected' : undefined, style: style, onClick: () => this.pickColor(element) });
             }));
@@ -193,5 +204,5 @@ }
     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:wrap;flex-wrap:wrap}div.color-container button,div.color-container div.more{width:var(--deckgo-button-width,28px);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:-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%)}"; }
 };
 
 export { DeckdeckgoColor as deckgo_color };

dist/types/components.d.ts

@@ -17,2 +17,3 @@ /* tslint:disable */
     'colorHex': string;
+    'colorRgb': string;
     'more': boolean;
@@ -40,2 +41,3 @@ 'moreAlt': string;
     'colorHex'?: string;
+    'colorRgb'?: string;
     'more'?: boolean;
@@ -42,0 +44,0 @@ 'moreAlt'?: string;

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

@@ -9,2 +9,3 @@ import { EventEmitter } from '../../stencil.core';
     colorHex: string;
+    colorRgb: string;
     colorChange: EventEmitter<DeckdeckgoPaletteColor>;
@@ -19,2 +20,3 @@ componentDidLoad(): Promise<void>;
     private isHexColorSelected;
+    private isRgbColorSelected;
     render(): any;
@@ -21,0 +23,0 @@ private renderPalette;

package.json

 {
   "name": "@deckdeckgo/color",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.2",
   "description": "A color picker developed with Web Components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

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

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

825227

increased by0.53%

Lines of code

13200

increased by0.54%

No dependency changes