@scania/tegel 0.0.52 → 0.0.61

package/dist/collection/components/header/webcomponent/header-launcher-grid/header-launcher-grid.js

@@ -0,0 +1,47 @@
+import { h, Host } from '@stencil/core';
+import { getPreviousNestedChildOfSiblingsMatching, isHeadingElement, } from '../../../../utils/utils';
+export class HeaderLauncherGrid {
+  constructor() {
+    this.headingElement = undefined;
+  }
+  componentWillLoad() {
+    const listRoot = this.host;
+    const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, (el) => {
+      const e = el;
+      return isHeadingElement(e);
+    });
+    if (headingEl) {
+      this.headingElement = headingEl;
+    }
+    else {
+      console.warn('Heading element for list not found');
+    }
+  }
+  render() {
+    var _a;
+    const listAttributes = {
+      'class': 'sdds-header-launcher-grid',
+      'role': 'list',
+      'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
+    };
+    return (h(Host, null, h("div", Object.assign({}, listAttributes), h("slot", null))));
+  }
+  static get is() { return "sdds-header-launcher-grid"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-launcher-grid.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-launcher-grid.css"]
+    };
+  }
+  static get states() {
+    return {
+      "headingElement": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=header-launcher-grid.js.map

package/dist/collection/components/header/webcomponent/header-launcher-grid/header-launcher-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-launcher-grid.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-launcher-grid/header-launcher-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,wCAAwC,EACxC,gBAAgB,GACjB,MAAM,yBAAyB,CAAC;AAOjC,MAAM,OAAO,kBAAkB;;;;EAK7B,iBAAiB;IACf,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;IAE3B,MAAM,SAAS,GAAG,wCAAwC,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;MAC1E,MAAM,CAAC,GAAG,EAAE,CAAC;MACb,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;KACjC;SAAM;MACL,OAAO,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;KACpD;EACH,CAAC;EAED,MAAM;;IACJ,MAAM,cAAc,GAAG;MACrB,OAAO,EAAE,2BAA2B;MACpC,MAAM,EAAE,MAAM;MACd,iBAAiB,EAAE,MAAA,IAAI,CAAC,cAAc,0CAAE,EAAE;KAC3C,CAAC;IACF,OAAO,CACL,EAAC,IAAI;MACH,2BAAS,cAAc;QACrB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, State } from '@stencil/core';\nimport {\n  getPreviousNestedChildOfSiblingsMatching,\n  isHeadingElement,\n} from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-launcher-grid',\n  styleUrl: 'header-launcher-grid.scss',\n  shadow: false,\n})\nexport class HeaderLauncherGrid {\n  @Element() host: HTMLElement;\n\n  @State() headingElement: HTMLElement;\n\n  componentWillLoad() {\n    const listRoot = this.host;\n\n    const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, (el) => {\n      const e = el;\n      return isHeadingElement(e);\n    });\n\n    if (headingEl) {\n      this.headingElement = headingEl;\n    } else {\n      console.warn('Heading element for list not found');\n    }\n  }\n\n  render() {\n    const listAttributes = {\n      'class': 'sdds-header-launcher-grid',\n      'role': 'list',\n      'aria-labelledby': this.headingElement?.id,\n    };\n    return (\n      <Host>\n        <div {...listAttributes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/header-launcher-grid-item/header-launcher-grid-item.css

@@ -0,0 +1,37 @@
+:host {
+  display: block;
+  width: 96px;
+  height: 96px;
+}
+:host ::slotted(a),
+:host ::slotted(button) {
+  all: unset;
+  box-sizing: border-box;
+  border-right: 1px solid var(--sdds-nav-item-border-color);
+  width: 100%;
+  height: 100%;
+  border: none;
+  padding: 0 12px;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 8px;
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  background-color: var(--sdds-header-app-launcher-menu-bg);
+  color: var(--sdds-grey-800);
+  border-radius: 4px;
+  transition: background-color 150ms ease;
+}
+:host ::slotted(a:hover),
+:host ::slotted(button:hover) {
+  background-color: var(--sdds-grey-100);
+  cursor: pointer;
+}
+:host ::slotted(a:focus-visible),
+:host ::slotted(button:focus-visible) {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}

package/dist/collection/components/header/webcomponent/header-launcher-grid-item/header-launcher-grid-item.js

@@ -0,0 +1,19 @@
+import { h, Host } from '@stencil/core';
+export class HeaderLauncherGridItem {
+  render() {
+    return (h(Host, { role: "listitem" }, h("slot", null)));
+  }
+  static get is() { return "sdds-header-launcher-grid-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-launcher-grid-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-launcher-grid-item.css"]
+    };
+  }
+}
+//# sourceMappingURL=header-launcher-grid-item.js.map

