@dso-toolkit/core 67.3.1 → 67.3.2

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

@@ -15,6 +15,50 @@ const wijzigactieLabels = {
  */
 export class DocumentComponent {
     constructor() {
+        /**
+         * The heading element to use.
+         */
+        this.heading = "h2";
+        /**
+         * This boolean attribute indicates whether the children are visible.
+         */
+        this.open = false;
+        /**
+         * Marks this Document Component as belonging to an active filter.
+         */
+        this.filtered = false;
+        /**
+         * Marks this Document Component as not-applicable.
+         */
+        this.notApplicable = false;
+        /**
+         * When a child Document Component has a status "Draft".
+         */
+        this.genesteOntwerpInformatie = false;
+        /**
+         * Marks as draft.
+         */
+        this.bevatOntwerpInformatie = false;
+        /**
+         * Enables annotations.
+         */
+        this.annotated = false;
+        /**
+         * Marks Document Component as reserved.
+         */
+        this.gereserveerd = false;
+        /**
+         * Marks the Document Component as expired.
+         */
+        this.vervallen = false;
+        /**
+         * When the Annotation is opened, set this to true.
+         */
+        this.openAnnotation = false;
+        /**
+         * The mode of the Document Component. One of "document" or "table-of-contents". Defaults to "document"
+         */
+        this.mode = "document";
         this.handleHeadingClick = (e) => {
             if (this.mode === "table-of-contents") {
                 this.dsoTableOfContentsClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
@@ -33,28 +77,6 @@ export class DocumentComponent {
                 next: this.recursiveToggle !== true,
             });
         };
-        this.heading = "h2";
-        this.label = undefined;
-        this.nummer = undefined;
-        this.opschrift = undefined;
-        this.inhoud = undefined;
-        this.open = false;
-        this.filtered = false;
-        this.notApplicable = false;
-        this.genesteOntwerpInformatie = false;
-        this.bevatOntwerpInformatie = false;
-        this.annotated = false;
-        this.gereserveerd = false;
-        this.vervallen = false;
-        this.openAnnotation = false;
-        this.alternativeTitle = undefined;
-        this.type = undefined;
-        this.wijzigactie = undefined;
-        this.annotationsWijzigactie = undefined;
-        this.mark = undefined;
-        this.recursiveToggle = undefined;
-        this.mode = "document";
-        this.href = undefined;
     }
     get wijzigactieLabel() {
         return this.wijzigactie && wijzigactieLabels[this.wijzigactie];
@@ -115,6 +137,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "The heading element to use."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "heading",
                 "reflect": false,
                 "defaultValue": "\"h2\""
@@ -139,6 +163,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "The Label XML."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -162,6 +188,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "The Nummer XML."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "nummer",
                 "reflect": false
             },
@@ -185,6 +213,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "The Opschrift XML."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "opschrift",
                 "reflect": false
             },
@@ -208,6 +238,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "The Inhoud XML."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "inhoud",
                 "reflect": false
             },
@@ -225,6 +257,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "This boolean attribute indicates whether the children are visible."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
@@ -243,6 +277,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "Marks this Document Component as belonging to an active filter."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "filtered",
                 "reflect": true,
                 "defaultValue": "false"
@@ -261,6 +297,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "Marks this Document Component as not-applicable."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "not-applicable",
                 "reflect": true,
                 "defaultValue": "false"
@@ -279,6 +317,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "When a child Document Component has a status \"Draft\"."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "geneste-ontwerp-informatie",
                 "reflect": true,
                 "defaultValue": "false"
@@ -297,6 +337,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "Marks as draft."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "bevat-ontwerp-informatie",
                 "reflect": true,
                 "defaultValue": "false"
@@ -315,6 +357,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "Enables annotations."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "annotated",
                 "reflect": true,
                 "defaultValue": "false"
@@ -333,6 +377,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "Marks Document Component as reserved."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "gereserveerd",
                 "reflect": false,
                 "defaultValue": "false"
@@ -351,6 +397,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "Marks the Document Component as expired."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "vervallen",
                 "reflect": false,
                 "defaultValue": "false"
@@ -369,6 +417,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "When the Annotation is opened, set this to true."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "open-annotation",
                 "reflect": true,
                 "defaultValue": "false"
@@ -387,6 +437,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "An alternative title to show when there is nothing to create a title."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "alternative-title",
                 "reflect": false
             },
@@ -404,6 +456,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "Type of Document Component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": true
             },
@@ -427,6 +481,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "The wijzigactie as in STOP."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "wijzigactie",
                 "reflect": true
             },
@@ -450,6 +506,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "The wijzigactie for all annotations."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "annotations-wijzigactie",
                 "reflect": true
             },
