@scania/tegel 0.0.2 → 0.0.31

package/dist/collection/components/toast/sdds-toast.js

@@ -1,256 +1,257 @@
-import { Host, h } from '@stencil/core';
-export class SddsToast {
-  constructor() {
-    this.getIconName = () => {
-      switch (this.type) {
-        case 'information':
-          return 'info';
-        case 'error':
-          return 'error';
-        case 'warning':
-          return 'warning';
-        case 'success':
-          return 'tick';
-        default:
-          return 'info';
-      }
-    };
-    this.handleClose = () => {
-      const sddsCloseEvent = this.sddsClose.emit({
-        toastId: this.toastId,
-      });
-      if (!sddsCloseEvent.defaultPrevented) {
-        this.hidden = true;
-      }
-    };
-    this.getHeaderClasses = () => {
-      if (!this.hasSubheader && !this.hasLink) {
-        return 'only-header';
-      }
-      if (!this.hasSubheader) {
-        return 'no-subheader';
-      }
-      return '';
-    };
-    this.toastId = crypto.randomUUID();
-    this.header = undefined;
-    this.subheader = undefined;
-    this.type = 'information';
-    this.hidden = false;
-    this.role = 'alert';
-    this.hasSubheader = undefined;
-    this.hasLink = undefined;
-  }
-  /** Hides the toast. */
-  async hideToast() {
-    this.hidden = true;
-    return {
-      toastId: this.toastId,
-    };
-  }
-  /** Shows the toast. */
-  async showToast() {
-    this.hidden = false;
-    return {
-      toastId: this.toastId,
-    };
-  }
-  connectedCallback() {
-    const children = Array.from(this.host.children);
-    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');
-    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');
-  }
-  render() {
-    return (h(Host, { role: this.role, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
+import { Host, h } from '@stencil/core';
+export class SddsToast {
+  constructor() {
+    this.getIconName = () => {
+      switch (this.type) {
+        case 'information':
+          return 'info';
+        case 'error':
+          return 'error';
+        case 'warning':
+          return 'warning';
+        case 'success':
+          return 'tick';
+        default:
+          return 'info';
+      }
+    };
+    this.handleClose = () => {
+      const sddsCloseEvent = this.sddsClose.emit({
+        toastId: this.toastId,
+      });
+      if (!sddsCloseEvent.defaultPrevented) {
+        this.hidden = true;
+      }
+    };
+    this.getHeaderClasses = () => {
+      if (!this.hasSubheader && !this.hasLink) {
+        return 'only-header';
+      }
+      if (!this.hasSubheader) {
+        return 'no-subheader';
+      }
+      return '';
+    };
+    this.toastId = crypto.randomUUID();
+    this.header = undefined;
+    this.subheader = undefined;
+    this.type = 'information';
+    this.hidden = false;
+    this.toastRole = 'alert';
+    this.hasSubheader = undefined;
+    this.hasLink = undefined;
+  }
+  /** Hides the toast. */
+  async hideToast() {
+    this.hidden = true;
+    return {
+      toastId: this.toastId,
+    };
+  }
+  /** Shows the toast. */
+  async showToast() {
+    this.hidden = false;
+    return {
+      toastId: this.toastId,
+    };
+  }
+  connectedCallback() {
+    const children = Array.from(this.host.children);
+    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');
+    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');
+  }
+  render() {
+    return (h(Host, { role: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
             toast-wrapper
             ${this.type}
             ` }, h("sdds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `toast-content` }, h("div", { class: `toast-header
               ${this.getHeaderClasses()}
-              ` }, this.header), h("div", { class: `toast-subheader ${this.hasLink ? '' : 'no-link'}` }, h("slot", { name: "toast-subheader" })), h("slot", { name: "toast-link" })), h("button", { onClick: () => {
-        this.handleClose();
-      }, class: `toast-close` }, h("sdds-icon", { name: "cross", size: "20px" })))));
-  }
-  static get is() { return "sdds-toast"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sdds-toast.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sdds-toast.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "toastId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "ID for the toast. Randomly generated if not specified."
-        },
-        "attribute": "toast-id",
-        "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
-      },
-      "header": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Header text for the component."
-        },
-        "attribute": "header",
-        "reflect": false
-      },
-      "subheader": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Subheader text for the component."
-        },
-        "attribute": "subheader",
-        "reflect": false
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'information' | 'error' | 'warning' | 'success'",
-          "resolved": "\"error\" | \"information\" | \"success\" | \"warning\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Type of toast."
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'information'"
-      },
-      "hidden": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Hides the toast."
-        },
-        "attribute": "hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "role": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'alert' | 'log' | 'status'",
-          "resolved": "\"alert\" | \"log\" | \"status\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "ARIA role for the toast."
-        },
-        "attribute": "role",
-        "reflect": false,
-        "defaultValue": "'alert'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasSubheader": {},
-      "hasLink": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sddsClose",
-        "name": "sddsClose",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Sends unique toast identifier component is closed."
-        },
-        "complexType": {
-          "original": "{\n    toastId: string;\n  }",
-          "resolved": "{ toastId: string; }",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "hideToast": {
-        "complexType": {
-          "signature": "() => Promise<{ toastId: string; }>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<{ toastId: string; }>"
-        },
-        "docs": {
-          "text": "Hides the toast.",
-          "tags": []
-        }
-      },
-      "showToast": {
-        "complexType": {
-          "signature": "() => Promise<{ toastId: string; }>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<{ toastId: string; }>"
-        },
-        "docs": {
-          "text": "Shows the toast.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-}
+              ` }, this.header), h("div", { class: `toast-subheader ${this.hasLink ? '' : 'no-link'}` }, h("slot", { name: "toast-subheader" })), h("slot", { name: "toast-link" })), h("button", { onClick: () => {
+        this.handleClose();
+      }, class: `toast-close` }, h("sdds-icon", { name: "cross", size: "20px" })))));
+  }
+  static get is() { return "sdds-toast"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-toast.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-toast.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "toastId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID for the toast. Randomly generated if not specified."
+        },
+        "attribute": "toast-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
+      },
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Header text for the component."
+        },
+        "attribute": "header",
+        "reflect": false
+      },
+      "subheader": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Subheader text for the component."
+        },
+        "attribute": "subheader",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'information' | 'error' | 'warning' | 'success'",
+          "resolved": "\"error\" | \"information\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of toast."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'information'"
+      },
+      "hidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hides the toast."
+        },
+        "attribute": "hidden",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "toastRole": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'alert' | 'log' | 'status'",
+          "resolved": "\"alert\" | \"log\" | \"status\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ARIA toastRole for the toast."
+        },
+        "attribute": "toast-role",
+        "reflect": false,
+        "defaultValue": "'alert'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasSubheader": {},
+      "hasLink": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sddsClose",
+        "name": "sddsClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique toast identifier component is closed."
+        },
+        "complexType": {
+          "original": "{\n    toastId: string;\n  }",
+          "resolved": "{ toastId: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "hideToast": {
+        "complexType": {
+          "signature": "() => Promise<{ toastId: string; }>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<{ toastId: string; }>"
+        },
+        "docs": {
+          "text": "Hides the toast.",
+          "tags": []
+        }
+      },
+      "showToast": {
+        "complexType": {
+          "signature": "() => Promise<{ toastId: string; }>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<{ toastId: string; }>"
+        },
+        "docs": {
+          "text": "Shows the toast.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=sdds-toast.js.map

package/dist/collection/components/toast/sdds-toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-toast.js","sourceRoot":"","sources":["../../../src/components/toast/sdds-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACvF,OAAO,EAAe,MAAM,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAOpE,MAAM,OAAO,SAAS;;IAsDpB,gBAAW,GAAG,GAAG,EAAE;MACjB,QAAQ,IAAI,CAAC,IAAI,EAAE;QACjB,KAAK,aAAa;UAChB,OAAO,MAAM,CAAC;QAChB,KAAK,OAAO;UACV,OAAO,OAAO,CAAC;QACjB,KAAK,SAAS;UACZ,OAAO,SAAS,CAAC;QACnB,KAAK,SAAS;UACZ,OAAO,MAAM,CAAC;QAChB;UACE,OAAO,MAAM,CAAC;OACjB;IACH,CAAC,CAAC;IAEF,gBAAW,GAAG,GAAG,EAAE;MACjB,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QACzC,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,cAAc,CAAC,gBAAgB,EAAE;QACpC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;OACpB;IACH,CAAC,CAAC;IAQF,qBAAgB,GAAG,GAAG,EAAE;MACtB,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACvC,OAAO,aAAa,CAAC;OACtB;MACD,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACtB,OAAO,cAAc,CAAC;OACvB;MACD,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;mBA1FwB,MAAM,CAAC,UAAU,EAAE;;;gBASmB,aAAa;kBAGnD,KAAK;qBAGiB,OAAO;;;;EAQvD,uBAAuB;EAEvB,KAAK,CAAC,SAAS;IACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO;MACL,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;EACJ,CAAC;EAED,uBAAuB;EAEvB,KAAK,CAAC,SAAS;IACb,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,OAAO;MACL,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;EACJ,CAAC;EAqCD,iBAAiB;IACf,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,KAAK,iBAAiB,CAAC,CAAC;IAC7F,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC;EACrF,CAAC;EAYD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAE,IAAI,CAAC,SAAS,sBACF,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAC5D,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE;MAEzC,WACE,KAAK,EAAE;;cAEH,IAAI,CAAC,IAAI;aACV;QAEH,iBAAW,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,MAAM,GAAa;QAC7D,WAAK,KAAK,EAAE,eAAe;UACzB,WACE,KAAK,EAAE;gBACL,IAAI,CAAC,gBAAgB,EAAE;eACxB,IAEA,IAAI,CAAC,MAAM,CACR;UACN,WAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE;YAC5D,YAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC;UACN,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B;QACN,cACE,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,CAAC,WAAW,EAAE,CAAC;UACrB,CAAC,EACD,KAAK,EAAE,aAAa;UAEpB,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACzC,CACL,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-toast',\n  styleUrl: 'sdds-toast.scss',\n  shadow: true,\n})\nexport class SddsToast {\n  /** ID for the toast. Randomly generated if not specified. */\n  @Prop() toastId: string = crypto.randomUUID();\n\n  /** Header text for the component. */\n  @Prop() header: string;\n\n  /** Subheader text for the component. */\n  @Prop() subheader: string;\n\n  /** Type of toast. */\n  @Prop() type: 'information' | 'error' | 'warning' | 'success' = 'information';\n\n  /** Hides the toast. */\n  @Prop() hidden: boolean = false;\n\n  /** ARIA toastRole for the toast. */\n  @Prop() toastRole: 'alert' | 'log' | 'status' = 'alert';\n\n  @Element() host: HostElement;\n\n  @State() hasSubheader: boolean;\n\n  @State() hasLink: boolean;\n\n  /** Hides the toast. */\n  @Method()\n  async hideToast() {\n    this.hidden = true;\n    return {\n      toastId: this.toastId,\n    };\n  }\n\n  /** Shows the toast. */\n  @Method()\n  async showToast() {\n    this.hidden = false;\n    return {\n      toastId: this.toastId,\n    };\n  }\n\n  /** Sends unique toast identifier component is closed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    toastId: string;\n  }>;\n\n  getIconName = () => {\n    switch (this.type) {\n      case 'information':\n        return 'info';\n      case 'error':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      case 'success':\n        return 'tick';\n      default:\n        return 'info';\n    }\n  };\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      toastId: this.toastId,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  connectedCallback() {\n    const children = Array.from(this.host.children);\n    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');\n    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');\n  }\n\n  getHeaderClasses = () => {\n    if (!this.hasSubheader && !this.hasLink) {\n      return 'only-header';\n    }\n    if (!this.hasSubheader) {\n      return 'no-subheader';\n    }\n    return '';\n  };\n\n  render() {\n    return (\n      <Host\n        role={this.toastRole}\n        aria-describedby={this.host.getAttribute('aria-describedby')}\n        class={`${this.hidden ? 'hide' : 'show'}`}\n      >\n        <div\n          class={`\n            toast-wrapper\n            ${this.type}\n            `}\n        >\n          <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>\n          <div class={`toast-content`}>\n            <div\n              class={`toast-header\n              ${this.getHeaderClasses()}\n              `}\n            >\n              {this.header}\n            </div>\n            <div class={`toast-subheader ${this.hasLink ? '' : 'no-link'}`}>\n              <slot name=\"toast-subheader\"></slot>\n            </div>\n            <slot name=\"toast-link\"></slot>\n          </div>\n          <button\n            onClick={() => {\n              this.handleClose();\n            }}\n            class={`toast-close`}\n          >\n            <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}