npm - @dso-toolkit/core - Versions diffs - 62.5.0 → 62.7.0 - Mend

@dso-toolkit/core 62.5.0 → 62.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (156) hide show

package/dist/collection/components/action-list/components/action-list-item.css CHANGED Viewed

@@ -44,9 +44,15 @@
   content: "";
   display: block;
   height: 24px;
-  left: 80px;
   position: absolute;
-  width: calc(100% + 16px);
+  left: calc(2rem + 16px + 16px + 8px - 8px);
+  width: calc(100% - (2rem + 16px + 16px + 8px - 8px));
+}
+@media screen and (min-width: 480px) {
+  :host(.divider) .dso-action-list-item::after {
+    left: calc(2rem + 16px + 16px + 8px);
+    width: calc(100% - (2rem + 16px + 16px + 8px));
+  }
 }
 h3 {
@@ -67,15 +73,16 @@ h3 {
 .dso-action-list-item {
   display: grid;
-  grid-template-columns: 80px 1fr;
+  grid-template-columns: calc(2rem + 16px + 16px + 8px - 8px) 1fr;
+}
+@media screen and (min-width: 480px) {
+  .dso-action-list-item {
+    grid-template-columns: calc(2rem + 16px + 16px + 8px) 1fr;
+  }
 }
 .dso-action-list-item .dso-step-counter {
   position: unset;
 }
-.dso-action-list-item .dso-step-counter,
-.dso-action-list-item dso-icon {
-  margin-inline-start: 8px;
-}
 .dso-action-list-item .action-list-item-content {
   grid-column: 2/2;
 }

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

@@ -2,6 +2,62 @@
   grid-row: span 2;
 }
+a {
+  background-color: transparent;
+  color: var(--link-color);
+  text-decoration: underline;
+}
+a:hover, a:focus {
+  color: var(--link-hover-color);
+  text-decoration: underline;
+}
+a:active {
+  text-decoration: none;
+}
+a:visited {
+  color: var(--link-visited-color);
+}
+a:not(.dso-primary, .dso-secondary, .dso-tertiary).download {
+  background-repeat: no-repeat;
+  background-size: 1.25em 1.25em;
+  padding-inline-end: 1.5em;
+  background-position: bottom 0 right 0;
+  background-image: url("./dso-icons.svg#img-download");
+}
+a:not(.dso-primary, .dso-secondary, .dso-tertiary).download:hover, a:not(.dso-primary, .dso-secondary, .dso-tertiary).download:focus {
+  background-image: url("./dso-icons.svg#img-download-scampi");
+}
+a:not(.dso-primary, .dso-secondary, .dso-tertiary).extern {
+  background-repeat: no-repeat;
+  background-size: 1.25em 1.25em;
+  padding-inline-end: 1.5em;
+  background-position: bottom 0 right 0;
+  background-image: url("./dso-icons.svg#img-external-link");
+}
+a:not(.dso-primary, .dso-secondary, .dso-tertiary).extern:hover, a:not(.dso-primary, .dso-secondary, .dso-tertiary).extern:focus {
+  background-image: url("./dso-icons.svg#img-external-link-scampi");
+}
+a:not(.dso-primary, .dso-secondary, .dso-tertiary)[href^="tel:"] {
+  background-repeat: no-repeat;
+  background-size: 1.25em 1.25em;
+  padding-inline-start: 1.5em;
+  background-position: bottom 0 left 0;
+  background-image: url("./dso-icons.svg#img-call-grasgroen");
+}
+a:not(.dso-primary, .dso-secondary, .dso-tertiary)[href^="tel:"]:hover, a:not(.dso-primary, .dso-secondary, .dso-tertiary)[href^="tel:"]:focus {
+  background-image: url("./dso-icons.svg#img-call-scampi");
+}
+a:not(.dso-primary, .dso-secondary, .dso-tertiary)[href^="mailto:"] {
+  background-repeat: no-repeat;
+  background-size: 1.25em 1.25em;
+  padding-inline-start: 1.5em;
+  background-position: bottom 0 left 0;
+  background-image: url("./dso-icons.svg#img-email-grasgroen");
+}
+a:not(.dso-primary, .dso-secondary, .dso-tertiary)[href^="mailto:"]:hover, a:not(.dso-primary, .dso-secondary, .dso-tertiary)[href^="mailto:"]:focus {
+  background-image: url("./dso-icons.svg#img-email-scampi");
+}
 *,
 *::after,
 *::before {
@@ -23,4 +79,21 @@
 }
 :host .dso-card-image {
   margin-right: 8px;
+}
+:host(:hover) .dso-card-heading a {
+  color: #275937;
+  text-decoration: underline;
+}
+.dso-card-heading a {
+  text-decoration: none;
+}
+.heading-anchor {
+  color: #275937;
+  display: flex;
+}
+.heading-anchor dso-icon {
+  flex-shrink: 0;
 }

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

@@ -1,16 +1,23 @@
-import { h, Host } from "@stencil/core";
-import clsx from "clsx";
+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.isSelectable = false;
-    this.hasImage = false;
     this.clickable = true;
     this.imageShape = "normal";
+    this.href = 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) {
+    if (!(e.target instanceof HTMLElement) || (!this.clickable && !this.href)) {
       return;
     }
     let element = e.target;
@@ -27,12 +34,22 @@ export class Card {
     }
     return this.dsoCardClicked.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
   }
