@dso-toolkit/core 47.0.1 → 49.0.0

package/dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ecec64a0.js');
 
 /*
- Stencil Client Patch Esm v2.19.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -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-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":[1540],"hasNestedSection":[32],"toggleSection":[64]}]]],["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"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32],"labelText":[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-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["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],"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],"focused":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-modal.cjs",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[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],"closeOpenSections":[64]}]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[1]}]]],["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-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["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"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]]], options);
+  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-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[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"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32],"labelText":[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-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":[1540],"hasNestedSection":[32],"toggleSection":[64],"scrollSectionIntoView":[64]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["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],"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],"focused":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-modal.cjs",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[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],"closeOpenSections":[64]}]]],["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"]}]]],["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-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["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]},[[0,"click","listenClick"]]]]],["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"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -1,19 +1,16 @@
 {
   "entries": [
-    "./components/autosuggest/autosuggest.js",
-    "./components/date-picker/date-picker.js",
-    "./components/info-button/info-button.js",
     "./components/modal/modal.js",
-    "./components/selectable/selectable.js",
-    "./components/viewer-grid/viewer-grid.js",
     "./components/accordion/accordion.js",
     "./components/accordion/components/accordion-section.js",
     "./components/alert/alert.js",
     "./components/attachments-counter/attachments-counter.js",
+    "./components/autosuggest/autosuggest.js",
     "./components/badge/badge.js",
     "./components/banner/banner.js",
     "./components/card/card.js",
     "./components/card-container/card-container.js",
+    "./components/date-picker/date-picker.js",
     "./components/dropdown-menu/dropdown-menu.js",
     "./components/header/header.js",
     "./components/helpcenter-panel/helpcenter-panel.js",
@@ -21,6 +18,7 @@
     "./components/icon/icon.js",
     "./components/image-overlay/image-overlay.js",
     "./components/info/info.js",
+    "./components/info-button/info-button.js",
     "./components/label/label.js",
     "./components/map-base-layers/map-base-layers.js",
     "./components/map-controls/map-controls.js",
@@ -30,15 +28,17 @@
     "./components/progress-bar/progress-bar.js",
     "./components/progress-indicator/progress-indicator.js",
     "./components/responsive-element/responsive-element.js",
+    "./components/selectable/selectable.js",
     "./components/table/table.js",
     "./components/toggletip/toggletip.js",
     "./components/tooltip/tooltip.js",
-    "./components/tree-view/tree-view.js"
+    "./components/tree-view/tree-view.js",
+    "./components/viewer-grid/viewer-grid.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.19.2",
-    "typescriptVersion": "4.7.4"
+    "version": "2.20.0",
+    "typescriptVersion": "4.8.4"
   },
   "collections": [],
   "bundles": []

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

@@ -8,6 +8,7 @@ export class Accordion {
     const { state } = createStore({
       variant: this.variant || "default",
       reverseAlign: this.reverseAlign,
+      allowMultipleOpen: this.allowMultipleOpen,
     });
     this.accordionState = state;
   }
@@ -17,6 +18,9 @@ export class Accordion {
   updateReverseAlign(reverseAlign) {
     this.accordionState.reverseAlign = reverseAlign;
   }
+  updateAllowMultipleOpen(allowMultipleOpen) {
+    this.accordionState.allowMultipleOpen = allowMultipleOpen;
+  }
   watchAllowMultiple(allowMultipleOpen) {
     if (!allowMultipleOpen) {
       const openSections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section[open]"));
@@ -28,7 +32,10 @@ export class Accordion {
   async getState() {
     return this.accordionState;
   }
-  /** Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section. */
+  /** Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.\
+   * returns `undefined` when no section is toggled.\
+   * returns `true` when the section is opened and `false` when the section is closed.
+   */
   async toggleSection(sectionElement, event) {
     const sections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section"));
     if (typeof sectionElement === "number") {
@@ -41,16 +48,17 @@ export class Accordion {
     if (this.allowMultipleOpen) {
       this.controlOpenAttribute(sectionElement, !sectionIsOpen);
       this.emitToggleEvent(sectionElement, sections, event);
-      return;
+      return !sectionIsOpen;
     }
     if (sectionIsOpen) {
       this.controlOpenAttribute(sectionElement, false);
       this.emitToggleEvent(sectionElement, sections, event);
-      return;
+      return false;
     }
     await this.closeOpenSections();
     this.controlOpenAttribute(sectionElement, true);
     this.emitToggleEvent(sectionElement, sections, event);
+    return true;
   }
   /** Closes all sections belonging to this accordion. */
   async closeOpenSections() {
@@ -58,6 +66,18 @@ export class Accordion {
     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;
+    }
+  }
   render() {
     return (h(Host, { class: {
         "dso-accordion": true,
@@ -206,7 +226,7 @@ export class Accordion {
       },
       "toggleSection": {
         "complexType": {
-          "signature": "(sectionElement: HTMLElement | number, event?: MouseEvent) => Promise<void>",
+          "signature": "(sectionElement: HTMLElement | number, event?: MouseEvent) => Promise<undefined | boolean>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -225,10 +245,10 @@ export class Accordion {
               "location": "global"
             }
           },
-          "return": "Promise<void>"
+          "return": "Promise<boolean | undefined>"
         },
         "docs": {
-          "text": "Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.",
+          "text": "Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.\\\r\nreturns `undefined` when no section is toggled.\\\r\nreturns `true` when the section is opened and `false` when the section is closed.",
           "tags": []
         }
       },
@@ -261,6 +281,9 @@ export class Accordion {
       }, {
         "propName": "reverseAlign",
         "methodName": "updateReverseAlign"
+      }, {
+        "propName": "allowMultipleOpen",
+        "methodName": "updateAllowMultipleOpen"
       }, {
         "propName": "allowMultipleOpen",
         "methodName": "watchAllowMultiple"

package/dist/collection/components/accordion/components/accordion-section.css

@@ -62,6 +62,11 @@
 :host .dso-section-handle > a dso-icon {
   flex-shrink: 0;
 }
+:host .dso-section-handle > button dso-icon.dso-section-handle-chevron,
+:host .dso-section-handle > a dso-icon.dso-section-handle-chevron {
+  transform: rotate(0);
+  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
+}
 :host .dso-section-handle > button > .dso-section-handle-addons:first-child,
 :host .dso-section-handle > button > dso-icon:first-child,
 :host .dso-section-handle > a > .dso-section-handle-addons:first-child,
@@ -76,19 +81,37 @@
 :host .dso-section-handle > a > .dso-section-handle-addons:last-child {
   margin-left: auto;
 }
+:host .dso-section-handle > button > .dso-section-handle-addons:last-child dso-attachments-counter,
 :host .dso-section-handle > button > .dso-section-handle-addons:last-child dso-icon,
+:host .dso-section-handle > a > .dso-section-handle-addons:last-child dso-attachments-counter,
 :host .dso-section-handle > a > .dso-section-handle-addons:last-child dso-icon {
   margin-left: 16px;
 }
 
-:host(:not([open])) .dso-section-body {
-  display: none;
+:host([open]) .dso-section-body {
+  position: inherit;
+  visibility: inherit;
+}
+:host([open]) .dso-section-handle > button .dso-section-handle-chevron:first-child,
+:host([open]) .dso-section-handle > a .dso-section-handle-chevron:first-child {
+  transform: rotate(90deg);
+}
+:host([open]) .dso-section-handle > button .dso-section-handle-chevron:last-child,
+:host([open]) .dso-section-handle > a .dso-section-handle-chevron:last-child {
+  transform: rotate(-180deg);
 }
 
 .dso-section-body {
   background-color: #fff;
   border-top: 0;
   margin-top: -4px;
+  overflow-y: hidden;
+}
+.dso-section-body:not(.dso-animate-ready) {
+  position: absolute;
+  visibility: hidden;
+}
+.dso-section-body .dso-section-body-content {
   padding: 20px 16px 16px;
 }
 
@@ -149,7 +172,7 @@
 :host(.dso-accordion-compact) .dso-section-handle button.active {
   color: #39870c;
 }
-:host(.dso-accordion-compact) .dso-section-body {
+:host(.dso-accordion-compact) .dso-section-body .dso-section-body-content {
   padding-left: 32px;
   padding-top: 0;
   padding-right: 0;
@@ -159,7 +182,7 @@
 :host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle button {
   padding-left: 16px;
 }
-:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-body {
+:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content {
   padding-left: 16px;
   padding-right: 0;
 }

package/dist/collection/components/accordion/components/accordion-section.interfaces.js

@@ -0,0 +1,6 @@
+export const stateMap = {
+  success: "succes:",
+  info: "info:",
+  warning: "waarschuwing:",
+  danger: "fout:",
+};

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

@@ -1,4 +1,8 @@
 import { h, Host, Fragment, forceUpdate, } from "@stencil/core";
+import anime from "animejs";
+import debounce from "debounce";
+import { stateMap } from "./accordion-section.interfaces";
+import { Handle, HandleElement, HandleIcon } from "./handles";
 export class AccordionSection {
   constructor() {
     this.handleTitle = undefined;
@@ -11,8 +15,12 @@ export class AccordionSection {
     this.open = false;
     this.hasNestedSection = false;
   }
+  toggleOpen() {
+    this.activateAnimation();
+  }
   componentWillLoad() {
     const accordion = this.host.parentElement;
+    this.hasNestedSection = this.host.querySelector("dso-accordion") !== null;
     if (isAccordion(accordion)) {
       this.accordion = accordion;
       accordion.getState().then((state) => {
@@ -20,32 +28,158 @@ export class AccordionSection {
         forceUpdate(this.host);
       });
     }
+    this.prepareAnimationResizeObserver();
   }
   componentDidLoad() {
-    this.hasNestedSection = this.host.querySelector("dso-accordion") !== null;
+    var _a, _b;
+    const bodyContentElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".dso-section-body-content");
+    if (bodyContentElement) {
+      (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(bodyContentElement);
+    }
   }
-  /** Toggle this section */
-  async toggleSection() {
+  disconnectedCallback() {
     var _a;
-    return (_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host);
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  /** Toggle this section.
+   * @param scrollIntoView boolean - defaults to true
+   */
+  async toggleSection(scrollIntoView = true) {
+    var _a;
+    await ((_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host).then(async () => {
+      if (scrollIntoView) {
+        await this.scrollIntoViewWhenNeeded(true);
+      }
+    }));
+  }
+  /** Scroll this section into view when needed. */
+  async scrollSectionIntoView() {
+    await this.scrollIntoViewWhenNeeded(false);
+  }
+  async scrollIntoViewWhenNeeded(sectionToggled) {
+    var _a, _b, _c;
+    AccordionSection.scrollCandidate = undefined;
+    const bodyClientRect = (_a = this.sectionBody) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const headingClientRect = (_b = this.sectionHeading) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    if (!bodyClientRect || !headingClientRect || !this.accordionState) {
+      return;
+    }
+    const waitForAnimationBeforeScrolling = (state) => {
+      var _a;
+      const sectionBottomOffsetTop = this.host.offsetTop + headingClientRect.height + (this.open ? (_a = this.bodyHeight) !== null && _a !== void 0 ? _a : 0 : 0);
+      return (sectionToggled && (sectionBottomOffsetTop > document.documentElement.scrollHeight || state.allowMultipleOpen));
+    };
+    if (waitForAnimationBeforeScrolling(this.accordionState)) {
+      AccordionSection.scrollCandidate = this.host;
+      return;
+    }
+    // this y is relative to the top of the viewport.
+    const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? (_c = this.bodyHeight) !== null && _c !== void 0 ? _c : 0 : 0);
+    if (sectionBottomY > window.innerHeight) {
+      const expandedAccordionHeight = sectionBottomY - headingClientRect.top;
+      const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;
+      window.scrollTo({
+        top: shouldScrollToTopOfSection
+          ? this.host.offsetTop
+          : this.host.offsetTop - (window.innerHeight - expandedAccordionHeight),
+        behavior: "smooth",
+      });
+    }
+    else if (headingClientRect.top < 0) {
+      window.scrollTo({
+        top: this.host.offsetTop,
+        behavior: "smooth",
+      });
+    }
   }
   async toggle(e) {
     var _a;
     e === null || e === void 0 ? void 0 : e.preventDefault();
-    return (_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host, e);
+    (_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host, e).then(async (isOpen) => {
+      if (isOpen) {
+        await this.scrollIntoViewWhenNeeded(true);
+      }
+    });
   }
   render() {
-    if (!this.accordionState) {
-      return;
-    }
-    const { variant, reverseAlign } = this.accordionState;
+    var _a;
+    const { variant, reverseAlign } = (_a = this.accordionState) !== null && _a !== void 0 ? _a : {};
     const hasAddons = !!this.status || !!this.state || !!this.icon || !!this.attachmentCount;
     return (h(Host, { class: {
         "dso-accordion-section": true,
         ["dso-accordion-" + variant]: true,
         "dso-nested-accordion": this.hasNestedSection,
-        "dso-accordion-reverse-align": this.accordionState.reverseAlign,
-      } }, h(Handle, { heading: this.heading }, h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, reverseAlign ? (h(Fragment, null, hasAddons && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("span", null, this.handleTitle), h("dso-icon", { icon: this.open ? "chevron-up" : "chevron-down" }))) : (h(Fragment, null, h("dso-icon", { icon: this.open ? "chevron-down" : "chevron-right" }), this.state && h("span", { class: "sr-only" }, stateMap[this.state]), h("span", null, this.handleTitle), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.status && h("span", { class: "dso-status" }, this.status), h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("div", { class: "dso-section-body", style: this.open ? {} : { display: "none" } }, h("slot", null))));
+        "dso-accordion-reverse-align": reverseAlign !== null && reverseAlign !== void 0 ? reverseAlign : false,
+      }, hidden: !variant }, h(Handle, { heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, reverseAlign ? (h(Fragment, null, hasAddons && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("span", null, this.handleTitle), h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (h(Fragment, null, h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.state && h("span", { class: "sr-only" }, stateMap[this.state]), h("span", null, this.handleTitle), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.status && h("span", { class: "dso-status" }, this.status), h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("div", { class: { "dso-section-body": true, "dso-animate-ready": !!this.animeInstance }, ref: (element) => (this.sectionBody = element), "aria-hidden": this.open ? "false" : "true" }, h("div", { class: "dso-section-body-content" }, h("slot", null)))));
+  }
+  prepareAnimationResizeObserver() {
+    this.resizeObserver = new ResizeObserver(debounce(([entry]) => {
+      // entry.contentRect does not include padding, so we use getBoundingClientRect.
+      const height = entry.target.getBoundingClientRect().height;
+      if (this.bodyHeight !== height) {
+        this.bodyHeight = height;
+        this.instantiateAnimation();
+      }
+    }, 150));
+  }
+  instantiateAnimation() {
+    this.animeInstance = anime({
+      targets: this.sectionBody,
+      height: 4,
+      easing: "cubicBezier(0.4, 0, 0.2, 1)",
+      duration: 260,
+      autoplay: false,
+      direction: "normal",
+      changeComplete: async () => {
+        if (AccordionSection.scrollCandidate === this.host) {
+          AccordionSection.scrollCandidate = undefined;
+          await this.scrollSectionIntoView();
+        }
+      },
+      begin: () => {
+        if (this.sectionBody) {
+          if (this.open) {
+            this.sectionBody.style.visibility = "";
+            this.sectionBody.style.position = "";
+            this.sectionBody.style.bottom = "";
+          }
+        }
+      },
+      complete: () => {
+        if (this.sectionBody) {
+          this.sectionBody.style.height = "";
+          if (!this.open) {
+            this.sectionBody.style.visibility = "hidden";
+            this.sectionBody.style.position = "absolute";
+            this.sectionBody.style.bottom = "100%";
+          }
+        }
+      },
+    });
+    if (!this.open) {
+      this.animeInstance.reverse();
+      this.animeInstance.play();
+    }
+    if (this.sectionBody) {
+      this.sectionBody.style.height = "";
+    }
+  }
+  activateAnimation() {
+    if (this.animeInstance) {
+      if (this.animeInstance.progress > 0 && this.animeInstance.progress < 100) {
+        this.animeInstance.reverse();
+      }
+      else {
+        if (this.open) {
+          this.animeInstance.direction = "reverse";
+          this.animeInstance.play();
+        }
+        else {
+          this.animeInstance.direction = "normal";
+          this.animeInstance.play();
+        }
+      }
+    }
   }
   static get is() { return "dso-accordion-section"; }
   static get encapsulation() { return "shadow"; }
@@ -87,7 +221,7 @@ export class AccordionSection {
           "references": {
             "AccordionHeading": {
               "location": "import",
-              "path": "../accordion.interfaces"
+              "path": "./accordion-section.interfaces"
             }
           }
         },
@@ -127,7 +261,7 @@ export class AccordionSection {
           "references": {
             "AccordionSectionState": {
               "location": "import",
-              "path": "../accordion.interfaces"
+              "path": "./accordion-section.interfaces"
             }
           }
         },
@@ -219,6 +353,31 @@ export class AccordionSection {
   static get methods() {
     return {
       "toggleSection": {
+        "complexType": {
+          "signature": "(scrollIntoView?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "scrollIntoView boolean - defaults to true"
+                }],
+              "text": "boolean - defaults to true"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Toggle this section.",
+          "tags": [{
+              "name": "param",
+              "text": "scrollIntoView boolean - defaults to true"
+            }]
+        }
+      },
+      "scrollSectionIntoView": {
         "complexType": {
           "signature": "() => Promise<void>",
           "parameters": [],
@@ -230,64 +389,20 @@ export class AccordionSection {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Toggle this section",
+          "text": "Scroll this section into view when needed.",
           "tags": []
         }
       }
     };
   }
   static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "open",
+        "methodName": "toggleOpen"
+      }];
+  }
 }
 function isAccordion(element) {
   return element instanceof HTMLElement && "getState" in element;
 }
-const Handle = ({ heading }, children) => {
-  switch (heading) {
-    default:
-    case "h2":
-      return h("h2", { class: "dso-section-handle" }, children);
-    case "h3":
-      return h("h3", { class: "dso-section-handle" }, children);
-    case "h4":
-      return h("h4", { class: "dso-section-handle" }, children);
-    case "h5":
-      return h("h5", { class: "dso-section-handle" }, children);
-  }
-};
-const HandleElement = ({ handleUrl, onClick, open }, children) => {
-  if (handleUrl) {
-    return (h("a", { href: handleUrl, onClick: onClick, "aria-expanded": open ? "true" : "false" }, children));
-  }
-  return (h("button", { type: "button", onClick: onClick, "aria-expanded": open ? "true" : "false" }, children));
-};
-const HandleIcon = ({ state, icon, attachmentCount, }) => {
-  if (state) {
-    return h(HandleStateIcon, { state: state });
-  }
-  if (attachmentCount) {
-    return h("dso-attachments-counter", { count: attachmentCount });
-  }
-  if (icon) {
-    return h("dso-icon", { icon: icon });
-  }
-};
-const stateMap = {
-  success: "succes:",
-  info: "info:",
-  warning: "waarschuwing:",
-  danger: "fout:",
-};
-const HandleStateIcon = ({ state }) => {
-  if (state === "danger") {
-    return h("dso-icon", { icon: "status-danger" });
-  }
-  if (state === "success") {
-    return h("dso-icon", { icon: "status-success" });
-  }
-  if (state === "info") {
-    return h("dso-icon", { icon: "status-info" });
-  }
-  if (state === "warning") {
-    return h("dso-icon", { icon: "status-warning" });
-  }
-};

package/dist/collection/components/accordion/components/handles/element.handle.js

@@ -0,0 +1,7 @@
+import { h } from "@stencil/core";
+export const HandleElement = ({ handleUrl, onClick, open }, children) => {
+  if (handleUrl) {
+    return (h("a", { href: handleUrl, onClick: onClick, "aria-expanded": open ? "true" : "false" }, children));
+  }
+  return (h("button", { type: "button", onClick: onClick, "aria-expanded": open ? "true" : "false" }, children));
+};

package/dist/collection/components/accordion/components/handles/heading.handle.js

@@ -0,0 +1,14 @@
+import { h } from "@stencil/core";
+export const Handle = ({ heading, ref }, children) => {
+  switch (heading) {
+    default:
+    case "h2":
+      return (h("h2", { ref: ref, class: "dso-section-handle" }, children));
+    case "h3":
+      return (h("h3", { ref: ref, class: "dso-section-handle" }, children));
+    case "h4":
+      return (h("h4", { ref: ref, class: "dso-section-handle" }, children));
+    case "h5":
+      return (h("h5", { ref: ref, class: "dso-section-handle" }, children));
+  }
+};

package/dist/collection/components/accordion/components/handles/icon.handle.js

@@ -0,0 +1,13 @@
+import { h } from "@stencil/core";
+import { HandleStateIcon } from "./state-icon.handle";
+export const HandleIcon = ({ state, icon, attachmentCount }) => {
+  if (state) {
+    return h(HandleStateIcon, { state: state });
+  }
+  if (attachmentCount) {
+    return h("dso-attachments-counter", { count: attachmentCount });
+  }
+  if (icon) {
+    return h("dso-icon", { icon: icon });
+  }
+};

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

@@ -0,0 +1,4 @@
+export * from "./element.handle";
+export * from "./heading.handle";
+export * from "./icon.handle";
+export * from "./state-icon.handle";

package/dist/collection/components/accordion/components/handles/state-icon.handle.js

@@ -0,0 +1,15 @@
+import { h } from "@stencil/core";
+export const HandleStateIcon = ({ state }) => {
+  if (state === "danger") {
+    return h("dso-icon", { icon: "status-danger" });
+  }
+  if (state === "success") {
+    return h("dso-icon", { icon: "status-success" });
+  }
+  if (state === "info") {
+    return h("dso-icon", { icon: "status-info" });
+  }
+  if (state === "warning") {
+    return h("dso-icon", { icon: "status-warning" });
+  }
+};

package/dist/collection/components/autosuggest/autosuggest.interfaces.js

@@ -0,0 +1 @@
+export {};