@scania/tegel 0.0.33 → 0.0.51

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

@@ -1,149 +1,267 @@
-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
+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) => {
+          event.stopPropagation();
+          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.selector = undefined;
+    this.referenceEl = undefined;
+    this.show = undefined;
+    this.isShown = false;
+  }
+  /** Shows the modal.  */
+  async showModal() {
+    this.handleShow();
+  }
+  /** Closes the modal. */
+  async closeModal() {
+    this.handleClose();
+  }
+  connectedCallback() {
+    if (this.show !== null) {
+      this.isShown = this.show;
+    }
+    this.setDissmissButtons();
+    this.setShowButton();
+  }
+  /** 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.handleClose(event);
+    }
+  }
+  /** 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.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"; }
+  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'"
+      },
+      "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": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "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": "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 {
+      "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": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Closes the modal.",
+          "tags": []
+        }
+      }
+    };
+  }
+  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        event.stopPropagation();\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;
 }