-  componentWillLoad() {
-    this.isSelectable = this.host.querySelector("*[slot = 'selectable']") !== null;
-    this.hasImage = this.host.querySelector("*[slot = 'image']") !== null;
+  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() {
-    return (h(Host, { class: clsx({ "dso-not-clickable": !this.clickable }), onClick: (e) => this.clickEventHandler(e) }, h("div", { class: "dso-card-selectable", hidden: !this.isSelectable }, h("slot", { name: "selectable" })), h("div", { class: "dso-card-image", hidden: !this.hasImage }, h("slot", { name: "image" })), h("div", { class: "dso-card-heading" }, h("slot", { name: "heading" }), h("slot", { name: "interactions" })), h("div", { class: "dso-card-content" }, h("slot", { name: "content" }))));
+    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" })) : (h("a", { href: this.href, class: "heading-anchor" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "chevron-right" }))), 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"; }
@@ -48,42 +65,6 @@ export class Card {
   }
   static get properties() {
     return {
-      "isSelectable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Do not use, this is set programmatically by the component."
-        },
-        "attribute": "is-selectable",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "hasImage": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Do not use, this is set programmatically by the component."
-        },
-        "attribute": "has-image",
-        "reflect": true,
-        "defaultValue": "false"
-      },
       "clickable": {
         "type": "boolean",
         "mutable": false,
@@ -95,11 +76,14 @@ export class Card {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": "Whether or not the Card is clickable."
+          "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": false,
+        "reflect": true,
         "defaultValue": "true"
       },
       "imageShape": {
@@ -125,6 +109,23 @@ export class Card {
         "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
       }
     };
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,~~MAAM~~,~~eAAe~~,~~CAAC;AAC3G,OAAO,IAAI,~~MAAM,~~MAAM~~,CAAC;~~AAExB~~,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAShE,MAAM,OAAO,IAAI;;~~wBAQA~~,~~KAAK~~;~~oBAMT~~,~~KAAK~~;~~qBAMJ~~,IAAI;~~sBAQS~~,~~QAAQ~~;;~~EAQzB~~,iBAAiB,CAAC,CAAa;IACrC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;~~MACzD~~,OAAO;KACR;IAED,IAAI,OAAO,GAAuB,CAAC,CAAC,MAAM,CAAC;IAE3C,OAAO,OAAO,KAAK,IAAI,CAAC,IAAI,IAAI,OAAO,KAAK,IAAI,EAAE;MAChD,IAAI,oBAAoB,CAAC,OAAO,CAAC,IAAI,OAAO,KAAK,IAAI,EAAE;QACrD,OAAO;OACR;MAED,IAAI,OAAO,CAAC,UAAU,YAAY,UAAU,IAAI,OAAO,CAAC,UAAU,CAAC,IAAI,YAAY,WAAW,EAAE;QAC9F,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC;OACnC;WAAM;QACL,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC;OACjC;KACF;IAED,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;EAC7F,CAAC;EAED,~~iBAAiB~~;~~IACf~~,IAAI,CAAC,~~YAAY~~,~~GAAG~~,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,~~wBAAwB~~,CAAC,~~KAAK~~,~~IAAI,~~CAAC;~~IAC/E~~,IAAI,~~CAAC~~,~~QAAQ~~,~~GAAG,~~IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,~~mBAAmB~~,CAAC,~~KAAK~~,IAAI,CAAC;~~EACxE~~,CAAC;EAED,MAAM;IACJ,~~OAAO~~,~~CACL~~,~~EAAC~~,IAAI,~~IACH~~,KAAK,~~EAAE,~~IAAI,CAAC,~~EAAE~~,~~mBAAmB~~,~~EAAE~~,CAAC,IAAI,CAAC,~~SAAS~~,~~EAAE~~,~~CAAC~~,~~EACrD~~,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;~~MAErD~~,WAAK,KAAK,EAAC,qBAAqB,EAAC,MAAM,EAAE,CAAC,~~IAAI,CAAC,~~YAAY;~~QACzD~~,YAAM,IAAI,EAAC,YAAY,GAAG,CACtB;MACN,WAAK,KAAK,EAAC,gBAAgB,EAAC,MAAM,EAAE,CAAC,~~IAAI,CAAC,~~QAAQ;~~QAChD~~,YAAM,IAAI,EAAC,OAAO,GAAG,CACjB;MACN,WAAK,KAAK,EAAC,kBAAkB;~~QAC3B~~,YAAM,IAAI,EAAC,SAAS,GAAG;~~QACvB~~,YAAM,IAAI,EAAC,cAAc,GAAG,~~CACxB~~;MACN,WAAK,KAAK,EAAC,kBAAkB;QAC3B,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACD,CACR,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { h, Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop } from \"@stencil/core\";\r\~~nimport clsx from \"clsx\";\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 Do not ~~use,~~ ~~this~~ is ~~set~~ ~~programmatically~~ by ~~the~~ ~~component.\r\n /\r\n @Prop({~~ ~~reflect:~~ ~~true~~ ~~})\r\n isSelectable~~ = false~~;\r~~\n\r\n /\r\n Do ~~not~~ ~~use,~~ ~~this~~ ~~is set programmatically by the component~~.\r\n /\r\n @~~Prop({~~ ~~reflect:~~ ~~true~~ ~~})\r\n hasImage~~ = ~~false;\r~~\n\r\n /\r\n ~~Whether~~ or ~~not~~ ~~the~~ ~~Card~~ is ~~clickable~~.\r\n /\r\n @Prop()\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 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 clickEventHandler(e: MouseEvent) {\r\n if (!(e.target instanceof HTMLElement) \|\| !this.clickable) {\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 ~~componentWillLoad~~() {\r\n ~~this.isSelectable~~ = this.host.querySelector(\"[slot = 'selectable']\") ~~!==~~ ~~null;\~~r\n ~~this.hasImage~~ = this.host.querySelector(\"*[slot = 'image']\") ~~!== null~~;\r\n }\r\n\r\n ~~render~~() {\r\n return (\r\n ~~<Host~~\r\n ~~class={clsx~~({ \"~~dso-not-clickable~~\": !this.~~clickable~~ ~~})}~~\r\n onClick={(e: MouseEvent) => this.clickEventHandler(e)}~~\r\n~~ >\r\n <div class=\"dso-card-selectable\" hidden={!~~this.~~isSelectable}>\r\n <slot name=\"selectable\" />\r\n </div>\r\n <div class=\"dso-card-image\" hidden={!~~this.~~hasImage}>\r\n <slot name=\"image\" />\r\n </div>\r\n <div class=\"dso-card-heading\">\r\n <slot name=\"heading\" />\r\n <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"]}
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 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 <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.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/document-component/document-component.css CHANGED Viewed

