@scania/tegel 0.0.4 → 0.0.6

package/dist/collection/components/modal/modal-webcomponent.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-webcomponent.stories.js","sourceRoot":"","sources":["../../../src/components/modal/modal-webcomponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,eAAe;MAC5B,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC;KACrD;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;KAC9B;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,gBAAgB;MACtB,WAAW,EAAE,oBAAoB;MACjC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,iBAAiB;MACvB,WAAW,EAAE,qBAAqB;MAClC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;GACF;EACD,IAAI,EAAE;IACJ,QAAQ,EAAE,wDAAwD;IAClE,QAAQ,EACN,wNAAwN;IAC1N,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,OAAO;GACd;CACF,CAAC;AAEF,MAAM,UAAU,GAAG;EACjB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,IAAI;EACd,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,CAC9D,iBAAiB,CACf;;;yCAGqC,UAAU,CAAC,IAAI,CAAC,cAAc,OAAO,CAAC,WAAW,EAAE;mEACzB,QAAQ;;YAE/D,QAAQ;;;;;;;;;;;;GAYjB,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEnD,YAAY,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Modal',\n  parameters: {\n    layout: 'fullscreen',\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      description: 'Size of modal',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n    },\n    actions: {\n      name: 'Actions',\n      description: 'Behaviour of modal actions',\n      control: {\n        type: 'radio',\n      },\n      options: ['Sticky', 'Static'],\n    },\n    headline: {\n      name: 'Modal headline',\n      description: 'Customize headline',\n      control: {\n        type: 'text',\n      },\n    },\n    bodyText: {\n      name: 'Modal body text',\n      description: 'Customize body text',\n      control: {\n        type: 'text',\n      },\n    },\n  },\n  args: {\n    headline: 'The buttons for the modal only works in the canvas tab',\n    bodyText:\n      'The steps fell lightly and oddly, with a certain swing, for all they went so slowly; it was different indeed from the heavy creaking tread of Henry Jekyll. Utterson sighed. “Is there never anything else?” he asked.',\n    actions: 'Static',\n    size: 'Large',\n  },\n};\n\nconst sizeLookUp = {\n  'Large': 'lg',\n  'Medium': 'md',\n  'Small': 'sm',\n  'Extra small': 'xs',\n};\n\nconst ModalTemplate = ({ size, headline, bodyText, actions }) =>\n  formatHtmlPreview(\n    `\n  <button id=\"my-modal-button\" class=\"sdds-btn sdds-btn-primary\">Open modal</button>\n\n  <sdds-modal open id=\"my-modal\" size=\"${sizeLookUp[size]}\" actions=\"${actions.toLowerCase()}\">\n      <h5 class=\"sdds-modal-headline\" slot=\"sdds-modal-headline\">${headline}</h5>\n      <span slot=\"sdds-modal-body\">\n          ${bodyText}\n      </span>\n      <button slot=\"sdds-modal-actions\" data-dismiss-modal onclick=\"console.log('delete')\" class=\"sdds-btn sdds-btn-danger sdds-btn-md\">Delete</button>\n      <button slot=\"sdds-modal-actions\" data-dismiss-modal onclick=\"console.log('cancel')\" class=\"sdds-btn sdds-btn-secondary sdds-btn-md\">Cancel</button>\n  </sdds-modal>\n  <script>\n\n    document.getElementById('my-modal-button').addEventListener('click', () => {\n      document.getElementById('my-modal').open = true;\n    })\n  </script>\n\n  `,\n  );\n\nexport const WebComponent = ModalTemplate.bind({});\n\nWebComponent.args = {};\n"]}
+{"version":3,"file":"modal-webcomponent.stories.js","sourceRoot":"","sources":["../../../src/components/modal/modal-webcomponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,iCAAiC;MAC9C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;MAC7B,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;OACpC;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,yBAAyB;MACtC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC;MACpD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,gBAAgB;MACtB,WAAW,EAAE,iCAAiC;MAC9C,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,iBAAiB;MACvB,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,oCAAoC;MACjD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,wDAAwD;IAClE,QAAQ,EACN,wNAAwN;IAC1N,SAAS,EAAE,IAAI;GAChB;CACF,CAAC;AAEF,MAAM,UAAU,GAAG;EACjB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,IAAI;EACd,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,CACzE,iBAAiB,CACf;;4CAEwC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,wBAC7D,UAAU,CAAC,IAAI,CACjB,cAAc,OAAO,CAAC,WAAW,EAAE;mEAC4B,QAAQ;;YAE/D,QAAQ;;;;;;;;;;;GAWjB,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Modal',\n  parameters: {\n    layout: 'fullscreen',\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    actions: {\n      name: 'Actions',\n      description: 'Defines the behaviour of modal.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Sticky', 'Static'],\n      table: {\n        defaultValue: { summary: 'static' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the size of modal.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n      table: {\n        defaultValue: { summary: 'md' },\n      },\n    },\n    headline: {\n      name: 'Modal headline',\n      description: 'Sets the headline of the modal.',\n      control: {\n        type: 'text',\n      },\n    },\n    bodyText: {\n      name: 'Modal body text',\n      description: 'Sets the body text of the modal.',\n      control: {\n        type: 'text',\n      },\n    },\n    showModal: {\n      name: 'Show modal',\n      description: 'Toggles if the modal is displayed.',\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n  args: {\n    actions: 'Static',\n    size: 'Large',\n    headline: 'The buttons for the modal only works in the canvas tab',\n    bodyText:\n      'The steps fell lightly and oddly, with a certain swing, for all they went so slowly; it was different indeed from the heavy creaking tread of Henry Jekyll. Utterson sighed. “Is there never anything else?” he asked.',\n    showModal: true,\n  },\n};\n\nconst sizeLookUp = {\n  'Large': 'lg',\n  'Medium': 'md',\n  'Small': 'sm',\n  'Extra small': 'xs',\n};\n\nconst ModalTemplate = ({ actions, size, headline, bodyText, showModal }) =>\n  formatHtmlPreview(\n    `\n  <button id=\"my-modal-button\" class=\"sdds-btn sdds-btn-primary\">Open modal</button>\n  <sdds-modal selector=\"#my-modal-button\" ${showModal ? 'show' : ''} id=\"my-modal\" size=\"${\n      sizeLookUp[size]\n    }\" actions=\"${actions.toLowerCase()}\">\n      <h5 class=\"sdds-modal-headline\" slot=\"sdds-modal-headline\">${headline}</h5>\n      <span slot=\"sdds-modal-body\">\n          ${bodyText}\n      </span>\n      <button slot=\"sdds-modal-actions\" data-dismiss-modal class=\"sdds-btn sdds-btn-danger sdds-btn-md\">Delete</button>\n      <button slot=\"sdds-modal-actions\" data-dismiss-modal class=\"sdds-btn sdds-btn-secondary sdds-btn-md\">Cancel</button>\n  </sdds-modal>\n  <script>\n    modal = document.querySelector('sdds-modal')\n    modal.addEventListener('sddsClose', (event) => {\n      console.log(event)\n    })\n  </script>\n  `,\n  );\n\nexport const WebComponent = ModalTemplate.bind({});\n"]}

