@dso-toolkit/core 54.3.0 → 56.0.0

package/dist/collection/components/annotation-button/annotation-button.js

@@ -1,14 +1,14 @@
 import { h } from "@stencil/core";
-import { AnnotationService } from "../../services/annotation.service";
 export class AnnotationButton {
   constructor() {
+    this.handleClick = (e) => {
+      this.dsoClick.emit({ originalEvent: e, open: !this.open });
+    };
     this.identifier = undefined;
-  }
-  componentDidLoad() {
-    this.annotationOutput = document.querySelector(`dso-annotation-output[identifier='${this.identifier}']`);
+    this.open = false;
   }
   render() {
-    return (h("button", { type: "button", class: "dso-tertiary", "aria-controls": this.identifier, "aria-expanded": AnnotationService.state[this.identifier] ? "true" : "false", onClick: (e) => { var _a; return (_a = this.annotationOutput) === null || _a === void 0 ? void 0 : _a._toggleAnnotation(e, this.identifier); } }, h("dso-icon", { icon: "label" }), h("span", { class: "sr-only" }, "Toelichting bekijken")));
+    return (h("button", { type: "button", class: "dso-tertiary", "aria-controls": this.identifier, "aria-expanded": this.open.toString(), onClick: this.handleClick }, h("dso-icon", { icon: "label" }), h("span", { class: "sr-only" }, "Toelichting bekijken")));
   }
   static get is() { return "dso-annotation-button"; }
   static get originalStyleUrls() {
@@ -27,8 +27,8 @@ export class AnnotationButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "string | undefined",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": true,
@@ -39,8 +39,49 @@ export class AnnotationButton {
         },
         "attribute": "identifier",
         "reflect": false
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true when the annotation is open."
+        },
+        "attribute": "open",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "dsoClick",
+        "name": "dsoClick",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when user activates the button."
+        },
+        "complexType": {
+          "original": "AnnotationButtonClickEvent",
+          "resolved": "AnnotationButtonClickEvent",
+          "references": {
+            "AnnotationButtonClickEvent": {
+              "location": "local",
+              "path": "/home/travis/build/dso-toolkit/dso-toolkit/packages/core/src/components/annotation-button/annotation-button.tsx"
+            }
+          }
+        }
+      }];
+  }
 }
 //# sourceMappingURL=annotation-button.js.map

package/dist/collection/components/annotation-button/annotation-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"annotation-button.js","sourceRoot":"","sources":["../../../src/components/annotation-button/annotation-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAQtE,MAAM,OAAO,gBAAgB;;;;EAS3B,gBAAgB;IACd,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,qCAAqC,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC;EAC3G,CAAC;EAED,MAAM;IACJ,OAAO,CACL,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,mBACL,IAAI,CAAC,UAAU,mBACf,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1E,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,iBAAiB,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA,EAAA;MAE5E,gBAAU,IAAI,EAAC,OAAO,GAAY;MAClC,YAAM,KAAK,EAAC,SAAS,2BAA4B,CAC1C,CACV,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, h, Prop } from \"@stencil/core\";\r\nimport { AnnotationService } from \"../../services/annotation.service\";\r\n\r\n@Component({\r\n  tag: \"dso-annotation-button\",\r\n  styleUrl: \"annotation-button.scss\",\r\n  // We disable shadowdom for a11y reasons (aria-controls pointing to element inside another component)\r\n  shadow: false,\r\n})\r\nexport class AnnotationButton implements ComponentInterface {\r\n  /**\r\n   * To link the Annotation Button with `aria-controls` to a different element, most likely an Annotation Output.\r\n   */\r\n  @Prop()\r\n  identifier!: string;\r\n\r\n  private annotationOutput!: HTMLDsoAnnotationOutputElement | null;\r\n\r\n  componentDidLoad() {\r\n    this.annotationOutput = document.querySelector(`dso-annotation-output[identifier='${this.identifier}']`);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <button\r\n        type=\"button\"\r\n        class=\"dso-tertiary\"\r\n        aria-controls={this.identifier}\r\n        aria-expanded={AnnotationService.state[this.identifier] ? \"true\" : \"false\"}\r\n        onClick={(e) => this.annotationOutput?._toggleAnnotation(e, this.identifier)}\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  }\r\n}\r\n"]}
+{"version":3,"file":"annotation-button.js","sourceRoot":"","sources":["../../../src/components/annotation-button/annotation-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,KAAK,EAAE,IAAI,EAAgB,MAAM,eAAe,CAAC;AAY5F,MAAM,OAAO,gBAAgB;;IAmBnB,gBAAW,GAAG,CAAC,CAAa,EAAE,EAAE;MACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAC7D,CAAC,CAAC;;gBAVK,KAAK;;EAYZ,MAAM;IACJ,OAAO,CACL,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,mBACL,IAAI,CAAC,UAAU,mBACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EACnC,OAAO,EAAE,IAAI,CAAC,WAAW;MAEzB,gBAAU,IAAI,EAAC,OAAO,GAAY;MAClC,YAAM,KAAK,EAAC,SAAS,2BAA4B,CAC1C,CACV,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, ComponentInterface, Event, Prop, EventEmitter } from \"@stencil/core\";\r\n\r\nexport interface AnnotationButtonClickEvent {\r\n  originalEvent: Event;\r\n  open: boolean;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-annotation-button\",\r\n  styleUrl: \"annotation-button.scss\",\r\n  // No shadowdom for a11y reasons (aria-controls pointing to element inside another component)\r\n})\r\nexport class AnnotationButton implements ComponentInterface {\r\n  /**\r\n   * To link the Annotation Button with `aria-controls` to a different element, most likely an Annotation Output.\r\n   */\r\n  @Prop()\r\n  identifier!: string | undefined;\r\n\r\n  /**\r\n   * Set to true when the annotation is open.\r\n   */\r\n  @Prop()\r\n  open = false;\r\n\r\n  /**\r\n   * Emitted when user activates the button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClick!: EventEmitter<AnnotationButtonClickEvent>;\r\n\r\n  private handleClick = (e: MouseEvent) => {\r\n    this.dsoClick.emit({ originalEvent: e, open: !this.open });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <button\r\n        type=\"button\"\r\n        class=\"dso-tertiary\"\r\n        aria-controls={this.identifier}\r\n        aria-expanded={this.open.toString()}\r\n        onClick={this.handleClick}\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  }\r\n}\r\n"]}

