@dso-toolkit/core 65.0.2 → 66.0.0

package/dist/collection/components/card/card.css

@@ -1,7 +1,3 @@
-:host .dso-card-selectable, :host .dso-card-image {
-  grid-row: span 2;
-}
-
 a {
   background-color: transparent;
   color: var(--link-color);
@@ -75,32 +71,52 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
 :host {
   display: block;
 }
-:host .dso-card-heading {
+
+:host([is-selectable]:not([is-selectable=false])) .dso-card-container {
+  display: grid;
+  grid-template-columns: 1fr minmax(0, 100%);
+}
+:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-heading,
+:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-content {
+  grid-column: 2/-1;
+}
+:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-selectable {
+  grid-row: span 2;
+}
+
+:host([active]:not([active=false])) .dso-card-container {
+  background-color: #e5e5e5;
+}
+
+.dso-card-container {
+  padding-block: 16px 8px;
+  padding-inline: 16px;
+  inline-size: 100%;
+  block-size: 100%;
+}
+.dso-card-container:has(.dso-card-heading a:is(:hover, :focus-visible)) {
+  background-color: #f2f2f2;
+}
+.dso-card-container .dso-card-heading {
   align-items: center;
   display: flex;
   margin-block-end: 8px;
 }
 @media screen and (max-width: 480px) {
-  :host .dso-card-heading {
+  .dso-card-container .dso-card-heading {
     flex-wrap: wrap;
   }
 }
-:host .dso-card-image {
-  margin-inline-end: 8px;
-}
 
-:host(:hover) .dso-card-heading a {
+.heading-anchor {
+  display: flex;
+  gap: 4px;
   color: #275937;
-  text-decoration: underline;
-}
-
-.dso-card-heading a {
   text-decoration: none;
 }
-
-.heading-anchor {
+.heading-anchor:hover {
   color: #275937;
-  display: flex;
+  text-decoration: underline;
 }
 .heading-anchor:visited {
   color: #275937;

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

@@ -1 +1 @@
-{"version":3,"file":"card.interfaces.js","sourceRoot":"","sources":["../../../../src/components/card/card.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface DsoCardClickedEvent {\r\n  originalEvent?: MouseEvent;\r\n  /** True when user clicked the card while holding Ctrl, Alt or other modifiers, or when the card is right-clicked. Can be used to determine navigation. */\r\n  isModifiedEvent: boolean;\r\n}\r\n\r\nexport type ImageShape = \"normal\" | \"wide\";\r\n"]}
+{"version":3,"file":"card.interfaces.js","sourceRoot":"","sources":["../../../../src/components/card/card.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface CardClickEvent {\r\n  originalEvent: MouseEvent;\r\n  /** True when user clicked the card while holding Ctrl, Alt or other modifiers, or when the card is right-clicked. Can be used to determine navigation. */\r\n  isModifiedEvent: boolean;\r\n}\r\n"]}

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

@@ -1,12 +1,16 @@
 import { h, Host, forceUpdate } from "@stencil/core";
-import { isInteractiveElement } from "../../utils/is-interactive-element";
 import { isModifiedEvent } from "../../utils/is-modified-event";
+/**
+ * @slot selectable - An optional slot to place a `Selectable` in.
+ * @slot heading - A  slot to place the title of the card in.
+ * @slot interactions - An optional slot for one or more `Button`s, `Label`s, `Toggletip`s or `SlideToggle`s.
+ * @slot content - An optional slot to place `Rich Content` in.
+ */
 export class Card {
     constructor() {
-        this.clickable = true;
-        this.imageShape = "normal";
         this.href = undefined;
         this.mode = undefined;
+        this.active = undefined;
     }
     connectedCallback() {
         this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
@@ -18,41 +22,21 @@ export class Card {
         delete this.mutationObserver;
     }
     clickEventHandler(e) {
-        if (!(e.target instanceof HTMLElement) || (!this.clickable && !this.href)) {
+        if (!(e.target instanceof HTMLElement) || !this.href) {
             return;
         }
-        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;
-            }
-        }
-        return this.dsoCardClicked.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
+        return this.dsoCardClick.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" }))));
+        return (h(Host, { key: '10c83534a51247b21f0cd43788b5401bb3b7cfe4', "is-selectable": isSelectable }, h("div", { key: '1777c1843f484ca91631c8a177af1e596515313d', class: "dso-card-container" }, h("div", { key: 'da813c4a48eceb0a2032717c92f06b710241ed70', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: '5c9332821517bd1a472b2ecd1ab2614adee16927', name: "selectable" })), h("div", { key: '701a3a2dc0d013bfa1f50eddcb4cf8759c7f4241', class: "dso-card-heading" }, (this.mode === "extern" && (h("a", { key: '760d6e6a0ab5acc994ed46a50a792db3c6647b6a', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'd7c1eb29fc027e72c33efc97aa43d82d8a852b64', name: "heading" }), h("dso-icon", { key: '47bb43f25b70e3389f0f021cfd184d21b5ce4c25', icon: "external-link" }), h("span", { key: '7ca3f4c4974342f115a608729e2df6bcf24a88df', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
+            (this.mode === "download" && (h("a", { key: '4ae333ab348d7d8c3a4bf1dae8ac9dd923a226e0', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '0d6308ffb5d5151865ca5080834d68742cc4e90a', name: "heading" }), h("dso-icon", { key: '51317cdfc3378774e61950e9e344df659727d003', icon: "download" })))) || (h("a", { key: 'cbf7cfe050923e32a0b4322cf73a98450defa97f', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '99a1e24503833f13756b0d6e8433d314865f1fe8', name: "heading" }), h("dso-icon", { key: '5425cb2e9285b8252de9ee13dd08b51e834d89d3', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && h("slot", { key: 'ce04ab4923fd97fbbea799d4937d0a2f73c781a3', name: "interactions" })), h("div", { key: '232a855da9fead8f448bbea8729231688387f4a7', class: "dso-card-content" }, h("slot", { key: '73fd2ccecbd49456b44c42c737f4aa75922910eb', name: "content" })))));
     }
     static get is() { return "dso-card"; }
     static get encapsulation() { return "shadow"; }
@@ -68,52 +52,24 @@ export class Card {
     }
     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": {
+            "href": {
                 "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"
-                        }
-                    }
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Presentation of image in header.\r\n - \"normal\" (\"24 x 24\").\r\n - \"wide\" (\"30 x 26\")"
+                    "text": "The URL to which the Card heading links."
                 },
-                "attribute": "image-shape",
-                "reflect": true,
-                "defaultValue": "\"normal\""
+                "attribute": "href",
+                "reflect": true
             },
-            "href": {
+            "mode": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -125,49 +81,49 @@ export class Card {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The URL to which the Card heading links."
+                    "text": "Display the link as an external link or a download link\r\n - \"download\"\r\n - \"extern\""
                 },
-                "attribute": "href",
+                "attribute": "mode",
                 "reflect": true
             },
-            "mode": {
-                "type": "string",
+            "active": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
+                    "original": "boolean",
+                    "resolved": "boolean | 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\""
+                    "text": "Makes the Card active."
                 },
-                "attribute": "mode",
+                "attribute": "active",
                 "reflect": true
             }
         };
     }
     static get events() {
         return [{
-                "method": "dsoCardClicked",
-                "name": "dsoCardClicked",
+                "method": "dsoCardClick",
+                "name": "dsoCardClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the Card is clickable and the user clicked the Card."
+                    "text": "Emitted when the Card heading is clicked."
                 },
                 "complexType": {
-                    "original": "DsoCardClickedEvent",
-                    "resolved": "DsoCardClickedEvent",
+                    "original": "CardClickEvent",
+                    "resolved": "CardClickEvent",
                     "references": {
-                        "DsoCardClickedEvent": {
+                        "CardClickEvent": {
                             "location": "import",
                             "path": "./card.interfaces",
-                            "id": "src/components/card/card.interfaces.ts::DsoCardClickedEvent"
+                            "id": "src/components/card/card.interfaces.ts::CardClickEvent"
                         }
                     }
                 }

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 { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { CardClickEvent } from \"./card.interfaces\";\r\n\r\n/**\r\n * @slot selectable - An optional slot to place a `Selectable` in.\r\n * @slot heading - A  slot to place the title of the card in.\r\n * @slot interactions - An optional slot for one or more `Button`s, `Label`s, `Toggletip`s or `SlideToggle`s.\r\n * @slot content - An optional slot to place `Rich Content` in.\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   * The URL to which the Card heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href!: string | undefined;\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   * Makes the Card active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the Card heading is clicked.\r\n   */\r\n  @Event()\r\n  dsoCardClick!: EventEmitter<CardClickEvent>;\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.href) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoCardClick.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 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\r\n    return (\r\n      <Host is-selectable={isSelectable}>\r\n        <div class=\"dso-card-container\">\r\n          <div class=\"dso-card-selectable\" hidden={!isSelectable}>\r\n            <slot name=\"selectable\" />\r\n          </div>\r\n          <div class=\"dso-card-heading\">\r\n            {(this.mode === \"extern\" && (\r\n              <a\r\n                href={this.href}\r\n                class=\"heading-anchor\"\r\n                target=\"_blank\"\r\n                rel=\"noopener noreferrer\"\r\n                onClick={(e) => this.clickEventHandler(e)}\r\n              >\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\" onClick={(e) => this.clickEventHandler(e)}>\r\n                  <slot name=\"heading\" />\r\n                  <dso-icon icon=\"download\"></dso-icon>\r\n                </a>\r\n              )) || (\r\n                <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n                  <slot name=\"heading\" />\r\n                  <dso-icon icon=\"chevron-right\"></dso-icon>\r\n                </a>\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        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -4,7 +4,7 @@ export class CardContainer {
         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' })))));
+        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '32d6c14a02ed4aa3a12a4a987b099ba7f786ab26', class: "dso-card-list" }, h("slot", { key: 'f9e8072d7f3dffbcf4e47b19bccc50377dfc8b90' }))), this.mode === "grid" && (h("div", { key: 'b0f534dc19d2c781eab8b13a01d222ee263a53e8', class: "dso-card-grid" }, h("slot", { key: '347c56580c98cd25a2241f7fc7ed36f868005378' })))));
     }
     static get is() { return "dso-card-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-picker/date-picker.js

@@ -95,7 +95,7 @@ export class DsoDatePicker {
     }
     render() {
         var _a;
-        return (h("input", { key: 'ab327f9e162793c1abdcdd3b7e1242b6ddee1ddb', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
+        return (h("input", { key: '396b62306362c143d28c80cae648f11b59886c22', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
     }
     static get is() { return "dso-date-picker"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/date-picker-legacy/date-picker-legacy.js

@@ -424,14 +424,14 @@ export class DsoDatePickerLegacy {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: '2923901f9bdbccbd5ef5903d629412f5fd83d638' }, h("div", { key: 'dab6969a1692b0d79d1b39f624470cb92ef6978c', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: 'dceb33fc1b6b03f17338ac1eb93055ffc01dfeed', class: "dso-date__input-wrapper" }, h("input", { key: 'a69e06e7a3ffad161363e23289e1a430208c8f60', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: 'e5512a64cd0d9f2e0867e6665d2e2fa1288b4d72', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: 'b06a7695d80f8e26e20227ce55da2e5099da9799', class: "dso-date__toggle-icon" }, h("dso-icon", { key: 'ace62b7cf13b2b0ae2d2798e1f4363d251b7b4c5', icon: "calendar" })), h("span", { key: '46b9b7c9e37b1eb378620df1c66201677f0ab4dd', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: '157db057463d015ae84f892e2fd73ddd67a6ffaf' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: '83da0014367c9bdbe64e93ef1dd4ea4cab7bee7b', class: {
+        return (h(Host, { key: '21048228f8ece85acafa575b65effd49c8eb06fd' }, h("div", { key: '2e8c37e0bd890e5426e18b34c293d59e0dc28fd9', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: '4b5498556f0ecb2959301c6274fa1ba8beeb56ba', class: "dso-date__input-wrapper" }, h("input", { key: 'e4a9c11617188151109278dca34392a7a6fd7acf', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: '59d003f5d3e0692fa692f10d2a6ea74c9d03bc73', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: '35499b0c092f6b64507ef47a8d453e3a9dcab0df', class: "dso-date__toggle-icon" }, h("dso-icon", { key: 'd479c33bec38d9c79aad1dbf135a8656da2bf54d', icon: "calendar" })), h("span", { key: '5868bdd17a5c2f5bfc05c7a662dd19be605f90a2', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: '987d9d6cbad6763ecf3e8c3b1dc6cd7d60a372c0' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: 'bc69058909195de2555bda78e5849d4377e552b8', class: {
                 "dso-date__dialog": true,
                 "is-left": this.direction === "left",
                 "is-active": this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: '42bd9a53e0cb0eb90a6469064964af8552f272e4', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: '91c1b6eec67012c493f54eab7c52d7e653d4d9a1', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: 'f4fd5892e4b42f1da1cf9581c6543b705b43d557', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: 'c912fa9fdb19ed6915b7c01b8710cefb8957e2d2', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: '83c6aedf8ea8715654bcbd4a2546f0c8d75df0b9', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: '5403e2ed31318fdb9014c18492db444c8b83c51a', icon: "times" }), h("span", { key: '90f8f264d4dfb8b7f365124d91af8b5474810a06', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: '463f744fb48c7912cbb6522a82f0435ba7d99351', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: 'cd45d2b6302d593fc73f5a42fecadd8f6599c18a' }, h("h2", { key: '2ccbb5082c9311feb81fc91e93bfbd6c2c34d640', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: '48b8bc9d4321ab70c997385fe119bcc64663434d', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '9df2297e9c3b7218923f50ed719e4957dbdc55d4', class: "dso-date__select" }, h("select", { key: '022dc27bcda66e7f877a2061fdf83db5f0c8d5a5', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
+            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: '710d763d3b6fe8df45baddcfe3fa64b7f618f20b', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: 'f5825ef31295efa446836948e0af0fcc4ee36ab8', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '83fb9c2a5a7121ddafec462c54d06b0ca4e7721b', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: 'bfbbd91d21a62d54d04b231f49d2ec125b011bb8', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: 'a7a8dd097438f089517dedd43b7aea18dced74cd', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: 'a68b9956250b7884f4138d7b8e9ff9fac1ad8824', icon: "times" }), h("span", { key: '76f352ec95530ae49a75e81093d57f5ec6c0fa3b', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: '3406397370206832afd1dc7036ea25b930f72efa', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '2bd8c6328596ce2587452fc2dc3715b05c754d28' }, h("h2", { key: '8b9c739b4535ad8e0ce8403e615fa587e6d8aadb', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: 'ce7cefb6892d05290f5524d02901cc1e8812b40b', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '28c13137c007701fbe0a3231eab38c9fb7d33e44', class: "dso-date__select" }, h("select", { key: 'b6d9ec18b2951b69b07315222bd943fa81ca7790', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
             const index = this.localization.monthNames.indexOf(month);
             return (h("option", { key: month, value: index, selected: index === focusedMonth }, month));
-        })), h("div", { key: '7c47642e0c754395d1c0a2d1640d92cf727533cf', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'b72e0ad1bef955c73aeac34344224d036199c2c3' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '55fd550d1573262f24e8e23013be73f8b697775a', icon: "chevron-down" }))), h("label", { key: '8fd80561dd849ee6b4a599e7ca96f1a26acd8582', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '176ef978e8e325abd4c3136afe969ced69e68910', class: "dso-date__select" }, h("select", { key: '0a03aef1d277e895b3788ed755e0e77198b9e795', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'd9a24296905e9d0909ce6df6e7c80dd1a9453b55', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'de2c0d294f86d2d4fddb506eca8253ddb5951c66' }, this.focusedDay.getFullYear()), h("dso-icon", { key: '7e94e19543b7235d4d58287cc4b2b53fa17993ce', icon: "chevron-down" })))), h("div", { key: '2b3e3042ab9d90bf809ba051b76b5c1ce01ae54c', class: "dso-date__nav" }, h("button", { key: '4aaa04b7fa451f802c4ec94f08375064ace4c88d', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: 'a99c430d48a0ed22c100cd1205db4e32192ce3b1', icon: "chevron-left" }), h("span", { key: '9908b1c22f3fcbfc65a68233d1b14f916401280e', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: 'd469f09d74a85481b689eebc93497ba4bb8d4a68', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '4d13b57208116ae603ed46e38c04025643ac4b8b', icon: "chevron-right" }), h("span", { key: 'e54bb9b92ef06d69b6bca8faef002b37e729d910', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: '5674295fcc06f2d5887d17c52b998e1887d6bb37', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
+        })), h("div", { key: 'b90d2b48cfe943b91bfae7f6e0002c59e28c471b', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'e5b72a3f93ed11b68ea21a84d302072956c78d67' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '80be2680bd6f72d1c501ddbbacf6b9f4b15d9488', icon: "chevron-down" }))), h("label", { key: 'cd80f19fa89fb2f8715e28d6480d2fc9047d1296', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: 'a50afb24985b062fb92a649d7bc42b3d87598dd2', class: "dso-date__select" }, h("select", { key: '90902c118e070b881d157e9f6c62352086da0c7a', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '4f2eb767b984cfe734d8cadd9398af6cc36487d8', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'c6942320ed7fb30b89b397de2db6d45edb49812f' }, this.focusedDay.getFullYear()), h("dso-icon", { key: '47f33877c1bf98dffac4786a93fa04904354e52c', icon: "chevron-down" })))), h("div", { key: 'c4755a4ad89a3be55666ed5d107c93f314774241', class: "dso-date__nav" }, h("button", { key: '64ae003276cf0086c824f0b108ad076eeb6a090e', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: '24bb4171871179fb898b40f5b30d7188d4365cce', icon: "chevron-left" }), h("span", { key: '1f25eee813d9732235b382e513d851e1e47a5b1b', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: 'a1f01fd959e030d8c6bff6f0c7d47aa5ccae9fe3', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '03b4b21054ed24422283cde0ea3de83a547c3537', icon: "chevron-right" }), h("span", { key: 'd9706fd79cb7fd362a9853d6f9ba0556095fa3de', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: '710479d8e9823855ad515bf3b0d2cb6f8a0cc914', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
     }
     static get is() { return "dso-date-picker-legacy"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/document-card/document-card.css

@@ -0,0 +1,90 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+}
+
+.dso-document-card-container {
+  padding-block: 16px 8px;
+  padding-inline: 16px;
+  inline-size: 100%;
+}
+.dso-document-card-container .dso-document-card-heading {
+  align-items: center;
+  display: flex;
+}
+@media screen and (max-width: 480px) {
+  .dso-document-card-container .dso-document-card-heading {
+    flex-wrap: wrap;
+  }
+}
+.dso-document-card-container:has(.dso-document-card-heading a:is(:hover, :focus-visible)) {
+  background-color: #f2f2f2;
+}
+
+:host([active]:not([active=false])) .dso-document-card-container {
+  background-color: #e5e5e5;
+}
+
+::slotted([slot=meta]) {
+  display: flex !important;
+  justify-content: space-between !important;
+  margin-inline-start: auto !important;
+}
+@media screen and (max-width: 480px) {
+  ::slotted([slot=meta]) {
+    flex-basis: 100% !important;
+    margin-block-start: 16px !important;
+  }
+}
+
+::slotted([slot=heading]) {
+  align-items: center !important;
+  display: flex !important;
+  font-size: 1.125em !important;
+  margin-block-end: 0 !important;
+  margin-block-start: 0 !important;
+}
+
+.heading-anchor {
+  display: flex;
+  gap: 4px;
+  color: #275937;
+  text-decoration: none;
+}
+.heading-anchor:hover {
+  color: #275937;
+  text-decoration: underline;
+}
+.heading-anchor:visited {
+  color: #275937;
+}
+.heading-anchor dso-icon {
+  flex-shrink: 0;
+}
+.heading-anchor .sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+::slotted([slot=type]) {
+  --_dt-info-button-margin-inline-start: 0;
+  display: flex !important;
+  gap: 8px !important;
+}
+
+.dso-document-card-heading + .dso-document-card-type,
+.dso-document-card-heading + .dso-document-card-status,
+.dso-document-card-type + .dso-document-card-status {
+  margin-block-start: 8px;
+}

package/dist/collection/components/document-card/document-card.interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=document-card.interfaces.js.map

package/dist/collection/components/document-card/document-card.interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-card.interfaces.js","sourceRoot":"","sources":["../../../../src/components/document-card/document-card.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface DocumentCardClickEvent {\r\n  originalEvent: MouseEvent;\r\n  /** True when user clicked the card while holding Ctrl, Alt or other modifiers, or when the card is right-clicked. Can be used to determine navigation. */\r\n  isModifiedEvent: boolean;\r\n}\r\n"]}

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

@@ -0,0 +1,111 @@
+import { h, forceUpdate } from "@stencil/core";
+import { isModifiedEvent } from "../../utils/is-modified-event";
+/**
+ * @slot heading - A slot to place the title of the card in.
+ * @slot meta - An optional slot to place a `Label` in.
+ * @slot type - A slot to hold type of document with an optional `Toggletip`.
+ * @slot status - A slot to hold some status information on the document.
+ */
+export class DocumentCard {
+    constructor() {
+        this.href = undefined;
+        this.active = 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.href) {
+            return;
+        }
+        return this.dsoDocumentCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
+    }
+    get metaSlottedElement() {
+        return this.host.querySelector("[slot='meta']");
+    }
+    render() {
+        return (h("div", { key: 'da5f35bfb4340de8123393e31d955f5e232ac1da', class: "dso-document-card-container" }, h("div", { key: 'ebb1766cc91cddff11952de180ae5c4f5e974300', class: "dso-document-card-heading" }, h("a", { key: '44c19ab92d9adce26bf92b71cc763e7f1b55df9a', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'd528a084a56638ec201e4494559cc5c414a22fc6', name: "heading" }), h("dso-icon", { key: 'ec5fce61c68a57ca116f8e7a836fc7cdf2fed653', icon: "chevron-right" })), this.metaSlottedElement !== null && h("slot", { key: 'ed4e4d9029de18af9cfcb34e4bb3da413b38dd84', name: "meta" })), h("div", { key: '0850812c5838eec5dcae5dbe0615a15984e3cefb', class: "dso-document-card-type" }, h("slot", { key: 'e6ad51fac2e3f166dbbd51dee7931cc1b4d74c4f', name: "type" })), h("div", { key: '1c77dc25e082ad3e82299ff991793d92713a0574', class: "dso-document-card-status" }, h("slot", { key: 'ee43d829ce2ac1457cedba9f0c4c0dbaeece098c', name: "status" }))));
+    }
+    static get is() { return "dso-document-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["document-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["document-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL to which the DocumentCard heading links."
+                },
+                "attribute": "href",
+                "reflect": true
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the DocumentCard active."
+                },
+                "attribute": "active",
+                "reflect": true
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoDocumentCardClick",
+                "name": "dsoDocumentCardClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the DocumentCard heading is clicked."
+                },
+                "complexType": {
+                    "original": "DocumentCardClickEvent",
+                    "resolved": "DocumentCardClickEvent",
+                    "references": {
+                        "DocumentCardClickEvent": {
+                            "location": "import",
+                            "path": "./document-card.interfaces",
+                            "id": "src/components/document-card/document-card.interfaces.ts::DocumentCardClickEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=document-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"document-card.js","sourceRoot":"","sources":["../../../../src/components/document-card/document-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAElH,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAIhE;;;;;GAKG;AAMH,MAAM,OAAO,YAAY;;;;;IAwBvB,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAE3E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAClF,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QAEpC,OAAO,IAAI,CAAC,gBAAgB,CAAC;IAC/B,CAAC;IAEO,iBAAiB,CAAC,CAAa;QACrC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACrD,OAAO;QACT,CAAC;QAED,OAAO,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACnG,CAAC;IAED,IAAI,kBAAkB;QACpB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAClD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,6BAA6B;YACtC,4DAAK,KAAK,EAAC,2BAA2B;gBACpC,0DAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;oBAClF,6DAAM,IAAI,EAAC,SAAS,GAAG;oBACvB,iEAAU,IAAI,EAAC,eAAe,GAAY,CACxC;gBACH,IAAI,CAAC,kBAAkB,KAAK,IAAI,IAAI,6DAAM,IAAI,EAAC,MAAM,GAAG,CACrD;YACN,4DAAK,KAAK,EAAC,wBAAwB;gBACjC,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB;YACN,4DAAK,KAAK,EAAC,0BAA0B;gBACnC,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, forceUpdate } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DocumentCardClickEvent } from \"./document-card.interfaces\";\r\n\r\n/**\r\n * @slot heading - A slot to place the title of the card in.\r\n * @slot meta - An optional slot to place a `Label` in.\r\n * @slot type - A slot to hold type of document with an optional `Toggletip`.\r\n * @slot status - A slot to hold some status information on the document.\r\n */\r\n@Component({\r\n  tag: \"dso-document-card\",\r\n  styleUrl: \"document-card.scss\",\r\n  shadow: true,\r\n})\r\nexport class DocumentCard implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoDocumentCardElement;\r\n\r\n  /**\r\n   * The URL to which the DocumentCard heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href!: string | undefined;\r\n\r\n  /**\r\n   * Makes the DocumentCard active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the DocumentCard heading is clicked.\r\n   */\r\n  @Event()\r\n  dsoDocumentCardClick!: EventEmitter<DocumentCardClickEvent>;\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.href) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoDocumentCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get metaSlottedElement() {\r\n    return this.host.querySelector(\"[slot='meta']\");\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"dso-document-card-container\">\r\n        <div class=\"dso-document-card-heading\">\r\n          <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n            <slot name=\"heading\" />\r\n            <dso-icon icon=\"chevron-right\"></dso-icon>\r\n          </a>\r\n          {this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n        </div>\r\n        <div class=\"dso-document-card-type\">\r\n          <slot name=\"type\" />\r\n        </div>\r\n        <div class=\"dso-document-card-status\">\r\n          <slot name=\"status\" />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}