package/dist/collection/components/modal/modal.js

@@ -1,40 +1,83 @@
-import { h, Host } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 export class Modal {
   constructor() {
+    /** Emits a close event and then close the modal if it is not prevented. */
+    this.handleClose = (event) => {
+      const closeEvent = this.sddsClose.emit(event);
+      if (!closeEvent.defaultPrevented) {
+        this.isShown = false;
+      }
+    };
+    this.handleShow = () => {
+      this.isShown = true;
+    };
+    /** Adds an event listener to the reference element that shows/closes the modal. */
+    this.initializeReferenceElement = (referenceEl) => {
+      if (referenceEl) {
+        referenceEl.addEventListener('click', (event) => {
+          if (this.isShown) {
+            this.handleClose(event);
+          }
+          else {
+            this.handleShow();
+          }
+        });
+      }
+    };
+    /** Check if there is a referenceElement or selector and adds event listener to them if so. */
+    this.setShowButton = () => {
+      var _a;
+      if (this.selector || this.referenceEl) {
+        const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+        if (referenceEl) {
+          this.initializeReferenceElement(referenceEl);
+        }
+      }
+    };
     this.prevent = false;
     this.size = 'md';
     this.actions = 'static';
-    this.open = false;
+    this.selector = undefined;
+    this.referenceEl = undefined;
+    this.show = undefined;
+    this.isShown = false;
   }
-  /** Shows the modal  */
-  async openModal() {
-    this.open = true;
+  /** Shows the modal.  */
+  async showModal() {
+    this.handleShow();
   }
-  setDissmissButtons() {
-    const nodes = this.el.querySelectorAll('[data-dismiss-modal]');
-    [...Array.from(nodes), this.closeButtonEl].forEach((el) => {
-      el.addEventListener('click', () => {
-        this.open = false;
-      });
-    });
+  /** Closes the modal. */
+  async closeModal() {
+    this.handleClose();
+  }
+  connectedCallback() {
+    if (this.show !== null) {
+      this.isShown = this.show;
+    }
+    this.setDissmissButtons();
+    this.setShowButton();
   }
-  handleClick(e) {
-    const targetList = e.composedPath();
+  /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */
+  handleOverlayClick(event) {
+    const targetList = event.composedPath();
     const target = targetList[0];
     if (target.classList[0] === 'sdds-modal-close' ||
       (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)) {
-      this.open = false;
+      this.handleClose(event);
     }
   }
-  componentDidRender() {
-    this.setDissmissButtons();
+  /** Adds an event listener to the dismiss buttons that closes the modal. */
+  setDissmissButtons() {
+    this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {
+      dismissButton.addEventListener('click', (event) => {
+        this.handleClose(event);
+      });
+    });
   }
   render() {
     return (h(Host, { onClick: (event) => {
-        this.handleClick(event);
-      }, class: `sdds-modal-backdrop ${this.open ? 'show' : 'hide'}` }, h("div", { class: `sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${this.size ? `sdds-modal-${this.size}` : ''} ` }, h("div", { class: "sdds-modal-header" }, h("slot", { name: "sdds-modal-headline" }), h("button", { class: "sdds-modal-close", "aria-label": "close", ref: (el) => {
-        this.closeButtonEl = el;
-      } }, h("sdds-icon", { name: "cross", size: "20px" }))), h("div", { class: "sdds-modal-body" }, h("slot", { name: "sdds-modal-body" })), h("div", { class: "sdds-modal-actions" }, h("slot", { name: "sdds-modal-actions" })))));
+        this.handleOverlayClick(event);
+      }, class: `sdds-modal-backdrop ${this.isShown ? 'show' : 'hide'}` }, h("div", { class: `sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${this.size ? `sdds-modal-${this.size}` : ''} ` }, h("div", { class: "sdds-modal-header" }, h("slot", { name: "sdds-modal-headline" }), h("button", { class: "sdds-modal-close", "aria-label": "close", onClick: () => this.handleClose() }, h("sdds-icon", { name: "cross", size: "20px" }))), h("div", { class: "sdds-modal-body" }, h("slot", { name: "sdds-modal-body" })), h("div", { class: "sdds-modal-actions" }, h("slot", { name: "sdds-modal-actions" })))));
   }
   static get is() { return "sdds-modal"; }
   static get encapsulation() { return "shadow"; }
