@charlietango/ddb-widget - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

dist/collection/collection-manifest.json

@@ -73,2 +73,7 @@ {
         {
+          "name": "isOpen",
+          "type": "Boolean",
+          "attr": "is-open"
+        },
+        {
           "name": "logo",
@@ -81,2 +86,5 @@ "attr": "logo"
           "name": "isExpanded"
+        },
+        {
+          "name": "isReady"
         }
@@ -83,0 +91,0 @@ ],

dist/collection/components/ddb-widget/ddb-widget.js

@@ -8,2 +8,8 @@ export class DdbWidget {
         };
+        this.handleOverlayClick = (event) => {
+            event.stopPropagation();
+            if (this.isOpen) {
+                this.isOpen = false;
+            }
+        };
     }
@@ -30,6 +36,7 @@ componentWillLoad() {
         const { links, color, logo } = this.widgetData;
-        return (h("div", { class: 'container' },
-            h("widget-window", { color: color, isOpen: this.isOpen },
-                h("link-list", { links: links, color: color })),
-            h("widget-launcher", { color: color, logo: logo, onClick: this.handleLauncherClick })));
+        return (h("div", { class: `overlay ${this.isOpen ? 'active' : ''}`, onClick: this.handleOverlayClick },
+            h("div", { class: 'container' },
+                h("widget-window", { color: color, isOpen: this.isOpen },
+                    h("link-list", { links: links, color: color })),
+                h("widget-launcher", { color: color, logo: logo, isOpen: this.isOpen, onClick: this.handleLauncherClick }))));
     }
@@ -36,0 +43,0 @@ static get is() { return "ddb-widget"; }

dist/collection/components/widget-launcher/widget-launcher.js

 export class WidgetLauncher {
     constructor() {
         this.isExpanded = false;
+        this.isReady = false;
+        this.initializeLauncher = () => {
+            const isFirstLoad = sessionStorage.getItem('isFirstLoad') !== 'false';
+            setTimeout(() => {
+                this.isReady = true;
+                if (isFirstLoad) {
+                    this.toggleLauncherExpansion();
+                    sessionStorage.setItem('isFirstLoad', 'false');
+                }
+            }, 500);
+        };
         this.toggleLauncherExpansion = () => {
@@ -14,8 +25,17 @@ setTimeout(() => {
     componentDidLoad() {
-        this.toggleLauncherExpansion();
+        this.initializeLauncher();
     }
     // todo: uses crappy mock logo .png
     render() {
-        return (h("div", { class: `container ${this.isExpanded ? 'expanded' : ''}`, style: { borderColor: this.color } },
-            h("img", { class: 'launcher-logo', src: 'https://image.ibb.co/kYAiRz/logo.png', alt: this.logo.alt || this.logo.src })));
+        return (h("div", { class: `container
+          ${this.isReady ? 'loaded' : ''}
+          ${this.isOpen ? 'open' : 'closed'}
+          ${this.isExpanded ? 'expanded' : ''}
+        `, style: {
+                borderColor: this.color,
+                backgroundColor: this.isOpen ? this.color : 'white'
+            } },
+            h("img", { class: 'launcher-logo', src: 'https://image.ibb.co/kYAiRz/logo.png', alt: this.logo.alt || this.logo.src }),
+            h("div", { class: 'close-button' }, "\u2715"),
+            h("div", { class: 'inner-circle' })));
     }
@@ -32,2 +52,9 @@ static get is() { return "widget-launcher"; }
         },
+        "isOpen": {
+            "type": Boolean,
+            "attr": "is-open"
+        },
+        "isReady": {
+            "state": true
+        },
         "logo": {
@@ -34,0 +61,0 @@ "type": "Any",

dist/ddb-widget.js

 /*!
  * Built with http://stenciljs.com
- * 2018-09-05T13:33:33
+ * 2018-09-06T13:34:59
  */
@@ -139,2 +139,2 @@ (function(win, doc, namespace, fsNamespace, resourcesUrl, appCore, appCoreSsr, appCorePolyfilled, hydratedCssClass, components) {
 
-  })(window, document, "DdbWidget","ddb-widget",0,"ddb-widget.core.js","es5-build-disabled.js","hydrated",[["ddb-widget","ddb-widget",1,[["isOpen",16],["widgetData",16]],1],["link-list","ddb-widget",1,[["color",1,0,1,2],["links",1]],1],["widget-launcher","ddb-widget",1,[["color",1,0,1,2],["isExpanded",16],["logo",1]],1],["widget-window","ddb-widget",1,[["color",1,0,1,2],["isOpen",1,0,"is-open",4]],1]],HTMLElement.prototype);
+  })(window, document, "DdbWidget","ddb-widget",0,"ddb-widget.core.js","es5-build-disabled.js","hydrated",[["ddb-widget","ddb-widget",1,[["isOpen",16],["widgetData",16]],1],["link-list","ddb-widget",1,[["color",1,0,1,2],["links",1]],1],["widget-launcher","ddb-widget",1,[["color",1,0,1,2],["isExpanded",16],["isOpen",1,0,"is-open",4],["isReady",16],["logo",1]],1],["widget-window","ddb-widget",1,[["color",1,0,1,2],["isOpen",1,0,"is-open",4]],1]],HTMLElement.prototype);

dist/ddb-widget/ddb-widget.entry.js

@@ -11,2 +11,8 @@ /*! Built with http://stenciljs.com */
         };
+        this.handleOverlayClick = (event) => {
+            event.stopPropagation();
+            if (this.isOpen) {
+                this.isOpen = false;
+            }
+        };
     }
@@ -33,6 +39,7 @@ componentWillLoad() {
         const { links, color, logo } = this.widgetData;
-        return (h("div", { class: 'container' },
-            h("widget-window", { color: color, isOpen: this.isOpen },
-                h("link-list", { links: links, color: color })),
-            h("widget-launcher", { color: color, logo: logo, onClick: this.handleLauncherClick })));
+        return (h("div", { class: `overlay ${this.isOpen ? 'active' : ''}`, onClick: this.handleOverlayClick },
+            h("div", { class: 'container' },
+                h("widget-window", { color: color, isOpen: this.isOpen },
+                    h("link-list", { links: links, color: color })),
+                h("widget-launcher", { color: color, logo: logo, isOpen: this.isOpen, onClick: this.handleLauncherClick }))));
     }
@@ -49,3 +56,3 @@ static get is() { return "ddb-widget"; }
     }; }
