@dso-toolkit/core 62.18.0 → 62.20.0

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

@@ -2,282 +2,282 @@ 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 }) => {
-      const documentComponent = path.at(-1);
-      if (!documentComponent) {
-        return h(Fragment, null);
-      }
-      const { DocumentComponent } = this;
-      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 = [];
-    this.notApplicable = [];
-    this.activeAnnotationSelectables = [];
-  }
-  async jsonFileWatcher() {
-    this.openOrClosed = [];
-    await this.loadData();
-  }
-  async openDefaultWatcher() {
-    this.openOrClosed = [];
-    await this.loadData();
-  }
-  async componentDidLoad() {
-    await this.loadData();
-  }
-  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,
-      };
+    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 }) => {
+            const documentComponent = path.at(-1);
+            if (!documentComponent) {
+                return h(Fragment, null);
+            }
+            const { DocumentComponent } = this;
+            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", { class: "dso-document-component-list" }, 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 = [];
+        this.notApplicable = [];
+        this.activeAnnotationSelectables = [];
+    }
+    async jsonFileWatcher() {
+        this.openOrClosed = [];
+        await this.loadData();
     }
-    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,
-      };
+    async openDefaultWatcher() {
+        this.openOrClosed = [];
+        await this.loadData();
+    }
+    async componentDidLoad() {
+        await this.loadData();
+    }
+    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;
     }
-    return undefined;
-  }
-  concatEmbeddedDocumentComponents(documentComponent) {
-    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));
+    concatEmbeddedDocumentComponents(documentComponent) {
+        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));
+        }
+        return embeddedDocuments;
     }
-    return embeddedDocuments;
-  }
-  selectRandomDocumentComponents(documentComponent, exclude = []) {
-    const documentComponents = this.concatEmbeddedDocumentComponents(documentComponent).filter((d) => !exclude.includes(d));
-    const size = random(0, Math.floor(documentComponents.length / 10));
-    return sampleSize(documentComponents, size);
-  }
-  async loadData() {
-    var _a, _b;
-    if (!this.jsonFile) {
-      this.response = undefined;
-      this.document = undefined;
-      return;
+    selectRandomDocumentComponents(documentComponent, exclude = []) {
+        const documentComponents = this.concatEmbeddedDocumentComponents(documentComponent).filter((d) => !exclude.includes(d));
+        const size = random(0, Math.floor(documentComponents.length / 10));
+        return sampleSize(documentComponents, size);
     }
-    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);
+    async loadData() {
+        var _a, _b;
+        if (!this.jsonFile) {
+            this.response = undefined;
+            this.document = undefined;
+            return;
+        }
+        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 = [];
+        }
     }
-    else {
-      this.notApplicable = [];
-      this.filtered = [];
+    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];
+        }
     }
-  }
-  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);
+    handleAnnotationToggle(documentComponent) {
+        this.openedAnnotation = this.isOpenedAnnotation(documentComponent)
+            ? this.openedAnnotation.filter((d) => d !== documentComponent)
+            : [...this.openedAnnotation, documentComponent];
+        if (!this.isOpen(documentComponent)) {
+            this.openOrClosed = [...this.openOrClosed, documentComponent];
+        }
     }