@@ -104,7 +147,43 @@ export class Modal {
         "reflect": false,
         "defaultValue": "'static'"
       },
-      "open": {
+      "selector": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "CSS selector for the element that will show the modal."
+        },
+        "attribute": "selector",
+        "reflect": false
+      },
+      "referenceEl": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Element that will show the modal (takes priority over selector)"
+        }
+      },
+      "show": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -116,17 +195,55 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Controls whether the modal is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside."
         },
-        "attribute": "open",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "show",
+        "reflect": false
       }
     };
   }
+  static get states() {
+    return {
+      "isShown": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sddsClose",
+        "name": "sddsClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitts when the modal is closed."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get methods() {
     return {
-      "openModal": {
+      "showModal": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Shows the modal.",
+          "tags": []
+        }
+      },
+      "closeModal": {
         "complexType": {
           "signature": "() => Promise<void>",
           "parameters": [],
@@ -138,12 +255,12 @@ export class Modal {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Shows the modal",
+          "text": "Closes the modal.",
           "tags": []
         }
       }
     };
   }
-  static get elementRef() { return "el"; }
+  static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=modal.js.map

package/dist/collection/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAO1E,MAAM,OAAO,KAAK;;mBAEW,KAAK;gBAGU,IAAI;mBAGP,QAAQ;gBAGvB,KAAK;;EAM7B,uBAAuB;EAEvB,KAAK,CAAC,SAAS;IACb,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;EACnB,CAAC;EAED,kBAAkB;IAChB,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IAE/D,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;MACxD,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QAChC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MACpB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC;EAED,WAAW,CAAC,CAAC;IACX,MAAM,UAAU,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC;IACpC,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;IAC7B,IACE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,kBAAkB;MAC1C,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,qBAAqB,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,EACzE;MACA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;EACH,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;QACjB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;MAC1B,CAAC,EACD,KAAK,EAAE,uBAAuB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE;MAE3D,WACE,KAAK,EAAE,cAAc,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,uBAAuB,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,IAC5E,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAC1C,GAAG;QAEH,WAAK,KAAK,EAAC,mBAAmB;UAC5B,YAAM,IAAI,EAAC,qBAAqB,GAAQ;UACxC,cACE,KAAK,EAAC,kBAAkB,gBACb,OAAO,EAClB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;cACV,IAAI,CAAC,aAAa,GAAG,EAAiB,CAAC;YACzC,CAAC;YAED,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACzC,CACL;QAEN,WAAK,KAAK,EAAC,iBAAiB;UAC1B,YAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC;QAEN,WAAK,KAAK,EAAC,oBAAoB;UAC7B,YAAM,IAAI,EAAC,oBAAoB,GAAQ,CACnC,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Element, Method } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  /** Disables closing modal on clicking on overlay area. */\n  @Prop() prevent: boolean = false;\n\n  /** Size of modal  */\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n  /** Sticky or Static Actions  */\n  @Prop() actions: 'sticky' | 'static' = 'static';\n\n  /* Opens or closes the modal. */\n  @Prop() open: boolean = false;\n\n  @Element() el: HTMLElement;\n\n  closeButtonEl: HTMLElement;\n\n  /** Shows the modal  */\n  @Method()\n  async openModal() {\n    this.open = true;\n  }\n\n  setDissmissButtons() {\n    const nodes = this.el.querySelectorAll('[data-dismiss-modal]');\n\n    [...Array.from(nodes), this.closeButtonEl].forEach((el) => {\n      el.addEventListener('click', () => {\n        this.open = false;\n      });\n    });\n  }\n\n  handleClick(e) {\n    const targetList = e.composedPath();\n    const target = targetList[0];\n    if (\n      target.classList[0] === 'sdds-modal-close' ||\n      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)\n    ) {\n      this.open = false;\n    }\n  }\n\n  componentDidRender() {\n    this.setDissmissButtons();\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={(event) => {\n          this.handleClick(event);\n        }}\n        class={`sdds-modal-backdrop ${this.open ? 'show' : 'hide'}`}\n      >\n        <div\n          class={`sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${\n            this.size ? `sdds-modal-${this.size}` : ''\n          } `}\n        >\n          <div class=\"sdds-modal-header\">\n            <slot name=\"sdds-modal-headline\"></slot>\n            <button\n              class=\"sdds-modal-close\"\n              aria-label=\"close\"\n              ref={(el) => {\n                this.closeButtonEl = el as HTMLElement;\n              }}\n            >\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n\n          <div class=\"sdds-modal-body\">\n            <slot name=\"sdds-modal-body\"></slot>\n          </div>\n\n          <div class=\"sdds-modal-actions\">\n            <slot name=\"sdds-modal-actions\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Host,\n  Prop,\n  Element,\n  Method,\n  State,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  @Element() host: HTMLElement;\n\n  /** Disables closing modal on clicking on overlay area. */\n  @Prop() prevent: boolean = false;\n\n  /** Size of modal  */\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n  /** Sticky or Static Actions  */\n  @Prop() actions: 'sticky' | 'static' = 'static';\n\n  /** CSS selector for the element that will show the modal. */\n  @Prop() selector: string;\n\n  /** Element that will show the modal (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Controls whether the modal is shown or not. If this is set hiding and showing\n   * will be decided by this prop and will need to be controlled from the outside. */\n  @Prop() show: boolean;\n\n  // State that keeps track of show/closed state for the modal.\n  @State() isShown: boolean = false;\n\n  /** Shows the modal.  */\n  @Method()\n  async showModal() {\n    this.handleShow();\n  }\n\n  /** Closes the modal. */\n  @Method()\n  async closeModal() {\n    this.handleClose();\n  }\n\n  /** Emitts when the modal is closed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<any>;\n\n  connectedCallback() {\n    if (this.show !== null) {\n      this.isShown = this.show;\n    }\n    this.setDissmissButtons();\n    this.setShowButton();\n  }\n\n  /** Emits a close event and then close the modal if it is not prevented. */\n  handleClose = (event?) => {\n    const closeEvent = this.sddsClose.emit(event);\n    if (!closeEvent.defaultPrevented) {\n      this.isShown = false;\n    }\n  };\n\n  handleShow = () => {\n    this.isShown = true;\n  };\n\n  /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */\n  handleOverlayClick(event) {\n    const targetList = event.composedPath();\n    const target = targetList[0];\n    if (\n      target.classList[0] === 'sdds-modal-close' ||\n      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)\n    ) {\n      this.handleClose(event);\n    }\n  }\n\n  /** Adds an event listener to the reference element that shows/closes the modal. */\n  initializeReferenceElement = (referenceEl) => {\n    if (referenceEl) {\n      referenceEl.addEventListener('click', (event) => {\n        if (this.isShown) {\n          this.handleClose(event);\n        } else {\n          this.handleShow();\n        }\n      });\n    }\n  };\n\n  /** Check if there is a referenceElement or selector and adds event listener to them if so. */\n  setShowButton = () => {\n    if (this.selector || this.referenceEl) {\n      const referenceEl = this.referenceEl ?? document.querySelector(this.selector);\n      if (referenceEl) {\n        this.initializeReferenceElement(referenceEl);\n      }\n    }\n  };\n\n  /** Adds an event listener to the dismiss buttons that closes the modal. */\n  setDissmissButtons() {\n    this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {\n      dismissButton.addEventListener('click', (event) => {\n        this.handleClose(event);\n      });\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={(event) => {\n          this.handleOverlayClick(event);\n        }}\n        class={`sdds-modal-backdrop ${this.isShown ? 'show' : 'hide'}`}\n      >\n        <div\n          class={`sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${\n            this.size ? `sdds-modal-${this.size}` : ''\n          } `}\n        >\n          <div class=\"sdds-modal-header\">\n            <slot name=\"sdds-modal-headline\"></slot>\n            <button class=\"sdds-modal-close\" aria-label=\"close\" onClick={() => this.handleClose()}>\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n\n          <div class=\"sdds-modal-body\">\n            <slot name=\"sdds-modal-body\"></slot>\n          </div>\n\n          <div class=\"sdds-modal-actions\">\n            <slot name=\"sdds-modal-actions\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/popover-canvas/popover-canvas.css

@@ -1,10 +1,7 @@
 :host {
   box-sizing: border-box;
-  min-width: 160px;
-  min-height: 160px;
   color: var(--sdds-popover-canvas-color);
   background-color: var(--sdds-popover-canvas-background);
-  padding: 16px;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   z-index: 800;
@@ -15,6 +12,5 @@
 }
 
 :host(.sdds-popover-canvas-show) {
-  opacity: 1;
   display: block;
 }

package/dist/collection/components/popover-canvas/popover-canvas.js

@@ -2,72 +2,95 @@ import { Host, h } from '@stencil/core';
 import { createPopper } from '@popperjs/core';
 export class PopoverCanvas {
   constructor() {
+    this.initialize = (referenceEl) => {
+      this.popperInstance = createPopper(referenceEl, this.host, {
+        placement: this.placement,
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [this.offsetSkidding, this.offsetDistance],
+            },
+          },
+          ...this.modifiers,
+        ],
+      });
+      if (this.show === null) {
+        referenceEl.addEventListener('click', (event) => {
+          event.stopPropagation();
+          if (this.isShown) {
+            this.isShown = false;
+          }
+          else {
+            this.isShown = true;
+          }
+        });
+      }
+    };
     this.selector = '';
     this.referenceEl = undefined;
