@dso-toolkit/core 62.18.0 → 62.20.0

package/dist/collection/components/card/card.js

@@ -2,177 +2,177 @@ import { h, Host, forceUpdate } from "@stencil/core";
 import { isInteractiveElement } from "../../utils/is-interactive-element";
 import { isModifiedEvent } from "../../utils/is-modified-event";
 export class Card {
-  constructor() {
-    this.clickable = true;
-    this.imageShape = "normal";
-    this.href = undefined;
-    this.mode = undefined;
-  }
-  connectedCallback() {
-    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
-    this.mutationObserver.observe(this.host, { attributes: true, childList: true });
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    delete this.mutationObserver;
-  }
-  clickEventHandler(e) {
-    if (!(e.target instanceof HTMLElement) || (!this.clickable && !this.href)) {
-      return;
+    constructor() {
+        this.clickable = true;
+        this.imageShape = "normal";
+        this.href = undefined;
+        this.mode = undefined;
     }
-    let element = e.target;
-    while (element !== this.host && element !== null) {
-      if (isInteractiveElement(element) || element === null) {
-        return;
-      }
-      if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {
-        element = element.parentNode.host;
-      }
-      else {
-        element = element.parentElement;
-      }
+    connectedCallback() {
+        this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
+        this.mutationObserver.observe(this.host, { attributes: true, childList: true });
     }
-    return this.dsoCardClicked.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
-  }
-  get selectableSlottedElement() {
-    return this.host.querySelector("[slot='selectable']");
-  }
-  get imageSlottedElement() {
-    return this.host.querySelector("[slot='image']");
-  }
-  get headingSlottedElement() {
-    return this.host.querySelector("[slot='heading']");
-  }
-  get interactionsSlottedElement() {
-    return this.host.querySelector("[slot='interactions']");
-  }
-  render() {
-    const isSelectable = this.selectableSlottedElement !== null;
-    const hasImage = this.imageSlottedElement !== null;
-    return (h(Host, { onClick: (e) => this.clickEventHandler(e), "is-selectable": isSelectable, "has-image": hasImage }, h("div", { class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { name: "selectable" })), h("div", { class: "dso-card-image", hidden: !hasImage }, h("slot", { name: "image" })), h("div", { class: "dso-card-heading" }, this.headingSlottedElement instanceof HTMLAnchorElement || !this.href ? (h("slot", { name: "heading" })) : (((!this.mode || !["download", "extern"].includes(this.mode)) && (h("a", { href: this.href, class: "heading-anchor" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "chevron-right" })))) ||
-      (this.mode === "extern" && (h("a", { href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
-      (this.mode === "download" && (h("a", { href: this.href, class: "heading-anchor" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "download" }))))), this.interactionsSlottedElement !== null && h("slot", { name: "interactions" })), h("div", { class: "dso-card-content" }, h("slot", { name: "content" }))));
-  }
-  static get is() { return "dso-card"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["card.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["card.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "clickable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Use `href` instead and `<ELEMENT_TYPE slot=\"heading\">` should NOT be of element type `a` (anchor)."
-            }],
-          "text": "Whether or not the Card is clickable. This is NOT a boolean attribute. Set to \"false\" to make the Card non-clickable."
-        },
-        "attribute": "clickable",
-        "reflect": true,
-        "defaultValue": "true"
-      },
-      "imageShape": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ImageShape",
-          "resolved": "\"normal\" | \"wide\"",
-          "references": {
-            "ImageShape": {
-              "location": "import",
-              "path": "./card.interfaces",
-              "id": "src/components/card/card.interfaces.ts::ImageShape"
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        delete this.mutationObserver;
+    }
+    clickEventHandler(e) {
+        if (!(e.target instanceof HTMLElement) || (!this.clickable && !this.href)) {
+            return;
+        }
+        let element = e.target;
+        while (element !== this.host && element !== null) {
+            if (isInteractiveElement(element) || element === null) {
+                return;
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Presentation of image in header.\r\n - \"normal\" (\"24 x 24\").\r\n - \"wide\" (\"30 x 26\")"
-        },
-        "attribute": "image-shape",
-        "reflect": true,
-        "defaultValue": "\"normal\""
-      },
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The URL to which the Card heading links."
-        },
-        "attribute": "href",
-        "reflect": true
-      },
-      "mode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Display the link as an external link or a download link\r\n - \"download\"\r\n - \"extern\""
-        },
-        "attribute": "mode",
-        "reflect": true
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "dsoCardClicked",
-        "name": "dsoCardClicked",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the Card is clickable and the user clicked the Card."
-        },
-        "complexType": {
-          "original": "DsoCardClickedEvent",
-          "resolved": "DsoCardClickedEvent",
-          "references": {
-            "DsoCardClickedEvent": {
-              "location": "import",
-              "path": "./card.interfaces",
-              "id": "src/components/card/card.interfaces.ts::DsoCardClickedEvent"
+            if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {
+                element = element.parentNode.host;
+            }
+            else {
+                element = element.parentElement;
             }
-          }
         }
-      }];
-  }
-  static get elementRef() { return "host"; }
+        return this.dsoCardClicked.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
+    }
+    get selectableSlottedElement() {
+        return this.host.querySelector("[slot='selectable']");
+    }
+    get imageSlottedElement() {
+        return this.host.querySelector("[slot='image']");
+    }
+    get headingSlottedElement() {
+        return this.host.querySelector("[slot='heading']");
+    }
+    get interactionsSlottedElement() {
+        return this.host.querySelector("[slot='interactions']");
+    }
+    render() {
+        const isSelectable = this.selectableSlottedElement !== null;
+        const hasImage = this.imageSlottedElement !== null;
+        return (h(Host, { key: 'b9cc1a47bc39e6e2011ba6412436ab855d9819cf', onClick: (e) => this.clickEventHandler(e), "is-selectable": isSelectable, "has-image": hasImage }, h("div", { key: 'b8a059c5b2cc2f29392e0311fcbb3a02b1b39580', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: '304c0dad6a73ebb2ad12f7c4e0a807d53c7ca660', name: "selectable" })), h("div", { key: '3e976d9e8eb0fbc3578a8fc6f32687f97ca6fc69', class: "dso-card-image", hidden: !hasImage }, h("slot", { key: 'e10f2acff35dcd3316f0cb14575d5d2e4ab86c95', name: "image" })), h("div", { key: 'c7d437cc6d54eab8e9d6ad45411230498b243466', class: "dso-card-heading" }, this.headingSlottedElement instanceof HTMLAnchorElement || !this.href ? (h("slot", { name: "heading" })) : (((!this.mode || !["download", "extern"].includes(this.mode)) && (h("a", { href: this.href, class: "heading-anchor" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "chevron-right" })))) ||
+            (this.mode === "extern" && (h("a", { href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
+            (this.mode === "download" && (h("a", { href: this.href, class: "heading-anchor" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "download" }))))), this.interactionsSlottedElement !== null && h("slot", { key: 'f318d02fe89a6aa2a9377e2f32d72726c848c42f', name: "interactions" })), h("div", { key: '7b725b7edeee93b237352eff09ae2574647b9a3b', class: "dso-card-content" }, h("slot", { key: '9f855efe124e2a273b1ecb465b27bc7e01ac10e9', name: "content" }))));
+    }
+    static get is() { return "dso-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "clickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `href` instead and `<ELEMENT_TYPE slot=\"heading\">` should NOT be of element type `a` (anchor)."
+                        }],
+                    "text": "Whether or not the Card is clickable. This is NOT a boolean attribute. Set to \"false\" to make the Card non-clickable."
+                },
+                "attribute": "clickable",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "imageShape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ImageShape",
+                    "resolved": "\"normal\" | \"wide\"",
+                    "references": {
+                        "ImageShape": {
+                            "location": "import",
+                            "path": "./card.interfaces",
+                            "id": "src/components/card/card.interfaces.ts::ImageShape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Presentation of image in header.\r\n - \"normal\" (\"24 x 24\").\r\n - \"wide\" (\"30 x 26\")"
+                },
+                "attribute": "image-shape",
+                "reflect": true,
+                "defaultValue": "\"normal\""
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL to which the Card heading links."
+                },
+                "attribute": "href",
+                "reflect": true
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Display the link as an external link or a download link\r\n - \"download\"\r\n - \"extern\""
+                },
+                "attribute": "mode",
+                "reflect": true
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoCardClicked",
+                "name": "dsoCardClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the Card is clickable and the user clicked the Card."
+                },
+                "complexType": {
+                    "original": "DsoCardClickedEvent",
+                    "resolved": "DsoCardClickedEvent",
+                    "references": {
+                        "DsoCardClickedEvent": {
+                            "location": "import",
+                            "path": "./card.interfaces",
+                            "id": "src/components/card/card.interfaces.ts::DsoCardClickedEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, forceUpdate } from \"@stencil/core\";\r\n\r\nimport { isInteractiveElement } from \"../../utils/is-interactive-element\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DsoCardClickedEvent, ImageShape } from \"./card.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-card\",\r\n  styleUrl: \"card.scss\",\r\n  shadow: true,\r\n})\r\nexport class Card implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoCardElement;\r\n\r\n  /**\r\n   * Whether or not the Card is clickable. This is NOT a boolean attribute. Set to \"false\" to make the Card non-clickable.\r\n   *\r\n   * @deprecated Use `href` instead and `<ELEMENT_TYPE slot=\"heading\">` should NOT be of element type `a` (anchor).\r\n   */\r\n  @Prop({ reflect: true })\r\n  clickable = true;\r\n\r\n  /**\r\n   * Presentation of image in header.\r\n   *  - \"normal\" (\"24 x 24\").\r\n   *  - \"wide\" (\"30 x 26\")\r\n   */\r\n  @Prop({ reflect: true })\r\n  imageShape: ImageShape = \"normal\";\r\n\r\n  /**\r\n   * The URL to which the Card heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href?: string;\r\n\r\n  /**\r\n   * Display the link as an external link or a download link\r\n   *  - \"download\"\r\n   *  - \"extern\"\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode?: string;\r\n\r\n  /**\r\n   * Emitted when the Card is clickable and the user clicked the Card.\r\n   */\r\n  @Event()\r\n  dsoCardClicked!: EventEmitter<DsoCardClickedEvent>;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || (!this.clickable && !this.href)) {\r\n      return;\r\n    }\r\n\r\n    let element: HTMLElement | null = e.target;\r\n\r\n    while (element !== this.host && element !== null) {\r\n      if (isInteractiveElement(element) || element === null) {\r\n        return;\r\n      }\r\n\r\n      if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {\r\n        element = element.parentNode.host;\r\n      } else {\r\n        element = element.parentElement;\r\n      }\r\n    }\r\n\r\n    return this.dsoCardClicked.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get selectableSlottedElement() {\r\n    return this.host.querySelector(\"[slot='selectable']\");\r\n  }\r\n\r\n  get imageSlottedElement() {\r\n    return this.host.querySelector(\"[slot='image']\");\r\n  }\r\n\r\n  get headingSlottedElement() {\r\n    return this.host.querySelector(\"[slot='heading']\");\r\n  }\r\n\r\n  get interactionsSlottedElement() {\r\n    return this.host.querySelector(\"[slot='interactions']\");\r\n  }\r\n\r\n  render() {\r\n    const isSelectable = this.selectableSlottedElement !== null;\r\n    const hasImage = this.imageSlottedElement !== null;\r\n\r\n    return (\r\n      <Host onClick={(e: MouseEvent) => this.clickEventHandler(e)} is-selectable={isSelectable} has-image={hasImage}>\r\n        <div class=\"dso-card-selectable\" hidden={!isSelectable}>\r\n          <slot name=\"selectable\" />\r\n        </div>\r\n        <div class=\"dso-card-image\" hidden={!hasImage}>\r\n          <slot name=\"image\" />\r\n        </div>\r\n        <div class=\"dso-card-heading\">\r\n          {this.headingSlottedElement instanceof HTMLAnchorElement || !this.href ? (\r\n            <slot name=\"heading\" />\r\n          ) : (\r\n            ((!this.mode || ![\"download\", \"extern\"].includes(this.mode)) && (\r\n              <a href={this.href} class=\"heading-anchor\">\r\n                <slot name=\"heading\" />\r\n                <dso-icon icon=\"chevron-right\"></dso-icon>\r\n              </a>\r\n            )) ||\r\n            (this.mode === \"extern\" && (\r\n              <a href={this.href} class=\"heading-anchor\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                <slot name=\"heading\" />\r\n                <dso-icon icon=\"external-link\"></dso-icon>\r\n                <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n              </a>\r\n            )) ||\r\n            (this.mode === \"download\" && (\r\n              <a href={this.href} class=\"heading-anchor\">\r\n                <slot name=\"heading\" />\r\n                <dso-icon icon=\"download\"></dso-icon>\r\n              </a>\r\n            ))\r\n          )}\r\n          {this.interactionsSlottedElement !== null && <slot name=\"interactions\" />}\r\n        </div>\r\n        <div class=\"dso-card-content\">\r\n          <slot name=\"content\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, forceUpdate } from \"@stencil/core\";\r\n\r\nimport { isInteractiveElement } from \"../../utils/is-interactive-element\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DsoCardClickedEvent, ImageShape } from \"./card.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-card\",\r\n  styleUrl: \"card.scss\",\r\n  shadow: true,\r\n})\r\nexport class Card implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoCardElement;\r\n\r\n  /**\r\n   * Whether or not the Card is clickable. This is NOT a boolean attribute. Set to \"false\" to make the Card non-clickable.\r\n   *\r\n   * @deprecated Use `href` instead and `<ELEMENT_TYPE slot=\"heading\">` should NOT be of element type `a` (anchor).\r\n   */\r\n  @Prop({ reflect: true })\r\n  clickable = true;\r\n\r\n  /**\r\n   * Presentation of image in header.\r\n   *  - \"normal\" (\"24 x 24\").\r\n   *  - \"wide\" (\"30 x 26\")\r\n   */\r\n  @Prop({ reflect: true })\r\n  imageShape: ImageShape = \"normal\";\r\n\r\n  /**\r\n   * The URL to which the Card heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href?: string;\r\n\r\n  /**\r\n   * Display the link as an external link or a download link\r\n   *  - \"download\"\r\n   *  - \"extern\"\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode?: string;\r\n\r\n  /**\r\n   * Emitted when the Card is clickable and the user clicked the Card.\r\n   */\r\n  @Event()\r\n  dsoCardClicked!: EventEmitter<DsoCardClickedEvent>;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || (!this.clickable && !this.href)) {\r\n      return;\r\n    }\r\n\r\n    let element: HTMLElement | null = e.target;\r\n\r\n    while (element !== this.host && element !== null) {\r\n      if (isInteractiveElement(element) || element === null) {\r\n        return;\r\n      }\r\n\r\n      if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {\r\n        element = element.parentNode.host;\r\n      } else {\r\n        element = element.parentElement;\r\n      }\r\n    }\r\n\r\n    return this.dsoCardClicked.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get selectableSlottedElement() {\r\n    return this.host.querySelector(\"[slot='selectable']\");\r\n  }\r\n\r\n  get imageSlottedElement() {\r\n    return this.host.querySelector(\"[slot='image']\");\r\n  }\r\n\r\n  get headingSlottedElement() {\r\n    return this.host.querySelector(\"[slot='heading']\");\r\n  }\r\n\r\n  get interactionsSlottedElement() {\r\n    return this.host.querySelector(\"[slot='interactions']\");\r\n  }\r\n\r\n  render() {\r\n    const isSelectable = this.selectableSlottedElement !== null;\r\n    const hasImage = this.imageSlottedElement !== null;\r\n\r\n    return (\r\n      <Host onClick={(e: MouseEvent) => this.clickEventHandler(e)} is-selectable={isSelectable} has-image={hasImage}>\r\n        <div class=\"dso-card-selectable\" hidden={!isSelectable}>\r\n          <slot name=\"selectable\" />\r\n        </div>\r\n        <div class=\"dso-card-image\" hidden={!hasImage}>\r\n          <slot name=\"image\" />\r\n        </div>\r\n        <div class=\"dso-card-heading\">\r\n          {this.headingSlottedElement instanceof HTMLAnchorElement || !this.href ? (\r\n            <slot name=\"heading\" />\r\n          ) : (\r\n            ((!this.mode || ![\"download\", \"extern\"].includes(this.mode)) && (\r\n              <a href={this.href} class=\"heading-anchor\">\r\n                <slot name=\"heading\" />\r\n                <dso-icon icon=\"chevron-right\"></dso-icon>\r\n              </a>\r\n            )) ||\r\n            (this.mode === \"extern\" && (\r\n              <a href={this.href} class=\"heading-anchor\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                <slot name=\"heading\" />\r\n                <dso-icon icon=\"external-link\"></dso-icon>\r\n                <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n              </a>\r\n            )) ||\r\n            (this.mode === \"download\" && (\r\n              <a href={this.href} class=\"heading-anchor\">\r\n                <slot name=\"heading\" />\r\n                <dso-icon icon=\"download\"></dso-icon>\r\n              </a>\r\n            ))\r\n          )}\r\n          {this.interactionsSlottedElement !== null && <slot name=\"interactions\" />}\r\n        </div>\r\n        <div class=\"dso-card-content\">\r\n          <slot name=\"content\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/card-container/card-container.js

@@ -1,50 +1,50 @@
 import { h, Fragment } from "@stencil/core";
 export class CardContainer {
-  constructor() {
-    this.mode = "list";
-  }
-  render() {
-    return (h(Fragment, null, this.mode === "list" && (h("ul", { class: "dso-card-list" }, h("slot", null))), this.mode === "grid" && (h("div", { class: "dso-card-grid" }, h("slot", null)))));
-  }
-  static get is() { return "dso-card-container"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["card-container.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["card-container.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "mode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "CardContainerMode",
-          "resolved": "\"grid\" | \"list\"",
-          "references": {
-            "CardContainerMode": {
-              "location": "import",
-              "path": "./card-container.interfaces",
-              "id": "src/components/card-container/card-container.interfaces.ts::CardContainerMode"
+    constructor() {
+        this.mode = "list";
+    }
+    render() {
+        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '54a6e926c22a118a77119add63558c55a7ef2cf9', class: "dso-card-list" }, h("slot", { key: '63777d504620cbc54a94a95bbada8b7028ef5d92' }))), this.mode === "grid" && (h("div", { key: '3b0feb3331f54fb7f084ad4c1e3bb18ddca6ee9d', class: "dso-card-grid" }, h("slot", { key: '0bc1a70a40326d61cfa9af7b8cdf8e73bb8d39cf' })))));
+    }
+    static get is() { return "dso-card-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["card-container.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["card-container.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CardContainerMode",
+                    "resolved": "\"grid\" | \"list\"",
+                    "references": {
+                        "CardContainerMode": {
+                            "location": "import",
+                            "path": "./card-container.interfaces",
+                            "id": "src/components/card-container/card-container.interfaces.ts::CardContainerMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The mode of the Card Container."
+                },
+                "attribute": "mode",
+                "reflect": true,
+                "defaultValue": "\"list\""
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The mode of the Card Container."
-        },
-        "attribute": "mode",
-        "reflect": true,
-        "defaultValue": "\"list\""
-      }
-    };
-  }
+        };
+    }
 }
 //# sourceMappingURL=card-container.js.map