-    static get style() { return "/*! sanitize.css v5.0.0 | CC0 License | github.com/jonathantneal/sanitize.css */\n/* Document (https://html.spec.whatwg.org/multipage/semantics.html#semantics)\n   ========================================================================== */\n/**\n * 1. Remove repeating backgrounds in all browsers (opinionated).\n * 2. Add box sizing inheritence in all browsers (opinionated).\n */\n*,\n::before,\n::after {\n  background-repeat: no-repeat;\n  /* 1 */\n  -webkit-box-sizing: inherit;\n  box-sizing: inherit;\n  /* 2 */ }\n\n/**\n  * 1. Add text decoration inheritance in all browsers (opinionated).\n  * 2. Add vertical alignment inheritence in all browsers (opinionated).\n  */\n::before,\n::after {\n  text-decoration: inherit;\n  /* 1 */\n  vertical-align: inherit;\n  /* 2 */ }\n\n/**\n  * 1. Add the correct box sizing in Firefox.\n  * 2. Show the overflow in Edge and IE.\n  */\nhr {\n  -webkit-box-sizing: content-box;\n  box-sizing: content-box;\n  /* 1 */\n  height: 0;\n  /* 1 */\n  overflow: visible;\n  /* 2 */ }\n\n/* Text-level semantics (https://html.spec.whatwg.org/multipage/semantics.html#text-level-semantics)\n    ========================================================================== */\n/**\n  * 1. Remove the bottom border in Firefox 39-.\n  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n  */\nabbr[title] {\n  border-bottom: none;\n  /* 1 */\n  text-decoration: underline;\n  /* 2 */\n  -webkit-text-decoration: underline dotted;\n  text-decoration: underline dotted;\n  /* 2 */ }\n\n/**\n  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.\n  */\nb,\nstrong {\n  font-weight: inherit; }\n\n/**\n  * Add the correct font weight in Chrome, Edge, and Safari.\n  */\nstrong {\n  font-weight: bolder; }\n\n/* Embedded content (https://html.spec.whatwg.org/multipage/embedded-content.html#embedded-content)\n    ========================================================================== */\n/*\n  * Change the alignment on media elements in all browers (opinionated).\n  */\naudio,\ncanvas,\niframe,\nimg,\nsvg,\nvideo {\n  vertical-align: middle; }\n\n/**\n  * Remove the border on images inside links in IE 10-.\n  */\nimg {\n  border-style: none; }\n\n/**\n  * Change the fill color to match the text color in all browsers (opinionated).\n  * Block pointer-events on SVG, since i can cause issues\n  */\nsvg {\n  fill: currentColor;\n  pointer-events: none; }\n\n/**\n  * Hide the overflow in IE.\n  */\nsvg:not(:root) {\n  overflow: hidden; }\n\n/* Forms (https://html.spec.whatwg.org/multipage/forms.html#forms)\n    ========================================================================== */\n/**\n  * Remove the margin in Firefox and Safari.\n  */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  margin: 0; }\n\n/**\n  * Inherit styling in all browsers (opinionated).\n  */\nbutton,\ninput,\nselect,\ntextarea {\n  background-color: transparent;\n  color: inherit;\n  font-size: inherit;\n  line-height: inherit; }\n\n/**\n  * Show the overflow in IE.\n  * 1. Show the overflow in Edge.\n  */\nbutton,\ninput {\n  /* 1 */\n  overflow: visible; }\n\n/**\n  * Remove the inheritance of text transform in Edge, Firefox, and IE.\n  * 1. Remove the inheritance of text transform in Firefox.\n  */\nbutton,\nselect {\n  /* 1 */\n  text-transform: none; }\n\n/**\n  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n  *    controls in Android 4.\n  * 2. Correct the inability to style clickable types in iOS and Safari.\n  */\nbutton,\nhtml [type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button;\n  /* 2 */ }\n\n/**\n  * Remove the inner border and padding in Firefox.\n  */\nbutton::-moz-focus-inner,\n[type='button']::-moz-focus-inner,\n[type='reset']::-moz-focus-inner,\n[type='submit']::-moz-focus-inner {\n  border-style: none;\n  padding: 0; }\n\n/**\n  * Restore the focus styles unset by the previous rule.\n  */\nbutton:-moz-focusring,\n[type='button']:-moz-focusring,\n[type='reset']:-moz-focusring,\n[type='submit']:-moz-focusring {\n  outline: 1px dotted ButtonText; }\n\n/**\n  * 1. Correct the text wrapping in Edge and IE.\n  * 2. Correct the color inheritance from `fieldset` elements in IE.\n  * 3. Remove the padding so developers are not caught out when they zero out\n  *    `fieldset` elements in all browsers.\n  */\nlegend {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  /* 1 */\n  color: inherit;\n  /* 2 */\n  display: table;\n  /* 1 */\n  max-width: 100%;\n  /* 1 */\n  padding: 0;\n  /* 3 */\n  white-space: normal;\n  /* 1 */ }\n\n/**\n  * 1. Remove the default vertical scrollbar in IE.\n  * 2. Change the resize direction on textareas in all browsers (opinionated).\n  */\ntextarea {\n  overflow: auto;\n  /* 1 */\n  resize: vertical;\n  /* 2 */ }\n\n/**\n  * 1. Add the correct box sizing in IE 10-.\n  * 2. Remove the padding in IE 10-.\n  */\n[type='checkbox'],\n[type='radio'] {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  /* 1 */\n  padding: 0;\n  /* 2 */ }\n\n/**\n  * Correct the cursor style of increment and decrement buttons in Chrome.\n  */\n[type='number']::-webkit-inner-spin-button,\n[type='number']::-webkit-outer-spin-button {\n  height: auto; }\n\n/**\n  * 1. Correct the odd appearance in Chrome and Safari.\n  * 2. Correct the outline style in Safari.\n  */\n[type='search'] {\n  -webkit-appearance: textfield;\n  /* 1 */\n  outline-offset: -2px;\n  /* 2 */ }\n\n/**\n  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.\n  */\n[type='search']::-webkit-search-cancel-button,\n[type='search']::-webkit-search-decoration {\n  -webkit-appearance: none; }\n\n/**\n  * 1. Correct the inability to style clickable types in iOS and Safari.\n  * 2. Change font properties to `inherit` in Safari.\n  */\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  /* 1 */\n  font: inherit;\n  /* 2 */ }\n\n/* Interactive elements (https://html.spec.whatwg.org/multipage/forms.html#interactive-elements)\n    ========================================================================== */\n/*\n  * Add the correct display in IE 9-.\n  * 1. Add the correct display in Edge, IE, and Firefox.\n  */\ndetails,\nmenu {\n  display: block; }\n\n/*\n  * Add the correct display in all browsers.\n  */\nsummary {\n  display: list-item; }\n\n/* User interaction (https://html.spec.whatwg.org/multipage/interaction.html#editing)\n    ========================================================================== */\n/*\n  * Remove the tapping delay on clickable elements (opinionated).\n  * 1. Remove the tapping delay in IE 10.\n  */\na,\narea,\nbutton,\ninput,\nlabel,\nselect,\nsummary,\ntextarea,\n[tabindex] {\n  -ms-touch-action: manipulation;\n  /* 1 */\n  touch-action: manipulation; }\n\n/**\n  * Add the correct display in IE 10-.\n  */\n[hidden] {\n  display: none; }\n\n/* ARIA (https://w3c.github.io/html-aria/)\n    ========================================================================== */\n/**\n  * Change the cursor on busy elements (opinionated).\n  */\n[aria-busy='true'] {\n  cursor: progress; }\n\n/*\n  * Change the cursor on control elements (opinionated).\n  */\n[aria-controls] {\n  cursor: pointer; }\n\n/*\n  * Change the display on visually hidden accessible elements (opinionated).\n  */\n[aria-hidden='false'][hidden]:not(:focus) {\n  clip: rect(0, 0, 0, 0);\n  display: inherit;\n  position: absolute; }\n\n/*\n  * Change the cursor on disabled, not-editable, or otherwise\n  * inoperable elements (opinionated).\n  */\n[aria-disabled] {\n  cursor: default; }\n\n.container {\n  position: fixed;\n  bottom: 30px;\n  left: 30px; }"; }
+    static get style() { return "/*! sanitize.css v5.0.0 | CC0 License | github.com/jonathantneal/sanitize.css */\n/* Document (https://html.spec.whatwg.org/multipage/semantics.html#semantics)\n   ========================================================================== */\n/**\n * 1. Remove repeating backgrounds in all browsers (opinionated).\n * 2. Add box sizing inheritence in all browsers (opinionated).\n */\n*,\n::before,\n::after {\n  background-repeat: no-repeat;\n  /* 1 */\n  -webkit-box-sizing: inherit;\n  box-sizing: inherit;\n  /* 2 */ }\n\n/**\n  * 1. Add text decoration inheritance in all browsers (opinionated).\n  * 2. Add vertical alignment inheritence in all browsers (opinionated).\n  */\n::before,\n::after {\n  text-decoration: inherit;\n  /* 1 */\n  vertical-align: inherit;\n  /* 2 */ }\n\n/**\n  * 1. Add the correct box sizing in Firefox.\n  * 2. Show the overflow in Edge and IE.\n  */\nhr {\n  -webkit-box-sizing: content-box;\n  box-sizing: content-box;\n  /* 1 */\n  height: 0;\n  /* 1 */\n  overflow: visible;\n  /* 2 */ }\n\n/* Text-level semantics (https://html.spec.whatwg.org/multipage/semantics.html#text-level-semantics)\n    ========================================================================== */\n/**\n  * 1. Remove the bottom border in Firefox 39-.\n  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n  */\nabbr[title] {\n  border-bottom: none;\n  /* 1 */\n  text-decoration: underline;\n  /* 2 */\n  -webkit-text-decoration: underline dotted;\n  text-decoration: underline dotted;\n  /* 2 */ }\n\n/**\n  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.\n  */\nb,\nstrong {\n  font-weight: inherit; }\n\n/**\n  * Add the correct font weight in Chrome, Edge, and Safari.\n  */\nstrong {\n  font-weight: bolder; }\n\n/* Embedded content (https://html.spec.whatwg.org/multipage/embedded-content.html#embedded-content)\n    ========================================================================== */\n/*\n  * Change the alignment on media elements in all browers (opinionated).\n  */\naudio,\ncanvas,\niframe,\nimg,\nsvg,\nvideo {\n  vertical-align: middle; }\n\n/**\n  * Remove the border on images inside links in IE 10-.\n  */\nimg {\n  border-style: none; }\n\n/**\n  * Change the fill color to match the text color in all browsers (opinionated).\n  * Block pointer-events on SVG, since i can cause issues\n  */\nsvg {\n  fill: currentColor;\n  pointer-events: none; }\n\n/**\n  * Hide the overflow in IE.\n  */\nsvg:not(:root) {\n  overflow: hidden; }\n\n/* Forms (https://html.spec.whatwg.org/multipage/forms.html#forms)\n    ========================================================================== */\n/**\n  * Remove the margin in Firefox and Safari.\n  */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  margin: 0; }\n\n/**\n  * Inherit styling in all browsers (opinionated).\n  */\nbutton,\ninput,\nselect,\ntextarea {\n  background-color: transparent;\n  color: inherit;\n  font-size: inherit;\n  line-height: inherit; }\n\n/**\n  * Show the overflow in IE.\n  * 1. Show the overflow in Edge.\n  */\nbutton,\ninput {\n  /* 1 */\n  overflow: visible; }\n\n/**\n  * Remove the inheritance of text transform in Edge, Firefox, and IE.\n  * 1. Remove the inheritance of text transform in Firefox.\n  */\nbutton,\nselect {\n  /* 1 */\n  text-transform: none; }\n\n/**\n  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n  *    controls in Android 4.\n  * 2. Correct the inability to style clickable types in iOS and Safari.\n  */\nbutton,\nhtml [type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button;\n  /* 2 */ }\n\n/**\n  * Remove the inner border and padding in Firefox.\n  */\nbutton::-moz-focus-inner,\n[type='button']::-moz-focus-inner,\n[type='reset']::-moz-focus-inner,\n[type='submit']::-moz-focus-inner {\n  border-style: none;\n  padding: 0; }\n\n/**\n  * Restore the focus styles unset by the previous rule.\n  */\nbutton:-moz-focusring,\n[type='button']:-moz-focusring,\n[type='reset']:-moz-focusring,\n[type='submit']:-moz-focusring {\n  outline: 1px dotted ButtonText; }\n\n/**\n  * 1. Correct the text wrapping in Edge and IE.\n  * 2. Correct the color inheritance from `fieldset` elements in IE.\n  * 3. Remove the padding so developers are not caught out when they zero out\n  *    `fieldset` elements in all browsers.\n  */\nlegend {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  /* 1 */\n  color: inherit;\n  /* 2 */\n  display: table;\n  /* 1 */\n  max-width: 100%;\n  /* 1 */\n  padding: 0;\n  /* 3 */\n  white-space: normal;\n  /* 1 */ }\n\n/**\n  * 1. Remove the default vertical scrollbar in IE.\n  * 2. Change the resize direction on textareas in all browsers (opinionated).\n  */\ntextarea {\n  overflow: auto;\n  /* 1 */\n  resize: vertical;\n  /* 2 */ }\n\n/**\n  * 1. Add the correct box sizing in IE 10-.\n  * 2. Remove the padding in IE 10-.\n  */\n[type='checkbox'],\n[type='radio'] {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  /* 1 */\n  padding: 0;\n  /* 2 */ }\n\n/**\n  * Correct the cursor style of increment and decrement buttons in Chrome.\n  */\n[type='number']::-webkit-inner-spin-button,\n[type='number']::-webkit-outer-spin-button {\n  height: auto; }\n\n/**\n  * 1. Correct the odd appearance in Chrome and Safari.\n  * 2. Correct the outline style in Safari.\n  */\n[type='search'] {\n  -webkit-appearance: textfield;\n  /* 1 */\n  outline-offset: -2px;\n  /* 2 */ }\n\n/**\n  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.\n  */\n[type='search']::-webkit-search-cancel-button,\n[type='search']::-webkit-search-decoration {\n  -webkit-appearance: none; }\n\n/**\n  * 1. Correct the inability to style clickable types in iOS and Safari.\n  * 2. Change font properties to `inherit` in Safari.\n  */\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  /* 1 */\n  font: inherit;\n  /* 2 */ }\n\n/* Interactive elements (https://html.spec.whatwg.org/multipage/forms.html#interactive-elements)\n    ========================================================================== */\n/*\n  * Add the correct display in IE 9-.\n  * 1. Add the correct display in Edge, IE, and Firefox.\n  */\ndetails,\nmenu {\n  display: block; }\n\n/*\n  * Add the correct display in all browsers.\n  */\nsummary {\n  display: list-item; }\n\n/* User interaction (https://html.spec.whatwg.org/multipage/interaction.html#editing)\n    ========================================================================== */\n/*\n  * Remove the tapping delay on clickable elements (opinionated).\n  * 1. Remove the tapping delay in IE 10.\n  */\na,\narea,\nbutton,\ninput,\nlabel,\nselect,\nsummary,\ntextarea,\n[tabindex] {\n  -ms-touch-action: manipulation;\n  /* 1 */\n  touch-action: manipulation; }\n\n/**\n  * Add the correct display in IE 10-.\n  */\n[hidden] {\n  display: none; }\n\n/* ARIA (https://w3c.github.io/html-aria/)\n    ========================================================================== */\n/**\n  * Change the cursor on busy elements (opinionated).\n  */\n[aria-busy='true'] {\n  cursor: progress; }\n\n/*\n  * Change the cursor on control elements (opinionated).\n  */\n[aria-controls] {\n  cursor: pointer; }\n\n/*\n  * Change the display on visually hidden accessible elements (opinionated).\n  */\n[aria-hidden='false'][hidden]:not(:focus) {\n  clip: rect(0, 0, 0, 0);\n  display: inherit;\n  position: absolute; }\n\n/*\n  * Change the cursor on disabled, not-editable, or otherwise\n  * inoperable elements (opinionated).\n  */\n[aria-disabled] {\n  cursor: default; }\n\n.container {\n  position: fixed;\n  bottom: 30px;\n  left: 30px; }\n\n.overlay {\n  position: static;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0; }\n  .overlay.active {\n    position: fixed; }"; }
 }