package/dist/collection/components/header/webcomponent/header-launcher-grid-item/header-launcher-grid-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-launcher-grid-item.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-launcher-grid-item/header-launcher-grid-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,sBAAsB;EACjC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU;MACnB,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-launcher-grid-item',\n  styleUrl: 'header-launcher-grid-item.scss',\n  shadow: true,\n})\nexport class HeaderLauncherGridItem {\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/header-launcher-grid-title/header-launcher-grid-title.css

@@ -0,0 +1,14 @@
+.sdds-header-launcher-grid-title {
+  all: unset;
+  box-sizing: border-box;
+  font: var(--sdds-detail-04);
+  letter-spacing: var(--sdds-detail-04-ls);
+  color: var(--sdds-header-app-launcher-grid-category-title-color);
+  text-transform: uppercase;
+  height: 48px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);
+  margin: 0;
+}

package/dist/collection/components/header/webcomponent/header-launcher-grid-title/header-launcher-grid-title.js

@@ -0,0 +1,21 @@
+import { h, Host } from '@stencil/core';
+export class HeaderLauncherGridTitle {
+  constructor() {
+    this.uuid = crypto.randomUUID();
+  }
+  render() {
+    return (h(Host, null, h("h3", { class: "sdds-header-launcher-grid-title", id: `sdds-${this.uuid}` }, h("slot", null))));
+  }
+  static get is() { return "sdds-header-launcher-grid-title"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-launcher-grid-title.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-launcher-grid-title.css"]
+    };
+  }
+}
+//# sourceMappingURL=header-launcher-grid-title.js.map

package/dist/collection/components/header/webcomponent/header-launcher-grid-title/header-launcher-grid-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-launcher-grid-title.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-launcher-grid-title/header-launcher-grid-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,uBAAuB;EALpC;IAMU,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;GAW5C;EATC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,UAAI,KAAK,EAAC,iCAAiC,EAAC,EAAE,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE;QACjE,eAAa,CACV,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-launcher-grid-title',\n  styleUrl: 'header-launcher-grid-title.scss',\n  shadow: false,\n})\nexport class HeaderLauncherGridTitle {\n  private uuid: string = crypto.randomUUID();\n\n  render() {\n    return (\n      <Host>\n        <h3 class=\"sdds-header-launcher-grid-title\" id={`sdds-${this.uuid}`}>\n          <slot></slot>\n        </h3>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/header-launcher-list/header-launcher-list.js

@@ -0,0 +1,11 @@
+import { Host, h } from '@stencil/core';
+export class HeaderLauncherList {
+  constructor() {
+    this.uuid = crypto.randomUUID();
+  }
+  render() {
+    return (h(Host, null, h("sdds-header-dropdown-list", { type: "lg" }, h("slot", null))));
+  }
+  static get is() { return "sdds-header-launcher-list"; }
+}
+//# sourceMappingURL=header-launcher-list.js.map

package/dist/collection/components/header/webcomponent/header-launcher-list/header-launcher-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-launcher-list.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-launcher-list/header-launcher-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAMnD,MAAM,OAAO,kBAAkB;EAJ/B;IAKE,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;GAWpC;EATC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,iCAA2B,IAAI,EAAC,IAAI;QAClC,eAAa,CACa,CACvB,CACR,CAAC;EACJ,CAAC;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-launcher-list',\n  shadow: false,\n})\nexport class HeaderLauncherList {\n  uuid: string = crypto.randomUUID();\n\n  render() {\n    return (\n      <Host>\n        <sdds-header-dropdown-list type=\"lg\">\n          <slot></slot>\n        </sdds-header-dropdown-list>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/header-launcher-list-item/header-launcher-list-item.css

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);
+}

