@dso-toolkit/core 55.0.0 → 56.0.0

package/dist/cjs/dsot-document-component-demo.cjs.entry.js

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

package/dist/cjs/dsot-document-component-demo.cjs.entry.js.map

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

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-annotation-output.cjs",[[4,"dso-annotation-output",{"identifier":[1],"annotationPrefix":[1,"annotation-prefix"],"_toggleAnnotation":[64]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section.cjs",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"state":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"status":[1],"open":[516],"hasNestedSection":[32],"hover":[32],"toggleSection":[64],"scrollSectionIntoView":[64]}]]],["dso-expandable-heading.cjs",[[1,"dso-expandable-heading",{"open":[4],"heading":[1],"color":[1],"suppressed":[4],"editAction":[1,"edit-action"]}]]],["dso-header.cjs",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal.cjs",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"returnFocus":[16],"ariaId":[32],"hasFooter":[32]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item.cjs",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-annotation-button.cjs",[[0,"dso-annotation-button",{"identifier":[1]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-table.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"allowMultipleOpen":[516,"allow-multiple-open"],"_getState":[64],"toggleSection":[64],"animationEnd":[64],"closeOpenSections":[64]}]]],["dso-action-list.cjs",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-slide-toggle.cjs",[[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-scrollable.cjs",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]}]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32],"_getAnimeInstance":[64],"_getBodyHeight":[64]}]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]]], options);
+  return index.bootstrapLazy([["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dsot-document-component-demo.cjs",[[0,"dsot-document-component-demo",{"response":[32],"open":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section.cjs",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[32],"hover":[32]}]]],["dso-header.cjs",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal.cjs",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"returnFocus":[16],"ariaId":[32],"hasFooter":[32]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item.cjs",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-table.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]}]]],["dso-action-list.cjs",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-scrollable.cjs",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-alert_5.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]}],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-badge",{"status":[1]}],[1,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-annotation-output_3.cjs",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -1,12 +1,13 @@
 {
   "entries": [
+    "./components/annotation-button/annotation-button.js",
+    "./components/annotation-output/annotation-output.js",
+    "./components/expandable/expandable.js",
     "./components/accordion/accordion.js",
     "./components/accordion/components/accordion-section.js",
     "./components/action-list/action-list.js",
     "./components/action-list/components/action-list-item.js",
     "./components/alert/alert.js",
-    "./components/annotation-button/annotation-button.js",
-    "./components/annotation-output/annotation-output.js",
     "./components/attachments-counter/attachments-counter.js",
     "./components/autosuggest/autosuggest.js",
     "./components/badge/badge.js",
@@ -14,9 +15,9 @@
     "./components/card/card.js",
     "./components/card-container/card-container.js",
     "./components/date-picker/date-picker.js",
+    "./components/document-component/document-component.demo.js",
+    "./components/document-component/document-component.js",
     "./components/dropdown-menu/dropdown-menu.js",
-    "./components/expandable/expandable.js",
-    "./components/expandable-heading/expandable-heading.js",
     "./components/header/header.js",
     "./components/helpcenter-panel/helpcenter-panel.js",
     "./components/highlight-box/highlight-box.js",

package/dist/collection/components/accordion/accordion.interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.interfaces.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export type AccordionVariant = \"default\" | \"compact\" | \"conclusion\" | \"neutral\";\r\n\r\nexport interface AccordionInternalState {\r\n  variant: AccordionVariant;\r\n  reverseAlign: boolean;\r\n  allowMultipleOpen: boolean;\r\n}\r\n\r\nexport interface AccordionSectionToggleEvent {\r\n  /** When the section is toggled by clicking in the header the `MouseEvent` is available. */\r\n  originalEvent?: MouseEvent;\r\n  section: {\r\n    element: HTMLElement;\r\n    open: boolean;\r\n  };\r\n  sections: HTMLElement[];\r\n}\r\n\r\nexport interface AccordionSectionToggleAnimationEndEvent {\r\n  section: {\r\n    element: HTMLElement;\r\n    open: boolean;\r\n  };\r\n}\r\n"]}
+{"version":3,"file":"accordion.interfaces.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export type AccordionVariant = \"default\" | \"compact\" | \"conclusion\" | \"neutral\";\r\n\r\nexport interface AccordionInternalState {\r\n  variant?: AccordionVariant;\r\n  reverseAlign?: boolean;\r\n}\r\n\r\nexport interface AccordionSectionToggleClickEvent {\r\n  /**\r\n   * The original MouseEvent that triggered the click.\r\n   *\r\n   * In case the Section Handle is an <a> this event can be used to preventDefault() so the framework router is reponsible for navigating the user.\r\n   */\r\n  originalEvent?: MouseEvent;\r\n\r\n  /**\r\n   * The requested state. If the Accordion Section is closed, `open = true`.\r\n   */\r\n  open: boolean;\r\n}\r\n\r\nexport interface AccordionSectionAnimationEndEvent {\r\n  /**\r\n   * Helper function to scroll the Accordion Section into view.\r\n   */\r\n  scrollIntoView(): void;\r\n\r\n  /**\r\n   * The state of the Accordion Section after animation.\r\n   */\r\n  open: boolean;\r\n}\r\n"]}

package/dist/collection/components/accordion/accordion.js

@@ -1,127 +1,30 @@
-import { h, Host, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { createStore } from "@stencil/store";
 export class Accordion {
   updateVariant(variant = "default") {
-    this.accordionState.variant = variant || "default";
+    this.accordionState.variant = variant;
   }
   updateReverseAlign(reverseAlign) {
     this.accordionState.reverseAlign = reverseAlign;
   }
-  updateAllowMultipleOpen(allowMultipleOpen) {
-    this.accordionState.allowMultipleOpen = allowMultipleOpen;
-    if (!allowMultipleOpen) {
-      const openSections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section[open]"));
-      // By removing the first section, it is kept open;
-      openSections.shift();
-      openSections.forEach((section) => this.controlOpenAttribute(section, false));
-    }
-  }
   /**
    * @internal
    */
   async _getState() {
     return this.accordionState;
   }
-  /**
-   * Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.
-   * @param sectionElement The section element that needs to toggle
-   * @param event The event that the user triggered
-   * @returns The state of the section
-   */
-  async toggleSection(sectionElement, event) {
-    const sections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section"));
-    if (typeof sectionElement === "number") {
-      const section = sections[sectionElement];
-      if (section instanceof HTMLElement) {
-        sectionElement = section;
-      }
-    }
-    if (!(sectionElement instanceof HTMLElement) || !sections.includes(sectionElement)) {
-      return;
-    }
-    const sectionIsOpen = this.isSectionOpen(sectionElement);
-    if (this.allowMultipleOpen) {
-      this.controlOpenAttribute(sectionElement, !sectionIsOpen);
-      this.emitToggleEvent(sectionElement, sections, event);
-      return !sectionIsOpen;
-    }
-    if (sectionIsOpen) {
-      this.controlOpenAttribute(sectionElement, false);
-      this.emitToggleEvent(sectionElement, sections, event);
-      return false;
-    }
-    await this.closeOpenSections();
-    this.controlOpenAttribute(sectionElement, true);
-    this.emitToggleEvent(sectionElement, sections, event);
-    return true;
-  }
-  /**
-   * Emitted when the animation of opening or closing ends.
-   */
-  async animationEnd(sectionElement) {
-    this.dsoToggleSectionAnimationEnd.emit({
-      section: {
-        element: sectionElement,
-        open: this.isSectionOpen(sectionElement),
-      },
-    });
-  }
-  /**
-   * Closes all sections belonging to this accordion.
-   */
-  async closeOpenSections() {
-    const sections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section"));
-    const openSections = sections.filter((s) => this.isSectionOpen(s));
-    openSections.forEach((section) => this.controlOpenAttribute(section, false));
-  }
-  // These checks are needed for a React timing issue.
   componentWillLoad() {
-    if (this.accordionState.variant !== this.variant) {
-      this.accordionState.variant = this.variant || "default";
-    }
-    if (this.accordionState.reverseAlign !== this.reverseAlign) {
-      this.accordionState.reverseAlign = this.reverseAlign;
-    }
-    if (this.accordionState.allowMultipleOpen !== this.allowMultipleOpen) {
-      this.accordionState.allowMultipleOpen = this.allowMultipleOpen;
-    }
+    this.accordionState.variant = this.variant;
+    this.accordionState.reverseAlign = this.reverseAlign;
   }
   constructor() {
     this.variant = "default";
     this.reverseAlign = false;
-    this.allowMultipleOpen = false;
-    const { state } = createStore({
-      variant: this.variant || "default",
-      reverseAlign: this.reverseAlign,
-      allowMultipleOpen: this.allowMultipleOpen,
-    });
+    const { state } = createStore({});
     this.accordionState = state;
   }
   render() {
-    return (h(Host, { class: {
-        "dso-accordion": true,
-      } }, h("slot", null)));
-  }
-  emitToggleEvent(sectionElement, sections, e) {
-    this.dsoToggleSection.emit({
-      originalEvent: e,
-      section: {
-        element: sectionElement,
-        open: this.isSectionOpen(sectionElement),
-      },
-      sections,
-    });
-  }
-  isSectionOpen(sectionElement) {
-    return typeof sectionElement.getAttribute("open") === "string";
-  }
-  controlOpenAttribute(sectionElement, setAttribute) {
-    if (setAttribute) {
-      sectionElement.setAttribute("open", "");
-    }
-    else {
-      sectionElement.removeAttribute("open");
-    }
+    return (h(Host, { class: "dso-accordion" }, h("slot", null)));
   }
   static get is() { return "dso-accordion"; }
   static get encapsulation() { return "shadow"; }
@@ -142,7 +45,7 @@ export class Accordion {
         "mutable": false,
         "complexType": {
           "original": "AccordionVariant",
-          "resolved": "\"compact\" | \"conclusion\" | \"default\" | \"neutral\" | undefined",
+          "resolved": "\"compact\" | \"conclusion\" | \"default\" | \"neutral\"",
           "references": {
             "AccordionVariant": {
               "location": "import",
@@ -151,7 +54,7 @@ export class Accordion {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "The variant of the Accordion."
@@ -172,75 +75,14 @@ export class Accordion {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements"
+          "text": "Places the chevron at the opposite side.\r\n\r\nNote: this mode does not display `state`, `attachmentCount` or `status` props on Accordion Sections"
         },
         "attribute": "reverse-align",
         "reflect": true,
         "defaultValue": "false"
-      },
-      "allowMultipleOpen": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Allows multiple sections to be open at the same time."
-        },
-        "attribute": "allow-multiple-open",
-        "reflect": true,
-        "defaultValue": "false"
       }
     };
   }
-  static get events() {
-    return [{
-        "method": "dsoToggleSection",
-        "name": "dsoToggleSection",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when a section is toggled.\r\n\r\n`event.detail.originalEvent` contains the original `MouseEvent` when the section is toggled by clicking on the header\r\n`event.detail.section` contains the toggled section and its new opened value.\\\r\n`event.detail.sections` contains all `<dso-accordion-section>` elements belonging to this accordion."
-        },
-        "complexType": {
-          "original": "AccordionSectionToggleEvent",
-          "resolved": "AccordionSectionToggleEvent",
-          "references": {
-            "AccordionSectionToggleEvent": {
-              "location": "import",
-              "path": "./accordion.interfaces"
-            }
-          }
-        }
-      }, {
-        "method": "dsoToggleSectionAnimationEnd",
-        "name": "dsoToggleSectionAnimationEnd",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted when the accordion section completes its toggle animation."
-        },
-        "complexType": {
-          "original": "AccordionSectionToggleAnimationEndEvent",
-          "resolved": "AccordionSectionToggleAnimationEndEvent",
-          "references": {
-            "AccordionSectionToggleAnimationEndEvent": {
-              "location": "import",
-              "path": "./accordion.interfaces"
-            }
-          }
-        }
-      }];
-  }
   static get methods() {
     return {
       "_getState": {
@@ -265,90 +107,6 @@ export class Accordion {
               "text": undefined
             }]
         }
-      },
-      "toggleSection": {
-        "complexType": {
-          "signature": "(sectionElement: HTMLElement | number, event?: MouseEvent) => Promise<undefined | boolean>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "sectionElement The section element that needs to toggle"
-                }],
-              "text": "The section element that needs to toggle"
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "event The event that the user triggered"
-                }],
-              "text": "The event that the user triggered"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "HTMLElement": {
-              "location": "global"
-            },
-            "MouseEvent": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean | undefined>"
-        },
-        "docs": {
-          "text": "Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.",
-          "tags": [{
-              "name": "param",
-              "text": "sectionElement The section element that needs to toggle"
-            }, {
-              "name": "param",
-              "text": "event The event that the user triggered"
-            }, {
-              "name": "returns",
-              "text": "The state of the section"
-            }]
-        }
-      },
-      "animationEnd": {
-        "complexType": {
-          "signature": "(sectionElement: HTMLElement) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "HTMLElement": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Emitted when the animation of opening or closing ends.",
-          "tags": []
-        }
-      },
-      "closeOpenSections": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "HTMLElement": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Closes all sections belonging to this accordion.",
-          "tags": []
-        }
       }
     };
   }