@@ -76,2 +83,13 @@
         this.isExpanded = false;
+        this.isReady = false;
+        this.initializeLauncher = () => {
+            const isFirstLoad = sessionStorage.getItem('isFirstLoad') !== 'false';
+            setTimeout(() => {
+                this.isReady = true;
+                if (isFirstLoad) {
+                    this.toggleLauncherExpansion();
+                    sessionStorage.setItem('isFirstLoad', 'false');
+                }
+            }, 500);
+        };
         this.toggleLauncherExpansion = () => {
@@ -87,8 +105,17 @@ setTimeout(() => {
     componentDidLoad() {
-        this.toggleLauncherExpansion();
+        this.initializeLauncher();
     }
     // todo: uses crappy mock logo .png
     render() {
-        return (h("div", { class: `container ${this.isExpanded ? 'expanded' : ''}`, style: { borderColor: this.color } },
-            h("img", { class: 'launcher-logo', src: 'https://image.ibb.co/kYAiRz/logo.png', alt: this.logo.alt || this.logo.src })));
+        return (h("div", { class: `container
+          ${this.isReady ? 'loaded' : ''}
+          ${this.isOpen ? 'open' : 'closed'}
+          ${this.isExpanded ? 'expanded' : ''}
+        `, style: {
+                borderColor: this.color,
+                backgroundColor: this.isOpen ? this.color : 'white'
+            } },
+            h("img", { class: 'launcher-logo', src: 'https://image.ibb.co/kYAiRz/logo.png', alt: this.logo.alt || this.logo.src }),
+            h("div", { class: 'close-button' }, "\u2715"),
+            h("div", { class: 'inner-circle' })));
     }
@@ -105,2 +132,9 @@ static get is() { return "widget-launcher"; }
         },
+        "isOpen": {
+            "type": Boolean,
+            "attr": "is-open"
+        },
+        "isReady": {
+            "state": true
+        },
         "logo": {
@@ -111,3 +145,3 @@ "type": "Any",
     }; }
-    static get style() { return "/*! sanitize.css v5.0.0 | CC0 License | github.com/jonathantneal/sanitize.css */\n/* Document (https://html.spec.whatwg.org/multipage/semantics.html#semantics)\n   ========================================================================== */\n/**\n * 1. Remove repeating backgrounds in all browsers (opinionated).\n * 2. Add box sizing inheritence in all browsers (opinionated).\n */\n*,\n::before,\n::after {\n  background-repeat: no-repeat;\n  /* 1 */\n  -webkit-box-sizing: inherit;\n  box-sizing: inherit;\n  /* 2 */ }\n\n/**\n  * 1. Add text decoration inheritance in all browsers (opinionated).\n  * 2. Add vertical alignment inheritence in all browsers (opinionated).\n  */\n::before,\n::after {\n  text-decoration: inherit;\n  /* 1 */\n  vertical-align: inherit;\n  /* 2 */ }\n\n/**\n  * 1. Add the correct box sizing in Firefox.\n  * 2. Show the overflow in Edge and IE.\n  */\nhr {\n  -webkit-box-sizing: content-box;\n  box-sizing: content-box;\n  /* 1 */\n  height: 0;\n  /* 1 */\n  overflow: visible;\n  /* 2 */ }\n\n/* Text-level semantics (https://html.spec.whatwg.org/multipage/semantics.html#text-level-semantics)\n    ========================================================================== */\n/**\n  * 1. Remove the bottom border in Firefox 39-.\n  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n  */\nabbr[title] {\n  border-bottom: none;\n  /* 1 */\n  text-decoration: underline;\n  /* 2 */\n  -webkit-text-decoration: underline dotted;\n  text-decoration: underline dotted;\n  /* 2 */ }\n\n/**\n  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.\n  */\nb,\nstrong {\n  font-weight: inherit; }\n\n/**\n  * Add the correct font weight in Chrome, Edge, and Safari.\n  */\nstrong {\n  font-weight: bolder; }\n\n/* Embedded content (https://html.spec.whatwg.org/multipage/embedded-content.html#embedded-content)\n    ========================================================================== */\n/*\n  * Change the alignment on media elements in all browers (opinionated).\n  */\naudio,\ncanvas,\niframe,\nimg,\nsvg,\nvideo {\n  vertical-align: middle; }\n\n/**\n  * Remove the border on images inside links in IE 10-.\n  */\nimg {\n  border-style: none; }\n\n/**\n  * Change the fill color to match the text color in all browsers (opinionated).\n  * Block pointer-events on SVG, since i can cause issues\n  */\nsvg {\n  fill: currentColor;\n  pointer-events: none; }\n\n/**\n  * Hide the overflow in IE.\n  */\nsvg:not(:root) {\n  overflow: hidden; }\n\n/* Forms (https://html.spec.whatwg.org/multipage/forms.html#forms)\n    ========================================================================== */\n/**\n  * Remove the margin in Firefox and Safari.\n  */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  margin: 0; }\n\n/**\n  * Inherit styling in all browsers (opinionated).\n  */\nbutton,\ninput,\nselect,\ntextarea {\n  background-color: transparent;\n  color: inherit;\n  font-size: inherit;\n  line-height: inherit; }\n\n/**\n  * Show the overflow in IE.\n  * 1. Show the overflow in Edge.\n  */\nbutton,\ninput {\n  /* 1 */\n  overflow: visible; }\n\n/**\n  * Remove the inheritance of text transform in Edge, Firefox, and IE.\n  * 1. Remove the inheritance of text transform in Firefox.\n  */\nbutton,\nselect {\n  /* 1 */\n  text-transform: none; }\n\n/**\n  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n  *    controls in Android 4.\n  * 2. Correct the inability to style clickable types in iOS and Safari.\n  */\nbutton,\nhtml [type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button;\n  /* 2 */ }\n\n/**\n  * Remove the inner border and padding in Firefox.\n  */\nbutton::-moz-focus-inner,\n[type='button']::-moz-focus-inner,\n[type='reset']::-moz-focus-inner,\n[type='submit']::-moz-focus-inner {\n  border-style: none;\n  padding: 0; }\n\n/**\n  * Restore the focus styles unset by the previous rule.\n  */\nbutton:-moz-focusring,\n[type='button']:-moz-focusring,\n[type='reset']:-moz-focusring,\n[type='submit']:-moz-focusring {\n  outline: 1px dotted ButtonText; }\n\n/**\n  * 1. Correct the text wrapping in Edge and IE.\n  * 2. Correct the color inheritance from `fieldset` elements in IE.\n  * 3. Remove the padding so developers are not caught out when they zero out\n  *    `fieldset` elements in all browsers.\n  */\nlegend {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  /* 1 */\n  color: inherit;\n  /* 2 */\n  display: table;\n  /* 1 */\n  max-width: 100%;\n  /* 1 */\n  padding: 0;\n  /* 3 */\n  white-space: normal;\n  /* 1 */ }\n\n/**\n  * 1. Remove the default vertical scrollbar in IE.\n  * 2. Change the resize direction on textareas in all browsers (opinionated).\n  */\ntextarea {\n  overflow: auto;\n  /* 1 */\n  resize: vertical;\n  /* 2 */ }\n\n/**\n  * 1. Add the correct box sizing in IE 10-.\n  * 2. Remove the padding in IE 10-.\n  */\n[type='checkbox'],\n[type='radio'] {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  /* 1 */\n  padding: 0;\n  /* 2 */ }\n\n/**\n  * Correct the cursor style of increment and decrement buttons in Chrome.\n  */\n[type='number']::-webkit-inner-spin-button,\n[type='number']::-webkit-outer-spin-button {\n  height: auto; }\n\n/**\n  * 1. Correct the odd appearance in Chrome and Safari.\n  * 2. Correct the outline style in Safari.\n  */\n[type='search'] {\n  -webkit-appearance: textfield;\n  /* 1 */\n  outline-offset: -2px;\n  /* 2 */ }\n\n/**\n  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.\n  */\n[type='search']::-webkit-search-cancel-button,\n[type='search']::-webkit-search-decoration {\n  -webkit-appearance: none; }\n\n/**\n  * 1. Correct the inability to style clickable types in iOS and Safari.\n  * 2. Change font properties to `inherit` in Safari.\n  */\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  /* 1 */\n  font: inherit;\n  /* 2 */ }\n\n/* Interactive elements (https://html.spec.whatwg.org/multipage/forms.html#interactive-elements)\n    ========================================================================== */\n/*\n  * Add the correct display in IE 9-.\n  * 1. Add the correct display in Edge, IE, and Firefox.\n  */\ndetails,\nmenu {\n  display: block; }\n\n/*\n  * Add the correct display in all browsers.\n  */\nsummary {\n  display: list-item; }\n\n/* User interaction (https://html.spec.whatwg.org/multipage/interaction.html#editing)\n    ========================================================================== */\n/*\n  * Remove the tapping delay on clickable elements (opinionated).\n  * 1. Remove the tapping delay in IE 10.\n  */\na,\narea,\nbutton,\ninput,\nlabel,\nselect,\nsummary,\ntextarea,\n[tabindex] {\n  -ms-touch-action: manipulation;\n  /* 1 */\n  touch-action: manipulation; }\n\n/**\n  * Add the correct display in IE 10-.\n  */\n[hidden] {\n  display: none; }\n\n/* ARIA (https://w3c.github.io/html-aria/)\n    ========================================================================== */\n/**\n  * Change the cursor on busy elements (opinionated).\n  */\n[aria-busy='true'] {\n  cursor: progress; }\n\n/*\n  * Change the cursor on control elements (opinionated).\n  */\n[aria-controls] {\n  cursor: pointer; }\n\n/*\n  * Change the display on visually hidden accessible elements (opinionated).\n  */\n[aria-hidden='false'][hidden]:not(:focus) {\n  clip: rect(0, 0, 0, 0);\n  display: inherit;\n  position: absolute; }\n\n/*\n  * Change the cursor on disabled, not-editable, or otherwise\n  * inoperable elements (opinionated).\n  */\n[aria-disabled] {\n  cursor: default; }\n\n.container {\n  position: relative;\n  width: 85px;\n  height: 85px;\n  opacity: .9;\n  background-color: white;\n  border: 4px solid white;\n  border-radius: 50px;\n  -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.39);\n  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.39);\n  -webkit-transition: all .15s ease-out;\n  transition: all .15s ease-out;\n  overflow: hidden; }\n  .container:hover, .container.expanded {\n    opacity: 1;\n    width: 270px; }\n  .container:active {\n    -webkit-transform: scale(0.99, 0.99);\n    transform: scale(0.99, 0.99); }\n\n.launcher-logo {\n  position: absolute;\n  left: 5px; }"; }
+    static get style() { return "/*! sanitize.css v5.0.0 | CC0 License | github.com/jonathantneal/sanitize.css */\n/* Document (https://html.spec.whatwg.org/multipage/semantics.html#semantics)\n   ========================================================================== */\n/**\n * 1. Remove repeating backgrounds in all browsers (opinionated).\n * 2. Add box sizing inheritence in all browsers (opinionated).\n */\n*,\n::before,\n::after {\n  background-repeat: no-repeat;\n  /* 1 */\n  -webkit-box-sizing: inherit;\n  box-sizing: inherit;\n  /* 2 */ }\n\n/**\n  * 1. Add text decoration inheritance in all browsers (opinionated).\n  * 2. Add vertical alignment inheritence in all browsers (opinionated).\n  */\n::before,\n::after {\n  text-decoration: inherit;\n  /* 1 */\n  vertical-align: inherit;\n  /* 2 */ }\n\n/**\n  * 1. Add the correct box sizing in Firefox.\n  * 2. Show the overflow in Edge and IE.\n  */\nhr {\n  -webkit-box-sizing: content-box;\n  box-sizing: content-box;\n  /* 1 */\n  height: 0;\n  /* 1 */\n  overflow: visible;\n  /* 2 */ }\n\n/* Text-level semantics (https://html.spec.whatwg.org/multipage/semantics.html#text-level-semantics)\n    ========================================================================== */\n/**\n  * 1. Remove the bottom border in Firefox 39-.\n  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n  */\nabbr[title] {\n  border-bottom: none;\n  /* 1 */\n  text-decoration: underline;\n  /* 2 */\n  -webkit-text-decoration: underline dotted;\n  text-decoration: underline dotted;\n  /* 2 */ }\n\n/**\n  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.\n  */\nb,\nstrong {\n  font-weight: inherit; }\n\n/**\n  * Add the correct font weight in Chrome, Edge, and Safari.\n  */\nstrong {\n  font-weight: bolder; }\n\n/* Embedded content (https://html.spec.whatwg.org/multipage/embedded-content.html#embedded-content)\n    ========================================================================== */\n/*\n  * Change the alignment on media elements in all browers (opinionated).\n  */\naudio,\ncanvas,\niframe,\nimg,\nsvg,\nvideo {\n  vertical-align: middle; }\n\n/**\n  * Remove the border on images inside links in IE 10-.\n  */\nimg {\n  border-style: none; }\n\n/**\n  * Change the fill color to match the text color in all browsers (opinionated).\n  * Block pointer-events on SVG, since i can cause issues\n  */\nsvg {\n  fill: currentColor;\n  pointer-events: none; }\n\n/**\n  * Hide the overflow in IE.\n  */\nsvg:not(:root) {\n  overflow: hidden; }\n\n/* Forms (https://html.spec.whatwg.org/multipage/forms.html#forms)\n    ========================================================================== */\n/**\n  * Remove the margin in Firefox and Safari.\n  */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  margin: 0; }\n\n/**\n  * Inherit styling in all browsers (opinionated).\n  */\nbutton,\ninput,\nselect,\ntextarea {\n  background-color: transparent;\n  color: inherit;\n  font-size: inherit;\n  line-height: inherit; }\n\n/**\n  * Show the overflow in IE.\n  * 1. Show the overflow in Edge.\n  */\nbutton,\ninput {\n  /* 1 */\n  overflow: visible; }\n\n/**\n  * Remove the inheritance of text transform in Edge, Firefox, and IE.\n  * 1. Remove the inheritance of text transform in Firefox.\n  */\nbutton,\nselect {\n  /* 1 */\n  text-transform: none; }\n\n/**\n  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n  *    controls in Android 4.\n  * 2. Correct the inability to style clickable types in iOS and Safari.\n  */\nbutton,\nhtml [type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button;\n  /* 2 */ }\n\n/**\n  * Remove the inner border and padding in Firefox.\n  */\nbutton::-moz-focus-inner,\n[type='button']::-moz-focus-inner,\n[type='reset']::-moz-focus-inner,\n[type='submit']::-moz-focus-inner {\n  border-style: none;\n  padding: 0; }\n\n/**\n  * Restore the focus styles unset by the previous rule.\n  */\nbutton:-moz-focusring,\n[type='button']:-moz-focusring,\n[type='reset']:-moz-focusring,\n[type='submit']:-moz-focusring {\n  outline: 1px dotted ButtonText; }\n\n/**\n  * 1. Correct the text wrapping in Edge and IE.\n  * 2. Correct the color inheritance from `fieldset` elements in IE.\n  * 3. Remove the padding so developers are not caught out when they zero out\n  *    `fieldset` elements in all browsers.\n  */\nlegend {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  /* 1 */\n  color: inherit;\n  /* 2 */\n  display: table;\n  /* 1 */\n  max-width: 100%;\n  /* 1 */\n  padding: 0;\n  /* 3 */\n  white-space: normal;\n  /* 1 */ }\n\n/**\n  * 1. Remove the default vertical scrollbar in IE.\n  * 2. Change the resize direction on textareas in all browsers (opinionated).\n  */\ntextarea {\n  overflow: auto;\n  /* 1 */\n  resize: vertical;\n  /* 2 */ }\n\n/**\n  * 1. Add the correct box sizing in IE 10-.\n  * 2. Remove the padding in IE 10-.\n  */\n[type='checkbox'],\n[type='radio'] {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  /* 1 */\n  padding: 0;\n  /* 2 */ }\n\n/**\n  * Correct the cursor style of increment and decrement buttons in Chrome.\n  */\n[type='number']::-webkit-inner-spin-button,\n[type='number']::-webkit-outer-spin-button {\n  height: auto; }\n\n/**\n  * 1. Correct the odd appearance in Chrome and Safari.\n  * 2. Correct the outline style in Safari.\n  */\n[type='search'] {\n  -webkit-appearance: textfield;\n  /* 1 */\n  outline-offset: -2px;\n  /* 2 */ }\n\n/**\n  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.\n  */\n[type='search']::-webkit-search-cancel-button,\n[type='search']::-webkit-search-decoration {\n  -webkit-appearance: none; }\n\n/**\n  * 1. Correct the inability to style clickable types in iOS and Safari.\n  * 2. Change font properties to `inherit` in Safari.\n  */\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  /* 1 */\n  font: inherit;\n  /* 2 */ }\n\n/* Interactive elements (https://html.spec.whatwg.org/multipage/forms.html#interactive-elements)\n    ========================================================================== */\n/*\n  * Add the correct display in IE 9-.\n  * 1. Add the correct display in Edge, IE, and Firefox.\n  */\ndetails,\nmenu {\n  display: block; }\n\n/*\n  * Add the correct display in all browsers.\n  */\nsummary {\n  display: list-item; }\n\n/* User interaction (https://html.spec.whatwg.org/multipage/interaction.html#editing)\n    ========================================================================== */\n/*\n  * Remove the tapping delay on clickable elements (opinionated).\n  * 1. Remove the tapping delay in IE 10.\n  */\na,\narea,\nbutton,\ninput,\nlabel,\nselect,\nsummary,\ntextarea,\n[tabindex] {\n  -ms-touch-action: manipulation;\n  /* 1 */\n  touch-action: manipulation; }\n\n/**\n  * Add the correct display in IE 10-.\n  */\n[hidden] {\n  display: none; }\n\n/* ARIA (https://w3c.github.io/html-aria/)\n    ========================================================================== */\n/**\n  * Change the cursor on busy elements (opinionated).\n  */\n[aria-busy='true'] {\n  cursor: progress; }\n\n/*\n  * Change the cursor on control elements (opinionated).\n  */\n[aria-controls] {\n  cursor: pointer; }\n\n/*\n  * Change the display on visually hidden accessible elements (opinionated).\n  */\n[aria-hidden='false'][hidden]:not(:focus) {\n  clip: rect(0, 0, 0, 0);\n  display: inherit;\n  position: absolute; }\n\n/*\n  * Change the cursor on disabled, not-editable, or otherwise\n  * inoperable elements (opinionated).\n  */\n[aria-disabled] {\n  cursor: default; }\n\n.container {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n  position: relative;\n  -webkit-box-align: center;\n  -ms-flex-align: center;\n  align-items: center;\n  overflow: hidden;\n  cursor: pointer;\n  width: 80px;\n  height: 80px;\n  opacity: 0;\n  border: 4px solid;\n  border-radius: 50px;\n  -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.39);\n  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.39);\n  -webkit-transition: all .15s ease-out;\n  transition: all .15s ease-out; }\n  .container.loaded {\n    opacity: 1; }\n  .container:hover, .container.expanded {\n    width: 270px; }\n  .container.open {\n    width: 80px; }\n    .container.open .launcher-logo {\n      opacity: 0; }\n    .container.open .close-button {\n      font-size: 30px;\n      opacity: 1; }\n    .container.open .inner-circle {\n      height: 100%;\n      width: 100%; }\n  .container.closed .launcher-logo {\n    opacity: 1; }\n  .container.closed .close-button {\n    font-size: 0;\n    opacity: 0; }\n  .container.closed .inner-circle {\n    height: 0;\n    width: 0; }\n\n.launcher-logo {\n  -webkit-transition: opacity .2s ease-in-out;\n  transition: opacity .2s ease-in-out;\n  position: absolute;\n  opacity: 0;\n  left: 2px;\n  top: -3px; }\n\n.close-button {\n  -webkit-transition: font-size .1s ease-in-out .1s;\n  transition: font-size .1s ease-in-out .1s;\n  position: absolute;\n  font-size: 0;\n  color: #fff;\n  text-align: center;\n  opacity: 1; }\n\n.inner-circle {\n  -webkit-transition: all .2s ease-in-out;\n  transition: all .2s ease-in-out;\n  background-color: red;\n  border-radius: 50px;\n  width: 0px;\n  height: 0px; }"; }
 }