package/dist/collection/components/annotation-output/annotation-output.css

@@ -31,13 +31,13 @@ dso-annotation-output {
   padding-top: 8px;
   padding-bottom: 8px;
 }
-.dso-annotation-header > *[slot=title] {
+.dso-annotation-header > [slot=title] {
   color: #000;
   font-size: 1.25rem;
   margin-bottom: 0;
   margin-top: 0;
 }
-.dso-annotation-header > *:nth-child(2) {
+.dso-annotation-header > :nth-child(2) {
   margin-left: auto;
 }
 

package/dist/collection/components/annotation-output/annotation-output.js

@@ -1,30 +1,15 @@
 import { h } from "@stencil/core";
-import { AnnotationService } from "../../services/annotation.service";
 export class AnnotationOutput {
   constructor() {
+    this.toggleHandler = (e) => {
+      this.dsoClose.emit({ originalEvent: e });
+    };
     this.identifier = undefined;
     this.annotationPrefix = undefined;
-  }
-  /**
-   * @internal
-   */
-  async _toggleAnnotation(e, identifier) {
-    AnnotationService.toggle(identifier);
-    const open = AnnotationService.state[this.identifier];
-    if (open === undefined) {
-      throw new Error(`No state found for ${this.identifier}`);
-    }
-    this.dsoToggle.emit({
-      originalEvent: e,
-      open,
-    });
-  }
-  toggleHandler(e) {
-    this._toggleAnnotation(e, this.identifier);
+    this.open = false;
   }
   render() {
-    const expandableProperties = AnnotationService.state[this.identifier] ? { open: true } : {};
-    return (h("dso-responsive-element", null, h("dso-expandable", Object.assign({ id: this.identifier }, expandableProperties), h("div", { slot: "expandable-content" }, this.annotationPrefix && h("span", { class: "dso-annotation-prefix" }, this.annotationPrefix), h("div", { class: "dso-annotation-header" }, h("slot", { name: "title" }), h("slot", { name: "addons" }), h("button", { type: "button", class: "dso-tertiary dso-annotation-close-button", onClick: (e) => this.toggleHandler(e) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Toelichting sluiten"))), h("div", { class: "dso-annotation-content" }, h("slot", null))))));
+    return (h("dso-responsive-element", null, h("dso-expandable", { id: this.identifier, open: this.open }, this.annotationPrefix && h("span", { class: "dso-annotation-prefix" }, this.annotationPrefix), h("div", { class: "dso-annotation-header" }, h("slot", { name: "title" }), h("slot", { name: "addons" }), h("button", { type: "button", class: "dso-tertiary dso-annotation-close-button", onClick: this.toggleHandler }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Toelichting sluiten"))), h("div", { class: "dso-annotation-content" }, h("slot", null)))));
   }
   static get is() { return "dso-annotation-output"; }
   static get originalStyleUrls() {
@@ -54,7 +39,7 @@ export class AnnotationOutput {
           "text": "The annotation-button that toggles this component should have the same identifier."
         },
         "attribute": "identifier",
-        "reflect": false
+        "reflect": true
       },
       "annotationPrefix": {
         "type": "string",
@@ -71,14 +56,32 @@ export class AnnotationOutput {
           "text": "This text will be displayed above the annotation-output when opened"
         },
         "attribute": "annotation-prefix",
-        "reflect": false
+        "reflect": true
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to show content."
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }
   static get events() {
     return [{
-        "method": "dsoToggle",
-        "name": "dsoToggle",
+        "method": "dsoClose",
+        "name": "dsoClose",
         "bubbles": false,
         "cancelable": true,
         "composed": true,
@@ -87,51 +90,16 @@ export class AnnotationOutput {
           "text": "This event is emitted when the user activates the Annotation Button."
         },
         "complexType": {
-          "original": "AnnotationToggleEvent",
-          "resolved": "AnnotationToggleEvent",
+          "original": "AnnotationOutputCloseEvent",
+          "resolved": "AnnotationOutputCloseEvent",
           "references": {
-            "AnnotationToggleEvent": {
-              "location": "import",
-              "path": "./annotation-output.interfaces"
+            "AnnotationOutputCloseEvent": {
+              "location": "local",
+              "path": "/home/travis/build/dso-toolkit/dso-toolkit/packages/core/src/components/annotation-output/annotation-output.tsx"
             }
           }
         }
       }];
   }
-  static get methods() {
-    return {
-      "_toggleAnnotation": {
-        "complexType": {
-          "signature": "(e: MouseEvent | KeyboardEvent, identifier: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "MouseEvent": {
-              "location": "global"
-            },
-            "KeyboardEvent": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }]
-        }
-      }
-    };
-  }
 }
 //# sourceMappingURL=annotation-output.js.map

package/dist/collection/components/annotation-output/annotation-output.js.map

@@ -1 +1 @@
-{"version":3,"file":"annotation-output.js","sourceRoot":"","sources":["../../../src/components/annotation-output/annotation-output.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEpG,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAStE,MAAM,OAAO,gBAAgB;;;;;EAmB3B;;KAEG;EAEH,KAAK,CAAC,iBAAiB,CAAC,CAA6B,EAAE,UAAkB;IACvE,iBAAiB,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAErC,MAAM,IAAI,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACtD,IAAI,IAAI,KAAK,SAAS,EAAE;MACtB,MAAM,IAAI,KAAK,CAAC,sBAAsB,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;KAC1D;IAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAClB,aAAa,EAAE,CAAC;MAChB,IAAI;KACL,CAAC,CAAC;EACL,CAAC;EAEO,aAAa,CAAC,CAA6B;IACjD,IAAI,CAAC,iBAAiB,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;EAC7C,CAAC;EAED,MAAM;IACJ,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAE5F,OAAO,CACL;MACE,oCAAgB,EAAE,EAAE,IAAI,CAAC,UAAU,IAAM,oBAAoB;QAC3D,WAAK,IAAI,EAAC,oBAAoB;UAC3B,IAAI,CAAC,gBAAgB,IAAI,YAAM,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,gBAAgB,CAAQ;UAC5F,WAAK,KAAK,EAAC,uBAAuB;YAChC,YAAM,IAAI,EAAC,OAAO,GAAG;YACrB,YAAM,IAAI,EAAC,QAAQ,GAAG;YACtB,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,0CAA0C,EAChD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;cAErC,gBAAU,IAAI,EAAC,OAAO,GAAY;cAClC,YAAM,KAAK,EAAC,SAAS,0BAA2B,CACzC,CACL;UACN,WAAK,KAAK,EAAC,wBAAwB;YACjC,eAAQ,CACJ,CACF,CACS,CACM,CAC1B,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, h, Method, Prop } from \"@stencil/core\";\r\n\r\nimport { AnnotationService } from \"../../services/annotation.service\";\r\nimport { AnnotationToggleEvent } from \"./annotation-output.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-annotation-output\",\r\n  styleUrl: \"annotation-output.scss\",\r\n  // We disable shadowdom for a11y reasons (aria-controls being set inside another component)\r\n  shadow: false,\r\n})\r\nexport class AnnotationOutput implements ComponentInterface {\r\n  /**\r\n   * The annotation-button that toggles this component should have the same identifier.\r\n   */\r\n  @Prop()\r\n  identifier!: string;\r\n\r\n  /**\r\n   * This text will be displayed above the annotation-output when opened\r\n   */\r\n  @Prop()\r\n  annotationPrefix?: string;\r\n\r\n  /**\r\n   * This event is emitted when the user activates the Annotation Button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoToggle!: EventEmitter<AnnotationToggleEvent>;\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _toggleAnnotation(e: MouseEvent | KeyboardEvent, identifier: string) {\r\n    AnnotationService.toggle(identifier);\r\n\r\n    const open = AnnotationService.state[this.identifier];\r\n    if (open === undefined) {\r\n      throw new Error(`No state found for ${this.identifier}`);\r\n    }\r\n\r\n    this.dsoToggle.emit({\r\n      originalEvent: e,\r\n      open,\r\n    });\r\n  }\r\n\r\n  private toggleHandler(e: MouseEvent | KeyboardEvent) {\r\n    this._toggleAnnotation(e, this.identifier);\r\n  }\r\n\r\n  render() {\r\n    const expandableProperties = AnnotationService.state[this.identifier] ? { open: true } : {};\r\n\r\n    return (\r\n      <dso-responsive-element>\r\n        <dso-expandable id={this.identifier} {...expandableProperties}>\r\n          <div slot=\"expandable-content\">\r\n            {this.annotationPrefix && <span class=\"dso-annotation-prefix\">{this.annotationPrefix}</span>}\r\n            <div class=\"dso-annotation-header\">\r\n              <slot name=\"title\" />\r\n              <slot name=\"addons\" />\r\n              <button\r\n                type=\"button\"\r\n                class=\"dso-tertiary dso-annotation-close-button\"\r\n                onClick={(e) => this.toggleHandler(e)}\r\n              >\r\n                <dso-icon icon=\"times\"></dso-icon>\r\n                <span class=\"sr-only\">Toelichting sluiten</span>\r\n              </button>\r\n            </div>\r\n            <div class=\"dso-annotation-content\">\r\n              <slot />\r\n            </div>\r\n          </div>\r\n        </dso-expandable>\r\n      </dso-responsive-element>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"annotation-output.js","sourceRoot":"","sources":["../../../src/components/annotation-output/annotation-output.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,KAAK,EAAgB,IAAI,EAAE,MAAM,eAAe,CAAC;AAW5F,MAAM,OAAO,gBAAgB;;IAyBnB,kBAAa,GAAG,CAAC,CAAa,EAAE,EAAE;MACxC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC;;;gBAVK,KAAK;;EAYZ,MAAM;IACJ,OAAO,CACL;MACE,sBAAgB,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;QACjD,IAAI,CAAC,gBAAgB,IAAI,YAAM,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,gBAAgB,CAAQ;QAC5F,WAAK,KAAK,EAAC,uBAAuB;UAChC,YAAM,IAAI,EAAC,OAAO,GAAG;UACrB,YAAM,IAAI,EAAC,QAAQ,GAAG;UACtB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,0CAA0C,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa;YAChG,gBAAU,IAAI,EAAC,OAAO,GAAY;YAClC,YAAM,KAAK,EAAC,SAAS,0BAA2B,CACzC,CACL;QACN,WAAK,KAAK,EAAC,wBAAwB;UACjC,eAAQ,CACJ,CACS,CACM,CAC1B,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, ComponentInterface, Event, EventEmitter, Prop } from \"@stencil/core\";\r\n\r\nexport interface AnnotationOutputCloseEvent {\r\n  originalEvent: Event;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-annotation-output\",\r\n  styleUrl: \"annotation-output.scss\",\r\n  // No shadowdom for a11y reasons (aria-controls being set inside another component)\r\n})\r\nexport class AnnotationOutput implements ComponentInterface {\r\n  /**\r\n   * The annotation-button that toggles this component should have the same identifier.\r\n   */\r\n  @Prop({ reflect: true })\r\n  identifier!: string;\r\n\r\n  /**\r\n   * This text will be displayed above the annotation-output when opened\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotationPrefix?: string;\r\n\r\n  /**\r\n   * Set to `true` to show content.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * This event is emitted when the user activates the Annotation Button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClose!: EventEmitter<AnnotationOutputCloseEvent>;\r\n\r\n  private toggleHandler = (e: MouseEvent) => {\r\n    this.dsoClose.emit({ originalEvent: e });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <dso-responsive-element>\r\n        <dso-expandable id={this.identifier} open={this.open}>\r\n          {this.annotationPrefix && <span class=\"dso-annotation-prefix\">{this.annotationPrefix}</span>}\r\n          <div class=\"dso-annotation-header\">\r\n            <slot name=\"title\" />\r\n            <slot name=\"addons\" />\r\n            <button type=\"button\" class=\"dso-tertiary dso-annotation-close-button\" onClick={this.toggleHandler}>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n              <span class=\"sr-only\">Toelichting sluiten</span>\r\n            </button>\r\n          </div>\r\n          <div class=\"dso-annotation-content\">\r\n            <slot />\r\n          </div>\r\n        </dso-expandable>\r\n      </dso-responsive-element>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import { h } from "@stencil/core";
+export const Heading = (_a, children) => {
+  var { heading } = _a, props = __rest(_a, ["heading"]);
+  switch (heading) {
+    default:
+    case "h2":
+      return h("h2", Object.assign({}, props), children);
+    case "h3":
+      return h("h3", Object.assign({}, props), children);
+    case "h4":
+      return h("h4", Object.assign({}, props), children);
+    case "h5":
+      return h("h5", Object.assign({}, props), children);
+    case "h6":
+      return h("h6", Object.assign({}, props), children);
+  }
+};
+//# sourceMappingURL=document-component-heading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"document-component-heading.js","sourceRoot":"","sources":["../../../src/components/document-component/document-component-heading.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,CAAC,EAAuB,MAAM,eAAe,CAAC;AAOvD,MAAM,CAAC,MAAM,OAAO,GAEhB,CAAC,EAAqB,EAAE,QAAQ,EAAE,EAAE;MAAnC,EAAE,OAAO,OAAY,EAAP,KAAK,cAAnB,WAAqB,CAAF;EACtB,QAAQ,OAAO,EAAE;IACf,QAAQ;IACR,KAAK,IAAI;MACP,OAAO,0BAAQ,KAAK,GAAG,QAAQ,CAAM,CAAC;IACxC,KAAK,IAAI;MACP,OAAO,0BAAQ,KAAK,GAAG,QAAQ,CAAM,CAAC;IACxC,KAAK,IAAI;MACP,OAAO,0BAAQ,KAAK,GAAG,QAAQ,CAAM,CAAC;IACxC,KAAK,IAAI;MACP,OAAO,0BAAQ,KAAK,GAAG,QAAQ,CAAM,CAAC;IACxC,KAAK,IAAI;MACP,OAAO,0BAAQ,KAAK,GAAG,QAAQ,CAAM,CAAC;GACzC;AACH,CAAC,CAAC","sourcesContent":["import { h, FunctionalComponent } from \"@stencil/core\";\r\nimport { JSXBase } from \"@stencil/core/internal\";\r\n\r\ninterface DocumentComponentHeadingProps {\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n}\r\n\r\nexport const Heading: FunctionalComponent<\r\n  DocumentComponentHeadingProps & JSXBase.HTMLAttributes<HTMLHeadingElement>\r\n> = ({ heading, ...props }, children) => {\r\n  switch (heading) {\r\n    default:\r\n    case \"h2\":\r\n      return <h2 {...props}>{children}</h2>;\r\n    case \"h3\":\r\n      return <h3 {...props}>{children}</h3>;\r\n    case \"h4\":\r\n      return <h4 {...props}>{children}</h4>;\r\n    case \"h5\":\r\n      return <h5 {...props}>{children}</h5>;\r\n    case \"h6\":\r\n      return <h6 {...props}>{children}</h6>;\r\n  }\r\n};\r\n"]}

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

@@ -0,0 +1,135 @@
+ins {
+  background-color: #e4f1d4;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
+  color: #000;
+  text-decoration: none;
+}
+
+.not-applicable {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+:host {
+  display: block;
+}
+
+:host-context(dso-responsive-element:not([small])) .content {
+  padding-left: 24px;
+}
+
+:host([type=LID]:where([wijzigactie=verwijder], [wijzigactie=voegtoe])) {
+  padding-left: 8px;
+  margin-right: 8px;
+}
+
+:host(:where([wijzigactie=verwijder], [wijzigactie=voegtoe])),
+:host(:where([wijzigactie=nieuweContainer], [wijzigactie=verwijderContainer])) .heading-container {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+:host([wijzigactie=verwijderContainer]) .heading-container,
+:host(:where([wijzigactie=verwijder])) {
+  background-color: #f5d8dc;
+  color: #000;
+  text-decoration: line-through;
+}
+
+:host([wijzigactie=nieuweContainer]) .heading-container,
+:host([wijzigactie=voegtoe]) {
+  background-color: #e4f1d4;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
+  color: #000;
+}
+
+:host([filtered]) {
+  position: relative;
+}
+:host([filtered])::before {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 3px;
+  top: 0;
+  bottom: 0;
+  background-color: #6ca4d9;
+}
+
+:host([open]) .heading-container {
+  margin-bottom: 8px;
+}
+
+.toggle-button {
+  border: 0;
+  padding: 0;
+  background: 0;
+  color: #275937;
+  cursor: pointer;
+}
+
+.heading-element {
+  align-items: start;
+  display: flex;
+  font-size: 1rem;
+  color: #275937;
+  margin: 0;
+}
+.heading-element > * {
+  vertical-align: middle;
+}
+
+:host([type=LID]) .heading-container {
+  margin-bottom: 0;
+}
+:host([type=LID]) .wijzigactie-label {
+  margin-left: 0;
+}
+:host([type=LID]) .heading-element {
+  color: #000;
+}
+:host([type=LID]) .content {
+  padding-left: 0 !important;
+}
+
+:host(:not([type=LID])) .heading-element {
+  cursor: pointer;
+}
+:host(:not([type=LID])) .heading-element:hover, :host(:not([type=LID])) .heading-element:focus {
+  color: #676cb0;
+  text-decoration: underline;
+}
+:host(:not([type=LID])) .heading-element:active {
+  text-decoration: none;
+}
+
+.addons {
+  margin-inline-start: auto;
+  display: flex;
+  gap: 8px;
+}
+
+.heading {
+  display: flex;
+  gap: 8px;
+}
+
+:host([type=ARTIKEL]) .heading-element,
+:host([type=ARTIKEL]) .toggle-button {
+  color: #000;
+}
+
+.wijzigactie-label {
+  font-style: italic;
+  margin-left: 24px;
+}
+
+.heading-container {
+  padding-right: 8px;
+}

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

@@ -0,0 +1,112 @@
+import { h, Fragment } from "@stencil/core";
+export class DocumentComponentDemo {
+  constructor() {
+    this.DocumentComponent = ({ path }) => {
+      var _a;
+      const documentComponent = path.at(-1);
+      const { DocumentComponent } = this;
+      return (h("ul", null, (_a = documentComponent === null || documentComponent === void 0 ? void 0 : documentComponent._embedded) === null || _a === void 0 ? void 0 : _a.ontwerpTekststructuurDocumentComponenten.map((d, i) => (h("li", { key: d.documentTechnischId }, h("dso-document-component", { annotated: i % 3 === 2, bevatOntwerpInformatie: !!d.bevatOntwerpInformatie, filtered: this.isOpen(d) ? this.isFiltered(d) : this.hasFilteredChildren(d), genesteOntwerpInformatie: this.hasNestedDraft(d), gereserveerd: d.gereserveerd, heading: "h2", inhoud: d.inhoud, label: d.labelXml, openAnnotation: this.isOpenedAnnotation(d), notApplicable: this.isNotApplicable(d) || path.some((p) => this.isNotApplicable(p)), nummer: d.nummerXml, onDsoAnnotationToggle: () => this.handleAnnotationToggle(d), onDsoOpenToggle: (e) => this.handleOpenToggle(e, d), open: this.isOpen(d), opschrift: d.opschrift, type: d.type, vervallen: d.vervallen, wijzigactie: d.wijzigactie }, this.isOpenedAnnotation(d) && (h("dso-annotation-output", { slot: "annotation", open: true, identifier: "test", onDsoClose: () => this.handleAnnotationToggle(d) }, h("span", { slot: "title" }, "Annotaties"), h("dso-slide-toggle", { checked: this.isCheckedSlideToggle(d), onDsoActiveChange: () => this.handleSelectableChange(d) }, "Delfzijl"))), this.showContent(d) && h(DocumentComponent, { path: [...path, d] })))))));
+    };
+    this.response = undefined;
+    this.open = [];
+    this.openedAnnotation = [];
+    this.filtered = [];
+    this.notApplicable = [];
+    this.activeAnnotationSelectables = [];
+  }
+  fixData(documentComponent) {
+    var _a;
+    return Object.assign(Object.assign({}, documentComponent), { nummerXml: documentComponent.type === "LID" && !((_a = documentComponent.nummerXml) === null || _a === void 0 ? void 0 : _a.startsWith("<?"))
+        ? `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Nummer xmlns="https://standaarden.overheid.nl/stop/imop/tekst/">${documentComponent.nummerXml}</Nummer>`
+        : documentComponent.nummerXml, _embedded: documentComponent._embedded && {
+        ontwerpTekststructuurDocumentComponenten: documentComponent._embedded.ontwerpTekststructuurDocumentComponenten.map((d) => this.fixData(d)),
+      } });
+  }
+  componentDidLoad() {
+    fetch("ozon-response.json")
+      .then((response) => response.json())
+      .then((result) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+      this.response = this.fixData(result);
+      /* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
+      this.filtered = [
+        (_e = (_d = (_c = (_b = (_a = this.response) === null || _a === void 0 ? void 0 : _a._embedded) === null || _b === void 0 ? void 0 : _b.ontwerpTekststructuurDocumentComponenten[0]._embedded) === null || _c === void 0 ? void 0 : _c.ontwerpTekststructuurDocumentComponenten[10]._embedded) === null || _d === void 0 ? void 0 : _d.ontwerpTekststructuurDocumentComponenten[2]._embedded) === null || _e === void 0 ? void 0 : _e.ontwerpTekststructuurDocumentComponenten[0],
+        (_j = (_h = (_g = (_f = this.response) === null || _f === void 0 ? void 0 : _f._embedded) === null || _g === void 0 ? void 0 : _g.ontwerpTekststructuurDocumentComponenten[0]._embedded) === null || _h === void 0 ? void 0 : _h.ontwerpTekststructuurDocumentComponenten[10]._embedded) === null || _j === void 0 ? void 0 : _j.ontwerpTekststructuurDocumentComponenten[0],
+      ];
+      this.notApplicable = [
+        (_m = (_l = (_k = this.response) === null || _k === void 0 ? void 0 : _k._embedded) === null || _l === void 0 ? void 0 : _l.ontwerpTekststructuurDocumentComponenten[0]._embedded) === null || _m === void 0 ? void 0 : _m.ontwerpTekststructuurDocumentComponenten[4],
+        (_r = (_q = (_p = (_o = this.response) === null || _o === void 0 ? void 0 : _o._embedded) === null || _p === void 0 ? void 0 : _p.ontwerpTekststructuurDocumentComponenten[0]._embedded) === null || _q === void 0 ? void 0 : _q.ontwerpTekststructuurDocumentComponenten[4]._embedded) === null || _r === void 0 ? void 0 : _r.ontwerpTekststructuurDocumentComponenten[0],
+        (_v = (_u = (_t = (_s = this.response) === null || _s === void 0 ? void 0 : _s._embedded) === null || _t === void 0 ? void 0 : _t.ontwerpTekststructuurDocumentComponenten[0]._embedded) === null || _u === void 0 ? void 0 : _u.ontwerpTekststructuurDocumentComponenten[9]._embedded) === null || _v === void 0 ? void 0 : _v.ontwerpTekststructuurDocumentComponenten[1],
+      ];
+      /* eslint-enable @typescript-eslint/no-non-null-asserted-optional-chain */
+    });
+  }
+  handleOpenToggle(e, documentComponent) {
+    const isOpen = this.isOpen(documentComponent);
+    if (e.detail.open && !isOpen) {
+      this.open = [...this.open, documentComponent];
+    }
+    else if (!e.detail.open && isOpen) {
+      this.open = this.open.filter((d) => d !== documentComponent);
+    }
+  }
+  handleAnnotationToggle(documentComponent) {
+    this.openedAnnotation = this.isOpenedAnnotation(documentComponent)
+      ? this.openedAnnotation.filter((d) => d !== documentComponent)
+      : [...this.openedAnnotation, documentComponent];
+    if (!this.isOpen(documentComponent)) {
+      this.open = [...this.open, documentComponent];
+    }
+  }
+  handleSelectableChange(documentComponent) {
+    this.activeAnnotationSelectables = this.isCheckedSlideToggle(documentComponent)
+      ? this.activeAnnotationSelectables.filter((d) => d !== documentComponent)
+      : [...this.activeAnnotationSelectables, documentComponent];
+  }
+  isCheckedSlideToggle(documentComponent) {
+    return this.activeAnnotationSelectables.includes(documentComponent);
+  }
+  hasFilteredChildren(documentComponent) {
+    var _a, _b;
+    return (this.filtered.includes(documentComponent) ||
+      ((_b = (_a = documentComponent._embedded) === null || _a === void 0 ? void 0 : _a.ontwerpTekststructuurDocumentComponenten.some((d) => this.hasFilteredChildren(d))) !== null && _b !== void 0 ? _b : false));
+  }
+  isOpen(documentComponent) {
+    return documentComponent.type === "LID" || this.open.includes(documentComponent);
+  }
+  isOpenedAnnotation(documentComponent) {
+    return this.openedAnnotation.includes(documentComponent);
+  }
+  isFiltered(documentComponent) {
+    return this.filtered.includes(documentComponent);
+  }
+  isNotApplicable(documentComponent) {
+    return this.notApplicable.includes(documentComponent);
+  }
+  hasNestedDraft(documentComponent) {
+    var _a, _b;
+    return ((_b = (_a = documentComponent._embedded) === null || _a === void 0 ? void 0 : _a.ontwerpTekststructuurDocumentComponenten.some((d) => !!d.bevatOntwerpInformatie || this.hasNestedDraft(d))) !== null && _b !== void 0 ? _b : false);
+  }
+  showContent(documentComponent) {
+    var _a;
+    return (this.isOpen(documentComponent) &&
+      !!(((_a = documentComponent._embedded) === null || _a === void 0 ? void 0 : _a.ontwerpTekststructuurDocumentComponenten.length) || documentComponent.inhoud));
+  }
+  render() {
+    var _a, _b;
+    const { DocumentComponent } = this;
+    return (h("div", { style: { margin: "0 8px", borderLeft: "1px dashed pink", borderRight: "1px dashed pink" } }, h("dso-responsive-element", { class: "dso-document-components" }, (_b = (_a = this.response) === null || _a === void 0 ? void 0 : _a._embedded) === null || _b === void 0 ? void 0 : _b.ontwerpTekststructuurDocumentComponenten.map((d) => (h(Fragment, null, h(DocumentComponent, { path: [d] }), h("hr", null)))))));
+  }
+  static get is() { return "dsot-document-component-demo"; }
+  static get states() {
+    return {
+      "response": {},
+      "open": {},
+      "openedAnnotation": {},
+      "filtered": {},
+      "notApplicable": {},
+      "activeAnnotationSelectables": {}
+    };
+  }
+}
+//# sourceMappingURL=document-component.demo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"document-component.demo.js","sourceRoot":"","sources":["../../../src/components/document-component/document-component.demo.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, Fragment, State } from \"@stencil/core\";\r\nimport { DocumentComponentOpenToggleEvent, DsoDocumentComponentCustomEvent } from \"../../components\";\r\n\r\ninterface DocumentComponent {\r\n  documentTechnischId: string;\r\n  type?: string;\r\n  labelXml?: string;\r\n  nummerXml?: string;\r\n  opschrift?: string;\r\n  inhoud?: string;\r\n  gereserveerd?: boolean;\r\n  vervallen?: boolean;\r\n  bevatOntwerpInformatie?: boolean;\r\n  wijzigactie?: \"voegtoe\" | \"verwijder\" | \"nieuweContainer\" | \"verwijderContainer\";\r\n  _embedded?: {\r\n    ontwerpTekststructuurDocumentComponenten: DocumentComponent[];\r\n  };\r\n}\r\n\r\n@Component({\r\n  tag: \"dsot-document-component-demo\",\r\n})\r\nexport class DocumentComponentDemo implements ComponentInterface {\r\n  @State()\r\n  response?: DocumentComponent;\r\n\r\n  @State()\r\n  open: DocumentComponent[] = [];\r\n\r\n  @State()\r\n  openedAnnotation: DocumentComponent[] = [];\r\n\r\n  @State()\r\n  filtered: DocumentComponent[] = [];\r\n\r\n  @State()\r\n  notApplicable: DocumentComponent[] = [];\r\n\r\n  @State()\r\n  activeAnnotationSelectables: DocumentComponent[] = [];\r\n\r\n  private fixData(documentComponent: DocumentComponent): DocumentComponent {\r\n    return {\r\n      ...documentComponent,\r\n      nummerXml:\r\n        documentComponent.type === \"LID\" && !documentComponent.nummerXml?.startsWith(\"<?\")\r\n          ? `<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?><Nummer xmlns=\"https://standaarden.overheid.nl/stop/imop/tekst/\">${documentComponent.nummerXml}</Nummer>`\r\n          : documentComponent.nummerXml,\r\n      _embedded: documentComponent._embedded && {\r\n        ontwerpTekststructuurDocumentComponenten:\r\n          documentComponent._embedded.ontwerpTekststructuurDocumentComponenten.map((d) => this.fixData(d)),\r\n      },\r\n    };\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    fetch(\"ozon-response.json\")\r\n      .then((response) => response.json())\r\n      .then((result) => {\r\n        this.response = this.fixData(result);\r\n\r\n        /* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */\r\n        this.filtered = [\r\n          this.response?._embedded?.ontwerpTekststructuurDocumentComponenten[0]!._embedded\r\n            ?.ontwerpTekststructuurDocumentComponenten[10]!._embedded?.ontwerpTekststructuurDocumentComponenten[2]!\r\n            ._embedded?.ontwerpTekststructuurDocumentComponenten[0]!,\r\n          this.response?._embedded?.ontwerpTekststructuurDocumentComponenten[0]!._embedded\r\n            ?.ontwerpTekststructuurDocumentComponenten[10]!._embedded?.ontwerpTekststructuurDocumentComponenten[0]!,\r\n        ];\r\n\r\n        this.notApplicable = [\r\n          this.response?._embedded?.ontwerpTekststructuurDocumentComponenten[0]!._embedded\r\n            ?.ontwerpTekststructuurDocumentComponenten[4]!,\r\n          this.response?._embedded?.ontwerpTekststructuurDocumentComponenten[0]!._embedded\r\n            ?.ontwerpTekststructuurDocumentComponenten[4]!._embedded?.ontwerpTekststructuurDocumentComponenten[0]!,\r\n          this.response?._embedded?.ontwerpTekststructuurDocumentComponenten[0]!._embedded\r\n            ?.ontwerpTekststructuurDocumentComponenten[9]!._embedded?.ontwerpTekststructuurDocumentComponenten[1]!,\r\n        ];\r\n        /* eslint-enable @typescript-eslint/no-non-null-asserted-optional-chain */\r\n      });\r\n  }\r\n\r\n  private handleOpenToggle(\r\n    e: DsoDocumentComponentCustomEvent<DocumentComponentOpenToggleEvent>,\r\n    documentComponent: DocumentComponent\r\n  ) {\r\n    const isOpen = this.isOpen(documentComponent);\r\n\r\n    if (e.detail.open && !isOpen) {\r\n      this.open = [...this.open, documentComponent];\r\n    } else if (!e.detail.open && isOpen) {\r\n      this.open = this.open.filter((d) => d !== documentComponent);\r\n    }\r\n  }\r\n\r\n  private handleAnnotationToggle(documentComponent: DocumentComponent) {\r\n    this.openedAnnotation = this.isOpenedAnnotation(documentComponent)\r\n      ? this.openedAnnotation.filter((d) => d !== documentComponent)\r\n      : [...this.openedAnnotation, documentComponent];\r\n\r\n    if (!this.isOpen(documentComponent)) {\r\n      this.open = [...this.open, documentComponent];\r\n    }\r\n  }\r\n\r\n  private handleSelectableChange(documentComponent: DocumentComponent) {\r\n    this.activeAnnotationSelectables = this.isCheckedSlideToggle(documentComponent)\r\n      ? this.activeAnnotationSelectables.filter((d) => d !== documentComponent)\r\n      : [...this.activeAnnotationSelectables, documentComponent];\r\n  }\r\n\r\n  private isCheckedSlideToggle(documentComponent: DocumentComponent) {\r\n    return this.activeAnnotationSelectables.includes(documentComponent);\r\n  }\r\n\r\n  private hasFilteredChildren(documentComponent: DocumentComponent): boolean {\r\n    return (\r\n      this.filtered.includes(documentComponent) ||\r\n      (documentComponent._embedded?.ontwerpTekststructuurDocumentComponenten.some((d) => this.hasFilteredChildren(d)) ??\r\n        false)\r\n    );\r\n  }\r\n\r\n  private isOpen(documentComponent: DocumentComponent): boolean {\r\n    return documentComponent.type === \"LID\" || this.open.includes(documentComponent);\r\n  }\r\n\r\n  private isOpenedAnnotation(documentComponent: DocumentComponent): boolean {\r\n    return this.openedAnnotation.includes(documentComponent);\r\n  }\r\n\r\n  private isFiltered(documentComponent: DocumentComponent): boolean {\r\n    return this.filtered.includes(documentComponent);\r\n  }\r\n\r\n  private isNotApplicable(documentComponent: DocumentComponent): boolean {\r\n    return this.notApplicable.includes(documentComponent);\r\n  }\r\n\r\n  private hasNestedDraft(documentComponent: DocumentComponent): boolean {\r\n    return (\r\n      documentComponent._embedded?.ontwerpTekststructuurDocumentComponenten.some(\r\n        (d) => !!d.bevatOntwerpInformatie || this.hasNestedDraft(d)\r\n      ) ?? false\r\n    );\r\n  }\r\n\r\n  private showContent(documentComponent: DocumentComponent): boolean {\r\n    return (\r\n      this.isOpen(documentComponent) &&\r\n      !!(documentComponent._embedded?.ontwerpTekststructuurDocumentComponenten.length || documentComponent.inhoud)\r\n    );\r\n  }\r\n\r\n  private DocumentComponent = ({ path }: DocumentComponentProps) => {\r\n    const documentComponent = path.at(-1);\r\n\r\n    const { DocumentComponent } = this;\r\n\r\n    return (\r\n      <ul>\r\n        {documentComponent?._embedded?.ontwerpTekststructuurDocumentComponenten.map((d, i) => (\r\n          <li key={d.documentTechnischId}>\r\n            <dso-document-component\r\n              annotated={i % 3 === 2}\r\n              bevatOntwerpInformatie={!!d.bevatOntwerpInformatie}\r\n              filtered={this.isOpen(d) ? this.isFiltered(d) : this.hasFilteredChildren(d)}\r\n              genesteOntwerpInformatie={this.hasNestedDraft(d)}\r\n              gereserveerd={d.gereserveerd}\r\n              heading=\"h2\"\r\n              inhoud={d.inhoud}\r\n              label={d.labelXml}\r\n              openAnnotation={this.isOpenedAnnotation(d)}\r\n              notApplicable={this.isNotApplicable(d) || path.some((p) => this.isNotApplicable(p))}\r\n              nummer={d.nummerXml}\r\n              onDsoAnnotationToggle={() => this.handleAnnotationToggle(d)}\r\n              onDsoOpenToggle={(e) => this.handleOpenToggle(e, d)}\r\n              open={this.isOpen(d)}\r\n              opschrift={d.opschrift}\r\n              type={d.type}\r\n              vervallen={d.vervallen}\r\n              wijzigactie={d.wijzigactie}\r\n            >\r\n              {this.isOpenedAnnotation(d) && (\r\n                <dso-annotation-output\r\n                  slot=\"annotation\"\r\n                  open\r\n                  identifier=\"test\"\r\n                  onDsoClose={() => this.handleAnnotationToggle(d)}\r\n                >\r\n                  <span slot=\"title\">Annotaties</span>\r\n                  <dso-slide-toggle\r\n                    checked={this.isCheckedSlideToggle(d)}\r\n                    onDsoActiveChange={() => this.handleSelectableChange(d)}\r\n                  >\r\n                    Delfzijl\r\n                  </dso-slide-toggle>\r\n                </dso-annotation-output>\r\n              )}\r\n              {this.showContent(d) && <DocumentComponent path={[...path, d]} />}\r\n            </dso-document-component>\r\n          </li>\r\n        ))}\r\n      </ul>\r\n    );\r\n  };\r\n\r\n  render() {\r\n    const { DocumentComponent } = this;\r\n\r\n    return (\r\n      <div style={{ margin: \"0 8px\", borderLeft: \"1px dashed pink\", borderRight: \"1px dashed pink\" }}>\r\n        <dso-responsive-element class=\"dso-document-components\">\r\n          {this.response?._embedded?.ontwerpTekststructuurDocumentComponenten.map((d) => (\r\n            <>\r\n              <DocumentComponent path={[d]} />\r\n              <hr />\r\n            </>\r\n          ))}\r\n        </dso-responsive-element>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\ninterface DocumentComponentProps {\r\n  path: DocumentComponent[];\r\n}\r\n"]}