@@ -472,7 +530,9 @@ export class DocumentComponent {
                 "docs": {
                     "tags": [],
                     "text": "To mark text."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "recursiveToggle": {
                 "type": "any",
@@ -494,6 +554,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "Shows the recursive toggle button. When the user activates this button the event `dsoRecursiveToggle` is emitted."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "recursive-toggle",
                 "reflect": false
             },
@@ -517,6 +579,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "The mode of the Document Component. One of \"document\" or \"table-of-contents\". Defaults to \"document\""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "mode",
                 "reflect": true,
                 "defaultValue": "\"document\""
@@ -535,6 +599,8 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "The URL to which the Heading links (only in mode=\"table-of-contents\")."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": true
             }

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\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport {\r\n  DocumentComponentOpenToggleEvent,\r\n  DocumentComponentToggleAnnotationEvent,\r\n  DocumentComponentOzonContentAnchorClickEvent,\r\n  DocumentComponentWijzigactie,\r\n  DocumentComponentAnnotationsWijzigactie,\r\n  DocumentComponentInputType,\r\n  DocumentComponentMarkFunction,\r\n  DocumentComponentMarkItemHighlightEvent,\r\n  DocumentComponentRecursiveToggleEvent,\r\n  DocumentComponentRecursiveToggleState,\r\n  DocumentComponentMode,\r\n  DocumentComponentTableOfContentsClickEvent,\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({ reflect: true })\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   * The wijzigactie for all annotations.\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotationsWijzigactie?: DocumentComponentAnnotationsWijzigactie;\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   * The mode of the Document Component. One of \"document\" or \"table-of-contents\". Defaults to \"document\"\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode: DocumentComponentMode = \"document\";\r\n\r\n  /**\r\n   * The URL to which the Heading links (only in mode=\"table-of-contents\").\r\n   */\r\n  @Prop({ reflect: true })\r\n  href?: string;\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 clicks the heading in mode=\"table-of-contents\".\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoTableOfContentsClick!: EventEmitter<DocumentComponentTableOfContentsClickEvent>;\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.mode === \"table-of-contents\") {\r\n      this.dsoTableOfContentsClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n    } else 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  private showOntwerpBadge(): boolean {\r\n    return (\r\n      this.genesteOntwerpInformatie &&\r\n      !this.bevatOntwerpInformatie &&\r\n      ((!this.open && this.mode === \"document\") || this.mode === \"table-of-contents\")\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\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\r\n                heading={this.heading}\r\n                class=\"heading-element\"\r\n                onClick={this.handleHeadingClick}\r\n                mode={this.mode}\r\n                href={this.href}\r\n              >\r\n                {collapsible && this.mode === \"document\" && (\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                <span 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                </span>\r\n              </Heading>\r\n              {this.recursiveToggle !== undefined && this.open && this.mode === \"document\" && (\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.showOntwerpBadge() && (\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 && this.mode === \"document\" && (\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\">\r\n                        Kenmerken en kaartgegevens {this.openAnnotation ? \"verbergen\" : \"tonen\"}\r\n                      </span>\r\n                    </button>\r\n                  )}\r\n                </div>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.openAnnotation && (\r\n          <div class=\"annotation-container\" part=\"_annotation-container\">\r\n            <dso-panel\r\n              id=\"annotations\"\r\n              onDsoCloseClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n              closeButtonLabel=\"Kenmerken en kaartgegevens verbergen\"\r\n            >\r\n              <h2 slot=\"heading\">Kenmerken en kaart</h2>\r\n              <slot name=\"annotations\" />\r\n            </dso-panel>\r\n          </div>\r\n        )}\r\n        {this.open && (this.inhoud || this.gereserveerd || this.vervallen) && this.mode === \"document\" && (\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\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport {\r\n  DocumentComponentOpenToggleEvent,\r\n  DocumentComponentToggleAnnotationEvent,\r\n  DocumentComponentOzonContentAnchorClickEvent,\r\n  DocumentComponentWijzigactie,\r\n  DocumentComponentAnnotationsWijzigactie,\r\n  DocumentComponentInputType,\r\n  DocumentComponentMarkFunction,\r\n  DocumentComponentMarkItemHighlightEvent,\r\n  DocumentComponentRecursiveToggleEvent,\r\n  DocumentComponentRecursiveToggleState,\r\n  DocumentComponentMode,\r\n  DocumentComponentTableOfContentsClickEvent,\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({ reflect: true })\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   * The wijzigactie for all annotations.\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotationsWijzigactie?: DocumentComponentAnnotationsWijzigactie;\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   * The mode of the Document Component. One of \"document\" or \"table-of-contents\". Defaults to \"document\"\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode: DocumentComponentMode = \"document\";\r\n\r\n  /**\r\n   * The URL to which the Heading links (only in mode=\"table-of-contents\").\r\n   */\r\n  @Prop({ reflect: true })\r\n  href?: string;\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 clicks the heading in mode=\"table-of-contents\".\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoTableOfContentsClick!: EventEmitter<DocumentComponentTableOfContentsClickEvent>;\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.mode === \"table-of-contents\") {\r\n      this.dsoTableOfContentsClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n    } else 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  private showOntwerpBadge(): boolean {\r\n    return (\r\n      this.genesteOntwerpInformatie &&\r\n      !this.bevatOntwerpInformatie &&\r\n      ((!this.open && this.mode === \"document\") || this.mode === \"table-of-contents\")\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\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\r\n                heading={this.heading}\r\n                class=\"heading-element\"\r\n                onClick={this.handleHeadingClick}\r\n                mode={this.mode}\r\n                href={this.href}\r\n              >\r\n                {collapsible && this.mode === \"document\" && (\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                <span 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                </span>\r\n              </Heading>\r\n              {this.recursiveToggle !== undefined && this.open && this.mode === \"document\" && (\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.showOntwerpBadge() && (\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 && this.mode === \"document\" && (\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\">\r\n                        Kenmerken en kaartgegevens {this.openAnnotation ? \"verbergen\" : \"tonen\"}\r\n                      </span>\r\n                    </button>\r\n                  )}\r\n                </div>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.openAnnotation && (\r\n          <div class=\"annotation-container\" part=\"_annotation-container\">\r\n            <dso-panel\r\n              id=\"annotations\"\r\n              onDsoCloseClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n              closeButtonLabel=\"Kenmerken en kaartgegevens verbergen\"\r\n            >\r\n              <h2 slot=\"heading\">Kenmerken en kaart</h2>\r\n              <slot name=\"annotations\" />\r\n            </dso-panel>\r\n          </div>\r\n        )}\r\n        {this.open && (this.inhoud || this.gereserveerd || this.vervallen) && this.mode === \"document\" && (\r\n          <div class=\"content\" part=\"_content\">\r\n            {this.gereserveerd && (\r\n              <dso-alert status=\"info\">Dit onderdeel is gereserveerd voor toekomstige toevoeging.</dso-alert>\r\n            )}\r\n            {this.vervallen && <dso-alert status=\"info\">Dit onderdeel is vervallen.</dso-alert>}\r\n            {this.inhoud && (\r\n              <dso-ozon-content\r\n                content={this.inhoud}\r\n                onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                mark={this.mark && ((text) => this.mark?.(text, \"inhoud\"))}\r\n                onDsoOzonContentMarkItemHighlight={(e) =>\r\n                  this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"inhoud\" })\r\n                }\r\n              />\r\n            )}\r\n          </div>\r\n        )}\r\n        <div class=\"children-container\" part=\"_children-container\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -3,6 +3,23 @@ import sampleSize from "lodash.samplesize";
 import random from "lodash.random";
 export class DocumentComponentDemo {
     constructor() {
+        /**
+         * Show canvas to where Document Component extends.
+         */
+        this.showCanvas = false;
+        /**
+         * The default state for all Document Components.
+         */
+        this.openDefault = false;
+        /**
+         * The mode of the Document Component. One of "document" or "table-of-contents". Defaults to "document"
+         */
+        this.mode = "document";
+        this.openOrClosed = [];
+        this.openedAnnotation = [];
+        this.filtered = [];
+        this.notApplicable = [];
+        this.activeAnnotationSelectables = [];
         this.handleRecursiveToggle = (documentComponent, detail) => {
             const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);
             if (!embeddedDocuments) {
@@ -27,17 +44,6 @@ export class DocumentComponentDemo {
             const { labelXml, nummerXml, type } = documentComponent;
             return (h("button", { type: "button", onClick: () => (this.document = documentComponent) }, !labelXml && !nummerXml ? (h("span", null, h("i", null, type))) : (h(Fragment, null, labelXml && (h(Fragment, null, h("dso-ozon-content", { content: labelXml, inline: true }))), nummerXml && (h(Fragment, null, " ", h("dso-ozon-content", { content: nummerXml, inline: true })))))));
         };
-        this.showCanvas = false;
-        this.jsonFile = undefined;
-        this.openDefault = false;
-        this.mode = "document";
-        this.response = undefined;
-        this.document = undefined;
-        this.openOrClosed = [];
-        this.openedAnnotation = [];
-        this.filtered = [];
-        this.notApplicable = [];
-        this.activeAnnotationSelectables = [];
     }
     async jsonFileWatcher() {
         this.openOrClosed = [];
@@ -204,6 +210,8 @@ export class DocumentComponentDemo {
                     "tags": [],
                     "text": "Show canvas to where Document Component extends."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "show-canvas",
                 "reflect": true,
                 "defaultValue": "false"
@@ -222,6 +230,8 @@ export class DocumentComponentDemo {
                     "tags": [],
                     "text": "Name of the file to load."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "json-file",
                 "reflect": false
             },
@@ -239,6 +249,8 @@ export class DocumentComponentDemo {
                     "tags": [],
                     "text": "The default state for all Document Components."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "open-default",
                 "reflect": false,
                 "defaultValue": "false"
@@ -263,6 +275,8 @@ export class DocumentComponentDemo {
                     "tags": [],
                     "text": "The mode of the Document Component. One of \"document\" or \"table-of-contents\". Defaults to \"document\""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "mode",
                 "reflect": true,
                 "defaultValue": "\"document\""

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

@@ -1 +1 @@
-{"version":3,"file":"document-component.demo.js","sourceRoot":"","sources":["../../../../src/components/document-component-demo/document-component.demo.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, State, Prop, Watch, Event, EventEmitter, Fragment } from \"@stencil/core\";\r\nimport sampleSize from \"lodash.samplesize\";\r\nimport random from \"lodash.random\";\r\n\r\nimport {\r\n  DocumentComponentMode,\r\n  DocumentComponentOzonContentAnchorClickEvent,\r\n  DocumentComponentRecursiveToggleEvent,\r\n  DocumentComponentTableOfContentsClickEvent,\r\n  DocumentComponentWijzigactie,\r\n} from \"../document-component/document-component.models\";\r\nimport { DsoDocumentComponentCustomEvent } from \"../../components\";\r\n\r\ninterface DocumentEmbedded {\r\n  _embedded?: {\r\n    ontwerpTekststructuurDocumentComponenten?: DocumentComponent[];\r\n    tekststructuurDocumentComponenten?: DocumentComponent[];\r\n  };\r\n}\r\n\r\ninterface DocumentComponent extends DocumentEmbedded {\r\n  documentTechnischId: string;\r\n  type?: string;\r\n  labelXml?: string;\r\n  nummerXml?: string;\r\n  volgordeNummer: number;\r\n  opschrift?: string;\r\n  inhoud?: string;\r\n  gereserveerd?: boolean;\r\n  vervallen?: boolean;\r\n  bevatOntwerpInformatie?: boolean;\r\n  wijzigactie?: DocumentComponentWijzigactie;\r\n  mode: DocumentComponentMode;\r\n}\r\n\r\n@Component({\r\n  tag: \"dsot-document-component-demo\",\r\n  scoped: true, // scoped because we are immitating the usage of <dso-document-component> in a page\r\n  styleUrl: \"document-component.demo.scss\",\r\n})\r\nexport class DocumentComponentDemo implements ComponentInterface {\r\n  /**\r\n   * Show canvas to where Document Component extends.\r\n   */\r\n  @Prop({ reflect: true })\r\n  showCanvas = false;\r\n\r\n  /**\r\n   * Name of the file to load.\r\n   */\r\n  @Prop()\r\n  jsonFile?: string;\r\n\r\n  /**\r\n   * The default state for all Document Components.\r\n   */\r\n  @Prop()\r\n  openDefault = false;\r\n\r\n  /**\r\n   * The mode of the Document Component. One of \"document\" or \"table-of-contents\". Defaults to \"document\"\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode: DocumentComponentMode = \"document\";\r\n\r\n  /**\r\n   * To demo user interacting with IntRef or IntIoRef elements.\r\n   */\r\n  @Event()\r\n  dsotOzonContentAnchorClick!: EventEmitter<DocumentComponentOzonContentAnchorClickEvent>;\r\n\r\n  /**\r\n   * To demo user interacting the heading in mode=\"table-of-contents\".\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsotTableOfContentsClick!: EventEmitter<DocumentComponentTableOfContentsClickEvent>;\r\n\r\n  @State()\r\n  response?: DocumentEmbedded;\r\n\r\n  @State()\r\n  document?: DocumentComponent;\r\n\r\n  @State()\r\n  openOrClosed: 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  @Watch(\"jsonFile\")\r\n  async jsonFileWatcher() {\r\n    this.openOrClosed = [];\r\n\r\n    await this.loadData();\r\n  }\r\n\r\n  @Watch(\"openDefault\")\r\n  async openDefaultWatcher() {\r\n    this.openOrClosed = [];\r\n\r\n    await this.loadData();\r\n  }\r\n\r\n  async componentDidLoad(): Promise<void> {\r\n    await this.loadData();\r\n  }\r\n\r\n  private getEmbeddedDocumentComponents(documentEmbedded: DocumentEmbedded | undefined) {\r\n    if (documentEmbedded?._embedded?.ontwerpTekststructuurDocumentComponenten) {\r\n      return {\r\n        documentComponents: documentEmbedded._embedded.ontwerpTekststructuurDocumentComponenten,\r\n        ontwerp: true,\r\n      };\r\n    }\r\n\r\n    if (documentEmbedded?._embedded?.tekststructuurDocumentComponenten) {\r\n      return {\r\n        documentComponents: documentEmbedded._embedded.tekststructuurDocumentComponenten,\r\n        ontwerp: false,\r\n      };\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  private concatEmbeddedDocumentComponents(documentComponent: DocumentComponent): DocumentComponent[] {\r\n    const embeddedDocuments = [...(this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents ?? [])];\r\n\r\n    for (const d of embeddedDocuments) {\r\n      embeddedDocuments.push(...this.concatEmbeddedDocumentComponents(d));\r\n    }\r\n\r\n    return embeddedDocuments;\r\n  }\r\n\r\n  private selectRandomDocumentComponents(\r\n    documentComponent: DocumentComponent,\r\n    exclude: DocumentComponent[] = [],\r\n  ): DocumentComponent[] {\r\n    const documentComponents = this.concatEmbeddedDocumentComponents(documentComponent).filter(\r\n      (d) => !exclude.includes(d),\r\n    );\r\n    const size = random(0, Math.floor(documentComponents.length / 10));\r\n\r\n    return sampleSize(documentComponents, size);\r\n  }\r\n\r\n  private async loadData() {\r\n    if (!this.jsonFile) {\r\n      this.response = undefined;\r\n      this.document = undefined;\r\n\r\n      return;\r\n    }\r\n\r\n    this.response = await fetch(this.jsonFile).then((r) => r.json());\r\n    this.document = this.getEmbeddedDocumentComponents(this.response)?.documentComponents[0];\r\n\r\n    if (this.document?.type === \"LICHAAM\") {\r\n      this.notApplicable = this.selectRandomDocumentComponents(this.document);\r\n      this.filtered = this.selectRandomDocumentComponents(this.document, this.notApplicable);\r\n    } else {\r\n      this.notApplicable = [];\r\n      this.filtered = [];\r\n    }\r\n  }\r\n\r\n  private handleOpenToggle(documentComponent: DocumentComponent, force?: boolean) {\r\n    const isOpenOrClosed = typeof force === \"boolean\" ? force : this.openOrClosed.includes(documentComponent);\r\n\r\n    if (isOpenOrClosed && this.openOrClosed.includes(documentComponent)) {\r\n      this.openOrClosed = this.openOrClosed.filter((d) => d !== documentComponent);\r\n    } else if (!isOpenOrClosed && !this.openOrClosed.includes(documentComponent)) {\r\n      this.openOrClosed = [...this.openOrClosed, 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.openOrClosed = [...this.openOrClosed, 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 handleOzonContentAnchorClick(\r\n    e: DsoDocumentComponentCustomEvent<DocumentComponentOzonContentAnchorClickEvent>,\r\n  ) {\r\n    this.dsotOzonContentAnchorClick.emit(e.detail);\r\n  }\r\n\r\n  private handleTableOfContentsClick(e: DsoDocumentComponentCustomEvent<DocumentComponentTableOfContentsClickEvent>) {\r\n    this.dsotTableOfContentsClick.emit(e.detail);\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      (this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents.some((d) =>\r\n        this.hasFilteredChildren(d),\r\n      ) ??\r\n        false)\r\n    );\r\n  }\r\n\r\n  private isOpen(documentComponent: DocumentComponent): boolean {\r\n    return documentComponent.type === \"LID\" || this.openDefault\r\n      ? !this.openOrClosed.includes(documentComponent)\r\n      : this.openOrClosed.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      this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents.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      !!(this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents.length || documentComponent.inhoud)\r\n    );\r\n  }\r\n\r\n  private recursiveToggleState(documentComponent: DocumentComponent): undefined | boolean | \"indeterminate\" {\r\n    const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);\r\n\r\n    if (\r\n      !embeddedDocuments ||\r\n      embeddedDocuments.documentComponents.length <= 1 ||\r\n      !embeddedDocuments.documentComponents.some((d) => d.type === \"ARTIKEL\")\r\n    ) {\r\n      return undefined;\r\n    }\r\n\r\n    return embeddedDocuments.documentComponents.every((d) => this.isOpen(d));\r\n  }\r\n\r\n  private handleRecursiveToggle = (\r\n    documentComponent: DocumentComponent,\r\n    detail: DocumentComponentRecursiveToggleEvent,\r\n  ) => {\r\n    const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);\r\n    if (!embeddedDocuments) {\r\n      return;\r\n    }\r\n\r\n    for (const d of embeddedDocuments.documentComponents) {\r\n      this.handleOpenToggle(d, detail.next);\r\n    }\r\n  };\r\n\r\n  private isAnnotated(documentComponent: DocumentComponent): boolean {\r\n    return (\r\n      documentComponent.type === \"DIVISIE\" ||\r\n      documentComponent.type === \"DIVISIETEKST\" ||\r\n      documentComponent.type === \"ARTIKEL\" ||\r\n      documentComponent.type === \"LID\"\r\n    );\r\n  }\r\n\r\n  private DocumentComponent = ({ path }: DocumentComponentProps) => {\r\n    const documentComponent = path.at(-1);\r\n    if (!documentComponent || (this.mode === \"table-of-contents\" && documentComponent.type === \"LID\")) {\r\n      return <Fragment />;\r\n    }\r\n\r\n    const { DocumentComponent } = this;\r\n\r\n    const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);\r\n\r\n    return (\r\n      <dso-document-component\r\n        annotated={this.isAnnotated(documentComponent)}\r\n        bevatOntwerpInformatie={!!documentComponent.bevatOntwerpInformatie}\r\n        filtered={\r\n          this.isOpen(documentComponent)\r\n            ? this.isFiltered(documentComponent)\r\n            : this.hasFilteredChildren(documentComponent)\r\n        }\r\n        genesteOntwerpInformatie={this.hasNestedDraft(documentComponent)}\r\n        gereserveerd={documentComponent.gereserveerd}\r\n        heading=\"h2\"\r\n        inhoud={documentComponent.inhoud}\r\n        label={documentComponent.labelXml}\r\n        openAnnotation={this.isOpenedAnnotation(documentComponent)}\r\n        notApplicable={this.isNotApplicable(documentComponent) || path.some((p) => this.isNotApplicable(p))}\r\n        nummer={documentComponent.nummerXml}\r\n        onDsoAnnotationToggle={() => this.handleAnnotationToggle(documentComponent)}\r\n        onDsoOpenToggle={() => this.handleOpenToggle(documentComponent)}\r\n        onDsoOzonContentAnchorClick={(e) => this.handleOzonContentAnchorClick(e)}\r\n        open={this.isOpen(documentComponent)}\r\n        opschrift={documentComponent.opschrift}\r\n        type={documentComponent.type}\r\n        vervallen={documentComponent.vervallen}\r\n        wijzigactie={documentComponent.wijzigactie}\r\n        recursiveToggle={this.recursiveToggleState(documentComponent)}\r\n        onDsoRecursiveToggle={(e) => this.handleRecursiveToggle(documentComponent, e.detail)}\r\n        mode={this.mode}\r\n        href={this.mode === \"table-of-contents\" ? \"/document/\" + documentComponent.documentTechnischId : undefined}\r\n        onDsoTableOfContentsClick={(e) => this.handleTableOfContentsClick(e)}\r\n      >\r\n        {this.isOpenedAnnotation(documentComponent) && (\r\n          <div slot=\"annotations\">\r\n            <dso-annotation-locatie\r\n              active={this.isCheckedSlideToggle(documentComponent)}\r\n              gewijzigde-locatie\r\n              locatieNoemer={\"Winkelgebied\"}\r\n              onDsoActiveChange={() => this.handleSelectableChange(documentComponent)}\r\n            >\r\n              <span class=\"symboolcode\" slot=\"symbool\" data-symboolcode=\"vszt030\"></span>\r\n            </dso-annotation-locatie>\r\n          </div>\r\n        )}\r\n        {this.showContent(documentComponent) && embeddedDocuments?.documentComponents.length && (\r\n          <ul class=\"dso-document-component-list\">\r\n            {embeddedDocuments.documentComponents.map((d) => (\r\n              <li key={d.documentTechnischId}>\r\n                <DocumentComponent path={[...path, d]} />\r\n              </li>\r\n            ))}\r\n          </ul>\r\n        )}\r\n      </dso-document-component>\r\n    );\r\n  };\r\n\r\n  render() {\r\n    const { DocumentComponent, MenuButton } = this;\r\n\r\n    return (\r\n      <dso-responsive-element class=\"dso-document-components\">\r\n        <div class=\"dso-navbar\">\r\n          <ul class=\"dso-nav dso-nav-sub\">\r\n            {this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((d) => (\r\n              <li class={this.document === d ? \"dso-active\" : undefined}>\r\n                <MenuButton documentComponent={d} />\r\n              </li>\r\n            ))}\r\n          </ul>\r\n        </div>\r\n        {this.document && <DocumentComponent path={[this.document]} />}\r\n      </dso-responsive-element>\r\n    );\r\n  }\r\n\r\n  private MenuButton = ({ documentComponent }: MenuItemProps) => {\r\n    const { labelXml, nummerXml, type } = documentComponent;\r\n\r\n    return (\r\n      <button type=\"button\" onClick={() => (this.document = documentComponent)}>\r\n        {!labelXml && !nummerXml ? (\r\n          <span>\r\n            <i>{type}</i>\r\n          </span>\r\n        ) : (\r\n          <>\r\n            {labelXml && (\r\n              <>\r\n                <dso-ozon-content content={labelXml} inline></dso-ozon-content>\r\n              </>\r\n            )}\r\n            {nummerXml && (\r\n              <>\r\n                {\" \"}\r\n                <dso-ozon-content content={nummerXml} inline></dso-ozon-content>\r\n              </>\r\n            )}\r\n          </>\r\n        )}\r\n      </button>\r\n    );\r\n  };\r\n}\r\n\r\ninterface MenuItemProps {\r\n  documentComponent: DocumentComponent;\r\n}\r\n\r\ninterface DocumentComponentProps {\r\n  path: DocumentComponent[];\r\n}\r\n"]}
+{"version":3,"file":"document-component.demo.js","sourceRoot":"","sources":["../../../../src/components/document-component-demo/document-component.demo.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, State, Prop, Watch, Event, EventEmitter, Fragment } from \"@stencil/core\";\r\nimport sampleSize from \"lodash.samplesize\";\r\nimport random from \"lodash.random\";\r\n\r\nimport {\r\n  DocumentComponentMode,\r\n  DocumentComponentOzonContentAnchorClickEvent,\r\n  DocumentComponentRecursiveToggleEvent,\r\n  DocumentComponentTableOfContentsClickEvent,\r\n  DocumentComponentWijzigactie,\r\n} from \"../document-component/document-component.models\";\r\nimport { DsoDocumentComponentCustomEvent } from \"../../components\";\r\n\r\ninterface DocumentEmbedded {\r\n  _embedded?: {\r\n    ontwerpTekststructuurDocumentComponenten?: DocumentComponent[];\r\n    tekststructuurDocumentComponenten?: DocumentComponent[];\r\n  };\r\n}\r\n\r\ninterface DocumentComponent extends DocumentEmbedded {\r\n  documentTechnischId: string;\r\n  type?: string;\r\n  labelXml?: string;\r\n  nummerXml?: string;\r\n  volgordeNummer: number;\r\n  opschrift?: string;\r\n  inhoud?: string;\r\n  gereserveerd?: boolean;\r\n  vervallen?: boolean;\r\n  bevatOntwerpInformatie?: boolean;\r\n  wijzigactie?: DocumentComponentWijzigactie;\r\n  mode: DocumentComponentMode;\r\n}\r\n\r\n@Component({\r\n  tag: \"dsot-document-component-demo\",\r\n  scoped: true, // scoped because we are immitating the usage of <dso-document-component> in a page\r\n  styleUrl: \"document-component.demo.scss\",\r\n})\r\nexport class DocumentComponentDemo implements ComponentInterface {\r\n  /**\r\n   * Show canvas to where Document Component extends.\r\n   */\r\n  @Prop({ reflect: true })\r\n  showCanvas = false;\r\n\r\n  /**\r\n   * Name of the file to load.\r\n   */\r\n  @Prop()\r\n  jsonFile?: string;\r\n\r\n  /**\r\n   * The default state for all Document Components.\r\n   */\r\n  @Prop()\r\n  openDefault = false;\r\n\r\n  /**\r\n   * The mode of the Document Component. One of \"document\" or \"table-of-contents\". Defaults to \"document\"\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode: DocumentComponentMode = \"document\";\r\n\r\n  /**\r\n   * To demo user interacting with IntRef or IntIoRef elements.\r\n   */\r\n  @Event()\r\n  dsotOzonContentAnchorClick!: EventEmitter<DocumentComponentOzonContentAnchorClickEvent>;\r\n\r\n  /**\r\n   * To demo user interacting the heading in mode=\"table-of-contents\".\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsotTableOfContentsClick!: EventEmitter<DocumentComponentTableOfContentsClickEvent>;\r\n\r\n  @State()\r\n  response?: DocumentEmbedded;\r\n\r\n  @State()\r\n  document?: DocumentComponent;\r\n\r\n  @State()\r\n  openOrClosed: 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  @Watch(\"jsonFile\")\r\n  async jsonFileWatcher() {\r\n    this.openOrClosed = [];\r\n\r\n    await this.loadData();\r\n  }\r\n\r\n  @Watch(\"openDefault\")\r\n  async openDefaultWatcher() {\r\n    this.openOrClosed = [];\r\n\r\n    await this.loadData();\r\n  }\r\n\r\n  async componentDidLoad(): Promise<void> {\r\n    await this.loadData();\r\n  }\r\n\r\n  private getEmbeddedDocumentComponents(documentEmbedded: DocumentEmbedded | undefined) {\r\n    if (documentEmbedded?._embedded?.ontwerpTekststructuurDocumentComponenten) {\r\n      return {\r\n        documentComponents: documentEmbedded._embedded.ontwerpTekststructuurDocumentComponenten,\r\n        ontwerp: true,\r\n      };\r\n    }\r\n\r\n    if (documentEmbedded?._embedded?.tekststructuurDocumentComponenten) {\r\n      return {\r\n        documentComponents: documentEmbedded._embedded.tekststructuurDocumentComponenten,\r\n        ontwerp: false,\r\n      };\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  private concatEmbeddedDocumentComponents(documentComponent: DocumentComponent): DocumentComponent[] {\r\n    const embeddedDocuments = [...(this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents ?? [])];\r\n\r\n    for (const d of embeddedDocuments) {\r\n      embeddedDocuments.push(...this.concatEmbeddedDocumentComponents(d));\r\n    }\r\n\r\n    return embeddedDocuments;\r\n  }\r\n\r\n  private selectRandomDocumentComponents(\r\n    documentComponent: DocumentComponent,\r\n    exclude: DocumentComponent[] = [],\r\n  ): DocumentComponent[] {\r\n    const documentComponents = this.concatEmbeddedDocumentComponents(documentComponent).filter(\r\n      (d) => !exclude.includes(d),\r\n    );\r\n    const size = random(0, Math.floor(documentComponents.length / 10));\r\n\r\n    return sampleSize(documentComponents, size);\r\n  }\r\n\r\n  private async loadData() {\r\n    if (!this.jsonFile) {\r\n      this.response = undefined;\r\n      this.document = undefined;\r\n\r\n      return;\r\n    }\r\n\r\n    this.response = await fetch(this.jsonFile).then((r) => r.json());\r\n    this.document = this.getEmbeddedDocumentComponents(this.response)?.documentComponents[0];\r\n\r\n    if (this.document?.type === \"LICHAAM\") {\r\n      this.notApplicable = this.selectRandomDocumentComponents(this.document);\r\n      this.filtered = this.selectRandomDocumentComponents(this.document, this.notApplicable);\r\n    } else {\r\n      this.notApplicable = [];\r\n      this.filtered = [];\r\n    }\r\n  }\r\n\r\n  private handleOpenToggle(documentComponent: DocumentComponent, force?: boolean) {\r\n    const isOpenOrClosed = typeof force === \"boolean\" ? force : this.openOrClosed.includes(documentComponent);\r\n\r\n    if (isOpenOrClosed && this.openOrClosed.includes(documentComponent)) {\r\n      this.openOrClosed = this.openOrClosed.filter((d) => d !== documentComponent);\r\n    } else if (!isOpenOrClosed && !this.openOrClosed.includes(documentComponent)) {\r\n      this.openOrClosed = [...this.openOrClosed, 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.openOrClosed = [...this.openOrClosed, 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 handleOzonContentAnchorClick(\r\n    e: DsoDocumentComponentCustomEvent<DocumentComponentOzonContentAnchorClickEvent>,\r\n  ) {\r\n    this.dsotOzonContentAnchorClick.emit(e.detail);\r\n  }\r\n\r\n  private handleTableOfContentsClick(e: DsoDocumentComponentCustomEvent<DocumentComponentTableOfContentsClickEvent>) {\r\n    this.dsotTableOfContentsClick.emit(e.detail);\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      (this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents.some((d) =>\r\n        this.hasFilteredChildren(d),\r\n      ) ??\r\n        false)\r\n    );\r\n  }\r\n\r\n  private isOpen(documentComponent: DocumentComponent): boolean {\r\n    return documentComponent.type === \"LID\" || this.openDefault\r\n      ? !this.openOrClosed.includes(documentComponent)\r\n      : this.openOrClosed.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      this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents.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      !!(this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents.length || documentComponent.inhoud)\r\n    );\r\n  }\r\n\r\n  private recursiveToggleState(documentComponent: DocumentComponent): undefined | boolean | \"indeterminate\" {\r\n    const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);\r\n\r\n    if (\r\n      !embeddedDocuments ||\r\n      embeddedDocuments.documentComponents.length <= 1 ||\r\n      !embeddedDocuments.documentComponents.some((d) => d.type === \"ARTIKEL\")\r\n    ) {\r\n      return undefined;\r\n    }\r\n\r\n    return embeddedDocuments.documentComponents.every((d) => this.isOpen(d));\r\n  }\r\n\r\n  private handleRecursiveToggle = (\r\n    documentComponent: DocumentComponent,\r\n    detail: DocumentComponentRecursiveToggleEvent,\r\n  ) => {\r\n    const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);\r\n    if (!embeddedDocuments) {\r\n      return;\r\n    }\r\n\r\n    for (const d of embeddedDocuments.documentComponents) {\r\n      this.handleOpenToggle(d, detail.next);\r\n    }\r\n  };\r\n\r\n  private isAnnotated(documentComponent: DocumentComponent): boolean {\r\n    return (\r\n      documentComponent.type === \"DIVISIE\" ||\r\n      documentComponent.type === \"DIVISIETEKST\" ||\r\n      documentComponent.type === \"ARTIKEL\" ||\r\n      documentComponent.type === \"LID\"\r\n    );\r\n  }\r\n\r\n  private DocumentComponent = ({ path }: DocumentComponentProps) => {\r\n    const documentComponent = path.at(-1);\r\n    if (!documentComponent || (this.mode === \"table-of-contents\" && documentComponent.type === \"LID\")) {\r\n      return <Fragment />;\r\n    }\r\n\r\n    const { DocumentComponent } = this;\r\n\r\n    const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);\r\n\r\n    return (\r\n      <dso-document-component\r\n        annotated={this.isAnnotated(documentComponent)}\r\n        bevatOntwerpInformatie={!!documentComponent.bevatOntwerpInformatie}\r\n        filtered={\r\n          this.isOpen(documentComponent)\r\n            ? this.isFiltered(documentComponent)\r\n            : this.hasFilteredChildren(documentComponent)\r\n        }\r\n        genesteOntwerpInformatie={this.hasNestedDraft(documentComponent)}\r\n        gereserveerd={documentComponent.gereserveerd}\r\n        heading=\"h2\"\r\n        inhoud={documentComponent.inhoud}\r\n        label={documentComponent.labelXml}\r\n        openAnnotation={this.isOpenedAnnotation(documentComponent)}\r\n        notApplicable={this.isNotApplicable(documentComponent) || path.some((p) => this.isNotApplicable(p))}\r\n        nummer={documentComponent.nummerXml}\r\n        onDsoAnnotationToggle={() => this.handleAnnotationToggle(documentComponent)}\r\n        onDsoOpenToggle={() => this.handleOpenToggle(documentComponent)}\r\n        onDsoOzonContentAnchorClick={(e) => this.handleOzonContentAnchorClick(e)}\r\n        open={this.isOpen(documentComponent)}\r\n        opschrift={documentComponent.opschrift}\r\n        type={documentComponent.type}\r\n        vervallen={documentComponent.vervallen}\r\n        wijzigactie={documentComponent.wijzigactie}\r\n        recursiveToggle={this.recursiveToggleState(documentComponent)}\r\n        onDsoRecursiveToggle={(e) => this.handleRecursiveToggle(documentComponent, e.detail)}\r\n        mode={this.mode}\r\n        href={this.mode === \"table-of-contents\" ? \"/document/\" + documentComponent.documentTechnischId : undefined}\r\n        onDsoTableOfContentsClick={(e) => this.handleTableOfContentsClick(e)}\r\n      >\r\n        {this.isOpenedAnnotation(documentComponent) && (\r\n          <div slot=\"annotations\">\r\n            <dso-annotation-locatie\r\n              active={this.isCheckedSlideToggle(documentComponent)}\r\n              gewijzigde-locatie\r\n              locatieNoemer={\"Winkelgebied\"}\r\n              onDsoActiveChange={() => this.handleSelectableChange(documentComponent)}\r\n            >\r\n              <span class=\"symboolcode\" slot=\"symbool\" data-symboolcode=\"vszt030\"></span>\r\n            </dso-annotation-locatie>\r\n          </div>\r\n        )}\r\n        {this.showContent(documentComponent) && embeddedDocuments?.documentComponents.length && (\r\n          <ul class=\"dso-document-component-list\">\r\n            {embeddedDocuments.documentComponents.map((d) => (\r\n              <li key={d.documentTechnischId}>\r\n                <DocumentComponent path={[...path, d]} />\r\n              </li>\r\n            ))}\r\n          </ul>\r\n        )}\r\n      </dso-document-component>\r\n    );\r\n  };\r\n\r\n  render() {\r\n    const { DocumentComponent, MenuButton } = this;\r\n\r\n    return (\r\n      <dso-responsive-element class=\"dso-document-components\">\r\n        <div class=\"dso-navbar\">\r\n          <ul class=\"dso-nav dso-nav-sub\">\r\n            {this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((d) => (\r\n              <li class={this.document === d ? \"dso-active\" : undefined}>\r\n                <MenuButton documentComponent={d} />\r\n              </li>\r\n            ))}\r\n          </ul>\r\n        </div>\r\n        {this.document && <DocumentComponent path={[this.document]} />}\r\n      </dso-responsive-element>\r\n    );\r\n  }\r\n\r\n  private MenuButton = ({ documentComponent }: MenuItemProps) => {\r\n    const { labelXml, nummerXml, type } = documentComponent;\r\n\r\n    return (\r\n      <button type=\"button\" onClick={() => (this.document = documentComponent)}>\r\n        {!labelXml && !nummerXml ? (\r\n          <span>\r\n            <i>{type}</i>\r\n          </span>\r\n        ) : (\r\n          <>\r\n            {labelXml && (\r\n              <>\r\n                <dso-ozon-content content={labelXml} inline></dso-ozon-content>\r\n              </>\r\n            )}\r\n            {nummerXml && (\r\n              <>\r\n                {\" \"}\r\n                <dso-ozon-content content={nummerXml} inline></dso-ozon-content>\r\n              </>\r\n            )}\r\n          </>\r\n        )}\r\n      </button>\r\n    );\r\n  };\r\n}\r\n\r\ninterface MenuItemProps {\r\n  documentComponent: DocumentComponent;\r\n}\r\n\r\ninterface DocumentComponentProps {\r\n  path: DocumentComponent[];\r\n}\r\n"]}