@@ -360,9 +118,6 @@ export class Accordion {
       }, {
         "propName": "reverseAlign",
         "methodName": "updateReverseAlign"
-      }, {
-        "propName": "allowMultipleOpen",
-        "methodName": "updateAllowMultipleOpen"
       }];
   }
 }

package/dist/collection/components/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Prop,\r\n  Host,\r\n  Method,\r\n  Watch,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n} from \"@stencil/core\";\r\n\r\nimport {\r\n  AccordionInternalState,\r\n  AccordionSectionToggleAnimationEndEvent,\r\n  AccordionSectionToggleEvent,\r\n  AccordionVariant,\r\n} from \"./accordion.interfaces\";\r\n\r\nimport { createStore } from \"@stencil/store\";\r\n\r\n@Component({\r\n  tag: \"dso-accordion\",\r\n  styleUrl: \"accordion.scss\",\r\n  shadow: true,\r\n})\r\nexport class Accordion implements ComponentInterface {\r\n  private accordionState: AccordionInternalState;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAccordionElement;\r\n\r\n  /**\r\n   * The variant of the Accordion.\r\n   */\r\n  @Prop({ reflect: true })\r\n  variant?: AccordionVariant = \"default\";\r\n\r\n  /**\r\n   * Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements\r\n   */\r\n  @Prop({ reflect: true })\r\n  reverseAlign = false;\r\n\r\n  /**\r\n   * Allows multiple sections to be open at the same time.\r\n   */\r\n  @Prop({ reflect: true })\r\n  allowMultipleOpen = false;\r\n\r\n  /**\r\n   * Emitted when a section is toggled.\r\n   *\r\n   * `event.detail.originalEvent` contains the original `MouseEvent` when the section is toggled by clicking on the header\r\n   * `event.detail.section` contains the toggled section and its new opened value.\\\r\n   * `event.detail.sections` contains all `<dso-accordion-section>` elements belonging to this accordion.\r\n   */\r\n  @Event()\r\n  dsoToggleSection!: EventEmitter<AccordionSectionToggleEvent>;\r\n\r\n  /**\r\n   * Event emitted when the accordion section completes its toggle animation.\r\n   */\r\n  @Event()\r\n  dsoToggleSectionAnimationEnd!: EventEmitter<AccordionSectionToggleAnimationEndEvent>;\r\n\r\n  @Watch(\"variant\")\r\n  updateVariant(variant: AccordionVariant = \"default\") {\r\n    this.accordionState.variant = variant || \"default\";\r\n  }\r\n\r\n  @Watch(\"reverseAlign\")\r\n  updateReverseAlign(reverseAlign: boolean) {\r\n    this.accordionState.reverseAlign = reverseAlign;\r\n  }\r\n\r\n  @Watch(\"allowMultipleOpen\")\r\n  updateAllowMultipleOpen(allowMultipleOpen: boolean) {\r\n    this.accordionState.allowMultipleOpen = allowMultipleOpen;\r\n\r\n    if (!allowMultipleOpen) {\r\n      const openSections = Array.from(this.host.querySelectorAll<HTMLElement>(\":scope > dso-accordion-section[open]\"));\r\n\r\n      // By removing the first section, it is kept open;\r\n      openSections.shift();\r\n\r\n      openSections.forEach((section) => this.controlOpenAttribute(section, false));\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _getState(): Promise<AccordionInternalState> {\r\n    return this.accordionState;\r\n  }\r\n\r\n  /**\r\n   * Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.\r\n   * @param sectionElement The section element that needs to toggle\r\n   * @param event The event that the user triggered\r\n   * @returns The state of the section\r\n   */\r\n  @Method()\r\n  async toggleSection(sectionElement: HTMLElement | number, event?: MouseEvent): Promise<undefined | boolean> {\r\n    const sections = Array.from(this.host.querySelectorAll<HTMLElement>(\":scope > dso-accordion-section\"));\r\n\r\n    if (typeof sectionElement === \"number\") {\r\n      const section = sections[sectionElement];\r\n      if (section instanceof HTMLElement) {\r\n        sectionElement = section;\r\n      }\r\n    }\r\n\r\n    if (!(sectionElement instanceof HTMLElement) || !sections.includes(sectionElement)) {\r\n      return;\r\n    }\r\n\r\n    const sectionIsOpen = this.isSectionOpen(sectionElement);\r\n\r\n    if (this.allowMultipleOpen) {\r\n      this.controlOpenAttribute(sectionElement, !sectionIsOpen);\r\n      this.emitToggleEvent(sectionElement, sections, event);\r\n      return !sectionIsOpen;\r\n    }\r\n\r\n    if (sectionIsOpen) {\r\n      this.controlOpenAttribute(sectionElement, false);\r\n      this.emitToggleEvent(sectionElement, sections, event);\r\n\r\n      return false;\r\n    }\r\n\r\n    await this.closeOpenSections();\r\n\r\n    this.controlOpenAttribute(sectionElement, true);\r\n    this.emitToggleEvent(sectionElement, sections, event);\r\n\r\n    return true;\r\n  }\r\n\r\n  /**\r\n   * Emitted when the animation of opening or closing ends.\r\n   */\r\n  @Method()\r\n  async animationEnd(sectionElement: HTMLElement): Promise<void> {\r\n    this.dsoToggleSectionAnimationEnd.emit({\r\n      section: {\r\n        element: sectionElement,\r\n        open: this.isSectionOpen(sectionElement),\r\n      },\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Closes all sections belonging to this accordion.\r\n   */\r\n  @Method()\r\n  async closeOpenSections(): Promise<void> {\r\n    const sections = Array.from(this.host.querySelectorAll<HTMLElement>(\":scope > dso-accordion-section\"));\r\n\r\n    const openSections = sections.filter((s) => this.isSectionOpen(s));\r\n    openSections.forEach((section) => this.controlOpenAttribute(section, false));\r\n  }\r\n\r\n  // These checks are needed for a React timing issue.\r\n  componentWillLoad() {\r\n    if (this.accordionState.variant !== this.variant) {\r\n      this.accordionState.variant = this.variant || \"default\";\r\n    }\r\n\r\n    if (this.accordionState.reverseAlign !== this.reverseAlign) {\r\n      this.accordionState.reverseAlign = this.reverseAlign;\r\n    }\r\n\r\n    if (this.accordionState.allowMultipleOpen !== this.allowMultipleOpen) {\r\n      this.accordionState.allowMultipleOpen = this.allowMultipleOpen;\r\n    }\r\n  }\r\n\r\n  constructor() {\r\n    const { state } = createStore<AccordionInternalState>({\r\n      variant: this.variant || \"default\",\r\n      reverseAlign: this.reverseAlign,\r\n      allowMultipleOpen: this.allowMultipleOpen,\r\n    });\r\n\r\n    this.accordionState = state;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={{\r\n          \"dso-accordion\": true,\r\n        }}\r\n      >\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private emitToggleEvent(sectionElement: HTMLElement, sections: HTMLElement[], e?: MouseEvent): void {\r\n    this.dsoToggleSection.emit({\r\n      originalEvent: e,\r\n      section: {\r\n        element: sectionElement,\r\n        open: this.isSectionOpen(sectionElement),\r\n      },\r\n      sections,\r\n    });\r\n  }\r\n\r\n  private isSectionOpen(sectionElement: HTMLElement): boolean {\r\n    return typeof sectionElement.getAttribute(\"open\") === \"string\";\r\n  }\r\n\r\n  private controlOpenAttribute(sectionElement: HTMLElement, setAttribute: boolean): void {\r\n    if (setAttribute) {\r\n      sectionElement.setAttribute(\"open\", \"\");\r\n    } else {\r\n      sectionElement.removeAttribute(\"open\");\r\n    }\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAIrG,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C,MAAM,OAAO,SAAS;EAqBpB,aAAa,CAAC,UAA4B,SAAS;IACjD,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,OAAO,CAAC;EACxC,CAAC;EAGD,kBAAkB,CAAC,YAAqB;IACtC,IAAI,CAAC,cAAc,CAAC,YAAY,GAAG,YAAY,CAAC;EAClD,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,SAAS;IACb,OAAO,IAAI,CAAC,cAAc,CAAC;EAC7B,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IAC3C,IAAI,CAAC,cAAc,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;EACvD,CAAC;EAED;mBAjC4B,SAAS;wBAQtB,KAAK;IA0BlB,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,CAAyB,EAAE,CAAC,CAAC;IAE1D,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;GAC7B;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,eAAe;MACzB,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, ComponentInterface, Prop, Host, Method, Watch, Element } from \"@stencil/core\";\r\n\r\nimport { AccordionInternalState, AccordionVariant } from \"./accordion.interfaces\";\r\n\r\nimport { createStore } from \"@stencil/store\";\r\n\r\n@Component({\r\n  tag: \"dso-accordion\",\r\n  styleUrl: \"accordion.scss\",\r\n  shadow: true,\r\n})\r\nexport class Accordion implements ComponentInterface {\r\n  private accordionState: AccordionInternalState;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAccordionElement;\r\n\r\n  /**\r\n   * The variant of the Accordion.\r\n   */\r\n  @Prop({ reflect: true })\r\n  variant: AccordionVariant = \"default\";\r\n\r\n  /**\r\n   * Places the chevron at the opposite side.\r\n   *\r\n   * Note: this mode does not display `state`, `attachmentCount` or `status` props on Accordion Sections\r\n   */\r\n  @Prop({ reflect: true })\r\n  reverseAlign = false;\r\n\r\n  @Watch(\"variant\")\r\n  updateVariant(variant: AccordionVariant = \"default\") {\r\n    this.accordionState.variant = variant;\r\n  }\r\n\r\n  @Watch(\"reverseAlign\")\r\n  updateReverseAlign(reverseAlign: boolean) {\r\n    this.accordionState.reverseAlign = reverseAlign;\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _getState(): Promise<AccordionInternalState> {\r\n    return this.accordionState;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.accordionState.variant = this.variant;\r\n    this.accordionState.reverseAlign = this.reverseAlign;\r\n  }\r\n\r\n  constructor() {\r\n    const { state } = createStore<AccordionInternalState>({});\r\n\r\n    this.accordionState = state;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class=\"dso-accordion\">\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}