package/dist/collection/components/header/webcomponent/header-launcher-list-item/header-launcher-list-item.js

@@ -0,0 +1,19 @@
+import { h, Host } from '@stencil/core';
+export class HeaderLauncherListItem {
+  render() {
+    return (h(Host, null, h("sdds-header-dropdown-list-item", { type: "lg" }, h("slot", null))));
+  }
+  static get is() { return "sdds-header-launcher-list-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-launcher-list-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-launcher-list-item.css"]
+    };
+  }
+}
+//# sourceMappingURL=header-launcher-list-item.js.map

package/dist/collection/components/header/webcomponent/header-launcher-list-item/header-launcher-list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-launcher-list-item.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-launcher-list-item/header-launcher-list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,sBAAsB;EACjC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,sCAAgC,IAAI,EAAC,IAAI;QACvC,eAAa,CACkB,CAC5B,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-launcher-list-item',\n  styleUrl: 'header-launcher-list-item.scss',\n  shadow: true,\n})\nexport class HeaderLauncherListItem {\n  render() {\n    return (\n      <Host>\n        <sdds-header-dropdown-list-item type=\"lg\">\n          <slot></slot>\n        </sdds-header-dropdown-list-item>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/header-launcher-list-title/header-launcher-list-title.css

@@ -0,0 +1,14 @@
+.sdds-header-launcher-list-title {
+  all: unset;
+  box-sizing: border-box;
+  font: var(--sdds-detail-06);
+  letter-spacing: var(--sdds-detail-06-ls);
+  color: var(--sdds-header-app-launcher-category-title-color);
+  text-transform: uppercase;
+  height: 48px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);
+  margin: 0;
+}

package/dist/collection/components/header/webcomponent/header-launcher-list-title/header-launcher-list-title.js