package/dist/collection/components/card-container/card-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-container.js","sourceRoot":"","sources":["../../../../src/components/card-container/card-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,QAAQ,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQjF,MAAM,OAAO,aAAa;;gBAKE,MAAM;;EAEhC,MAAM;IACJ,OAAO,CACL;MACG,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACvB,UAAI,KAAK,EAAC,eAAe;QACvB,eAAQ,CACL,CACN;MACA,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACvB,WAAK,KAAK,EAAC,eAAe;QACxB,eAAQ,CACJ,CACP,CACA,CACJ,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, ComponentInterface, Fragment, Prop } from \"@stencil/core\";\r\nimport { CardContainerMode } from \"./card-container.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-card-container\",\r\n  styleUrl: \"card-container.scss\",\r\n  shadow: true,\r\n})\r\nexport class CardContainer implements ComponentInterface {\r\n  /**\r\n   * The mode of the Card Container.\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode: CardContainerMode = \"list\";\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.mode === \"list\" && (\r\n          <ul class=\"dso-card-list\">\r\n            <slot />\r\n          </ul>\r\n        )}\r\n        {this.mode === \"grid\" && (\r\n          <div class=\"dso-card-grid\">\r\n            <slot />\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"card-container.js","sourceRoot":"","sources":["../../../../src/components/card-container/card-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,QAAQ,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQjF,MAAM,OAAO,aAAa;;oBAKE,MAAM;;IAEhC,MAAM;QACJ,OAAO,CACL;YACG,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACvB,2DAAI,KAAK,EAAC,eAAe;gBACvB,8DAAQ,CACL,CACN;YACA,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACvB,4DAAK,KAAK,EAAC,eAAe;gBACxB,8DAAQ,CACJ,CACP,CACA,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, ComponentInterface, Fragment, Prop } from \"@stencil/core\";\r\nimport { CardContainerMode } from \"./card-container.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-card-container\",\r\n  styleUrl: \"card-container.scss\",\r\n  shadow: true,\r\n})\r\nexport class CardContainer implements ComponentInterface {\r\n  /**\r\n   * The mode of the Card Container.\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode: CardContainerMode = \"list\";\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.mode === \"list\" && (\r\n          <ul class=\"dso-card-list\">\r\n            <slot />\r\n          </ul>\r\n        )}\r\n        {this.mode === \"grid\" && (\r\n          <div class=\"dso-card-grid\">\r\n            <slot />\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}