@@ -679,9 +679,10 @@ a.dso-tertiary, a.dso-tertiary:visited {
 :host {
   display: block;
+  --depth: var(--a, 0);
 }
-:host([type=LID]:where([wijzigactie=verwijder], [wijzigactie=voegtoe])) {
+:host([not-collapsible]:where([wijzigactie=verwijder], [wijzigactie=voegtoe])) {
   padding-left: 8px;
   margin-right: 8px;
 }
@@ -719,6 +720,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
 }
 :host([filtered])::before {
   content: "";
+  left: -3px;
   position: absolute;
   display: block;
   width: 3px;
@@ -731,6 +733,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
   margin-bottom: 8px;
 }
+.recursive-toggle,
 .toggle-button {
   border: 0;
   padding: 0;
@@ -749,39 +752,30 @@ a.dso-tertiary, a.dso-tertiary:visited {
   vertical-align: middle;
 }
-:host([type=LID]) .heading-container {
+:host([not-collapsible]) .heading-container {
   margin-bottom: 0;
 }
-:host([type=LID]) .wijzigactie-label {
+:host([not-collapsible]) .wijzigactie-label {
   margin-left: 0;
 }
-:host([type=LID]) .heading-element {
+:host([not-collapsible]) .heading-element {
   color: #000;
 }
-:host(:not([type=LID])) .heading-element {
+:host(:not([not-collapsible])) .heading-element {
   cursor: pointer;
 }
-:host(:not([type=LID])) .heading-element:hover, :host(:not([type=LID])) .heading-element:focus {
+:host(:not([not-collapsible])) .heading-element:hover, :host(:not([not-collapsible])) .heading-element:focus {
   color: var(--link-hover-color);
   text-decoration: underline;
 }
-:host(:not([type=LID])) .heading-element:active {
+:host(:not([not-collapsible])) .heading-element:active {
   text-decoration: none;
 }
-:host(:not([type=LID])) .wijzigactie-label {
+:host(:not([not-collapsible])) .wijzigactie-label {
   margin-left: 24px;
 }
-:host-context(dso-responsive-element[small]) .content,
-:host(:not([type=LID])) .content {
-  padding-left: 24px;
-}
-:host-context(dso-responsive-element[small]):host([type=LID]) .heading-container {
-  padding-left: 24px;
-}
 .addons {
   margin-inline-start: auto;
   display: flex;
@@ -790,6 +784,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
 .heading {
   display: flex;
+  align-items: start;
   gap: 8px;
 }

package/dist/collection/components/document-component/document-component.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h, Fragment } from "@stencil/core";
+import { h, Fragment, Host } from "@stencil/core";
 import { Heading } from "./document-component-heading";
 const wijzigActieLabels = {
   nieuweContainer: "Toegevoegd",
@@ -6,6 +6,12 @@ const wijzigActieLabels = {
   verwijderContainer: "Verwijderd",
   voegtoe: "Toegevoegd",
 };
+/**
+ * @part _annotation-container - private part, do not touch.
+ * @part _children-container - private part, do not touch.
+ * @part _content - private part, do not touch.
+ * @part _heading-container - private part, do not touch.
+ */
 export class DocumentComponent {
   constructor() {
     this.handleHeadingClick = (e) => {
@@ -16,6 +22,13 @@ export class DocumentComponent {
     this.handleOzonContentAnchorClick = (e) => {
       this.dsoOzonContentAnchorClick.emit({ originalEvent: e, ozonContentAnchorClick: e.detail });
     };
+    this.handleRecursiveToggleClick = (e) => {
+      this.dsoRecursiveToggle.emit({
+        originalEvent: e,
+        current: this.recursiveToggle,
+        next: this.recursiveToggle === true ? false : true,
+      });
+    };
     this.heading = "h2";
     this.label = undefined;
     this.nummer = undefined;
@@ -34,6 +47,7 @@ export class DocumentComponent {
     this.type = undefined;
     this.wijzigactie = undefined;
     this.mark = undefined;
+    this.recursiveToggle = undefined;
   }
   get wijzigactieLabel() {
     return this.wijzigactie && wijzigActieLabels[this.wijzigactie];
@@ -49,7 +63,17 @@ export class DocumentComponent {
   }
   render() {
     const suffix = this.suffix();
-    return (h(Fragment, null, h("div", { class: "heading-container" }, this.wijzigactie && h("span", { class: "wijzigactie-label" }, this.wijzigactieLabel, ":"), h("div", { class: "heading" }, h(Heading, { heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick }, this.type !== "LID" && (h("button", { type: "button", class: "toggle-button" }, h("dso-icon", { icon: this.open ? "chevron-down" : "chevron-right" }))), h("div", { class: "title" }, this.notApplicable && h("span", { class: "not-applicable" }, "Niet van toepassing:"), this.label || this.nummer || this.opschrift ? (h(Fragment, null, this.label && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.label, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "label"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "label" })), inline: true }))), this.nummer && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.nummer, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "nummer"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "nummer" })), inline: true }))), this.opschrift && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.opschrift, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "opschrift"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "opschrift" })), inline: true }))))) : (this.alternativeTitle), suffix && h("span", null, " - [", suffix, "]"))), this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (h(Fragment, null, h("dso-badge", { status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { status: "warning", compact: true }, "Ontwerp")), this.annotated && (h("dso-annotation-button", { identifier: "expandable", open: this.openAnnotation, onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) })))))), h("slot", { name: "annotation" }), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (h("div", { class: "content" }, this.gereserveerd && (h("dso-alert", { status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && h("dso-alert", { status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (h("dso-ozon-content", { content: this.inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })) })))), h("slot", null)));
+    const collapsible = !!((this.label || this.nummer || this.opschrift || this.alternativeTitle) &&
+      this.type !== "LID");
+    const showHeading = !!(this.wijzigactie ||
+      collapsible ||
+      this.label ||
+      this.nummer ||
+      this.opschrift ||
+      this.alternativeTitle ||
+      this.bevatOntwerpInformatie ||
+      this.annotated);
+    return (h(Host, { "not-collapsible": !collapsible }, showHeading && (h("div", { class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { class: "wijzigactie-label" }, this.wijzigactieLabel, ":"), h("div", { class: "heading" }, h(Heading, { heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick }, collapsible && (h("button", { type: "button", class: "toggle-button" }, h("dso-icon", { icon: this.open ? "chevron-down" : "chevron-right" }))), h("div", { class: "title" }, this.notApplicable && h("span", { class: "not-applicable" }, "Niet van toepassing:"), this.label || this.nummer || this.opschrift ? (h(Fragment, null, this.label && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.label, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "label"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "label" })), inline: true }))), this.nummer && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.nummer, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "nummer"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "nummer" })), inline: true }))), this.opschrift && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.opschrift, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "opschrift"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "opschrift" })), inline: true }))))) : (this.alternativeTitle), suffix && h("span", null, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && (h("button", { type: "button", class: "recursive-toggle", title: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", onClick: this.handleRecursiveToggleClick }, h("dso-icon", { icon: this.recursiveToggle === true ? "eye" : "eye-slash" }))), this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (h(Fragment, null, h("dso-badge", { status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { status: "warning", compact: true }, "Ontwerp")), this.annotated && (h("dso-annotation-button", { identifier: "expandable", open: this.openAnnotation, onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }))))))), h("div", { class: "annotation-container", part: "_annotation-container" }, h("slot", { name: "annotation" })), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (h("div", { class: "content", part: "_content" }, this.gereserveerd && (h("dso-alert", { status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && h("dso-alert", { status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (h("dso-ozon-content", { content: this.inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })) })))), h("div", { class: "children-container", part: "_children-container" }, h("slot", null))));
   }
   static get is() { return "dso-document-component"; }
   static get encapsulation() { return "shadow"; }
@@ -412,13 +436,57 @@ export class DocumentComponent {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Voor het markeren in content."
+          "text": "To mark text."
         }
+      },
+      "recursiveToggle": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "DocumentComponentRecursiveToggleState",
+          "resolved": "\"indeterminate\" | boolean | undefined",
+          "references": {
+            "DocumentComponentRecursiveToggleState": {
+              "location": "import",
+              "path": "./document-component.models",
+              "id": "src/components/document-component/document-component.models.ts::DocumentComponentRecursiveToggleState"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Shows the recursive toggle button. When the user activates this button the event `dsoRecursiveToggle` is emitted."
+        },
+        "attribute": "recursive-toggle",
+        "reflect": false
       }
     };
   }
   static get events() {
     return [{
+        "method": "dsoRecursiveToggle",
+        "name": "dsoRecursiveToggle",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the user activates the recursive toggle."
+        },
+        "complexType": {
+          "original": "DocumentComponentRecursiveToggleEvent",
+          "resolved": "DocumentComponentRecursiveToggleEvent",
+          "references": {
+            "DocumentComponentRecursiveToggleEvent": {
+              "location": "import",
+              "path": "./document-component.models",
+              "id": "src/components/document-component/document-component.models.ts::DocumentComponentRecursiveToggleEvent"
+            }
+          }
+        }
+      }, {
         "method": "dsoOpenToggle",
         "name": "dsoOpenToggle",
         "bubbles": false,

package/dist/collection/components/document-component/document-component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"document-component.js","sourceRoot":"","sources":["../../../src/components/document-component/document-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, Event, EventEmitter, Fragment, Prop } from \"@stencil/core\";\r\nimport {\r\n DocumentComponentOpenToggleEvent,\r\n DocumentComponentToggleAnnotationEvent,\r\n DocumentComponentOzonContentAnchorClickEvent,\r\n DocumentComponentWijzigactie,\r\n DocumentComponentInputType,\r\n DocumentComponentMarkFunction,\r\n DocumentComponentMarkItemHighlightEvent,\r\n} from \"./document-component.models\";\r\nimport { OzonContentAnchorClickEvent } from \"../ozon-content/ozon-content.interfaces\";\r\nimport { Heading } from \"./document-component-heading\";\r\n\r\nimport { DsoOzonContentCustomEvent } from \"../../components\";\r\n\r\nconst wijzigActieLabels: { [wijzigActie in DocumentComponentWijzigactie]: string } = {\r\n nieuweContainer: \"Toegevoegd\",\r\n verwijder: \"Verwijderd\",\r\n verwijderContainer: \"Verwijderd\",\r\n voegtoe: \"Toegevoegd\",\r\n};\r\n\r\n@Component({\r\n tag: \"dso-document-component\",\r\n styleUrl: \"document-component.scss\",\r\n shadow: true,\r\n})\r\nexport class DocumentComponent implements ComponentInterface {\r\n /*\r\n The heading element to use.\r\n /\r\n @Prop()\r\n heading: \"h2\" \| \"h3\" \| \"h4\" \| \"h5\" \| \"h6\" = \"h2\";\r\n\r\n /\r\n The Label XML.\r\n /\r\n @Prop()\r\n label?: DocumentComponentInputType;\r\n\r\n /\r\n The Nummer XML.\r\n /\r\n @Prop()\r\n nummer?: DocumentComponentInputType;\r\n\r\n /\r\n The Opschrift XML.\r\n /\r\n @Prop()\r\n opschrift?: DocumentComponentInputType;\r\n\r\n /\r\n The Inhoud XML.\r\n /\r\n @Prop()\r\n inhoud?: DocumentComponentInputType;\r\n\r\n /\r\n This boolean attribute indicates whether the children are visible.\r\n /\r\n @Prop({ reflect: true })\r\n open = false;\r\n\r\n /\r\n Marks this Document Component as belonging to an active filter.\r\n /\r\n @Prop({ reflect: true })\r\n filtered = false;\r\n\r\n /\r\n Marks this Document Component as not-applicable.\r\n /\r\n @Prop({ reflect: true })\r\n notApplicable = false;\r\n\r\n /\r\n When a child Document Component has a status \"Draft\".\r\n /\r\n @Prop({ reflect: true })\r\n genesteOntwerpInformatie = false;\r\n\r\n /\r\n Marks as draft.\r\n /\r\n @Prop({ reflect: true })\r\n bevatOntwerpInformatie = false;\r\n\r\n /\r\n Enables annotations.\r\n /\r\n @Prop({ reflect: true })\r\n annotated = false;\r\n\r\n /\r\n Marks Document Component as reserved.\r\n /\r\n @Prop()\r\n gereserveerd = false;\r\n\r\n /\r\n Marks the Document Component as expired.\r\n /\r\n @Prop()\r\n vervallen = false;\r\n\r\n /\r\n When the Annotation Output is opened, set this to true.\r\n /\r\n @Prop()\r\n openAnnotation = false;\r\n\r\n /\r\n An alternative title to show when there is nothing to create a title.\r\n /\r\n @Prop()\r\n alternativeTitle?: string;\r\n\r\n /\r\n Type of Document Component.\r\n /\r\n @Prop({ reflect: true })\r\n type?: string;\r\n\r\n /\r\n The wijzigactie as in STOP.\r\n /\r\n @Prop({ reflect: true })\r\n wijzigactie?: DocumentComponentWijzigactie;\r\n\r\n /\r\n Voor het markeren in content.\r\n /\r\n @Prop()\r\n mark?: DocumentComponentMarkFunction;\r\n\r\n /\r\n Emitted when the user activates the toggle.\r\n /\r\n @Event({ bubbles: false })\r\n dsoOpenToggle!: EventEmitter<DocumentComponentOpenToggleEvent>;\r\n\r\n /\r\n Emitted when the user actives intRef or intIoRef anchors in Ozon Content\r\n /\r\n @Event({ bubbles: false })\r\n dsoOzonContentAnchorClick!: EventEmitter<DocumentComponentOzonContentAnchorClickEvent>;\r\n\r\n /\r\n Emitted when the user activates the annotation button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoAnnotationToggle!: EventEmitter<DocumentComponentToggleAnnotationEvent>;\r\n\r\n /\r\n Emitted each time a marked item gets highlighted.\r\n */\r\n @Event({ bubbles: false })\r\n dsoMarkItemHighlight!: EventEmitter<DocumentComponentMarkItemHighlightEvent>;\r\n\r\n private get wijzigactieLabel(): string \| undefined {\r\n return this.wijzigactie && wijzigActieLabels[this.wijzigactie];\r\n }\r\n\r\n private handleHeadingClick = (e: MouseEvent) => {\r\n if (this.type !== \"LID\") {\r\n this.dsoOpenToggle.emit({ originalEvent: e, open: !this.open });\r\n }\r\n };\r\n\r\n private suffix(): string \| undefined {\r\n if (this.vervallen) {\r\n return \"vervallen\";\r\n }\r\n\r\n if (this.gereserveerd) {\r\n return \"gereserveerd\";\r\n }\r\n\r\n return undefined;\r\n }\r\n\r\n private handleOzonContentAnchorClick = (e: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>) => {\r\n this.dsoOzonContentAnchorClick.emit({ originalEvent: e, ozonContentAnchorClick: e.detail });\r\n };\r\n\r\n render() {\r\n const suffix = this.suffix();\r\n\r\n return (\r\n <>\r\n <div class=\"heading-container\">\r\n {this.wijzigactie && <span class=\"wijzigactie-label\">{this.wijzigactieLabel}:</span>}\r\n <div class=\"heading\">\r\n <Heading heading={this.heading} class=\"heading-element\" onClick={this.handleHeadingClick}>\r\n {this.type !== \"LID\" && (\r\n <button type=\"button\" class=\"toggle-button\">\r\n <dso-icon icon={this.open ? \"chevron-down\" : \"chevron-right\"}></dso-icon>\r\n </button>\r\n )}\r\n <div class=\"title\">\r\n {this.notApplicable && <span class=\"not-applicable\">Niet van toepassing:</span>}\r\n {this.label \|\| this.nummer \|\| this.opschrift ? (\r\n <>\r\n {this.label && (\r\n <>\r\n {\" \"}\r\n <dso-ozon-content\r\n content={this.label}\r\n onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n mark={this.mark && ((text) => this.mark?.(text, \"label\"))}\r\n onDsoOzonContentMarkItemHighlight={(e) =>\r\n this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"label\" })\r\n }\r\n inline\r\n ></dso-ozon-content>\r\n </>\r\n )}\r\n {this.nummer && (\r\n <>\r\n {\" \"}\r\n <dso-ozon-content\r\n content={this.nummer}\r\n onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n mark={this.mark && ((text) => this.mark?.(text, \"nummer\"))}\r\n onDsoOzonContentMarkItemHighlight={(e) =>\r\n this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"nummer\" })\r\n }\r\n inline\r\n ></dso-ozon-content>\r\n </>\r\n )}\r\n {this.opschrift && (\r\n <>\r\n {\" \"}\r\n <dso-ozon-content\r\n content={this.opschrift}\r\n onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n mark={this.mark && ((text) => this.mark?.(text, \"opschrift\"))}\r\n onDsoOzonContentMarkItemHighlight={(e) =>\r\n this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"opschrift\" })\r\n }\r\n inline\r\n ></dso-ozon-content>\r\n </>\r\n )}\r\n </>\r\n ) : (\r\n this.alternativeTitle\r\n )}\r\n {suffix && <span> - [{suffix}]</span>}\r\n </div>\r\n </Heading>\r\n {this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (\r\n <>\r\n <dso-badge status=\"warning\" aria-describedby=\"nested-draft-description\">\r\n !\r\n </dso-badge>\r\n <dso-tooltip id=\"nested-draft-description\">Er is een ontwerp beschikbaar.</dso-tooltip>\r\n </>\r\n )}\r\n {(this.bevatOntwerpInformatie \|\| this.annotated) && (\r\n <div class=\"addons\">\r\n {this.bevatOntwerpInformatie && (\r\n <dso-label status=\"warning\" compact>\r\n Ontwerp\r\n </dso-label>\r\n )}\r\n {this.annotated && (\r\n <dso-annotation-button\r\n identifier=\"expandable\"\r\n open={this.openAnnotation}\r\n onDsoClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n ></dso-annotation-button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n <slot name=\"annotation\" />\r\n {this.open && (this.inhoud \|\| this.gereserveerd \|\| this.vervallen) && (\r\n <div class=\"content\">\r\n {this.gereserveerd && (\r\n <dso-alert status=\"info\">Dit onderdeel is gereserveerd voor toekomstige toevoeging.</dso-alert>\r\n )}\r\n {this.vervallen && <dso-alert status=\"info\">Dit onderdeel is vervallen.</dso-alert>}\r\n {this.inhoud && (\r\n <dso-ozon-content\r\n content={this.inhoud}\r\n onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n mark={this.mark && ((text) => this.mark?.(text, \"inhoud\"))}\r\n onDsoOzonContentMarkItemHighlight={(e) =>\r\n this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"inhoud\" })\r\n }\r\n ></dso-ozon-content>\r\n )}\r\n </div>\r\n )}\r\n <slot />\r\n </>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"document-component.js","sourceRoot":"","sources":["../../../src/components/document-component/document-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, Host } from \"@stencil/core\";\r\nimport {\r\n DocumentComponentOpenToggleEvent,\r\n DocumentComponentToggleAnnotationEvent,\r\n DocumentComponentOzonContentAnchorClickEvent,\r\n DocumentComponentWijzigactie,\r\n DocumentComponentInputType,\r\n DocumentComponentMarkFunction,\r\n DocumentComponentMarkItemHighlightEvent,\r\n DocumentComponentRecursiveToggleEvent,\r\n DocumentComponentRecursiveToggleState,\r\n} from \"./document-component.models\";\r\nimport { OzonContentAnchorClickEvent } from \"../ozon-content/ozon-content.interfaces\";\r\nimport { Heading } from \"./document-component-heading\";\r\n\r\nimport { DsoOzonContentCustomEvent } from \"../../components\";\r\n\r\nconst wijzigActieLabels: { [wijzigActie in DocumentComponentWijzigactie]: string } = {\r\n nieuweContainer: \"Toegevoegd\",\r\n verwijder: \"Verwijderd\",\r\n verwijderContainer: \"Verwijderd\",\r\n voegtoe: \"Toegevoegd\",\r\n};\r\n\r\n/*\r\n @part _annotation-container - private part, do not touch.\r\n * @part _children-container - private part, do not touch.\r\n * @part _content - private part, do not touch.\r\n * @part _heading-container - private part, do not touch.\r\n /\r\n@Component({\r\n tag: \"dso-document-component\",\r\n styleUrl: \"document-component.scss\",\r\n shadow: true,\r\n})\r\nexport class DocumentComponent implements ComponentInterface {\r\n /\r\n The heading element to use.\r\n /\r\n @Prop()\r\n heading: \"h2\" \| \"h3\" \| \"h4\" \| \"h5\" \| \"h6\" = \"h2\";\r\n\r\n /\r\n The Label XML.\r\n /\r\n @Prop()\r\n label?: DocumentComponentInputType;\r\n\r\n /\r\n The Nummer XML.\r\n /\r\n @Prop()\r\n nummer?: DocumentComponentInputType;\r\n\r\n /\r\n The Opschrift XML.\r\n /\r\n @Prop()\r\n opschrift?: DocumentComponentInputType;\r\n\r\n /\r\n The Inhoud XML.\r\n /\r\n @Prop()\r\n inhoud?: DocumentComponentInputType;\r\n\r\n /\r\n This boolean attribute indicates whether the children are visible.\r\n /\r\n @Prop({ reflect: true })\r\n open = false;\r\n\r\n /\r\n Marks this Document Component as belonging to an active filter.\r\n /\r\n @Prop({ reflect: true })\r\n filtered = false;\r\n\r\n /\r\n Marks this Document Component as not-applicable.\r\n /\r\n @Prop({ reflect: true })\r\n notApplicable = false;\r\n\r\n /\r\n When a child Document Component has a status \"Draft\".\r\n /\r\n @Prop({ reflect: true })\r\n genesteOntwerpInformatie = false;\r\n\r\n /\r\n Marks as draft.\r\n /\r\n @Prop({ reflect: true })\r\n bevatOntwerpInformatie = false;\r\n\r\n /\r\n Enables annotations.\r\n /\r\n @Prop({ reflect: true })\r\n annotated = false;\r\n\r\n /\r\n Marks Document Component as reserved.\r\n /\r\n @Prop()\r\n gereserveerd = false;\r\n\r\n /\r\n Marks the Document Component as expired.\r\n /\r\n @Prop()\r\n vervallen = false;\r\n\r\n /\r\n When the Annotation Output is opened, set this to true.\r\n /\r\n @Prop()\r\n openAnnotation = false;\r\n\r\n /\r\n An alternative title to show when there is nothing to create a title.\r\n /\r\n @Prop()\r\n alternativeTitle?: string;\r\n\r\n /\r\n Type of Document Component.\r\n /\r\n @Prop({ reflect: true })\r\n type?: string;\r\n\r\n /\r\n The wijzigactie as in STOP.\r\n /\r\n @Prop({ reflect: true })\r\n wijzigactie?: DocumentComponentWijzigactie;\r\n\r\n /\r\n To mark text.\r\n /\r\n @Prop()\r\n mark?: DocumentComponentMarkFunction;\r\n\r\n /\r\n Shows the recursive toggle button. When the user activates this button the event `dsoRecursiveToggle` is emitted.\r\n /\r\n @Prop()\r\n recursiveToggle: DocumentComponentRecursiveToggleState;\r\n\r\n /\r\n Emitted when the user activates the recursive toggle.\r\n /\r\n @Event({ bubbles: false })\r\n dsoRecursiveToggle!: EventEmitter<DocumentComponentRecursiveToggleEvent>;\r\n\r\n /\r\n Emitted when the user activates the toggle.\r\n /\r\n @Event({ bubbles: false })\r\n dsoOpenToggle!: EventEmitter<DocumentComponentOpenToggleEvent>;\r\n\r\n /\r\n Emitted when the user actives intRef or intIoRef anchors in Ozon Content\r\n /\r\n @Event({ bubbles: false })\r\n dsoOzonContentAnchorClick!: EventEmitter<DocumentComponentOzonContentAnchorClickEvent>;\r\n\r\n /\r\n Emitted when the user activates the annotation button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoAnnotationToggle!: EventEmitter<DocumentComponentToggleAnnotationEvent>;\r\n\r\n /\r\n Emitted each time a marked item gets highlighted.\r\n */\r\n @Event({ bubbles: false })\r\n dsoMarkItemHighlight!: EventEmitter<DocumentComponentMarkItemHighlightEvent>;\r\n\r\n private get wijzigactieLabel(): string \| undefined {\r\n return this.wijzigactie && wijzigActieLabels[this.wijzigactie];\r\n }\r\n\r\n private handleHeadingClick = (e: MouseEvent) => {\r\n if (this.type !== \"LID\") {\r\n this.dsoOpenToggle.emit({ originalEvent: e, open: !this.open });\r\n }\r\n };\r\n\r\n private suffix(): string \| undefined {\r\n if (this.vervallen) {\r\n return \"vervallen\";\r\n }\r\n\r\n if (this.gereserveerd) {\r\n return \"gereserveerd\";\r\n }\r\n\r\n return undefined;\r\n }\r\n\r\n private handleOzonContentAnchorClick = (e: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>) => {\r\n this.dsoOzonContentAnchorClick.emit({ originalEvent: e, ozonContentAnchorClick: e.detail });\r\n };\r\n\r\n private handleRecursiveToggleClick = (e: MouseEvent) => {\r\n this.dsoRecursiveToggle.emit({\r\n originalEvent: e,\r\n current: this.recursiveToggle,\r\n next: this.recursiveToggle === true ? false : true,\r\n });\r\n };\r\n\r\n render() {\r\n const suffix = this.suffix();\r\n const collapsible = !!(\r\n (this.label \|\| this.nummer \|\| this.opschrift \|\| this.alternativeTitle) &&\r\n this.type !== \"LID\"\r\n );\r\n const showHeading = !!(\r\n this.wijzigactie \|\|\r\n collapsible \|\|\r\n this.label \|\|\r\n this.nummer \|\|\r\n this.opschrift \|\|\r\n this.alternativeTitle \|\|\r\n this.bevatOntwerpInformatie \|\|\r\n this.annotated\r\n );\r\n\r\n return (\r\n <Host not-collapsible={!collapsible}>\r\n {showHeading && (\r\n <div class=\"heading-container\" part=\"_heading-container\">\r\n {this.wijzigactie && <span class=\"wijzigactie-label\">{this.wijzigactieLabel}:</span>}\r\n <div class=\"heading\">\r\n <Heading heading={this.heading} class=\"heading-element\" onClick={this.handleHeadingClick}>\r\n {collapsible && (\r\n <button type=\"button\" class=\"toggle-button\">\r\n <dso-icon icon={this.open ? \"chevron-down\" : \"chevron-right\"}></dso-icon>\r\n </button>\r\n )}\r\n <div class=\"title\">\r\n {this.notApplicable && <span class=\"not-applicable\">Niet van toepassing:</span>}\r\n {this.label \|\| this.nummer \|\| this.opschrift ? (\r\n <>\r\n {this.label && (\r\n <>\r\n {\" \"}\r\n <dso-ozon-content\r\n content={this.label}\r\n onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n mark={this.mark && ((text) => this.mark?.(text, \"label\"))}\r\n onDsoOzonContentMarkItemHighlight={(e) =>\r\n this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"label\" })\r\n }\r\n inline\r\n ></dso-ozon-content>\r\n </>\r\n )}\r\n {this.nummer && (\r\n <>\r\n {\" \"}\r\n <dso-ozon-content\r\n content={this.nummer}\r\n onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n mark={this.mark && ((text) => this.mark?.(text, \"nummer\"))}\r\n onDsoOzonContentMarkItemHighlight={(e) =>\r\n this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"nummer\" })\r\n }\r\n inline\r\n ></dso-ozon-content>\r\n </>\r\n )}\r\n {this.opschrift && (\r\n <>\r\n {\" \"}\r\n <dso-ozon-content\r\n content={this.opschrift}\r\n onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n mark={this.mark && ((text) => this.mark?.(text, \"opschrift\"))}\r\n onDsoOzonContentMarkItemHighlight={(e) =>\r\n this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"opschrift\" })\r\n }\r\n inline\r\n ></dso-ozon-content>\r\n </>\r\n )}\r\n </>\r\n ) : (\r\n this.alternativeTitle\r\n )}\r\n {suffix && <span> - [{suffix}]</span>}\r\n </div>\r\n </Heading>\r\n {this.recursiveToggle !== undefined && this.open && (\r\n <button\r\n type=\"button\"\r\n class=\"recursive-toggle\"\r\n title={this.recursiveToggle === true ? \"Verberg alles\" : \"Toon alles\"}\r\n onClick={this.handleRecursiveToggleClick}\r\n >\r\n <dso-icon icon={this.recursiveToggle === true ? \"eye\" : \"eye-slash\"} />\r\n </button>\r\n )}\r\n {this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (\r\n <>\r\n <dso-badge status=\"warning\" aria-describedby=\"nested-draft-description\">\r\n !\r\n </dso-badge>\r\n <dso-tooltip id=\"nested-draft-description\">Er is een ontwerp beschikbaar.</dso-tooltip>\r\n </>\r\n )}\r\n {(this.bevatOntwerpInformatie \|\| this.annotated) && (\r\n <div class=\"addons\">\r\n {this.bevatOntwerpInformatie && (\r\n <dso-label status=\"warning\" compact>\r\n Ontwerp\r\n </dso-label>\r\n )}\r\n {this.annotated && (\r\n <dso-annotation-button\r\n identifier=\"expandable\"\r\n open={this.openAnnotation}\r\n onDsoClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n ></dso-annotation-button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n <div class=\"annotation-container\" part=\"_annotation-container\">\r\n <slot name=\"annotation\" />\r\n </div>\r\n {this.open && (this.inhoud \|\| this.gereserveerd \|\| this.vervallen) && (\r\n <div class=\"content\" part=\"_content\">\r\n {this.gereserveerd && (\r\n <dso-alert status=\"info\">Dit onderdeel is gereserveerd voor toekomstige toevoeging.</dso-alert>\r\n )}\r\n {this.vervallen && <dso-alert status=\"info\">Dit onderdeel is vervallen.</dso-alert>}\r\n {this.inhoud && (\r\n <dso-ozon-content\r\n content={this.inhoud}\r\n onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n mark={this.mark && ((text) => this.mark?.(text, \"inhoud\"))}\r\n onDsoOzonContentMarkItemHighlight={(e) =>\r\n this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"inhoud\" })\r\n }\r\n />\r\n )}\r\n </div>\r\n )}\r\n <div class=\"children-container\" part=\"_children-container\">\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/document-component/document-component.models.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"document-component.models.js","sourceRoot":"","sources":["../../../src/components/document-component/document-component.models.ts"],"names":[],"mappings":"","sourcesContent":["import { DsoOzonContentCustomEvent } from \"../../components\";\r\nimport { OzonContentAnchorClickEvent, OzonContentText } from \"../ozon-content/ozon-content.interfaces\";\r\n\r\nexport interface DocumentComponentOpenToggleEvent {\r\n originalEvent: Event;\r\n open: boolean;\r\n}\r\n\r\nexport interface DocumentComponentToggleAnnotationEvent {\r\n originalEvent: Event;\r\n}\r\n\r\nexport type DocumentComponentWijzigactie = \"voegtoe\" \| \"verwijder\" \| \"nieuweContainer\" \| \"verwijderContainer\";\r\n\r\nexport interface DocumentComponentOzonContentAnchorClickEvent {\r\n originalEvent: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>;\r\n ozonContentAnchorClick: OzonContentAnchorClickEvent;\r\n}\r\n\r\nexport type DocumentComponentInputType = XMLDocument \| string;\r\n\r\nexport type DocumentComponentSource = \"label\" \| \"nummer\" \| \"opschrift\" \| \"inhoud\";\r\n\r\nexport type DocumentComponentMarkFunction = (text: string, source: DocumentComponentSource) => OzonContentText[];\r\n\r\nexport interface DocumentComponentMarkItemHighlightEvent {\r\n source: DocumentComponentSource;\r\n text: string;\r\n elementRef: HTMLElement;\r\n}\r\n"]}
1	+ {"version":3,"file":"document-component.models.js","sourceRoot":"","sources":["../../../src/components/document-component/document-component.models.ts"],"names":[],"mappings":"","sourcesContent":["import { DsoOzonContentCustomEvent } from \"../../components\";\r\nimport { OzonContentAnchorClickEvent, OzonContentText } from \"../ozon-content/ozon-content.interfaces\";\r\n\r\nexport interface DocumentComponentOpenToggleEvent {\r\n originalEvent: Event;\r\n open: boolean;\r\n}\r\n\r\nexport interface DocumentComponentToggleAnnotationEvent {\r\n originalEvent: Event;\r\n}\r\n\r\nexport type DocumentComponentWijzigactie = \"voegtoe\" \| \"verwijder\" \| \"nieuweContainer\" \| \"verwijderContainer\";\r\n\r\nexport interface DocumentComponentOzonContentAnchorClickEvent {\r\n originalEvent: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>;\r\n ozonContentAnchorClick: OzonContentAnchorClickEvent;\r\n}\r\n\r\nexport type DocumentComponentInputType = XMLDocument \| string;\r\n\r\nexport type DocumentComponentSource = \"label\" \| \"nummer\" \| \"opschrift\" \| \"inhoud\";\r\n\r\nexport type DocumentComponentMarkFunction = (text: string, source: DocumentComponentSource) => OzonContentText[];\r\n\r\nexport interface DocumentComponentMarkItemHighlightEvent {\r\n source: DocumentComponentSource;\r\n text: string;\r\n elementRef: HTMLElement;\r\n}\r\n\r\nexport type DocumentComponentRecursiveToggleState = undefined \| boolean \| \"indeterminate\";\r\n\r\nexport interface DocumentComponentRecursiveToggleEvent {\r\n originalEvent: MouseEvent;\r\n current: DocumentComponentRecursiveToggleState;\r\n next: boolean;\r\n}\r\n"]}