@scania/tegel 0.0.1-beta.9 → 0.0.31

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

@@ -0,0 +1,87 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Modal',
+  parameters: {
+    layout: 'fullscreen',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    size: {
+      name: 'Size',
+      description: 'Size of modal',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small', 'Extra small'],
+    },
+    actions: {
+      name: 'Actions',
+      description: 'Behaviour of modal actions',
+      control: {
+        type: 'radio',
+      },
+      options: ['Sticky', 'Static'],
+    },
+    headline: {
+      name: 'Modal headline',
+      description: 'Customize headline',
+      control: {
+        type: 'text',
+      },
+    },
+    bodyText: {
+      name: 'Modal body text',
+      description: 'Customize body text',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    headline: 'The buttons for the modal only works in the canvas tab',
+    bodyText: '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.',
+    actions: 'Static',
+    size: 'Large',
+  },
+};
+const sizeLookUp = {
+  'Large': 'lg',
+  'Medium': 'md',
+  'Small': 'sm',
+  'Extra small': 'xs',
+};
+const ModalTemplate = ({ size, headline, bodyText, actions }) => formatHtmlPreview(`
+  <button id="my-modal-button" class="sdds-btn sdds-btn-primary">Open modal</button>
+
+  <sdds-modal open id="my-modal" size="${sizeLookUp[size]}" actions="${actions.toLowerCase()}">
+      <h5 class="sdds-modal-headline" slot="sdds-modal-headline">${headline}</h5>
+      <span slot="sdds-modal-body">
+          ${bodyText}
+      </span>
+      <button slot="sdds-modal-actions" data-dismiss-modal onclick="console.log('delete')" class="sdds-btn sdds-btn-danger sdds-btn-md">Delete</button>
+      <button slot="sdds-modal-actions" data-dismiss-modal onclick="console.log('cancel')" class="sdds-btn sdds-btn-secondary sdds-btn-md">Cancel</button>
+  </sdds-modal>
+  <script>
+
+    document.getElementById('my-modal-button').addEventListener('click', () => {
+      document.getElementById('my-modal').open = true;
+    })
+  </script>
+
+  `);
+export const WebComponent = ModalTemplate.bind({});
+WebComponent.args = {};
+//# sourceMappingURL=modal-webcomponent.stories.js.map

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

@@ -0,0 +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"]}

package/dist/collection/components/modal/modal.css

