@dso-toolkit/core 62.3.3 → 62.5.0-ghi-2448.0

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

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { c as commonjsGlobal, d as defineCustomElement$6 } from './ozon-content.js';
 import { d as defineCustomElement$f } from './alert.js';
 import { d as defineCustomElement$e } from './annotation-button.js';
@@ -1639,17 +1639,35 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
     super();
     this.__registerHost();
     this.dsotOzonContentAnchorClick = createEvent(this, "dsotOzonContentAnchorClick", 7);
+    this.handleRecursiveToggle = (documentComponent, detail) => {
+      const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);
+      if (!embeddedDocuments) {
+        return;
+      }
+      for (const d of embeddedDocuments.documentComponents) {
+        this.handleOpenToggle(d, detail.next);
+      }
+    };
     this.DocumentComponent = ({ path }) => {
-      var _a;
       const documentComponent = path.at(-1);
+      if (!documentComponent) {
+        return h(Fragment, null);
+      }
       const { DocumentComponent } = this;
-      return (h("ul", null, documentComponent &&
-        ((_a = this.getEmbeddedDocumentComponents(documentComponent)) === null || _a === void 0 ? void 0 : _a.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), onDsoOzonContentAnchorClick: (e) => this.handleOzonContentAnchorClick(e), 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] }))))))));
+      const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);
+      return (h("dso-document-component", { annotated: documentComponent.volgordeNummer % 4 === 2, bevatOntwerpInformatie: !!documentComponent.bevatOntwerpInformatie, filtered: this.isOpen(documentComponent)
+          ? this.isFiltered(documentComponent)
+          : this.hasFilteredChildren(documentComponent), genesteOntwerpInformatie: this.hasNestedDraft(documentComponent), gereserveerd: documentComponent.gereserveerd, heading: "h2", inhoud: documentComponent.inhoud, label: documentComponent.labelXml, openAnnotation: this.isOpenedAnnotation(documentComponent), notApplicable: this.isNotApplicable(documentComponent) || path.some((p) => this.isNotApplicable(p)), nummer: documentComponent.nummerXml, onDsoAnnotationToggle: () => this.handleAnnotationToggle(documentComponent), onDsoOpenToggle: () => this.handleOpenToggle(documentComponent), onDsoOzonContentAnchorClick: (e) => this.handleOzonContentAnchorClick(e), open: this.isOpen(documentComponent), opschrift: documentComponent.opschrift, type: documentComponent.type, vervallen: documentComponent.vervallen, wijzigactie: documentComponent.wijzigactie, recursiveToggle: this.recursiveToggleState(documentComponent), onDsoRecursiveToggle: (e) => this.handleRecursiveToggle(documentComponent, e.detail) }, this.isOpenedAnnotation(documentComponent) && (h("dso-annotation-output", { slot: "annotation", open: true, identifier: "test", onDsoClose: () => this.handleAnnotationToggle(documentComponent) }, h("span", { slot: "title" }, "Annotaties"), h("dso-slide-toggle", { checked: this.isCheckedSlideToggle(documentComponent), onDsoActiveChange: () => this.handleSelectableChange(documentComponent) }, "Delfzijl"))), this.showContent(documentComponent) && (embeddedDocuments === null || embeddedDocuments === void 0 ? void 0 : embeddedDocuments.documentComponents.length) && (h("ul", null, embeddedDocuments.documentComponents.map((d) => (h("li", { key: d.documentTechnischId }, h(DocumentComponent, { path: [...path, d] }))))))));
+    };
+    this.MenuButton = ({ documentComponent }) => {
+      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.response = undefined;
+    this.document = undefined;
     this.openOrClosed = [];
     this.openedAnnotation = [];
     this.filtered = [];
@@ -1667,13 +1685,25 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
   async componentDidLoad() {
     await this.loadData();
   }
-  getEmbeddedDocumentComponents(documentComponent) {
-    var _a, _b, _c;
-    return ((_b = (_a = documentComponent === null || documentComponent === void 0 ? void 0 : documentComponent._embedded) === null || _a === void 0 ? void 0 : _a.ontwerpTekststructuurDocumentComponenten) !== null && _b !== void 0 ? _b : (_c = documentComponent === null || documentComponent === void 0 ? void 0 : documentComponent._embedded) === null || _c === void 0 ? void 0 : _c.tekststructuurDocumentComponenten);
+  getEmbeddedDocumentComponents(documentEmbedded) {
+    var _a, _b;
+    if ((_a = documentEmbedded === null || documentEmbedded === void 0 ? void 0 : documentEmbedded._embedded) === null || _a === void 0 ? void 0 : _a.ontwerpTekststructuurDocumentComponenten) {
+      return {
+        documentComponents: documentEmbedded._embedded.ontwerpTekststructuurDocumentComponenten,
+        ontwerp: true,
+      };
+    }
+    if ((_b = documentEmbedded === null || documentEmbedded === void 0 ? void 0 : documentEmbedded._embedded) === null || _b === void 0 ? void 0 : _b.tekststructuurDocumentComponenten) {
+      return {
+        documentComponents: documentEmbedded._embedded.tekststructuurDocumentComponenten,
+        ontwerp: false,
+      };
+    }
+    return undefined;
   }
   concatEmbeddedDocumentComponents(documentComponent) {
-    var _a;
-    const embeddedDocuments = [...((_a = this.getEmbeddedDocumentComponents(documentComponent)) !== null && _a !== void 0 ? _a : [])];
+    var _a, _b;
+    const embeddedDocuments = [...((_b = (_a = this.getEmbeddedDocumentComponents(documentComponent)) === null || _a === void 0 ? void 0 : _a.documentComponents) !== null && _b !== void 0 ? _b : [])];
     for (const d of embeddedDocuments) {
       embeddedDocuments.push(...this.concatEmbeddedDocumentComponents(d));
     }
@@ -1685,24 +1715,31 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
     return lodash_samplesize(documentComponents, size);
   }
   async loadData() {
-    var _a;
+    var _a, _b;
     if (!this.jsonFile) {
       this.response = undefined;
+      this.document = undefined;
       return;
     }
-    const data = await fetch(this.jsonFile).then((r) => r.json());
-    const lichaam = (_a = this.getEmbeddedDocumentComponents(data)) === null || _a === void 0 ? void 0 : _a.find((documentComponent) => documentComponent.type === "LICHAAM");
-    if (lichaam) {
-      this.response = lichaam;
-      this.notApplicable = this.selectRandomDocumentComponents(lichaam);
-      this.filtered = this.selectRandomDocumentComponents(lichaam, this.notApplicable);
+    this.response = await fetch(this.jsonFile).then((r) => r.json());
+    this.document = (_a = this.getEmbeddedDocumentComponents(this.response)) === null || _a === void 0 ? void 0 : _a.documentComponents[0];
+    if (((_b = this.document) === null || _b === void 0 ? void 0 : _b.type) === "LICHAAM") {
+      this.notApplicable = this.selectRandomDocumentComponents(this.document);
+      this.filtered = this.selectRandomDocumentComponents(this.document, this.notApplicable);
+    }
+    else {
+      this.notApplicable = [];
+      this.filtered = [];
     }
   }
-  handleOpenToggle(_e, documentComponent) {
-    const isOpenOrClosed = this.openOrClosed.includes(documentComponent);
-    this.openOrClosed = !isOpenOrClosed
-      ? [...this.openOrClosed, documentComponent]
-      : this.openOrClosed.filter((d) => d !== documentComponent);
+  handleOpenToggle(documentComponent, force) {
+    const isOpenOrClosed = typeof force === "boolean" ? force : this.openOrClosed.includes(documentComponent);
+    if (isOpenOrClosed && this.openOrClosed.includes(documentComponent)) {
+      this.openOrClosed = this.openOrClosed.filter((d) => d !== documentComponent);
+    }
+    else if (!isOpenOrClosed && !this.openOrClosed.includes(documentComponent)) {
+      this.openOrClosed = [...this.openOrClosed, documentComponent];
+    }
   }
   handleAnnotationToggle(documentComponent) {
     this.openedAnnotation = this.isOpenedAnnotation(documentComponent)
@@ -1726,7 +1763,7 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
   hasFilteredChildren(documentComponent) {
     var _a, _b;
     return (this.filtered.includes(documentComponent) ||
-      ((_b = (_a = this.getEmbeddedDocumentComponents(documentComponent)) === null || _a === void 0 ? void 0 : _a.some((d) => this.hasFilteredChildren(d))) !== null && _b !== void 0 ? _b : false));
+      ((_b = (_a = this.getEmbeddedDocumentComponents(documentComponent)) === null || _a === void 0 ? void 0 : _a.documentComponents.some((d) => this.hasFilteredChildren(d))) !== null && _b !== void 0 ? _b : false));
   }
   isOpen(documentComponent) {
     return documentComponent.type === "LID" || this.openDefault
@@ -1744,16 +1781,26 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
   }
   hasNestedDraft(documentComponent) {
     var _a, _b;
-    return ((_b = (_a = this.getEmbeddedDocumentComponents(documentComponent)) === null || _a === void 0 ? void 0 : _a.some((d) => !!d.bevatOntwerpInformatie || this.hasNestedDraft(d))) !== null && _b !== void 0 ? _b : false);
+    return ((_b = (_a = this.getEmbeddedDocumentComponents(documentComponent)) === null || _a === void 0 ? void 0 : _a.documentComponents.some((d) => !!d.bevatOntwerpInformatie || this.hasNestedDraft(d))) !== null && _b !== void 0 ? _b : false);
   }
   showContent(documentComponent) {
     var _a;
     return (this.isOpen(documentComponent) &&
-      !!(((_a = this.getEmbeddedDocumentComponents(documentComponent)) === null || _a === void 0 ? void 0 : _a.length) || documentComponent.inhoud));
+      !!(((_a = this.getEmbeddedDocumentComponents(documentComponent)) === null || _a === void 0 ? void 0 : _a.documentComponents.length) || documentComponent.inhoud));
+  }
+  recursiveToggleState(documentComponent) {
+    const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);
+    if (!embeddedDocuments ||
+      embeddedDocuments.documentComponents.length <= 1 ||
+      !embeddedDocuments.documentComponents.some((d) => d.type === "ARTIKEL")) {
+      return undefined;
+    }
+    return embeddedDocuments.documentComponents.every((d) => this.isOpen(d));
   }
   render() {
-    const { DocumentComponent } = this;
-    return (h("dso-responsive-element", { class: "dso-document-components" }, this.response && h(DocumentComponent, { path: [this.response] })));
+    var _a, _b;
+    const { DocumentComponent, MenuButton } = this;
+    return (h("dso-responsive-element", { class: "dso-document-components" }, h("div", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-sub" }, (_b = (_a = this.getEmbeddedDocumentComponents(this.response)) === null || _a === void 0 ? void 0 : _a.documentComponents) === null || _b === void 0 ? void 0 : _b.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { path: [this.document] })));
   }
   static get watchers() { return {
     "jsonFile": ["jsonFileWatcher"],
@@ -1765,11 +1812,15 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
     "jsonFile": [1, "json-file"],
     "openDefault": [4, "open-default"],
     "response": [32],
+    "document": [32],
     "openOrClosed": [32],
     "openedAnnotation": [32],
     "filtered": [32],
     "notApplicable": [32],
     "activeAnnotationSelectables": [32]
+  }, undefined, {
+    "jsonFile": ["jsonFileWatcher"],
+    "openDefault": ["openDefaultWatcher"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {