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

@dso-toolkit/core 62.5.0 → 62.6.0

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

Files changed (58) hide show

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

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

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

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

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

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

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

@@ -1,19 +1,37 @@
-import { h } from "@stencil/core";
+import { h, Fragment } from "@stencil/core";
 import sampleSize from "lodash.samplesize";
 import random from "lodash.random";
 export class DocumentComponentDemo {
   constructor() {
+    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 = [];
@@ -31,13 +49,25 @@ export class DocumentComponentDemo {
   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));
     }
@@ -49,24 +79,31 @@ export class DocumentComponentDemo {
     return 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)
@@ -90,7 +127,7 @@ export class DocumentComponentDemo {
   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
@@ -108,16 +145,26 @@ export class DocumentComponentDemo {
   }
   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 is() { return "dsot-document-component-demo"; }
   static get encapsulation() { return "scoped"; }
@@ -191,6 +238,7 @@ export class DocumentComponentDemo {
   static get states() {
     return {
       "response": {},
+      "document": {},
       "openOrClosed": {},
       "openedAnnotation": {},
       "filtered": {},

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

	@@ -1 +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 } from \"@stencil/core\";\r\nimport sampleSize from \"lodash.samplesize\";\r\nimport random from \"lodash.random\";\r\n\r\nimport {\r\n DocumentComponentOzonContentAnchorClickEvent,\r\n DocumentComponentOpenToggleEvent,\r\n} from \"../document-component/document-component.models\";\r\nimport { 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 tekststructuurDocumentComponenten?: DocumentComponent[];\r\n };\r\n}\r\n\r\n@Component({\r\n tag: \"dsot-document-component-demo\",\r\n scoped: true,\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 To demo user interacting with IntRef or IntIoRef elements.\r\n */\r\n @Event()\r\n dsotOzonContentAnchorClick!: EventEmitter<DocumentComponentOzonContentAnchorClickEvent>;\r\n\r\n @State()\r\n response?: 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(documentComponent: DocumentComponent \| undefined) {\r\n return (\r\n documentComponent?._embedded?.ontwerpTekststructuurDocumentComponenten ??\r\n documentComponent?._embedded?.tekststructuurDocumentComponenten\r\n );\r\n }\r\n\r\n private concatEmbeddedDocumentComponents(documentComponent: DocumentComponent): DocumentComponent[] {\r\n const embeddedDocuments = [...(this.getEmbeddedDocumentComponents(documentComponent) ?? [])];\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\r\n return;\r\n }\r\n\r\n const data = await fetch(this.jsonFile).then((r) => r.json());\r\n const lichaam = this.getEmbeddedDocumentComponents(data)?.find(\r\n (documentComponent) => documentComponent.type === \"LICHAAM\",\r\n );\r\n\r\n if (lichaam) {\r\n this.response = lichaam;\r\n\r\n this.notApplicable = this.selectRandomDocumentComponents(lichaam);\r\n this.filtered = this.selectRandomDocumentComponents(lichaam, this.notApplicable);\r\n }\r\n }\r\n\r\n private handleOpenToggle(\r\n _e: DsoDocumentComponentCustomEvent<DocumentComponentOpenToggleEvent>,\r\n documentComponent: DocumentComponent,\r\n ) {\r\n const isOpenOrClosed = this.openOrClosed.includes(documentComponent);\r\n\r\n this.openOrClosed = !isOpenOrClosed\r\n ? [...this.openOrClosed, documentComponent]\r\n : this.openOrClosed.filter((d) => d !== documentComponent);\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 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)?.some((d) => this.hasFilteredChildren(d)) ?? 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)?.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)?.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 &&\r\n this.getEmbeddedDocumentComponents(documentComponent)?.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 onDsoOzonContentAnchorClick={(e) => this.handleOzonContentAnchorClick(e)}\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 <dso-responsive-element class=\"dso-document-components\">\r\n {this.response && <DocumentComponent path={[this.response]} />}\r\n </dso-responsive-element>\r\n );\r\n }\r\n}\r\n\r\ninterface DocumentComponentProps {\r\n path: DocumentComponent[];\r\n}\r\n"]}
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 DocumentComponentOzonContentAnchorClickEvent,\r\n DocumentComponentRecursiveToggleEvent,\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?: \"voegtoe\" \| \"verwijder\" \| \"nieuweContainer\" \| \"verwijderContainer\";\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 To demo user interacting with IntRef or IntIoRef elements.\r\n */\r\n @Event()\r\n dsotOzonContentAnchorClick!: EventEmitter<DocumentComponentOzonContentAnchorClickEvent>;\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 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 DocumentComponent = ({ path }: DocumentComponentProps) => {\r\n const documentComponent = path.at(-1);\r\n if (!documentComponent) {\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={documentComponent.volgordeNummer % 4 === 2}\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 >\r\n {this.isOpenedAnnotation(documentComponent) && (\r\n <dso-annotation-output\r\n slot=\"annotation\"\r\n open\r\n identifier=\"test\"\r\n onDsoClose={() => this.handleAnnotationToggle(documentComponent)}\r\n >\r\n <span slot=\"title\">Annotaties</span>\r\n <dso-slide-toggle\r\n checked={this.isCheckedSlideToggle(documentComponent)}\r\n onDsoActiveChange={() => this.handleSelectableChange(documentComponent)}\r\n >\r\n Delfzijl\r\n </dso-slide-toggle>\r\n </dso-annotation-output>\r\n )}\r\n {this.showContent(documentComponent) && embeddedDocuments?.documentComponents.length && (\r\n <ul>\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"]}

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

@@ -15,6 +15,7 @@ export class Selectable {
         originalEvent: e,
         checked: target instanceof HTMLInputElement && target.checked,
       });
+      forceUpdate(this.host);
     };
     this.type = undefined;
     this.identifier = undefined;
@@ -64,6 +65,11 @@ export class Selectable {
     const hasInfo = !!this.host.querySelector('[slot="info"]');
     return (h(Fragment, null, h("div", { class: "dso-selectable-container" }, h("div", { class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", null, h("slot", { name: "info" })))), h("slot", { name: "options" })));
   }
+  componentDidRender() {
+    if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {
+      this.input.checked = this.checked;
+    }
+  }
   getIdentifier() {
     var _a;
     return (_a = this.identifier) !== null && _a !== void 0 ? _a : this.fallbackIdentifier;
@@ -250,7 +256,7 @@ export class Selectable {
           "text": "Mark the Selectable as checked"
         },
         "attribute": "checked",
-        "reflect": false
+        "reflect": true
       },
       "indeterminate": {
         "type": "boolean",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"selectable.js","sourceRoot":"","sources":["../../../src/components/selectable/selectable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,CAAC,EACD,SAAS,EACT,IAAI,EACJ,KAAK,EAEL,QAAQ,EACR,OAAO,EACP,KAAK,EACL,WAAW,EACX,KAAK,EACL,MAAM,~~GACP~~,MAAM,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAGjE;;;;GAIG;AAMH,MAAM,OAAO,UAAU;;IA0Gb,uBAAkB,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAIvD,mBAAc,GAAG,CAAC,CAAQ,EAAE,EAAE;MACpC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;MAErB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,aAAa,EAAE,CAAC;QAChB,OAAO,EAAE,MAAM,YAAY,gBAAgB,IAAI,MAAM,CAAC,OAAO;OAC9D,CAAC,CAAC;~~IACL~~,CAAC,CAAC;;;;;;;;;;;;;~~sBA7BW~~,KAAK;yBAGF,KAAK;;EAErB;;;;;KAKG;EAEH,KAAK,CAAC,UAAU,CAAC,MAAgB;IAC/B,IAAI,CAAC,UAAU,GAAG,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,CAAC,IAAI,CAAC,UAAU,CAAC;EAC/C,CAAC;~~EAiBD~~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","sourcesContent":["import {\r\n h,\r\n Component,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Element,\r\n State,\r\n forceUpdate,\r\n Watch,\r\n Method,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n/*\r\n @slot - The label for this control\r\n * @slot info - Rich Content to be slotted in Info.\r\n * @slot options - for further nested selectable options: `<ul class=\"dso-selectable-options\" slot=\"options\">` and wrap each Selectable in a `<li>`.\r\n /\r\n@Component({\r\n tag: \"dso-selectable\",\r\n styleUrl: \"selectable.scss\",\r\n scoped: true,\r\n})\r\nexport class Selectable {\r\n /\r\n Type of Selectable.\r\n \r\n `checkbox`: Multiple options\r\n * `radio`: Single option.\r\n /\r\n @Prop()\r\n type!: \"checkbox\" \| \"radio\";\r\n\r\n /\r\n To set `<input id>` attribute for external references.\r\n /\r\n @Prop()\r\n identifier?: string;\r\n\r\n /\r\n Name of the Selectable. Can be used to group Selectables.\r\n /\r\n @Prop()\r\n name?: string;\r\n\r\n /\r\n The value of the Selectable.\r\n /\r\n @Prop()\r\n value!: string;\r\n\r\n /\r\n Set to true of the current value is not valid.\r\n /\r\n @Prop()\r\n invalid?: boolean;\r\n\r\n /\r\n To link this control to an element that describes it.\r\n /\r\n @Prop()\r\n describedById?: string;\r\n\r\n /\r\n To link this control to an element that labels it.\r\n /\r\n @Prop()\r\n labelledById?: string;\r\n\r\n /\r\n To disable the Selectable.\r\n /\r\n @Prop()\r\n disabled?: boolean;\r\n\r\n /\r\n To mark the Selectable as required.\r\n /\r\n @Prop()\r\n required?: boolean;\r\n\r\n /\r\n Mark the Selectable as checked\r\n /\r\n @Prop()\r\n checked?: boolean;\r\n\r\n /\r\n An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n \r\n Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n /\r\n @Prop()\r\n indeterminate?: boolean;\r\n\r\n /\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop()\r\n infoFixed?: boolean;\r\n\r\n /\r\n Emitted when the user checks or unchecks the Selectable.\r\n /\r\n @Event()\r\n dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoSelectableElement;\r\n\r\n @State()\r\n infoActive = false;\r\n\r\n @State()\r\n keyboardFocus = false;\r\n\r\n /\r\n Method to toggle the Info. Is set to `active` when passed.\r\n \r\n If `active` is not passed, Info is toggled to opposite value.\r\n * @param active\r\n */\r\n @Method()\r\n async toggleInfo(active?: boolean) {\r\n this.infoActive = active ?? !this.infoActive;\r\n }\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n private input: HTMLInputElement \| undefined;\r\n\r\n private handleOnChange = (e: Event) => {\r\n const { target } = e;\r\n\r\n this.dsoChange.emit({\r\n originalEvent: e,\r\n checked: target instanceof HTMLInputElement && target.checked,\r\n });\r\n };\r\n\r\n componentDidLoad() {\r\n this.mutationObserver?.disconnect();\r\n\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n this.mutationObserver.observe(this.host, {\r\n childList: true,\r\n });\r\n\r\n this.setIndeterminate();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n @Watch(\"indeterminate\")\r\n setIndeterminate() {\r\n if (!(this.input instanceof HTMLInputElement) \|\| this.type !== \"checkbox\") {\r\n return;\r\n }\r\n\r\n this.input.indeterminate = !!this.indeterminate;\r\n }\r\n\r\n render() {\r\n const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n return (\r\n <Fragment>\r\n <div class=\"dso-selectable-container\">\r\n <div class={clsx(\"dso-selectable-input-wrapper\", { \"dso-keyboard-focus\": this.keyboardFocus })}>\r\n <input\r\n type={this.type}\r\n id={this.getIdentifier()}\r\n value={this.value}\r\n name={this.name}\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n aria-labelledBy={this.labelledById}\r\n disabled={this.disabled}\r\n required={this.required}\r\n checked={this.checked}\r\n onChange={this.handleOnChange}\r\n onBlur={() => (this.keyboardFocus = false)}\r\n onKeyUp={() => (this.keyboardFocus = true)}\r\n ref={(el) => (this.input = el)}\r\n />\r\n {!this.labelledById ? (\r\n <label htmlFor={this.getIdentifier()}>\r\n <slot />\r\n </label>\r\n ) : (\r\n <label>\r\n <slot />\r\n </label>\r\n )}\r\n </div>\r\n {hasInfo && !this.infoFixed && (\r\n <dso-info-button\r\n active={this.infoActive}\r\n onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n ></dso-info-button>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <dso-info\r\n id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n fixed={this.infoFixed}\r\n active={this.infoActive}\r\n onDsoClose={() => (this.infoActive = false)}\r\n >\r\n <div>\r\n <slot name=\"info\"></slot>\r\n </div>\r\n </dso-info>\r\n )}\r\n <slot name=\"options\" />\r\n </Fragment>\r\n );\r\n }\r\n\r\n private getIdentifier(): string {\r\n return this.identifier ?? this.fallbackIdentifier;\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"selectable.js","sourceRoot":"","sources":["../../../src/components/selectable/selectable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n h,\r\n Component,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Element,\r\n State,\r\n forceUpdate,\r\n Watch,\r\n Method,\r\n ComponentInterface,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n/*\r\n @slot - The label for this control\r\n * @slot info - Rich Content to be slotted in Info.\r\n * @slot options - for further nested selectable options: `<ul class=\"dso-selectable-options\" slot=\"options\">` and wrap each Selectable in a `<li>`.\r\n /\r\n@Component({\r\n tag: \"dso-selectable\",\r\n styleUrl: \"selectable.scss\",\r\n scoped: true,\r\n})\r\nexport class Selectable implements ComponentInterface {\r\n /\r\n Type of Selectable.\r\n \r\n `checkbox`: Multiple options\r\n * `radio`: Single option.\r\n /\r\n @Prop()\r\n type!: \"checkbox\" \| \"radio\";\r\n\r\n /\r\n To set `<input id>` attribute for external references.\r\n /\r\n @Prop()\r\n identifier?: string;\r\n\r\n /\r\n Name of the Selectable. Can be used to group Selectables.\r\n /\r\n @Prop()\r\n name?: string;\r\n\r\n /\r\n The value of the Selectable.\r\n /\r\n @Prop()\r\n value!: string;\r\n\r\n /\r\n Set to true of the current value is not valid.\r\n /\r\n @Prop()\r\n invalid?: boolean;\r\n\r\n /\r\n To link this control to an element that describes it.\r\n /\r\n @Prop()\r\n describedById?: string;\r\n\r\n /\r\n To link this control to an element that labels it.\r\n /\r\n @Prop()\r\n labelledById?: string;\r\n\r\n /\r\n To disable the Selectable.\r\n /\r\n @Prop()\r\n disabled?: boolean;\r\n\r\n /\r\n To mark the Selectable as required.\r\n /\r\n @Prop()\r\n required?: boolean;\r\n\r\n /\r\n Mark the Selectable as checked\r\n /\r\n @Prop({ reflect: true })\r\n checked?: boolean;\r\n\r\n /\r\n An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n \r\n Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n /\r\n @Prop()\r\n indeterminate?: boolean;\r\n\r\n /\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop()\r\n infoFixed?: boolean;\r\n\r\n /\r\n Emitted when the user checks or unchecks the Selectable.\r\n /\r\n @Event()\r\n dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoSelectableElement;\r\n\r\n @State()\r\n infoActive = false;\r\n\r\n @State()\r\n keyboardFocus = false;\r\n\r\n /\r\n Method to toggle the Info. Is set to `active` when passed.\r\n \r\n If `active` is not passed, Info is toggled to opposite value.\r\n * @param active\r\n */\r\n @Method()\r\n async toggleInfo(active?: boolean) {\r\n this.infoActive = active ?? !this.infoActive;\r\n }\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n private input: HTMLInputElement \| undefined;\r\n\r\n private handleOnChange = (e: Event) => {\r\n const { target } = e;\r\n\r\n this.dsoChange.emit({\r\n originalEvent: e,\r\n checked: target instanceof HTMLInputElement && target.checked,\r\n });\r\n\r\n forceUpdate(this.host);\r\n };\r\n\r\n componentDidLoad() {\r\n this.mutationObserver?.disconnect();\r\n\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n this.mutationObserver.observe(this.host, {\r\n childList: true,\r\n });\r\n\r\n this.setIndeterminate();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n @Watch(\"indeterminate\")\r\n setIndeterminate() {\r\n if (!(this.input instanceof HTMLInputElement) \|\| this.type !== \"checkbox\") {\r\n return;\r\n }\r\n\r\n this.input.indeterminate = !!this.indeterminate;\r\n }\r\n\r\n render() {\r\n const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n return (\r\n <Fragment>\r\n <div class=\"dso-selectable-container\">\r\n <div class={clsx(\"dso-selectable-input-wrapper\", { \"dso-keyboard-focus\": this.keyboardFocus })}>\r\n <input\r\n type={this.type}\r\n id={this.getIdentifier()}\r\n value={this.value}\r\n name={this.name}\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n aria-labelledBy={this.labelledById}\r\n disabled={this.disabled}\r\n required={this.required}\r\n checked={this.checked}\r\n onChange={this.handleOnChange}\r\n onBlur={() => (this.keyboardFocus = false)}\r\n onKeyUp={() => (this.keyboardFocus = true)}\r\n ref={(el) => (this.input = el)}\r\n />\r\n {!this.labelledById ? (\r\n <label htmlFor={this.getIdentifier()}>\r\n <slot />\r\n </label>\r\n ) : (\r\n <label>\r\n <slot />\r\n </label>\r\n )}\r\n </div>\r\n {hasInfo && !this.infoFixed && (\r\n <dso-info-button\r\n active={this.infoActive}\r\n onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n ></dso-info-button>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <dso-info\r\n id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n fixed={this.infoFixed}\r\n active={this.infoActive}\r\n onDsoClose={() => (this.infoActive = false)}\r\n >\r\n <div>\r\n <slot name=\"info\"></slot>\r\n </div>\r\n </dso-info>\r\n )}\r\n <slot name=\"options\" />\r\n </Fragment>\r\n );\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.input && typeof this.checked === \"boolean\" && this.input.checked !== this.checked) {\r\n this.input.checked = this.checked;\r\n }\r\n }\r\n\r\n private getIdentifier(): string {\r\n return this.identifier ?? this.fallbackIdentifier;\r\n }\r\n}\r\n"]}

package/dist/collection/components/viewer-grid/viewer-grid.css CHANGED Viewed

@@ -899,6 +899,10 @@ button::-moz-focus-inner {
     margin-block-end: 0;
     padding-inline-start: 0;
   }
+  .dso-nav > li > button {
+    border: 0;
+    background-color: transparent;
+  }
   .dso-nav > li > a,
   .dso-nav > li > button {
     display: block;