@@ -114,0 +148,0 @@

dist/types/components.d.ts

@@ -33,2 +33,3 @@ /* tslint:disable */
     'color': string;
+    'isOpen': boolean;
     'logo': ImageViewModel;
@@ -38,2 +39,3 @@ }
     'color'?: string;
+    'isOpen'?: boolean;
     'logo'?: ImageViewModel;
@@ -40,0 +42,0 @@ }

dist/types/components/ddb-widget/ddb-widget.d.ts

@@ -15,4 +15,5 @@ import '../../stencil.core';
     handleLauncherClick: (event: UIEvent) => void;
+    handleOverlayClick: (event: UIEvent) => void;
     render(): JSX.Element;
 }
 export {};

dist/types/components/widget-launcher/widget-launcher.d.ts

@@ -6,6 +6,9 @@ import '../../stencil.core';
     logo: ImageViewModel;
+    isOpen: boolean;
     isExpanded: boolean;
+    isReady: boolean;
     componentDidLoad(): void;
+    initializeLauncher: () => void;
     toggleLauncherExpansion: () => void;
     render(): JSX.Element;
 }

package.json

 {
   "name": "@charlietango/ddb-widget",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Web Component built with Stencil by Charlie Tango",
@@ -5,0 +5,0 @@ "module": "dist/esm/index.js",

No alert changes

Improved metrics

Total package byte prevSize

256954

increased by2.36%

Lines of code

5221

increased by2.55%

No dependency changes