-    this.show = false;
+    this.show = null;
     this.placement = 'auto';
     this.offsetSkidding = 0;
     this.offsetDistance = 8;
+    this.modifiers = [];
     this.renderedShowValue = false;
     this.popperInstance = undefined;
     this.target = undefined;
+    this.isShown = false;
+  }
+  onShowChange(newValue) {
+    this.isShown = newValue;
+  }
+  onReferenceElChange(newValue, oldValue) {
+    var _a;
+    if (newValue !== oldValue) {
+      (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+      if (newValue) {
+        this.initialize(newValue);
+      }
+    }
   }
-  handleOutsideClick() {
-    if (this.show) {
-      this.show = false;
+  onAnyClick(event) {
+    if (this.isShown && this.show === null) {
+      // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
+      const isClickOutside = !event.composedPath().includes(this.host);
+      if (isClickOutside) {
+        this.isShown = false;
+      }
+    }
+  }
+  connectedCallback() {
+    if (this.show !== null) {
+      this.isShown = this.show;
     }
   }
   componentDidLoad() {
     var _a;
-    this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
-    this.renderedShowValue = this.show;
-    this.popperInstance = createPopper(this.target, this.popoverCanvasElement, {
-      placement: this.placement,
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [this.offsetSkidding, this.offsetDistance],
-          },
-        },
-      ],
-    });
-    const showCanvas = () => {
-      this.show = true;
-    };
-    const hideCanvas = () => {
-      this.show = false;
-    };
-    this.target.addEventListener('mousedown', (event) => {
-      event.stopPropagation();
-      if (this.show) {
-        hideCanvas();
+    if (this.selector || this.referenceEl) {
+      const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+      if (referenceEl) {
+        this.initialize(referenceEl);
       }
       else {
-        showCanvas();
+        console.error(`Could not initialize popover-canvas: element with selector '${this.selector}' not found.`);
       }
-    });
-    this.popoverCanvasElement.addEventListener('mousemove', (event) => {
-      event.stopPropagation();
-    });
-    this.popoverCanvasElement.addEventListener('mousedown', (event) => {
-      event.stopPropagation();
-    });
+    }
   }
   componentDidRender() {
-    if (this.show && !this.renderedShowValue) {
+    if (this.isShown && !this.renderedShowValue) {
       // Here we update the popper position since its position is wrong
       // before it is rendered.
       this.popperInstance.update();
     }
-    this.renderedShowValue = this.show;
+    this.renderedShowValue = this.isShown;
   }
   disconnectedCallback() {
     var _a;
     (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
   }
   render() {
-    return (h(Host, { class: `sdds-popover-canvas ${this.show ? 'sdds-popover-canvas-show' : ''}` }, h("slot", null)));
+    return (h(Host, { class: `sdds-popover-canvas ${this.isShown ? 'sdds-popover-canvas-show' : ''}` }, h("slot", null)));
   }
   static get is() { return "sdds-popover-canvas"; }
   static get encapsulation() { return "shadow"; }
@@ -132,11 +155,11 @@ export class PopoverCanvas {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Decides if the Popover Canvas should be visible from the start"
+          "text": "Controls wether the popover is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside."
         },
         "attribute": "show",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "null"
       },
       "placement": {
         "type": "string",
@@ -155,7 +178,7 @@ export class PopoverCanvas {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Decides the placement of the Popover Canvas"
+          "text": "Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement"
         },
         "attribute": "placement",
         "reflect": false,
@@ -196,6 +219,26 @@ export class PopoverCanvas {
         "attribute": "offset-distance",
         "reflect": false,
         "defaultValue": "8"
+      },
+      "modifiers": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Object[]",
+          "resolved": "Object[]",
+          "references": {
+            "Object": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/"
+        },
+        "defaultValue": "[]"
       }
     };
   }