@@ -0,0 +1,22 @@
+import { h, Host } from '@stencil/core';
+export class HeaderLauncherListTitle {
+  constructor() {
+    this.uuid = crypto.randomUUID();
+  }
+  render() {
+    return (h(Host, null, h("h3", { class: "sdds-header-launcher-list-title", id: `sdds-${this.uuid}` }, h("slot", null))));
+  }
+  static get is() { return "sdds-header-launcher-list-title"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-launcher-list-title.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-launcher-list-title.css"]
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=header-launcher-list-title.js.map

package/dist/collection/components/header/webcomponent/header-launcher-list-title/header-launcher-list-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-launcher-list-title.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-launcher-list-title/header-launcher-list-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAO5D,MAAM,OAAO,uBAAuB;EALpC;IAQU,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;GAW5C;EATC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,UAAI,KAAK,EAAC,iCAAiC,EAAC,EAAE,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE;QACjE,eAAa,CACV,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-launcher-list-title',\n  styleUrl: 'header-launcher-list-title.scss',\n  shadow: false,\n})\nexport class HeaderLauncherListTitle {\n  @Element() host: HTMLElement;\n\n  private uuid: string = crypto.randomUUID();\n\n  render() {\n    return (\n      <Host>\n        <h3 class=\"sdds-header-launcher-list-title\" id={`sdds-${this.uuid}`}>\n          <slot></slot>\n        </h3>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/header-title/header-title.css

@@ -0,0 +1,28 @@
+:host {
+  display: block;
+  flex-shrink: 1;
+  box-sizing: border-box;
+  color: var(--sdds-header-nav-item-color);
+  font-weight: normal;
+  font-family: var(--sdds-font-family-headline);
+  letter-spacing: normal;
+  position: relative;
+}
+:host .component ::after {
+  content: " ";
+  display: block;
+  height: 100%;
+  width: 24px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: linear-gradient(to right, transparent, var(--sdds-header-background));
+}
+:host slot {
+  min-width: inherit;
+  display: block;
+  align-items: center;
+  white-space: nowrap;
+  text-overflow: fade;
+  padding: 0 24px;
+}

package/dist/collection/components/header/webcomponent/header-title/header-title.js

@@ -0,0 +1,19 @@
+import { h, Host } from '@stencil/core';
+export class HeaderTitle {
+  render() {
+    return (h(Host, null, h("div", { class: "component" }, h("slot", null))));
+  }
+  static get is() { return "sdds-header-title"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-title.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-title.css"]
+    };
+  }
+}
+//# sourceMappingURL=header-title.js.map

package/dist/collection/components/header/webcomponent/header-title/header-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-title.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-title/header-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,WAAW;EACtB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,WAAW;QACpB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-title',\n  styleUrl: 'header-title.scss',\n  shadow: true,\n})\nexport class HeaderTitle {\n  render() {\n    return (\n      <Host>\n        <div class=\"component\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/icon/icon.js

@@ -3,7 +3,7 @@ import { h, Host } from '@stencil/core';
 import { iconsCollection } from './iconsArray';
 export class Icon {
   constructor() {
-    this.setIcons = () => this.arrayOfIcons.map(element => {
+    this.setIcons = () => this.arrayOfIcons.map((element) => {
       if (element.name === this.name) {
         return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": `icon ${element.name}`, role: "img", style: { fontSize: this.size } }, h("title", null, `icon ${element.name}`), h("path", { fill: "currentColor", d: element.definition })));
       }

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

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,mCAAmC;AAEnC,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAO/C,MAAM,OAAO,IAAI;;IAwBf,aAAQ,GAAG,GAAG,EAAE,CACd,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;MAC9B,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;QAC9B,OAAO,CACL,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,qBAAkB,QAAQ,OAAO,CAAC,IAAI,EAAE,EAAE,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE;UAC5I,iBAAQ,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAS;UACvC,YAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAE,OAAO,CAAC,UAAU,GAAI,CAC/C,CACP,CAAC;OACH;IACH,CAAC,CAAC,CAAC;gBAhCmC,gBAAgB;gBAGhB,MAAM;wBAEd,eAAe;wBAEvB,EAAE;;EAE1B,iBAAiB;IACf,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EAC3C,CAAC;EAED,gBAAgB,CAAC,QAAgB;IAC/B,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KAC1C;SAAM;MACL,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;KAC9B;IACD,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;EAC7C,CAAC;EAcD,MAAM;IACJ,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,QAAQ,EAAE,CAAQ,CAAC;EACxC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// Check status of webFont solution\n\nimport { Component, h, Prop, State, Host } from '@stencil/core';\n\nimport { iconsCollection } from './iconsArray';\n\n@Component({\n  tag: 'sdds-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  /** Pass a name of the icon. For icon names, refer to https://digitaldesign.scania.com/foundations/icons/icon-library or storybook */\n  @Prop({ reflect: true }) name: string = 'arrow_diagonal';\n\n  /** Pass a size of icon as a string, for example: 32px, 1rem, 4em... */\n  @Prop({ reflect: true }) size: string = '16px';\n\n  @State() icons_object: string = iconsCollection;\n\n  @State() arrayOfIcons = [];\n\n  componentWillLoad() {\n    this.arrayDataWatcher(this.icons_object);\n  }\n\n  arrayDataWatcher(newValue: string) {\n    if (typeof newValue === 'string') {\n      this.arrayOfIcons = JSON.parse(newValue);\n    } else {\n      this.arrayOfIcons = newValue;\n    }\n    this.arrayOfIcons = [...this.arrayOfIcons];\n  }\n\n  setIcons = () =>\n    this.arrayOfIcons.map(element => {\n      if (element.name === this.name) {\n        return (\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-labelledby={`icon ${element.name}`} role=\"img\" style={{ fontSize: this.size }}>\n            <title>{`icon ${element.name}`}</title>\n            <path fill=\"currentColor\" d={element.definition} />\n          </svg>\n        );\n      }\n    });\n\n  render() {\n    return <Host>{this.setIcons()}</Host>;\n  }\n}\n"]}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,mCAAmC;AAEnC,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAO/C,MAAM,OAAO,IAAI;;IAwBf,aAAQ,GAAG,GAAG,EAAE,CACd,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;MAChC,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;QAC9B,OAAO,CACL,WACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,qBACF,QAAQ,OAAO,CAAC,IAAI,EAAE,EACvC,IAAI,EAAC,KAAK,EACV,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE;UAE9B,iBAAQ,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAS;UACvC,YAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAE,OAAO,CAAC,UAAU,GAAI,CAC/C,CACP,CAAC;OACH;IACH,CAAC,CAAC,CAAC;gBAtCmC,gBAAgB;gBAGhB,MAAM;wBAEd,eAAe;wBAEvB,EAAE;;EAE1B,iBAAiB;IACf,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EAC3C,CAAC;EAED,gBAAgB,CAAC,QAAgB;IAC/B,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KAC1C;SAAM;MACL,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;KAC9B;IACD,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;EAC7C,CAAC;EAoBD,MAAM;IACJ,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,QAAQ,EAAE,CAAQ,CAAC;EACxC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// Check status of webFont solution\n\nimport { Component, h, Prop, State, Host } from '@stencil/core';\n\nimport { iconsCollection } from './iconsArray';\n\n@Component({\n  tag: 'sdds-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  /** Pass a name of the icon. For icon names, refer to https://digitaldesign.scania.com/foundations/icons/icon-library or storybook */\n  @Prop({ reflect: true }) name: string = 'arrow_diagonal';\n\n  /** Pass a size of icon as a string, for example: 32px, 1rem, 4em... */\n  @Prop({ reflect: true }) size: string = '16px';\n\n  @State() icons_object: string = iconsCollection;\n\n  @State() arrayOfIcons = [];\n\n  componentWillLoad() {\n    this.arrayDataWatcher(this.icons_object);\n  }\n\n  arrayDataWatcher(newValue: string) {\n    if (typeof newValue === 'string') {\n      this.arrayOfIcons = JSON.parse(newValue);\n    } else {\n      this.arrayOfIcons = newValue;\n    }\n    this.arrayOfIcons = [...this.arrayOfIcons];\n  }\n\n  setIcons = () =>\n    this.arrayOfIcons.map((element) => {\n      if (element.name === this.name) {\n        return (\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 32 32\"\n            aria-labelledby={`icon ${element.name}`}\n            role=\"img\"\n            style={{ fontSize: this.size }}\n          >\n            <title>{`icon ${element.name}`}</title>\n            <path fill=\"currentColor\" d={element.definition} />\n          </svg>\n        );\n      }\n    });\n\n  render() {\n    return <Host>{this.setIcons()}</Host>;\n  }\n}\n"]}

package/dist/collection/components/link/sdds-link.css

@@ -1,36 +1,41 @@
-a {
+.sdds-link-component {
+  all: unset;
   cursor: pointer;
   outline: none;
   color: var(--sdds-link);
+  text-decoration: underline;
 }
-a:active {
+.sdds-link-component.active, .sdds-link-component:active {
   color: var(--sdds-link);
   text-decoration: underline;
   text-decoration-color: var(--sdds-link);
 }
-a:hover {
+.sdds-link-component:hover {
   color: var(--sdds-link-hover);
   text-decoration: underline;
   text-decoration-color: var(--sdds-link-hover);
 }
-a:visited {
+.sdds-link-component:visited {
   color: var(--sdds-link-visited);
   text-decoration-color: var(--sdds-link-visited);
 }
-a:focus {
+.sdds-link-component:focus {
   color: var(--sdds-link-focus);
   text-decoration: none;
   outline: 2px solid var(--sdds-link-focus);
   outline-offset: -2px;
 }
-a.disabled {
+
+.disabled .sdds-link-component {
   color: var(--sdds-link-disabled);
   text-decoration-color: var(--sdds-link-disabled);
   pointer-events: none;
 }
-a.no-underline {
+
+.no-underline .sdds-link-component {
   text-decoration: none;
 }
-a.no-underline:hover {
+
+.no-underline:hover .sdds-link-component {
   text-decoration: none;
 }

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

@@ -1,18 +1,17 @@
 import { h } from '@stencil/core';
 export class SddsLink {
   constructor() {
-    this.href = undefined;
-    this.target = '_self';
     this.disabled = false;
     this.underline = true;
-    this.rel = 'noopener';
+  }
+  connectedCallback() {
+    this.host.children[0].classList.add('sdds-link-component');
   }
   render() {
-    return (h("a", { class: `
-        ${this.disabled ? 'disabled' : ''}
-        ${this.underline ? '' : 'no-underline'}
-        
-        `, href: this.href, target: this.target, rel: this.rel }, h("slot", null)));
+    return (h("div", { class: `
+          ${this.disabled ? 'disabled' : ''}
+          ${!this.underline ? 'no-underline' : ''}
+          ` }, h("slot", null)));
   }
   static get is() { return "sdds-link"; }
   static get originalStyleUrls() {
@@ -27,41 +26,6 @@ export class SddsLink {
   }
   static get properties() {
     return {
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "URL for the link"
-        },
-        "attribute": "href",
-        "reflect": false
-      },
-      "target": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'_self' | '_blank' | '_parent' | '_top'",
-          "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Where to open the linked URL"
-        },
-        "attribute": "target",
-        "reflect": false,
-        "defaultValue": "'_self'"
-      },
       "disabled": {
         "type": "boolean",
         "mutable": false,
@@ -97,26 +61,9 @@ export class SddsLink {
         "attribute": "underline",
         "reflect": false,
         "defaultValue": "true"
-      },
-      "rel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'."
-        },
-        "attribute": "rel",
-        "reflect": false,
-        "defaultValue": "'noopener'"
       }
     };
   }
+  static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=sdds-link.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sdds-link.js","sourceRoot":"","sources":["../../../src/components/link/sdds-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,QAAQ;;;kBAKuC,OAAO;oBAGrC,KAAK;qBAGJ,IAAI;eAGX,UAAU;;EAEhC,MAAM;IACJ,OAAO,CACL,SACE,KAAK,EAAE;UACL,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC/B,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;;SAErC,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG;MAEb,eAAa,CACX,CACL,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-link',\n  styleUrl: 'sdds-link.scss',\n  shadow: false,\n})\nexport class SddsLink {\n  /** URL for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** Disables the link */\n  @Prop() disabled: boolean = false;\n\n  /** Displays the link with an underline. */\n  @Prop() underline: boolean = true;\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  render() {\n    return (\n      <a\n        class={`\n        ${this.disabled ? 'disabled' : ''}\n        ${this.underline ? '' : 'no-underline'}\n        \n        `}\n        href={this.href}\n        target={this.target}\n        rel={this.rel}\n      >\n        <slot></slot>\n      </a>\n    );\n  }\n}\n"]}
+{"version":3,"file":"sdds-link.js","sourceRoot":"","sources":["../../../src/components/link/sdds-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAQ5D,MAAM,OAAO,QAAQ;;oBAES,KAAK;qBAGJ,IAAI;;EAIjC,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAC;EAC7D,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WACE,KAAK,EAAE;YACH,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;YAC/B,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;WACtC;MAEH,eAAa,CACT,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-link',\n  styleUrl: 'sdds-link.scss',\n  shadow: false,\n})\nexport class SddsLink {\n  /** Disables the link */\n  @Prop() disabled: boolean = false;\n\n  /** Displays the link with an underline. */\n  @Prop() underline: boolean = true;\n\n  @Element() host: HostElement;\n\n  connectedCallback() {\n    this.host.children[0].classList.add('sdds-link-component');\n  }\n\n  render() {\n    return (\n      <div\n        class={`\n          ${this.disabled ? 'disabled' : ''}\n          ${!this.underline ? 'no-underline' : ''}\n          `}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/link/sdds-link.stories.js

@@ -29,17 +29,6 @@ export default {
         defaultValue: { summary: true },
       },
     },
-    target: {
-      name: 'Target',
-      description: 'Sets where to open the linked URL.',
-      control: {
-        type: 'radio',
-      },
-      options: ['_self', '_blank', '_parent', '_top'],
-      table: {
-        defaultValue: { summary: '_self' },
-      },
-    },
     disabled: {
       name: 'Disabled',
       description: 'Disables the link.',
@@ -53,18 +42,15 @@ export default {
   },
   args: {
     underline: true,
-    target: '_self',
     disabled: false,
   },
 };
-const Template = ({ underline, target, disabled }) => formatHtmlPreview(`
+const Template = ({ underline, disabled }) => formatHtmlPreview(`
     <sdds-link
         ${disabled ? 'disabled' : ''}
         ${underline ? '' : 'underline="false"'}
-        href="#"
-        target="${target}"
         >
-        This is a link.
+        <a href="#">This is a link.</a>
     </sdds-link>
   `);
 export const WebComponent = Template.bind({});

package/dist/collection/components/link/sdds-link.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdds-link.stories.js","sourceRoot":"","sources":["../../../src/components/link/sdds-link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,wCAAwC;MACrD,QAAQ,EAAE;QACR,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,oCAAoC;MACjD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC;MAC/C,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,oBAAoB;MACjC,QAAQ,EAAE;QACR,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,SAAS,EAAE,IAAI;IACf,MAAM,EAAE,OAAO;IACf,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CACnD,iBAAiB,CACf;;UAEM,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC1B,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;;kBAE5B,MAAM;;;;GAIrB,CACA,CAAC;AACJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Link',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    underline: {\n      name: 'Underline',\n      description: 'Adds an underline under the link text.',\n      controls: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: true },\n      },\n    },\n    target: {\n      name: 'Target',\n      description: 'Sets where to open the linked URL.',\n      control: {\n        type: 'radio',\n      },\n      options: ['_self', '_blank', '_parent', '_top'],\n      table: {\n        defaultValue: { summary: '_self' },\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the link.',\n      controls: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    underline: true,\n    target: '_self',\n    disabled: false,\n  },\n};\n\nconst Template = ({ underline, target, disabled }) =>\n  formatHtmlPreview(\n    `\n    <sdds-link\n        ${disabled ? 'disabled' : ''}\n        ${underline ? '' : 'underline=\"false\"'}\n        href=\"#\"\n        target=\"${target}\"\n        >\n        This is a link.\n    </sdds-link>\n  `,\n  );\nexport const WebComponent = Template.bind({});\n"]}
+{"version":3,"file":"sdds-link.stories.js","sourceRoot":"","sources":["../../../src/components/link/sdds-link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,wCAAwC;MACrD,QAAQ,EAAE;QACR,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,oBAAoB;MACjC,QAAQ,EAAE;QACR,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC3C,iBAAiB,CACf;;UAEM,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC1B,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;;;;GAI3C,CACA,CAAC;AACJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Link',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    underline: {\n      name: 'Underline',\n      description: 'Adds an underline under the link text.',\n      controls: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: true },\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the link.',\n      controls: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    underline: true,\n    disabled: false,\n  },\n};\n\nconst Template = ({ underline, disabled }) =>\n  formatHtmlPreview(\n    `\n    <sdds-link\n        ${disabled ? 'disabled' : ''}\n        ${underline ? '' : 'underline=\"false\"'}\n        >\n        <a href=\"#\">This is a link.</a>\n    </sdds-link>\n  `,\n  );\nexport const WebComponent = Template.bind({});\n"]}

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

@@ -15,7 +15,6 @@ export class Modal {
     this.initializeReferenceElement = (referenceEl) => {
       if (referenceEl) {
         referenceEl.addEventListener('click', (event) => {
-          event.stopPropagation();
           if (this.isShown) {
             this.handleClose(event);
           }

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

@@ -1 +1 @@
-{"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"]}
+{"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/radio-button/radio-button-component.stories.js

@@ -20,7 +20,7 @@ export default {
   },
   argTypes: {
     label: {
-      name: 'Label',
+      name: 'Label text',
       description: 'Sets the label for the radio button.',
       controls: {
         type: 'text',
@@ -83,7 +83,7 @@ const Template = ({ label, disabled }) => formatHtmlPreview(`
   <!-- Script tag with eventlistener for demo purposes. -->
   <script>
   document.addEventListener('sddsChange', (event) => {
-    console.log('Radio button with id: ', event.detail.radioId, ' with value:', event.detail.value, ' was selected.')
+    console.log(event)
   })
   </script>
   `);