@scania/tegel 0.0.1-beta.7 → 0.0.2

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

@@ -1,146 +1,148 @@
-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]');
-    nodes.forEach((el) => {
-      el.addEventListener('click', () => {
-        this.open = false;
-      });
-    });
-  }
-  handleClick(e) {
-    const targetList = e.composedPath();
-    const target = targetList[0];
-    if (target.classList[0] === 'sdds-modal-btn' ||
-      (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-btn" })), 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. Accepted strings are: xs, sm, md, lg."
-        },
-        "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"; }
-}
+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"; }
+}

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

@@ -2,12 +2,12 @@
   box-sizing: border-box;
   min-width: 160px;
   min-height: 160px;
-  background-color: var(--sdds-popover-bg-default);
+  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: 20000;
-  /* same as tooltip */
+  z-index: 800;
   display: none;
 }
 :host * {