-    else if (!isOpenOrClosed && !this.openOrClosed.includes(documentComponent)) {
-      this.openOrClosed = [...this.openOrClosed, documentComponent];
+    handleSelectableChange(documentComponent) {
+        this.activeAnnotationSelectables = this.isCheckedSlideToggle(documentComponent)
+            ? this.activeAnnotationSelectables.filter((d) => d !== documentComponent)
+            : [...this.activeAnnotationSelectables, documentComponent];
     }
-  }
-  handleAnnotationToggle(documentComponent) {
-    this.openedAnnotation = this.isOpenedAnnotation(documentComponent)
-      ? this.openedAnnotation.filter((d) => d !== documentComponent)
-      : [...this.openedAnnotation, documentComponent];
-    if (!this.isOpen(documentComponent)) {
-      this.openOrClosed = [...this.openOrClosed, documentComponent];
+    handleOzonContentAnchorClick(e) {
+        this.dsotOzonContentAnchorClick.emit(e.detail);
     }
-  }
-  handleSelectableChange(documentComponent) {
-    this.activeAnnotationSelectables = this.isCheckedSlideToggle(documentComponent)
-      ? this.activeAnnotationSelectables.filter((d) => d !== documentComponent)
-      : [...this.activeAnnotationSelectables, documentComponent];
-  }
-  handleOzonContentAnchorClick(e) {
-    this.dsotOzonContentAnchorClick.emit(e.detail);
-  }
-  isCheckedSlideToggle(documentComponent) {
-    return this.activeAnnotationSelectables.includes(documentComponent);
-  }
-  hasFilteredChildren(documentComponent) {
-    var _a, _b;
-    return (this.filtered.includes(documentComponent) ||
-      ((_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
-      ? !this.openOrClosed.includes(documentComponent)
-      : this.openOrClosed.includes(documentComponent);
-  }
-  isOpenedAnnotation(documentComponent) {
-    return this.openedAnnotation.includes(documentComponent);
-  }
-  isFiltered(documentComponent) {
-    return this.filtered.includes(documentComponent);
-  }
-  isNotApplicable(documentComponent) {
-    return this.notApplicable.includes(documentComponent);
-  }
-  hasNestedDraft(documentComponent) {
-    var _a, _b;
-    return ((_b = (_a = 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.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;
+    isCheckedSlideToggle(documentComponent) {
+        return this.activeAnnotationSelectables.includes(documentComponent);
     }
-    return embeddedDocuments.documentComponents.every((d) => this.isOpen(d));
-  }
-  render() {
-    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"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["document-component.demo.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["document-component.demo.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "showCanvas": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Show canvas to where Document Component extends."
-        },
-        "attribute": "show-canvas",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "jsonFile": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Name of the file to load."
-        },
-        "attribute": "json-file",
-        "reflect": false
-      },
-      "openDefault": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The default state for all Document Components."
-        },
-        "attribute": "open-default",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "response": {},
-      "document": {},
-      "openOrClosed": {},
-      "openedAnnotation": {},
-      "filtered": {},
-      "notApplicable": {},
-      "activeAnnotationSelectables": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "dsotOzonContentAnchorClick",
-        "name": "dsotOzonContentAnchorClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "To demo user interacting with IntRef or IntIoRef elements."
-        },
-        "complexType": {
-          "original": "DocumentComponentOzonContentAnchorClickEvent",
-          "resolved": "DocumentComponentOzonContentAnchorClickEvent",
-          "references": {
-            "DocumentComponentOzonContentAnchorClickEvent": {
-              "location": "import",
-              "path": "../document-component/document-component.models",
-              "id": "src/components/document-component/document-component.models.ts::DocumentComponentOzonContentAnchorClickEvent"
-            }
-          }
+    hasFilteredChildren(documentComponent) {
+        var _a, _b;
+        return (this.filtered.includes(documentComponent) ||
+            ((_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
+            ? !this.openOrClosed.includes(documentComponent)
+            : this.openOrClosed.includes(documentComponent);
+    }
+    isOpenedAnnotation(documentComponent) {
+        return this.openedAnnotation.includes(documentComponent);
+    }
+    isFiltered(documentComponent) {
+        return this.filtered.includes(documentComponent);
+    }
+    isNotApplicable(documentComponent) {
+        return this.notApplicable.includes(documentComponent);
+    }
+    hasNestedDraft(documentComponent) {
+        var _a, _b;
+        return ((_b = (_a = 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.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;
         }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "jsonFile",
-        "methodName": "jsonFileWatcher"
-      }, {
-        "propName": "openDefault",
-        "methodName": "openDefaultWatcher"
-      }];
-  }
+        return embeddedDocuments.documentComponents.every((d) => this.isOpen(d));
+    }
+    render() {
+        var _a, _b;
+        const { DocumentComponent, MenuButton } = this;
+        return (h("dso-responsive-element", { key: '594b7e40f33534d158c7e8e8f436f8ebadf20cfb', class: "dso-document-components" }, h("div", { key: 'f5d68621dd35ceae0d7f60d2b92495f60c8b44e8', class: "dso-navbar" }, h("ul", { key: '720243838067818c52eb682d04e76803757ebe72', 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, { key: '1518c7a6344005e98c6aee5b7ee574a354280a6e', path: [this.document] })));
+    }
+    static get is() { return "dsot-document-component-demo"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["document-component.demo.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["document-component.demo.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "showCanvas": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show canvas to where Document Component extends."
+                },
+                "attribute": "show-canvas",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "jsonFile": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the file to load."
+                },
+                "attribute": "json-file",
+                "reflect": false
+            },
+            "openDefault": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The default state for all Document Components."
+                },
+                "attribute": "open-default",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "response": {},
+            "document": {},
+            "openOrClosed": {},
+            "openedAnnotation": {},
+            "filtered": {},
+            "notApplicable": {},
+            "activeAnnotationSelectables": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsotOzonContentAnchorClick",
+                "name": "dsotOzonContentAnchorClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "To demo user interacting with IntRef or IntIoRef elements."
+                },
+                "complexType": {
+                    "original": "DocumentComponentOzonContentAnchorClickEvent",
+                    "resolved": "DocumentComponentOzonContentAnchorClickEvent",
+                    "references": {
+                        "DocumentComponentOzonContentAnchorClickEvent": {
+                            "location": "import",
+                            "path": "../document-component/document-component.models",
+                            "id": "src/components/document-component/document-component.models.ts::DocumentComponentOzonContentAnchorClickEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "jsonFile",
+                "methodName": "jsonFileWatcher"
+            }, {
+                "propName": "openDefault",
+                "methodName": "openDefaultWatcher"
+            }];
+    }
 }
 //# sourceMappingURL=document-component.demo.js.map