@@ -203,17 +246,27 @@ export class PopoverCanvas {
     return {
       "renderedShowValue": {},
       "popperInstance": {},
-      "target": {}
+      "target": {},
+      "isShown": {}
     };
   }
-  static get elementRef() { return "popoverCanvasElement"; }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "show",
+        "methodName": "onShowChange"
+      }, {
+        "propName": "referenceEl",
+        "methodName": "onReferenceElChange"
+      }];
+  }
   static get listeners() {
     return [{
-        "name": "mousedown",
-        "method": "handleOutsideClick",
+        "name": "click",
+        "method": "onAnyClick",
         "target": "window",
         "capture": false,
-        "passive": true
+        "passive": false
       }];
   }
 }

package/dist/collection/components/popover-canvas/popover-canvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-canvas.js","sourceRoot":"","sources":["../../../src/components/popover-canvas/popover-canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,OAAO,aAAa;;oBAIG,EAAE;;gBAML,KAAK;qBAGE,MAAM;0BAGJ,CAAC;0BAGD,CAAC;6BAEI,KAAK;;;;EAO3C,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;EACH,CAAC;EAED,gBAAgB;;IACd,IAAI,CAAC,MAAM,GAAG,MAAA,IAAI,CAAC,WAAW,mCAAI,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxE,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC;IAEnC,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,oBAAoB,EAAE;MACzE,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,SAAS,EAAE;QACT;UACE,IAAI,EAAE,QAAQ;UACd,OAAO,EAAE;YACP,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC;WACnD;SACF;OACF;KACF,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,GAAG,EAAE;MACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;MACtB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC,CAAC;IAEF,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;MAClD,KAAK,CAAC,eAAe,EAAE,CAAC;MAExB,IAAI,IAAI,CAAC,IAAI,EAAE;QACb,UAAU,EAAE,CAAC;OACd;WAAM;QACL,UAAU,EAAE,CAAC;OACd;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;MAChE,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;MAChE,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;EACL,CAAC;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;MACxC,iEAAiE;MACjE,yBAAyB;MACzB,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;KAC9B;IACD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC;EACrC,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;EACjC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,uBAAuB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,EAAE;MAC/E,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Element, Listen, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-popover-canvas',\n  styleUrl: 'popover-canvas.scss',\n  shadow: true,\n})\nexport class PopoverCanvas {\n  @Element() popoverCanvasElement!: HTMLElement;\n\n  /** The CSS-selector for an element that will trigger the popover */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the popover (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Decides if the Popover Canvas should be visible from the start */\n  @Prop() show: boolean = false;\n\n  /** Decides the placement of the Popover Canvas */\n  @Prop() placement: Placement = 'auto';\n\n  /** Sets the offset skidding */\n  @Prop() offsetSkidding: number = 0;\n\n  /** Sets the offset distance */\n  @Prop() offsetDistance: number = 8;\n\n  @State() renderedShowValue: boolean = false;\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  @Listen('mousedown', { target: 'window' })\n  handleOutsideClick() {\n    if (this.show) {\n      this.show = false;\n    }\n  }\n\n  componentDidLoad() {\n    this.target = this.referenceEl ?? document.querySelector(this.selector);\n    this.renderedShowValue = this.show;\n\n    this.popperInstance = createPopper(this.target, this.popoverCanvasElement, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n      ],\n    });\n\n    const showCanvas = () => {\n      this.show = true;\n    };\n\n    const hideCanvas = () => {\n      this.show = false;\n    };\n\n    this.target.addEventListener('mousedown', (event) => {\n      event.stopPropagation();\n\n      if (this.show) {\n        hideCanvas();\n      } else {\n        showCanvas();\n      }\n    });\n\n    this.popoverCanvasElement.addEventListener('mousemove', (event) => {\n      event.stopPropagation();\n    });\n\n    this.popoverCanvasElement.addEventListener('mousedown', (event) => {\n      event.stopPropagation();\n    });\n  }\n\n  componentDidRender() {\n    if (this.show && !this.renderedShowValue) {\n      // Here we update the popper position since its position is wrong\n      // before it is rendered.\n      this.popperInstance.update();\n    }\n    this.renderedShowValue = this.show;\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  render() {\n    return (\n      <Host class={`sdds-popover-canvas ${this.show ? 'sdds-popover-canvas-show' : ''}`}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"popover-canvas.js","sourceRoot":"","sources":["../../../src/components/popover-canvas/popover-canvas.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, Listen, h, Prop, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-popover-canvas',\n  styleUrl: 'popover-canvas.scss',\n  shadow: true,\n})\nexport class PopoverCanvas {\n  @Element() host!: HTMLSddsPopoverCanvasElement;\n\n  /** The CSS-selector for an element that will trigger the popover */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the popover (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Controls wether the popover is shown or not. If this is set hiding and showing\n   * will be decided by this prop and will need to be controlled from the outside.\n   */\n  @Prop() show: boolean = null;\n\n  /** Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement */\n  @Prop() placement: Placement = 'auto';\n\n  /** Sets the offset skidding */\n  @Prop() offsetSkidding: number = 0;\n\n  /** Sets the offset distance */\n  @Prop() offsetDistance: number = 8;\n\n  /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */\n  @Prop() modifiers: Object[] = [];\n\n  @State() renderedShowValue: boolean = false;\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  @State() isShown: boolean = false;\n\n  @Watch('show')\n  onShowChange(newValue: boolean) {\n    this.isShown = newValue;\n  }\n\n  @Watch('referenceEl')\n  onReferenceElChange(newValue: HTMLElement, oldValue: HTMLElement) {\n    if (newValue !== oldValue) {\n      this.popperInstance?.destroy();\n\n      if (newValue) {\n        this.initialize(newValue);\n      }\n    }\n  }\n\n  @Listen('click', { target: 'window' })\n  onAnyClick(event: MouseEvent) {\n    if (this.isShown && this.show === null) {\n      // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/\n      const isClickOutside = !event.composedPath().includes(this.host as any);\n      if (isClickOutside) {\n        this.isShown = false;\n      }\n    }\n  }\n\n  initialize = (referenceEl) => {\n    this.popperInstance = createPopper(referenceEl, this.host, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n        ...this.modifiers,\n      ],\n    });\n\n    if (this.show === null) {\n      referenceEl.addEventListener('click', (event) => {\n        event.stopPropagation();\n        if (this.isShown) {\n          this.isShown = false;\n        } else {\n          this.isShown = true;\n        }\n      });\n    }\n  };\n\n  connectedCallback() {\n    if (this.show !== null) {\n      this.isShown = this.show;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.selector || this.referenceEl) {\n      const referenceEl = this.referenceEl ?? document.querySelector(this.selector);\n\n      if (referenceEl) {\n        this.initialize(referenceEl);\n      } else {\n        console.error(\n          `Could not initialize popover-canvas: element with selector '${this.selector}' not found.`,\n        );\n      }\n    }\n  }\n\n  componentDidRender() {\n    if (this.isShown && !this.renderedShowValue) {\n      // Here we update the popper position since its position is wrong\n      // before it is rendered.\n      this.popperInstance.update();\n    }\n    this.renderedShowValue = this.isShown;\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  render() {\n    return (\n      <Host class={`sdds-popover-canvas ${this.isShown ? 'sdds-popover-canvas-show' : ''}`}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/popover-canvas/popover-canvas.stories.js

@@ -9,8 +9,7 @@ export default {
   argTypes: {
     canvasPosition: {
       name: 'Canvas position',
-      description: 'Position of the PopoverCanvas',
-      type: { summary: 'string' },
+      description: 'Sets the position of the popover canvas.',
       control: {
         type: 'select',
       },
@@ -27,11 +26,15 @@ export default {
         'Right',
         'Right start',
         'Right end',
+        'Auto',
       ],
+      table: {
+        defaultValue: { summary: 'auto' },
+      },
     },
   },
   args: {
-    canvasPosition: 'Bottom',
+    canvasPosition: 'Auto',
   },
 };
 const ComponentPopoverCanvas = ({ canvasPosition }) => {
@@ -48,6 +51,7 @@ const ComponentPopoverCanvas = ({ canvasPosition }) => {
     'Right': 'right',
     'Right start': 'right-start',
     'Right end': 'right-end',
+    'Auto': 'auto',
   };
   return formatHtmlPreview(`
       <style>
@@ -63,16 +67,15 @@ const ComponentPopoverCanvas = ({ canvasPosition }) => {
       wich might be preferable in frameworks like React -->
       <sdds-popover-canvas
         placement="${canvasPosLookup[canvasPosition]}"
-        selector="#trigger">
-        <div>
-          <h2>A popover canvas!</h2>
-          <p>
-            Where you can put anything you want!
-          </p>
-          <p>
-            <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">Even links!</a>
-          </p>
-        </div>
+        selector="#trigger"
+        class="sdds-u-p2">
+        <h2>A popover canvas!</h2>
+        <p>
+          Where you can put anything you want!
+        </p>
+        <p>
+          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">Even links!</a>
+        </p>
       </sdds-popover-canvas>
 
       <!-- demo-wrapper code below is for demonstration purposes only -->
@@ -86,5 +89,4 @@ const ComponentPopoverCanvas = ({ canvasPosition }) => {
     `);
 };
 export const Default = ComponentPopoverCanvas.bind({});
-Default.args = {};
 //# sourceMappingURL=popover-canvas.stories.js.map