@dso-toolkit/core 63.0.0 → 65.0.0

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

@@ -30,16 +30,6 @@ label.dso-primary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
-  background-color: #39870c;
-  border-color: #39870c;
-  color: #fff;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-inline-size: 56px;
-  padding-block: 11px;
-  padding-inline: 15px;
 }
 a.dso-primary:focus, a.dso-primary:focus-visible,
 button.dso-primary:focus,
@@ -62,6 +52,24 @@ label.dso-primary.download::after {
   display: inline-block;
   margin-inline-start: 8px;
 }
+a.dso-primary,
+button.dso-primary,
+label.dso-primary {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+a.dso-primary,
+button.dso-primary,
+label.dso-primary {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
 a.dso-primary:hover,
 button.dso-primary:hover,
 label.dso-primary:hover {
@@ -200,16 +208,6 @@ label.dso-secondary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
-  background-color: #fff;
-  border-color: #39870c;
-  color: #39870c;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-inline-size: 56px;
-  padding-block: 11px;
-  padding-inline: 15px;
 }
 a.dso-secondary:focus, a.dso-secondary:focus-visible,
 button.dso-secondary:focus,
@@ -232,6 +230,24 @@ label.dso-secondary.download::after {
   display: inline-block;
   margin-inline-start: 8px;
 }
+a.dso-secondary,
+button.dso-secondary,
+label.dso-secondary {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+a.dso-secondary,
+button.dso-secondary,
+label.dso-secondary {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
 a.dso-secondary:hover,
 button.dso-secondary:hover,
 label.dso-secondary:hover {
@@ -426,11 +442,6 @@ label.dso-tertiary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
-  border: 0;
-  color: #39870c;
-  line-height: 1;
-  padding: 0;
-  background-color: transparent;
 }
 a.dso-tertiary:focus, a.dso-tertiary:focus-visible,
 button.dso-tertiary:focus,
@@ -453,6 +464,15 @@ label.dso-tertiary.download::after {
   display: inline-block;
   margin-inline-start: 8px;
 }
+a.dso-tertiary,
+button.dso-tertiary,
+label.dso-tertiary {
+  border: 0;
+  color: #39870c;
+  line-height: 1;
+  padding: 0;
+  background-color: transparent;
+}
 a.dso-tertiary[disabled],
 button.dso-tertiary[disabled],
 label.dso-tertiary[disabled] {
@@ -704,7 +724,6 @@ a.dso-tertiary, a.dso-tertiary:visited {
   background-color: #f5d8dc;
   border-color: #f5d8dc;
   color: #191919;
-  text-decoration: line-through;
 }
 :host([wijzigactie=verwijderContainer]) .heading-container a:is(.download, .download:hover, .download:focus-visible),
 :host(:where([wijzigactie=verwijder])) a:is(.download, .download:hover, .download:focus-visible) {
@@ -722,6 +741,10 @@ a.dso-tertiary, a.dso-tertiary:visited {
 :host(:where([wijzigactie=verwijder])) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: url("./dso-icons.svg#img-email-zwart");
 }
+:host([wijzigactie=verwijderContainer]) .heading-container,
+:host(:where([wijzigactie=verwijder])) {
+  text-decoration: line-through;
+}
 
 :host([wijzigactie=nieuweContainer]) .heading-container,
 :host([wijzigactie=voegtoe]) {
@@ -731,7 +754,6 @@ a.dso-tertiary, a.dso-tertiary:visited {
   background-color: #e4f1d4;
   border-color: #e4f1d4;
   color: #191919;
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
 }
 :host([wijzigactie=nieuweContainer]) .heading-container a:is(.download, .download:hover, .download:focus-visible),
 :host([wijzigactie=voegtoe]) a:is(.download, .download:hover, .download:focus-visible) {
@@ -749,6 +771,10 @@ a.dso-tertiary, a.dso-tertiary:visited {
 :host([wijzigactie=voegtoe]) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: url("./dso-icons.svg#img-email-zwart");
 }
+:host([wijzigactie=nieuweContainer]) .heading-container,
+:host([wijzigactie=voegtoe]) {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
+}
 
 :host([filtered]) {
   position: relative;

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

@@ -73,7 +73,7 @@ export class DocumentComponent {
             this.alternativeTitle ||
             this.bevatOntwerpInformatie ||
             this.annotated);
-        return (h(Host, { key: 'd9fbf327a2334fa789aca4e287edb2a72b7a143c', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'be06c84763a0ebeb4b737b35199143e3dfd2df69', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: 'a49b41ed8dedf72c8e7c4d2ca6a7ad4b74896d2f', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '6c527436ab28110f2a567f5324f645ccadd7b2af', class: "heading" }, h(Heading, { key: 'af14361336a0bec3938f6fdbef68486c0f665839', heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick }, collapsible && (h("button", { key: 'ec14fa46b5523db43ecf2a0f5872f683b15c3044', type: "button", class: "toggle-button", "aria-describedby": "heading-title", "aria-expanded": this.open.toString() }, h("dso-icon", { key: '530c11c39efb69202d495013a16d08203dc2a47a', icon: this.open ? "chevron-down" : "chevron-right" }), h("span", { key: '526ab6032c2882649ff40b2a6a167b1bba5b0ce0', class: "sr-only" }, this.open ? "Invouwen" : "Uitvouwen"))), h("div", { key: '11d2b4d495a0fbdbf1aced54151382ac9e3aa72b', id: "heading-title" }, this.notApplicable && h("span", { key: '4e5cc5d128833bf15d58a2fb30072c586ff980c2', class: "sr-only" }, "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", { key: 'e8849ad89494fbeb22dab9f94d7bb20ae8c620ab' }, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && (h("button", { key: 'a607765c7d38fd1f797aad54ddbb42ef0b67721a', type: "button", class: "recursive-toggle", title: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", onClick: this.handleRecursiveToggleClick }, h("dso-icon", { key: 'c28e4caab77b5f6732dfd6cb0c9188655ff13545', icon: this.recursiveToggle === true ? "eye" : "eye-slash" }))), this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (h(Fragment, null, h("dso-badge", { key: 'c1ecb135adb76ebe9632326a33e0dfd236f78694', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { key: 'd054622128abb03799737d27efb3158eb9fbfbbe', id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { key: '4e861bf2b1e823cabb145dc2e2fd3d58278028c1', class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { key: '27fb8767f9fbe08b6b06b6651db4250e30c6979f', status: "warning", compact: true }, "Ontwerp")), this.annotated && (h("button", { key: '32cabfce40e57be32a8e20fb252e15b08dbf1b69', type: "button", class: "dso-tertiary", "aria-controls": this.openAnnotation ? "annotations" : undefined, "aria-expanded": this.openAnnotation.toString(), onClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }, h("dso-icon", { key: '4352ff84f9a43767dc1bb87b668f06719bffebc8', icon: "label" }), h("span", { key: '4ec23888f3ed5586d47bd4f08c098c2c1a8db8c5', class: "sr-only" }, "Toelichting bekijken")))))))), h("div", { key: '486702c5974c32bcea89085de489aaeac40e6682', class: "annotation-container", part: "_annotation-container" }, this.openAnnotation && (h("dso-panel", { key: 'deab6e1cd15335e369d152d0ee79880bcac0f4e2', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }, h("h2", { key: '5716abe7b4ca874aedd6cb17be11e14ece1dd572', slot: "heading" }, "Annotaties"), h("slot", { key: 'd8ca5b22b97500165ebf244944b707b968a4a8d5', name: "annotations" })))), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (h("div", { key: 'f8ad55a8c5ff0748b6756276ff36ad04774bfda1', class: "content", part: "_content" }, this.gereserveerd && (h("dso-alert", { key: 'dc235123841f087ffc693146fc922c069f7f4930', status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && h("dso-alert", { key: 'b497c9ddbe9ad2578ec8286297da451b226f6c03', status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (h("dso-ozon-content", { key: '8e0ba5e935c90119737f42f40387d87c7c457c65', 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", { key: 'fc37c9ad088d59a7b92343bafb1cc6ee6b1c1cf6', class: "children-container", part: "_children-container" }, h("slot", { key: '4e00ee07d33eb7d6524c3f766df28dbfdb198915' }))));
+        return (h(Host, { key: 'd9fbf327a2334fa789aca4e287edb2a72b7a143c', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'be06c84763a0ebeb4b737b35199143e3dfd2df69', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: 'a49b41ed8dedf72c8e7c4d2ca6a7ad4b74896d2f', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '6c527436ab28110f2a567f5324f645ccadd7b2af', class: "heading" }, h(Heading, { key: 'af14361336a0bec3938f6fdbef68486c0f665839', heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick }, collapsible && (h("button", { key: 'ec14fa46b5523db43ecf2a0f5872f683b15c3044', type: "button", class: "toggle-button", "aria-describedby": "heading-title", "aria-expanded": this.open.toString() }, h("dso-icon", { key: '530c11c39efb69202d495013a16d08203dc2a47a', icon: this.open ? "chevron-down" : "chevron-right" }), h("span", { key: '526ab6032c2882649ff40b2a6a167b1bba5b0ce0', class: "sr-only" }, this.open ? "Invouwen" : "Uitvouwen"))), h("div", { key: '11d2b4d495a0fbdbf1aced54151382ac9e3aa72b', id: "heading-title" }, this.notApplicable && h("span", { key: '4e5cc5d128833bf15d58a2fb30072c586ff980c2', class: "sr-only" }, "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", { key: 'e8849ad89494fbeb22dab9f94d7bb20ae8c620ab' }, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && (h("button", { key: 'a607765c7d38fd1f797aad54ddbb42ef0b67721a', type: "button", class: "recursive-toggle", title: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", onClick: this.handleRecursiveToggleClick }, h("dso-icon", { key: 'c28e4caab77b5f6732dfd6cb0c9188655ff13545', icon: this.recursiveToggle === true ? "eye" : "eye-slash" }))), this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (h(Fragment, null, h("dso-badge", { key: 'c1ecb135adb76ebe9632326a33e0dfd236f78694', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { key: 'd054622128abb03799737d27efb3158eb9fbfbbe', id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { key: '4e861bf2b1e823cabb145dc2e2fd3d58278028c1', class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { key: '27fb8767f9fbe08b6b06b6651db4250e30c6979f', status: "warning", compact: true }, "Ontwerp")), this.annotated && (h("button", { key: '32cabfce40e57be32a8e20fb252e15b08dbf1b69', type: "button", class: "dso-tertiary", "aria-controls": this.openAnnotation ? "annotations" : undefined, "aria-expanded": this.openAnnotation.toString(), onClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }, h("dso-icon", { key: '4352ff84f9a43767dc1bb87b668f06719bffebc8', icon: "label" }), h("span", { key: '4ec23888f3ed5586d47bd4f08c098c2c1a8db8c5', class: "sr-only" }, "Toelichting bekijken")))))))), h("div", { key: '486702c5974c32bcea89085de489aaeac40e6682', class: "annotation-container", part: "_annotation-container" }, this.openAnnotation && (h("dso-panel", { key: 'deab6e1cd15335e369d152d0ee79880bcac0f4e2', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }, h("h2", { key: '5716abe7b4ca874aedd6cb17be11e14ece1dd572', slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: 'c583bb579656312b42e3ead86418c7bd223a343a', name: "annotations" })))), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (h("div", { key: '57de95eda0b81b91cd1340ace254b33caa065e88', class: "content", part: "_content" }, this.gereserveerd && (h("dso-alert", { key: 'f16856d048e45802fc325c90d2d879d7a5fe7a0e', status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && h("dso-alert", { key: '65354d50e70d74a0d30f1e6209f9babe93b74d95', status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (h("dso-ozon-content", { key: '1e7631193b8dafdd830df9ec5d6d1bbb37eba878', 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", { key: 'ae7be71e5be0c8e8d16362a29614dc57a19b17e7', class: "children-container", part: "_children-container" }, h("slot", { key: 'f5dcb7db6079a27530176e06c8726fca11525bd5' }))));
     }
     static get is() { return "dso-document-component"; }
     static get encapsulation() { return "shadow"; }

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

@@ -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, 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 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,\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=\"editaction-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\r\n                    type=\"button\"\r\n                    class=\"toggle-button\"\r\n                    aria-describedby=\"heading-title\"\r\n                    aria-expanded={this.open.toString()}\r\n                  >\r\n                    <dso-icon icon={this.open ? \"chevron-down\" : \"chevron-right\"}></dso-icon>\r\n                    <span class=\"sr-only\">{this.open ? \"Invouwen\" : \"Uitvouwen\"}</span>\r\n                  </button>\r\n                )}\r\n                <div id=\"heading-title\">\r\n                  {this.notApplicable && <span class=\"sr-only\">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                    <button\r\n                      type=\"button\"\r\n                      class=\"dso-tertiary\"\r\n                      aria-controls={this.openAnnotation ? \"annotations\" : undefined}\r\n                      aria-expanded={this.openAnnotation.toString()}\r\n                      onClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n                    >\r\n                      <dso-icon icon=\"label\"></dso-icon>\r\n                      <span class=\"sr-only\">Toelichting bekijken</span>\r\n                    </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          {this.openAnnotation && (\r\n            <dso-panel id=\"annotations\" onDsoCloseClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}>\r\n              <h2 slot=\"heading\">Annotaties</h2>\r\n              <slot name=\"annotations\" />\r\n            </dso-panel>\r\n          )}\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"]}
+{"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 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,\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=\"editaction-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\r\n                    type=\"button\"\r\n                    class=\"toggle-button\"\r\n                    aria-describedby=\"heading-title\"\r\n                    aria-expanded={this.open.toString()}\r\n                  >\r\n                    <dso-icon icon={this.open ? \"chevron-down\" : \"chevron-right\"}></dso-icon>\r\n                    <span class=\"sr-only\">{this.open ? \"Invouwen\" : \"Uitvouwen\"}</span>\r\n                  </button>\r\n                )}\r\n                <div id=\"heading-title\">\r\n                  {this.notApplicable && <span class=\"sr-only\">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                    <button\r\n                      type=\"button\"\r\n                      class=\"dso-tertiary\"\r\n                      aria-controls={this.openAnnotation ? \"annotations\" : undefined}\r\n                      aria-expanded={this.openAnnotation.toString()}\r\n                      onClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n                    >\r\n                      <dso-icon icon=\"label\"></dso-icon>\r\n                      <span class=\"sr-only\">Toelichting bekijken</span>\r\n                    </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          {this.openAnnotation && (\r\n            <dso-panel id=\"annotations\" onDsoCloseClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}>\r\n              <h2 slot=\"heading\">Kenmerken en kaart</h2>\r\n              <slot name=\"annotations\" />\r\n            </dso-panel>\r\n          )}\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/helpcenter-panel/helpcenter-panel.css

@@ -42,16 +42,6 @@
   text-align: start;
   user-select: none;
   vertical-align: middle;
-  background-color: #39870c;
-  border-color: #39870c;
-  color: #fff;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-inline-size: 56px;
-  padding-block: 11px;
-  padding-inline: 15px;
   border: 0;
   inset-block-end: 16px;
   font-family: Asap, sans-serif;
@@ -65,6 +55,20 @@
 .open-button:active {
   outline: 0;
 }
+.open-button {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+.open-button {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
 .open-button:hover {
   background-color: #275937;
   border-color: #275937;
@@ -148,16 +152,6 @@
   text-align: start;
   user-select: none;
   vertical-align: middle;
-  background-color: #fff;
-  border-color: #39870c;
-  color: #39870c;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-inline-size: 56px;
-  padding-block: 11px;
-  padding-inline: 15px;
   border-inline-end: 0;
   border-block-start: 0;
   border-radius: 0 0 0 8px;
@@ -175,6 +169,20 @@
 .close-button:active {
   outline: 0;
 }
+.close-button {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+.close-button {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
 .close-button:hover {
   background-color: #d7e7ce;
   border-color: #39870c;

package/dist/collection/components/image-overlay/image-overlay.css

@@ -38,16 +38,6 @@ button::-moz-focus-inner {
   text-align: start;
   user-select: none;
   vertical-align: middle;
-  background-color: #fff;
-  border-color: #39870c;
-  color: #39870c;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-inline-size: 56px;
-  padding-block: 11px;
-  padding-inline: 15px;
   border: 0;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
   min-inline-size: auto;
@@ -63,6 +53,20 @@ button::-moz-focus-inner {
 .open:active {
   outline: 0;
 }
+.open {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+.open {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
 .open:hover {
   background-color: #d7e7ce;
   border-color: #39870c;
@@ -207,16 +211,6 @@ button::-moz-focus-inner {
   text-align: start;
   user-select: none;
   vertical-align: middle;
-  background-color: #fff;
-  border-color: #39870c;
-  color: #39870c;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-inline-size: 56px;
-  padding-block: 11px;
-  padding-inline: 15px;
   border: 0;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
   min-inline-size: auto;
@@ -231,6 +225,20 @@ button::-moz-focus-inner {
 .close:active {
   outline: 0;
 }
+.close {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+.close {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
 .close:hover {
   background-color: #d7e7ce;
   border-color: #39870c;
@@ -331,13 +339,14 @@ ins.editaction-add {
   margin-block-end: 8px;
   padding: 8px;
   text-decoration: none;
+}
+ins.editaction-add {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
   background-color: #e4f1d4;
   border-color: #e4f1d4;
   color: #191919;
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
 }
 ins.editaction-add a:is(.download, .download:hover, .download:focus-visible) {
   background-image: url("./dso-icons.svg#img-download-zwart");
@@ -351,16 +360,20 @@ ins.editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:foc
 ins.editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: url("./dso-icons.svg#img-email-zwart");
 }
+ins.editaction-add {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
+}
 ins.editaction-add .wrapper {
   outline: none;
   padding: 8px;
+}
+ins.editaction-add .wrapper {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
   background-color: #e4f1d4;
   border-color: #e4f1d4;
   color: #191919;
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
 }
 ins.editaction-add .wrapper a:is(.download, .download:hover, .download:focus-visible) {
   background-image: url("./dso-icons.svg#img-download-zwart");
@@ -374,6 +387,9 @@ ins.editaction-add .wrapper a:is([href^="tel:"], [href^="tel:"]:hover, [href^="t
 ins.editaction-add .wrapper a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: url("./dso-icons.svg#img-email-zwart");
 }
+ins.editaction-add .wrapper {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
+}
 ins.editaction-add .wrapper .editaction-label {
   line-height: 1.5;
 }
@@ -388,13 +404,14 @@ del.editaction-remove {
   display: inline-block;
   margin-block-end: 8px;
   padding: 8px;
+}
+del.editaction-remove {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
   background-color: #f5d8dc;
   border-color: #f5d8dc;
   color: #191919;
-  text-decoration: line-through;
 }
 del.editaction-remove a:is(.download, .download:hover, .download:focus-visible) {
   background-image: url("./dso-icons.svg#img-download-zwart");
@@ -408,16 +425,20 @@ del.editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:
 del.editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: url("./dso-icons.svg#img-email-zwart");
 }
+del.editaction-remove {
+  text-decoration: line-through;
+}
 del.editaction-remove .wrapper {
   outline: none;
   padding: 8px;
+}
+del.editaction-remove .wrapper {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
   background-color: #f5d8dc;
   border-color: #f5d8dc;
   color: #191919;
-  text-decoration: line-through;
 }
 del.editaction-remove .wrapper a:is(.download, .download:hover, .download:focus-visible) {
   background-image: url("./dso-icons.svg#img-download-zwart");
@@ -431,6 +452,9 @@ del.editaction-remove .wrapper a:is([href^="tel:"], [href^="tel:"]:hover, [href^
 del.editaction-remove .wrapper a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: url("./dso-icons.svg#img-email-zwart");
 }
+del.editaction-remove .wrapper {
+  text-decoration: line-through;
+}
 del.editaction-remove .wrapper .title {
   text-decoration: line-through;
 }

package/dist/collection/components/info-button/info-button.css

@@ -19,14 +19,16 @@
   border: 0;
 }
 
+button {
+  cursor: pointer;
+  vertical-align: top;
+}
 button {
   background-color: transparent;
   color: #39870c;
   border: 0;
   margin-inline-start: 8px;
   padding: 0;
-  cursor: pointer;
-  vertical-align: top;
 }
 button.dso-info-secondary {
   color: #666;

package/dist/collection/components/label/label.css

@@ -90,6 +90,8 @@
   background-color: #fff;
   border-color: #fff;
   color: #191919;
+}
+.dso-label.dso-label-bright {
   outline: 1px solid #ccc;
   outline-offset: -1px;
 }

package/dist/collection/components/label/label.interfaces.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.interfaces.js","sourceRoot":"","sources":["../../../../src/components/label/label.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export type LabelStatus = \"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\" | \"bright\" | \"attention\";\r\n"]}

package/dist/collection/components/label/label.js

@@ -102,13 +102,13 @@ export class Label {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: '7d0859b14bf6b8b6bc1f1ea7f6e6428431cc1197' }, h("span", { key: 'b1c8c1302f21caaaebb0193a171a95e4330b92b8', "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
+        return (h(Fragment, { key: '25e56c874b916235727257093a97b5263f82525c' }, h("span", { key: '0e40b01e6552d8559fcfc9a40e22222541f642ce', "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, h("slot", { key: '5f3f5b65b4e4b44949b817800b505c5db1d25275', name: "symbol" }), h("span", { key: '6070e0d015cf2464121cf0dfb0088676ab00628b', class: clsx("dso-label-content", {
+            }) }, h("slot", { key: 'ed7da69e37b55d7c7240792ab477acd55e543d99', name: "symbol" }), h("span", { key: 'a06cb439e686b8e4ee7edad9475bc832c8cf0ddf', class: clsx("dso-label-content", {
                 "dso-truncate": !!this.truncate,
-            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: '04b20cade12d23246ce7b21e1aae447689e9c1c7' })), this.removable && (h("button", { key: 'bb184213b1ca01f83e2a1f265429293f3dda8f3b', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { key: '9805c7dcd105ba5a6a59e75e822250defb107940', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: '19fef3d7fbd4b017cc880bc02fb3408706536933', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: 'c136e39ed459e5c4680888b2a27bd0c17485406b', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: 'a53a1928a5f57b0a60c37116a74ec037251253be' })), this.removable && (h("button", { key: '876108268f5162c6f8cc4936b2c8c9abfc7fa1f9', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { key: '8c73709cfa0c63ce939db085995824c008ce47f9', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: '0ce43f1ac8af806a71b9ef2a4b8ca2a9f1110035', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: 'e1a1d648d1c576f22950eb2f10690abce79f3704', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
     }
     static get is() { return "dso-label"; }
     static get encapsulation() { return "shadow"; }
@@ -162,9 +162,15 @@ export class Label {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"error\" | \"bright\" | \"attention\"",
+                    "original": "LabelStatus",
                     "resolved": "\"attention\" | \"bright\" | \"danger\" | \"error\" | \"info\" | \"primary\" | \"success\" | \"warning\" | undefined",
-                    "references": {}
+                    "references": {
+                        "LabelStatus": {
+                            "location": "import",
+                            "path": "./label.interfaces",
+                            "id": "src/components/label/label.interfaces.ts::LabelStatus"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,