@@ -0,0 +1,350 @@
+:root,
+.sdds-mode-light {
+  --sdds-modal-backdrop: rgba(0 0 0 / 40%);
+  --sdds-modal-background: var(--sdds-white);
+  --sdds-modal-text: var(--sdds-grey-958);
+  --sdds-modal-icon: var(--sdds-black);
+  --sdds-modal-icon-native: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='black'/%3E%3C/svg%3E%0A");
+  --sdds-modal-scrollbar: var(--sdds-grey-300);
+  --sdds-modal-scrollbar-track: var(--sdds-grey-300);
+  --sdds-modal-scrollbar-thumb: var(--sdds-grey-500);
+}
+
+.sdds-mode-dark {
+  --sdds-modal-backdrop: rgba(0 0 0 / 40%);
+  --sdds-modal-background: var(--sdds-grey-900);
+  --sdds-modal-text: var(--sdds-grey-50);
+  --sdds-modal-icon: var(--sdds-white);
+  --sdds-modal-icon-native: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='white'/%3E%3C/svg%3E%0A");
+  --sdds-modal-scrollbar: var(--sdds-grey-300);
+  --sdds-modal-scrollbar-track: var(--sdds-grey-300);
+  --sdds-modal-scrollbar-thumb: var(--sdds-grey-500);
+}
+
+/* MIXINS */
+/* MODAL STYLING */
+.sdds-modal {
+  box-sizing: border-box;
+  background-color: var(--sdds-modal-background);
+  margin: auto;
+  position: relative;
+  border-radius: 4px;
+  padding: 16px;
+  max-height: 85vh;
+  overflow-y: auto;
+  /* SCROLL STUFF */
+  /* width */
+  /* Track */
+  /* Handle */
+}
+.sdds-modal * {
+  box-sizing: border-box;
+}
+.sdds-modal::-webkit-scrollbar {
+  width: 5px;
+  background-color: var(--sdds-grey-300);
+  border-radius: 0 1em 1em 0;
+}
+.sdds-modal::-webkit-scrollbar-track {
+  background-color: var(--sdds-grey-300);
+  border-radius: 0 1em 1em 0;
+}
+.sdds-modal::-webkit-scrollbar-thumb {
+  background-color: var(--sdds-grey-500);
+  border-radius: 0 1em 1em 0;
+}
+.sdds-modal__actions-sticky {
+  overflow: hidden;
+}
+.sdds-modal__actions-sticky .sdds-modal-body {
+  font: var(--sdds-body-01);
+  letter-spacing: var(--sdds-body-01-ls);
+  padding-bottom: 96px;
+  margin: 0 -16px 0 0;
+  max-height: calc(85vh - 36px);
+  overflow-y: auto;
+}
+.sdds-modal__actions-sticky .sdds-modal-actions {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  background-color: var(--sdds-modal-background);
+  padding: var(--sdds-spacing-element-16);
+  display: flex;
+  gap: 16px;
+}
+.sdds-modal__actions-static .sdds-modal-actions {
+  background-color: var(--sdds-modal-background);
+  display: flex;
+  gap: 16px;
+}
+
+@media (min-width: 320px) {
+  .sdds-modal-xs {
+    width: 100%;
+  }
+
+  .sdds-modal-sm {
+    width: 100%;
+  }
+
+  .sdds-modal-md {
+    width: 100%;
+  }
+
+  .sdds-modal-lg {
+    width: 100%;
+  }
+}
+@media (min-width: 672px) {
+  .sdds-modal-xs {
+    width: 75%;
+  }
+
+  .sdds-modal-sm {
+    width: 62.5%;
+  }
+
+  .sdds-modal-md {
+    width: 75%;
+  }
+
+  .sdds-modal-lg {
+    width: 100%;
+  }
+}
+@media (min-width: 1056px) {
+  .sdds-modal-xs {
+    width: 31.25%;
+  }
+
+  .sdds-modal-sm {
+    width: 43.75%;
+  }
+
+  .sdds-modal-md {
+    width: 62.5%;
+  }
+
+  .sdds-modal-lg {
+    width: 75%;
+  }
+}
+@media (min-width: 1312px) {
+  .sdds-modal-xs {
+    width: 31.25%;
+  }
+
+  .sdds-modal-sm {
+    width: 37.5%;
+  }
+
+  .sdds-modal-md {
+    width: 62.5%;
+  }
+
+  .sdds-modal-lg {
+    width: 75%;
+  }
+}
+@media (min-width: 1584px) {
+  .sdds-modal-xs {
+    width: 25%;
+  }
+
+  .sdds-modal-sm {
+    width: 37.5%;
+  }
+
+  .sdds-modal-md {
+    width: 50%;
+  }
+
+  .sdds-modal-lg {
+    width: 75%;
+  }
+}
+@media (max-width: 320px) {
+  .sdds-modal-md,
+.sdds-modal-lg,
+.sdds-modal-sm {
+    height: 100%;
+  }
+  .sdds-modal-md slot[name=sdds-modal-actions]::slotted(*),
+.sdds-modal-lg slot[name=sdds-modal-actions]::slotted(*),
+.sdds-modal-sm slot[name=sdds-modal-actions]::slotted(*) {
+    display: flex;
+  }
+}
+/* MODAL SUBELEMENTS */
+.sdds-modal-header {
+  display: flex;
+  padding-bottom: var(--sdds-spacing-element-8);
+  position: sticky;
+  top: 0;
+  background-color: var(--sdds-modal-background);
+  z-index: 1;
+}
+.sdds-modal-header::before {
+  content: " ";
+  position: absolute;
+  height: 16px;
+  top: -16px;
+  width: 100%;
+  background-color: var(--sdds-modal-background);
+}
+
+.sdds-modal-headline {
+  color: var(--sdds-modal-text);
+  font: var(--sdds-headline-05);
+  letter-spacing: var(--sdds-headline-05-ls);
+  margin: 0;
+  flex: 1;
+  color: var(--sdds-modal-text);
+}
+
+.sdds-modal-body {
+  color: var(--sdds-modal-text);
+  font: var(--sdds-body-01);
+  letter-spacing: var(--sdds-body-01-ls);
+  padding-bottom: 40px;
+  overflow-y: visible;
+  padding-right: 16px;
+  /* SCROLL STUFF */
+  /* width */
+  /* Track */
+  /* Handle */
+}
+.sdds-modal-body::-webkit-scrollbar {
+  width: 5px;
+  background-color: var(--sdds-grey-300);
+}
+.sdds-modal-body::-webkit-scrollbar-track {
+  background-color: var(--sdds-grey-300);
+}
+.sdds-modal-body::-webkit-scrollbar-thumb {
+  background-color: var(--sdds-grey-500);
+}
+@media (min-width: 1056px) {
+  .sdds-modal-body {
+    padding-right: 64px;
+  }
+}
+
+.sdds-modal-backdrop {
+  box-sizing: border-box;
+  left: 0;
+  top: 0;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  z-index: 600;
+  background-color: var(--sdds-modal-backdrop);
+  padding: 0 16px;
+}
+.sdds-modal-backdrop * {
+  box-sizing: border-box;
+}
+@media (max-width: 320px) {
+  .sdds-modal-backdrop {
+    padding: 0;
+  }
+}
+.sdds-modal-backdrop.show {
+  display: flex;
+}
+.sdds-modal-backdrop.hide {
+  display: none;
+}
+
+button.sdds-modal-close {
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  appearance: unset;
+}
+
+.sdds-modal-close {
+  display: inline-block;
+  height: auto;
+  color: var(--sdds-modal-icon);
+  cursor: pointer;
+}
+.sdds-modal-close:focus {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+@media (min-width: 320px) {
+  .sdds-modal-close {
+    margin-left: var(--sdds-spacing-element-16);
+  }
+}
+@media (min-width: 1056px) {
+  .sdds-modal-close {
+    margin-left: var(--sdds-spacing-element-48);
+  }
+}
+
+.sdds-modal-close-btn {
+  display: inline-block;
+  height: auto;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+@media (min-width: 320px) {
+  .sdds-modal-close-btn {
+    margin-left: var(--sdds-spacing-element-16);
+  }
+}
+@media (min-width: 1056px) {
+  .sdds-modal-close-btn {
+    margin-left: var(--sdds-spacing-element-48);
+  }
+}
+.sdds-modal-close-btn svg {
+  fill: var(--sdds-modal-icon);
+}
+
+.sdds-modal-overflow {
+  overflow: hidden;
+}
+
+/* WEB COMPONENT STUFF */
+:host {
+  left: 0;
+  top: 0;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  z-index: 600;
+  background-color: var(--sdds-modal-backdrop);
+  padding: 0 16px;
+}
+@media (max-width: 320px) {
+  :host {
+    padding: 0;
+  }
+}
+:host.show {
+  display: flex;
+}
+:host.hide {
+  display: none;
+}
+:host .sdds-modal-close {
+  border: none;
+  background-color: transparent;
+}
+:host .sdds-modal-close-btn {
+  border: none;
+  background-color: transparent;
+}
+
+:host(.show) {
+  display: flex;
+}
+
+:host(.hide) {
+  display: none;
+}

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

@@ -0,0 +1,149 @@
+import { h, Host } from '@stencil/core';
+export class Modal {
+  constructor() {
+    this.prevent = false;
+    this.size = 'md';
+    this.actions = 'static';
+    this.open = false;
+  }
+  /** Shows the modal  */
+  async openModal() {
+    this.open = true;
+  }
+  setDissmissButtons() {
+    const nodes = this.el.querySelectorAll('[data-dismiss-modal]');
+    [...Array.from(nodes), this.closeButtonEl].forEach((el) => {
+      el.addEventListener('click', () => {
+        this.open = false;
+      });
+    });
+  }
+  handleClick(e) {
+    const targetList = e.composedPath();
+    const target = targetList[0];
+    if (target.classList[0] === 'sdds-modal-close' ||
+      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)) {
+      this.open = false;
+    }
+  }
+  componentDidRender() {
+    this.setDissmissButtons();
+  }
+  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" })))));
+  }
+  static get is() { return "sdds-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["modal.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["modal.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "prevent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables closing modal on clicking on overlay area."
+        },
+        "attribute": "prevent",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'xs' | 'sm' | 'md' | 'lg'",
+          "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of modal"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'md'"
+      },
+      "actions": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sticky' | 'static'",
+          "resolved": "\"static\" | \"sticky\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sticky or Static Actions"
+        },
+        "attribute": "actions",
+        "reflect": false,
+        "defaultValue": "'static'"
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "openModal": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Shows the modal",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=modal.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,20 @@
+: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;
+  display: none;
+}
+:host * {
+  box-sizing: border-box;
+}
+
+:host(.sdds-popover-canvas-show) {
+  opacity: 1;
+  display: block;
+}