@dso-toolkit/core 62.0.0 → 62.2.0

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ const index = require('./index-d46ec033.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  return index.bootstrapLazy([["dsot-document-component-demo.cjs",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"openOrClosed":[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],"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",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"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-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-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],"compact":[4],"noIcon":[4,"no-icon"]}]]],["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-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"required":[516],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[513],"min":[1],"max":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-logo.cjs",[[1,"dso-logo",{"label":[1],"ribbon":[1]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"mode":[513],"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"documentPanelOpen":[516,"document-panel-open"],"mainSize":[513,"main-size"],"activeTab":[1,"active-tab"],"documentPanelSize":[513,"document-panel-size"],"mainPanelExpanded":[4,"main-panel-expanded"],"mainPanelHidden":[4,"main-panel-hidden"],"tabView":[32],"_checkMainPanelVisibility":[64]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[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-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["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]},[[4,"keydown","keyDownListener"]]],[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],"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);
+  return index.bootstrapLazy([["dsot-document-component-demo.cjs",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"openOrClosed":[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-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":[516,"has-nested-accordion"],"hover":[32],"focusHandle":[64]}]]],["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"],"showHelp":[4,"show-help"],"helpUrl":[1,"help-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[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",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"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-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-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-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],"compact":[4],"noIcon":[4,"no-icon"]}]]],["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-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"required":[516],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[513],"min":[1],"max":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-logo.cjs",[[1,"dso-logo",{"label":[1],"ribbon":[1]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"mode":[513],"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"documentPanelOpen":[516,"document-panel-open"],"mainSize":[513,"main-size"],"activeTab":[1,"active-tab"],"documentPanelSize":[513,"document-panel-size"],"mainPanelExpanded":[4,"main-panel-expanded"],"mainPanelHidden":[4,"main-panel-hidden"],"tabView":[32],"_checkMainPanelVisibility":[64]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[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-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["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]},[[4,"keydown","keyDownListener"]]],[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],"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);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -1 +1 @@
-{"version":3,"file":"accordion-section.interfaces.js","sourceRoot":"","sources":["../../../../src/components/accordion/components/accordion-section.interfaces.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,QAAQ,GAA0C;EAC7D,OAAO,EAAE,SAAS;EAClB,IAAI,EAAE,OAAO;EACb,OAAO,EAAE,eAAe;EACxB,MAAM,EAAE,OAAO;EACf,KAAK,EAAE,OAAO;CACf,CAAC","sourcesContent":["export type AccordionSectionState = \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\";\r\n\r\nexport type AccordionHeading = \"h2\" | \"h3\" | \"h4\" | \"h5\";\r\n\r\nexport const stateMap: Record<AccordionSectionState, string> = {\r\n  success: \"succes:\",\r\n  info: \"info:\",\r\n  warning: \"waarschuwing:\",\r\n  danger: \"fout:\",\r\n  error: \"fout:\",\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"]}
+{"version":3,"file":"accordion-section.interfaces.js","sourceRoot":"","sources":["../../../../src/components/accordion/components/accordion-section.interfaces.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,QAAQ,GAA0C;EAC7D,OAAO,EAAE,SAAS;EAClB,IAAI,EAAE,OAAO;EACb,OAAO,EAAE,eAAe;EACxB,MAAM,EAAE,OAAO;EACf,KAAK,EAAE,OAAO;CACf,CAAC","sourcesContent":["export type AccordionSectionState = \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\";\r\n\r\nexport type AccordionHeading = \"h2\" | \"h3\" | \"h4\" | \"h5\";\r\n\r\nexport const stateMap: Record<AccordionSectionState, string> = {\r\n  success: \"succes:\",\r\n  info: \"info:\",\r\n  warning: \"waarschuwing:\",\r\n  danger: \"fout:\",\r\n  error: \"fout:\",\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 AccordionSectionAnimationStartEvent {\r\n  /**\r\n   * Helper function to scroll the Accordion Section into view.\r\n   */\r\n  scrollIntoView(behavior?: ScrollBehavior): void;\r\n\r\n  /**\r\n   * Whether or not the Accordion opening or closing.\r\n   */\r\n  animation: \"opening\" | \"closing\";\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(behavior?: ScrollBehavior): 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/components/accordion-section.js

@@ -1,6 +1,52 @@
 import { h, forceUpdate, Fragment, Host, } from "@stencil/core";
 import { stateMap, } from "./accordion-section.interfaces";
-import { Handle, HandleElement, HandleIcon } from "./handles";
+const HandleElement = ({ handleUrl, onClick, open, handleElementRef }, children) => {
+  if (handleUrl) {
+    return (h("a", { href: handleUrl, onClick: onClick, "aria-expanded": open ? "true" : "false", ref: handleElementRef }, children));
+  }
+  return (h("button", { type: "button", onClick: onClick, "aria-expanded": open ? "true" : "false", ref: handleElementRef }, children));
+};
+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));
+  }
+};
+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 HandleStateIcon = ({ state }) => {
+  if (state === "error") {
+    return h("dso-icon", { icon: "status-error" });
+  }
+  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" });
+  }
+};
 export class AccordionSection {
   constructor() {
     this.handleClick = (event) => {
@@ -9,10 +55,16 @@ export class AccordionSection {
         open: !this.open,
       });
     };
+    this.handleExpandableAnimationStart = (e) => {
+      this.dsoAnimationStart.emit({
+        animation: this.open ? "opening" : "closing",
+        scrollIntoView: (behavior = "auto") => this.scrollIntoView(e.detail.bodyHeight, behavior),
+      });
+    };
     this.handleExpandableAnimationEnd = (e) => {
       this.dsoAnimationEnd.emit({
         open: this.open,
-        scrollIntoView: () => this.scrollIntoView(e.detail.bodyHeight),
+        scrollIntoView: (behavior = "auto") => this.scrollIntoView(e.detail.bodyHeight, behavior),
       });
     };
     this.handleTitle = undefined;
@@ -26,9 +78,18 @@ export class AccordionSection {
     this.hasNestedAccordion = false;
     this.hover = false;
   }
+  /**
+   * Calling this method will set focus to the handle.
+   */
+  async focusHandle() {
+    var _a;
+    (_a = this.handleElementRef) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  get containsNestedAccordion() {
+    return this.host.querySelector("dso-accordion") !== null;
+  }
   componentWillLoad() {
     var _a;
-    this.hasNestedAccordion = this.host.querySelector("dso-accordion") !== null;
     (_a = this.accordion) === null || _a === void 0 ? void 0 : _a._getState().then((state) => {
       this.accordionState = state;
       forceUpdate(this.host);
@@ -38,7 +99,7 @@ export class AccordionSection {
     var _a;
     return ((_a = this.accordionState) === null || _a === void 0 ? void 0 : _a.variant) === "neutral";
   }
-  async scrollIntoView(bodyHeight) {
+  async scrollIntoView(bodyHeight, behavior = "auto") {
     var _a, _b;
     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();
@@ -54,13 +115,13 @@ export class AccordionSection {
         top: shouldScrollToTopOfSection
           ? this.host.offsetTop
           : this.host.offsetTop - (window.innerHeight - expandedAccordionHeight),
-        behavior: "smooth",
+        behavior,
       });
     }
     else if (headingClientRect.top < 0) {
       window.scrollTo({
         top: this.host.offsetTop,
-        behavior: "smooth",
+        behavior,
       });
     }
   }
@@ -74,9 +135,9 @@ export class AccordionSection {
     return (h(Host, { class: {
         "dso-accordion-section": true,
         ["dso-accordion-" + variant]: true,
-        "dso-nested-accordion": this.hasNestedAccordion,
+        "dso-nested-accordion": this.hasNestedAccordion || this.containsNestedAccordion,
         "dso-accordion-reverse-align": reverseAlign !== null && reverseAlign !== void 0 ? reverseAlign : false,
-      }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h(Handle, { heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { handleUrl: this.handleUrl, onClick: this.handleClick, 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.status && h("span", { class: "sr-only" }, stateMap[this.status]), h("span", null, this.handleTitle, this.isNeutral && (h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-active" : "info" }))), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), h(HandleIcon, { state: this.status, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("dso-expandable", { class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onDsoExpandableAnimationEnd: this.handleExpandableAnimationEnd }, h("div", { class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, h("slot", null)))));
+      }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h(Handle, { heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { handleUrl: this.handleUrl, onClick: this.handleClick, open: this.open, handleElementRef: (e) => (this.handleElementRef = e) }, 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.status && h("span", { class: "sr-only" }, stateMap[this.status]), h("span", null, this.handleTitle, this.isNeutral && (h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-active" : "info" }))), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), h(HandleIcon, { state: this.status, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("dso-expandable", { class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onDsoExpandableAnimationStart: this.handleExpandableAnimationStart, onDsoExpandableAnimationEnd: this.handleExpandableAnimationEnd }, h("div", { class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, h("slot", null)))));
   }
   static get is() { return "dso-accordion-section"; }
   static get encapsulation() { return "shadow"; }
@@ -241,12 +302,29 @@ export class AccordionSection {
         "attribute": "open",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "hasNestedAccordion": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set when this Accordion Section contains or will contain an Accordion."
+        },
+        "attribute": "has-nested-accordion",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }
   static get states() {
     return {
-      "hasNestedAccordion": {},
       "hover": {}
     };
   }
@@ -272,6 +350,27 @@ export class AccordionSection {
             }
           }
         }
+      }, {
+        "method": "dsoAnimationStart",
+        "name": "dsoAnimationStart",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event emitted when the Accordion Section starts its toggle animation."
+        },
+        "complexType": {
+          "original": "AccordionSectionAnimationStartEvent",
+          "resolved": "AccordionSectionAnimationStartEvent",
+          "references": {
+            "AccordionSectionAnimationStartEvent": {
+              "location": "import",
+              "path": "./accordion-section.interfaces",
+              "id": "src/components/accordion/components/accordion-section.interfaces.ts::AccordionSectionAnimationStartEvent"
+            }
+          }
+        }
       }, {
         "method": "dsoAnimationEnd",
         "name": "dsoAnimationEnd",
@@ -295,6 +394,27 @@ export class AccordionSection {
         }
       }];
   }
+  static get methods() {
+    return {
+      "focusHandle": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Calling this method will set focus to the handle.",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=accordion-section.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"accordion-section.js","sourceRoot":"","sources":["../../../../src/components/accordion/components/accordion-section.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  forceUpdate,\r\n  Fragment,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  EventEmitter,\r\n} from \"@stencil/core\";\r\n\r\nimport { AccordionInternalState } from \"../accordion.interfaces\";\r\nimport {\r\n  AccordionHeading,\r\n  AccordionSectionAnimationEndEvent,\r\n  AccordionSectionState,\r\n  AccordionSectionToggleClickEvent,\r\n  stateMap,\r\n} from \"./accordion-section.interfaces\";\r\nimport { Handle, HandleElement, HandleIcon } from \"./handles\";\r\nimport { ExpandableAnimationEndEvent } from \"../../expandable/expandable\";\r\n\r\n@Component({\r\n  tag: \"dso-accordion-section\",\r\n  styleUrl: \"accordion-section.scss\",\r\n  shadow: true,\r\n})\r\nexport class AccordionSection implements ComponentInterface {\r\n  private accordionState?: AccordionInternalState;\r\n\r\n  private sectionBody?: HTMLDivElement;\r\n\r\n  private sectionHeading?: HTMLHeadingElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAccordionSectionElement;\r\n\r\n  /**\r\n   * The title of the handle\r\n   */\r\n  @Prop()\r\n  handleTitle?: string;\r\n\r\n  /**\r\n   * Which heading element to use.\r\n   */\r\n  @Prop()\r\n  heading: AccordionHeading = \"h2\";\r\n\r\n  /**\r\n   * When set the handle will render as a `<a>`. When undefined it renders as a `<button>`\r\n   */\r\n  @Prop()\r\n  handleUrl?: string;\r\n\r\n  /**\r\n   * `state` takes precedence over `attachmentCount` and `icon`\r\n   */\r\n  @Prop()\r\n  status?: AccordionSectionState;\r\n\r\n  /**\r\n   * `attachmentCount` takes precedence over `icon`\r\n   */\r\n  @Prop()\r\n  attachmentCount?: number;\r\n\r\n  /**\r\n   * To set an icon in the heading handle.\r\n   */\r\n  @Prop()\r\n  icon?: string;\r\n\r\n  /**\r\n   * The status of the section.\r\n   */\r\n  @Prop()\r\n  statusDescription?: string;\r\n\r\n  /**\r\n   * Set the Accordion Section open.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  @State()\r\n  hasNestedAccordion = false;\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  componentWillLoad() {\r\n    this.hasNestedAccordion = this.host.querySelector(\"dso-accordion\") !== null;\r\n\r\n    this.accordion?._getState().then((state) => {\r\n      this.accordionState = state;\r\n\r\n      forceUpdate(this.host);\r\n    });\r\n  }\r\n\r\n  get isNeutral() {\r\n    return this.accordionState?.variant === \"neutral\";\r\n  }\r\n\r\n  private async scrollIntoView(bodyHeight: number | undefined): Promise<void> {\r\n    const bodyClientRect = this.sectionBody?.getBoundingClientRect();\r\n    const headingClientRect = this.sectionHeading?.getBoundingClientRect();\r\n\r\n    if (!bodyClientRect || !headingClientRect || !this.accordionState) {\r\n      return;\r\n    }\r\n\r\n    // this y is relative to the top of the viewport.\r\n    const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? bodyHeight ?? 0 : 0);\r\n    if (sectionBottomY > window.innerHeight) {\r\n      const expandedAccordionHeight = sectionBottomY - headingClientRect.top;\r\n      const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;\r\n\r\n      window.scrollTo({\r\n        top: shouldScrollToTopOfSection\r\n          ? this.host.offsetTop\r\n          : this.host.offsetTop - (window.innerHeight - expandedAccordionHeight),\r\n        behavior: \"smooth\",\r\n      });\r\n    } else if (headingClientRect.top < 0) {\r\n      window.scrollTo({\r\n        top: this.host.offsetTop,\r\n        behavior: \"smooth\",\r\n      });\r\n    }\r\n  }\r\n\r\n  private get accordion() {\r\n    return this.host.closest(\"dso-accordion\");\r\n  }\r\n\r\n  private handleClick = (event: MouseEvent) => {\r\n    this.dsoToggleClick.emit({\r\n      originalEvent: event,\r\n      open: !this.open,\r\n    });\r\n  };\r\n\r\n  private handleExpandableAnimationEnd = (e: CustomEvent<ExpandableAnimationEndEvent>) => {\r\n    this.dsoAnimationEnd.emit({\r\n      open: this.open,\r\n      scrollIntoView: () => this.scrollIntoView(e.detail.bodyHeight),\r\n    });\r\n  };\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoToggleClick!: EventEmitter<AccordionSectionToggleClickEvent>;\r\n\r\n  /**\r\n   * Event emitted when the Accordion Section completes its toggle animation.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnimationEnd!: EventEmitter<AccordionSectionAnimationEndEvent>;\r\n\r\n  render() {\r\n    const { variant, reverseAlign } = this.accordionState ?? {};\r\n    const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          \"dso-accordion-section\": true,\r\n          [\"dso-accordion-\" + variant]: true,\r\n          \"dso-nested-accordion\": this.hasNestedAccordion,\r\n          \"dso-accordion-reverse-align\": reverseAlign ?? false,\r\n        }}\r\n        hidden={!variant}\r\n        onMouseenter={() => (this.hover = true)}\r\n        onMouseleave={() => (this.hover = false)}\r\n      >\r\n        <Handle heading={this.heading} ref={(element) => (this.sectionHeading = element)}>\r\n          <HandleElement handleUrl={this.handleUrl} onClick={this.handleClick} open={this.open}>\r\n            {reverseAlign ? (\r\n              <Fragment>\r\n                {hasAddons && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    <HandleIcon icon={this.icon} />\r\n                  </div>\r\n                )}\r\n\r\n                <span>{this.handleTitle}</span>\r\n\r\n                <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-down\"></dso-icon>\r\n              </Fragment>\r\n            ) : (\r\n              <Fragment>\r\n                <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-right\"></dso-icon>\r\n\r\n                {this.status && <span class=\"sr-only\">{stateMap[this.status]}</span>}\r\n\r\n                <span>\r\n                  {this.handleTitle}\r\n                  {this.isNeutral && (\r\n                    <dso-icon class=\"info-icon\" icon={this.open || this.hover ? \"info-active\" : \"info\"} />\r\n                  )}\r\n                </span>\r\n\r\n                {hasAddons && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n                    <HandleIcon state={this.status} icon={this.icon} attachmentCount={this.attachmentCount} />\r\n                  </div>\r\n                )}\r\n              </Fragment>\r\n            )}\r\n          </HandleElement>\r\n        </Handle>\r\n        <dso-expandable\r\n          class=\"dso-section-body\"\r\n          open={this.open}\r\n          enableAnimation\r\n          minimumHeight={this.isNeutral ? 0 : 4}\r\n          onDsoExpandableAnimationEnd={this.handleExpandableAnimationEnd}\r\n        >\r\n          <div class=\"dso-section-body-content\" ref={(element) => (this.sectionBody = element)}>\r\n            <slot />\r\n          </div>\r\n        </dso-expandable>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"accordion-section.js","sourceRoot":"","sources":["../../../../src/components/accordion/components/accordion-section.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  forceUpdate,\r\n  Fragment,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  EventEmitter,\r\n  FunctionalComponent,\r\n  Method,\r\n} from \"@stencil/core\";\r\n\r\nimport { AccordionInternalState } from \"../accordion.interfaces\";\r\nimport {\r\n  AccordionHeading,\r\n  AccordionSectionAnimationEndEvent,\r\n  AccordionSectionState,\r\n  AccordionSectionToggleClickEvent,\r\n  AccordionSectionAnimationStartEvent,\r\n  stateMap,\r\n} from \"./accordion-section.interfaces\";\r\nimport { ExpandableAnimationEndEvent } from \"../../expandable/expandable\";\r\n\r\nconst HandleElement: FunctionalComponent<{\r\n  handleUrl: string | undefined;\r\n  open: boolean;\r\n  handleElementRef: (element: HTMLAnchorElement | HTMLButtonElement | undefined) => void;\r\n  onClick: (e: MouseEvent) => void;\r\n}> = ({ handleUrl, onClick, open, handleElementRef }, children) => {\r\n  if (handleUrl) {\r\n    return (\r\n      <a href={handleUrl} onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n        {children}\r\n      </a>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <button type=\"button\" onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n      {children}\r\n    </button>\r\n  );\r\n};\r\n\r\nconst Handle: FunctionalComponent<{\r\n  heading: AccordionHeading;\r\n  ref: (element: HTMLHeadingElement | undefined) => void;\r\n}> = ({ heading, ref }, children) => {\r\n  switch (heading) {\r\n    default:\r\n    case \"h2\":\r\n      return (\r\n        <h2 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h2>\r\n      );\r\n    case \"h3\":\r\n      return (\r\n        <h3 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h3>\r\n      );\r\n    case \"h4\":\r\n      return (\r\n        <h4 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h4>\r\n      );\r\n    case \"h5\":\r\n      return (\r\n        <h5 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h5>\r\n      );\r\n  }\r\n};\r\n\r\nconst HandleIcon: FunctionalComponent<{\r\n  state?: AccordionSectionState;\r\n  icon?: string;\r\n  attachmentCount?: number;\r\n}> = ({ state, icon, attachmentCount }) => {\r\n  if (state) {\r\n    return <HandleStateIcon state={state} />;\r\n  }\r\n\r\n  if (attachmentCount) {\r\n    return <dso-attachments-counter count={attachmentCount}></dso-attachments-counter>;\r\n  }\r\n\r\n  if (icon) {\r\n    return <dso-icon icon={icon}></dso-icon>;\r\n  }\r\n};\r\n\r\nconst HandleStateIcon: FunctionalComponent<{ state: AccordionSectionState }> = ({ state }) => {\r\n  if (state === \"error\") {\r\n    return <dso-icon icon=\"status-error\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"danger\") {\r\n    return <dso-icon icon=\"status-danger\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"success\") {\r\n    return <dso-icon icon=\"status-success\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"info\") {\r\n    return <dso-icon icon=\"status-info\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"warning\") {\r\n    return <dso-icon icon=\"status-warning\"></dso-icon>;\r\n  }\r\n};\r\n\r\n@Component({\r\n  tag: \"dso-accordion-section\",\r\n  styleUrl: \"accordion-section.scss\",\r\n  shadow: true,\r\n})\r\nexport class AccordionSection implements ComponentInterface {\r\n  private accordionState?: AccordionInternalState;\r\n\r\n  private sectionBody?: HTMLDivElement;\r\n\r\n  private sectionHeading?: HTMLHeadingElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAccordionSectionElement;\r\n\r\n  /**\r\n   * The title of the handle\r\n   */\r\n  @Prop()\r\n  handleTitle?: string;\r\n\r\n  /**\r\n   * Which heading element to use.\r\n   */\r\n  @Prop()\r\n  heading: AccordionHeading = \"h2\";\r\n\r\n  /**\r\n   * When set the handle will render as a `<a>`. When undefined it renders as a `<button>`\r\n   */\r\n  @Prop()\r\n  handleUrl?: string;\r\n\r\n  /**\r\n   * `state` takes precedence over `attachmentCount` and `icon`\r\n   */\r\n  @Prop()\r\n  status?: AccordionSectionState;\r\n\r\n  /**\r\n   * `attachmentCount` takes precedence over `icon`\r\n   */\r\n  @Prop()\r\n  attachmentCount?: number;\r\n\r\n  /**\r\n   * To set an icon in the heading handle.\r\n   */\r\n  @Prop()\r\n  icon?: string;\r\n\r\n  /**\r\n   * The status of the section.\r\n   */\r\n  @Prop()\r\n  statusDescription?: string;\r\n\r\n  /**\r\n   * Set the Accordion Section open.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Set when this Accordion Section contains or will contain an Accordion.\r\n   */\r\n  @Prop({ reflect: true })\r\n  hasNestedAccordion = false;\r\n\r\n  /**\r\n   * Calling this method will set focus to the handle.\r\n   */\r\n  @Method()\r\n  async focusHandle() {\r\n    this.handleElementRef?.focus();\r\n  }\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  get containsNestedAccordion() {\r\n    return this.host.querySelector(\"dso-accordion\") !== null;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.accordion?._getState().then((state) => {\r\n      this.accordionState = state;\r\n\r\n      forceUpdate(this.host);\r\n    });\r\n  }\r\n\r\n  get isNeutral() {\r\n    return this.accordionState?.variant === \"neutral\";\r\n  }\r\n\r\n  private async scrollIntoView(bodyHeight: number | undefined, behavior: ScrollBehavior = \"auto\"): Promise<void> {\r\n    const bodyClientRect = this.sectionBody?.getBoundingClientRect();\r\n    const headingClientRect = this.sectionHeading?.getBoundingClientRect();\r\n\r\n    if (!bodyClientRect || !headingClientRect || !this.accordionState) {\r\n      return;\r\n    }\r\n\r\n    // this y is relative to the top of the viewport.\r\n    const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? bodyHeight ?? 0 : 0);\r\n    if (sectionBottomY > window.innerHeight) {\r\n      const expandedAccordionHeight = sectionBottomY - headingClientRect.top;\r\n      const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;\r\n\r\n      window.scrollTo({\r\n        top: shouldScrollToTopOfSection\r\n          ? this.host.offsetTop\r\n          : this.host.offsetTop - (window.innerHeight - expandedAccordionHeight),\r\n        behavior,\r\n      });\r\n    } else if (headingClientRect.top < 0) {\r\n      window.scrollTo({\r\n        top: this.host.offsetTop,\r\n        behavior,\r\n      });\r\n    }\r\n  }\r\n\r\n  private get accordion() {\r\n    return this.host.closest(\"dso-accordion\");\r\n  }\r\n\r\n  private handleClick = (event: MouseEvent) => {\r\n    this.dsoToggleClick.emit({\r\n      originalEvent: event,\r\n      open: !this.open,\r\n    });\r\n  };\r\n\r\n  private handleExpandableAnimationStart = (e: CustomEvent<any>) => {\r\n    this.dsoAnimationStart.emit({\r\n      animation: this.open ? \"opening\" : \"closing\",\r\n      scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n    });\r\n  };\r\n\r\n  private handleExpandableAnimationEnd = (e: CustomEvent<ExpandableAnimationEndEvent>) => {\r\n    this.dsoAnimationEnd.emit({\r\n      open: this.open,\r\n      scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n    });\r\n  };\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoToggleClick!: EventEmitter<AccordionSectionToggleClickEvent>;\r\n\r\n  /**\r\n   * Event emitted when the Accordion Section starts its toggle animation.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnimationStart!: EventEmitter<AccordionSectionAnimationStartEvent>;\r\n\r\n  /**\r\n   * Event emitted when the Accordion Section completes its toggle animation.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnimationEnd!: EventEmitter<AccordionSectionAnimationEndEvent>;\r\n\r\n  private handleElementRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n  render() {\r\n    const { variant, reverseAlign } = this.accordionState ?? {};\r\n    const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          \"dso-accordion-section\": true,\r\n          [\"dso-accordion-\" + variant]: true,\r\n          \"dso-nested-accordion\": this.hasNestedAccordion || this.containsNestedAccordion,\r\n          \"dso-accordion-reverse-align\": reverseAlign ?? false,\r\n        }}\r\n        hidden={!variant}\r\n        onMouseenter={() => (this.hover = true)}\r\n        onMouseleave={() => (this.hover = false)}\r\n      >\r\n        <Handle heading={this.heading} ref={(element) => (this.sectionHeading = element)}>\r\n          <HandleElement\r\n            handleUrl={this.handleUrl}\r\n            onClick={this.handleClick}\r\n            open={this.open}\r\n            handleElementRef={(e) => (this.handleElementRef = e)}\r\n          >\r\n            {reverseAlign ? (\r\n              <Fragment>\r\n                {hasAddons && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    <HandleIcon icon={this.icon} />\r\n                  </div>\r\n                )}\r\n\r\n                <span>{this.handleTitle}</span>\r\n\r\n                <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-down\"></dso-icon>\r\n              </Fragment>\r\n            ) : (\r\n              <Fragment>\r\n                <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-right\"></dso-icon>\r\n\r\n                {this.status && <span class=\"sr-only\">{stateMap[this.status]}</span>}\r\n\r\n                <span>\r\n                  {this.handleTitle}\r\n                  {this.isNeutral && (\r\n                    <dso-icon class=\"info-icon\" icon={this.open || this.hover ? \"info-active\" : \"info\"} />\r\n                  )}\r\n                </span>\r\n\r\n                {hasAddons && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n                    <HandleIcon state={this.status} icon={this.icon} attachmentCount={this.attachmentCount} />\r\n                  </div>\r\n                )}\r\n              </Fragment>\r\n            )}\r\n          </HandleElement>\r\n        </Handle>\r\n        <dso-expandable\r\n          class=\"dso-section-body\"\r\n          open={this.open}\r\n          enableAnimation\r\n          minimumHeight={this.isNeutral ? 0 : 4}\r\n          onDsoExpandableAnimationStart={this.handleExpandableAnimationStart}\r\n          onDsoExpandableAnimationEnd={this.handleExpandableAnimationEnd}\r\n        >\r\n          <div class=\"dso-section-body-content\" ref={(element) => (this.sectionBody = element)}>\r\n            <slot />\r\n          </div>\r\n        </dso-expandable>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/date-picker/date-utils.js

@@ -9,12 +9,12 @@ export function parseToValueFormat(value) {
   if (matches.length === 3 &&
     typeof matches[0] === "string" &&
     typeof matches[1] === "string" &&
-    typeof matches[2] === "string" &&
-    matches[2].length === 4) {
-    return matches
-      .map((match) => (match.length === 1 ? `0${match}` : match))
-      .reverse()
-      .join("-");
+    typeof matches[2] === "string") {
+    const [d, m, y] = matches;
+    const dd = d.padStart(2, "0");
+    const mm = m.padStart(2, "0");
+    const yyyy = y.padStart(4, "0");
+    return [yyyy, mm, dd].join("-");
   }
   return value;
 }
@@ -27,7 +27,7 @@ export function parseToDutchFormat(date) {
   }
   const dd = date.getDate().toString(10).padStart(2, "0");
   const mm = (date.getMonth() + 1).toString(10).padStart(2, "0");
-  const yyyy = date.getFullYear().toString(10);
-  return `${dd}-${mm}-${yyyy}`;
+  const yyyy = date.getFullYear().toString(10).padStart(4, "0");
+  return [dd, mm, yyyy].join("-");
 }
 //# sourceMappingURL=date-utils.js.map

package/dist/collection/components/date-picker/date-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-utils.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAAyB;EAC1D,IAAI,CAAC,KAAK,EAAE;IACV,OAAO;GACR;EAED,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;EAEjC,IACE,OAAO,CAAC,MAAM,KAAK,CAAC;IACpB,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,QAAQ;IAC9B,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,QAAQ;IAC9B,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,QAAQ;IAC9B,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,EACvB;IACA,OAAO,OAAO;OACX,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;OAC1D,OAAO,EAAE;OACT,IAAI,CAAC,GAAG,CAAC,CAAC;GACd;EAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,IAAiB;EAClD,IAAI,CAAC,IAAI,EAAE;IACT,OAAO,EAAE,CAAC;GACX;EAED,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;EACxD,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;EAC/D,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;EAE7C,OAAO,GAAG,EAAE,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC;AAC/B,CAAC","sourcesContent":["/**\r\n * dd-mm-yyyy to yyyy-mm-dd\r\n */\r\nexport function parseToValueFormat(value: string | undefined): string | undefined {\r\n  if (!value) {\r\n    return;\r\n  }\r\n\r\n  const matches = value.split(\"-\");\r\n\r\n  if (\r\n    matches.length === 3 &&\r\n    typeof matches[0] === \"string\" &&\r\n    typeof matches[1] === \"string\" &&\r\n    typeof matches[2] === \"string\" &&\r\n    matches[2].length === 4\r\n  ) {\r\n    return matches\r\n      .map((match) => (match.length === 1 ? `0${match}` : match))\r\n      .reverse()\r\n      .join(\"-\");\r\n  }\r\n\r\n  return value;\r\n}\r\n\r\n/**\r\n * yyyy-mm-dd to dd-mm-yyyy\r\n */\r\nexport function parseToDutchFormat(date: Date | null): string {\r\n  if (!date) {\r\n    return \"\";\r\n  }\r\n\r\n  const dd = date.getDate().toString(10).padStart(2, \"0\");\r\n  const mm = (date.getMonth() + 1).toString(10).padStart(2, \"0\");\r\n  const yyyy = date.getFullYear().toString(10);\r\n\r\n  return `${dd}-${mm}-${yyyy}`;\r\n}\r\n"]}
+{"version":3,"file":"date-utils.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAAyB;EAC1D,IAAI,CAAC,KAAK,EAAE;IACV,OAAO;GACR;EAED,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;EAEjC,IACE,OAAO,CAAC,MAAM,KAAK,CAAC;IACpB,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,QAAQ;IAC9B,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,QAAQ;IAC9B,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,QAAQ,EAC9B;IACA,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC;IAE1B,MAAM,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC9B,MAAM,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC9B,MAAM,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAEhC,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GACjC;EAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,IAAiB;EAClD,IAAI,CAAC,IAAI,EAAE;IACT,OAAO,EAAE,CAAC;GACX;EAED,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;EACxD,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;EAC/D,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;EAE9D,OAAO,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClC,CAAC","sourcesContent":["/**\r\n * dd-mm-yyyy to yyyy-mm-dd\r\n */\r\nexport function parseToValueFormat(value: string | undefined): string | undefined {\r\n  if (!value) {\r\n    return;\r\n  }\r\n\r\n  const matches = value.split(\"-\");\r\n\r\n  if (\r\n    matches.length === 3 &&\r\n    typeof matches[0] === \"string\" &&\r\n    typeof matches[1] === \"string\" &&\r\n    typeof matches[2] === \"string\"\r\n  ) {\r\n    const [d, m, y] = matches;\r\n\r\n    const dd = d.padStart(2, \"0\");\r\n    const mm = m.padStart(2, \"0\");\r\n    const yyyy = y.padStart(4, \"0\");\r\n\r\n    return [yyyy, mm, dd].join(\"-\");\r\n  }\r\n\r\n  return value;\r\n}\r\n\r\n/**\r\n * yyyy-mm-dd to dd-mm-yyyy\r\n */\r\nexport function parseToDutchFormat(date: Date | null): string {\r\n  if (!date) {\r\n    return \"\";\r\n  }\r\n\r\n  const dd = date.getDate().toString(10).padStart(2, \"0\");\r\n  const mm = (date.getMonth() + 1).toString(10).padStart(2, \"0\");\r\n  const yyyy = date.getFullYear().toString(10).padStart(4, \"0\");\r\n\r\n  return [dd, mm, yyyy].join(\"-\");\r\n}\r\n"]}

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

@@ -86,9 +86,15 @@ export class DocumentComponent {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
+          "original": "DocumentComponentInputType",
+          "resolved": "XMLDocument | string | undefined",
+          "references": {
+            "DocumentComponentInputType": {
+              "location": "import",
+              "path": "./document-component.models",
+              "id": "src/components/document-component/document-component.models.ts::DocumentComponentInputType"
+            }
+          }
         },
         "required": false,
         "optional": true,
@@ -103,9 +109,15 @@ export class DocumentComponent {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
+          "original": "DocumentComponentInputType",
+          "resolved": "XMLDocument | string | undefined",
+          "references": {
+            "DocumentComponentInputType": {
+              "location": "import",
+              "path": "./document-component.models",
+              "id": "src/components/document-component/document-component.models.ts::DocumentComponentInputType"
+            }
+          }
         },
         "required": false,
         "optional": true,
@@ -120,9 +132,15 @@ export class DocumentComponent {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
+          "original": "DocumentComponentInputType",
+          "resolved": "XMLDocument | string | undefined",
+          "references": {
+            "DocumentComponentInputType": {
+              "location": "import",
+              "path": "./document-component.models",
+              "id": "src/components/document-component/document-component.models.ts::DocumentComponentInputType"
+            }
+          }
         },
         "required": false,
         "optional": true,
@@ -137,9 +155,15 @@ export class DocumentComponent {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
+          "original": "DocumentComponentInputType",
+          "resolved": "XMLDocument | string | undefined",
+          "references": {
+            "DocumentComponentInputType": {
+              "location": "import",
+              "path": "./document-component.models",
+              "id": "src/components/document-component/document-component.models.ts::DocumentComponentInputType"
+            }
+          }
         },
         "required": false,
         "optional": true,

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"document-component.models.js","sourceRoot":"","sources":["../../../src/components/document-component/document-component.models.ts"],"names":[],"mappings":"","sourcesContent":["import { DsoOzonContentCustomEvent } from \"../../components\";\r\nimport { OzonContentAnchorClickEvent } from \"../ozon-content/ozon-content.interfaces\";\r\n\r\nexport interface DocumentComponentOpenToggleEvent {\r\n  originalEvent: Event;\r\n  open: boolean;\r\n}\r\n\r\nexport interface DocumentComponentToggleAnnotationEvent {\r\n  originalEvent: Event;\r\n}\r\n\r\nexport type DocumentComponentWijzigactie = \"voegtoe\" | \"verwijder\" | \"nieuweContainer\" | \"verwijderContainer\";\r\n\r\nexport interface DocumentComponentOzonContentAnchorClickEvent {\r\n  originalEvent: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>;\r\n  ozonContentAnchorClick: OzonContentAnchorClickEvent;\r\n}\r\n"]}
+{"version":3,"file":"document-component.models.js","sourceRoot":"","sources":["../../../src/components/document-component/document-component.models.ts"],"names":[],"mappings":"","sourcesContent":["import { DsoOzonContentCustomEvent } from \"../../components\";\r\nimport { OzonContentAnchorClickEvent } from \"../ozon-content/ozon-content.interfaces\";\r\n\r\nexport interface DocumentComponentOpenToggleEvent {\r\n  originalEvent: Event;\r\n  open: boolean;\r\n}\r\n\r\nexport interface DocumentComponentToggleAnnotationEvent {\r\n  originalEvent: Event;\r\n}\r\n\r\nexport type DocumentComponentWijzigactie = \"voegtoe\" | \"verwijder\" | \"nieuweContainer\" | \"verwijderContainer\";\r\n\r\nexport interface DocumentComponentOzonContentAnchorClickEvent {\r\n  originalEvent: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>;\r\n  ozonContentAnchorClick: OzonContentAnchorClickEvent;\r\n}\r\n\r\nexport type DocumentComponentInputType = XMLDocument | string;\r\n"]}

package/dist/collection/components/expandable/expandable.js

@@ -68,6 +68,9 @@ export class Expandable {
       duration: 260,
       autoplay: false,
       direction: "normal",
+      changeBegin: () => {
+        this.dsoExpandableAnimationStart.emit({});
+      },
       begin: () => {
         if (this.open) {
           this.host.style.visibility = "";
@@ -188,6 +191,27 @@ export class Expandable {
   }
   static get events() {
     return [{
+        "method": "dsoExpandableAnimationStart",
+        "name": "dsoExpandableAnimationStart",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired before expanding."
+        },
+        "complexType": {
+          "original": "ExpandableAnimationStartEvent",
+          "resolved": "ExpandableAnimationStartEvent",
+          "references": {
+            "ExpandableAnimationStartEvent": {
+              "location": "local",
+              "path": "/usr/src/app/packages/core/src/components/expandable/expandable.tsx",
+              "id": "src/components/expandable/expandable.tsx::ExpandableAnimationStartEvent"
+            }
+          }
+        }
+      }, {
         "method": "dsoExpandableAnimationEnd",
         "name": "dsoExpandableAnimationEnd",
         "bubbles": false,
@@ -195,7 +219,7 @@ export class Expandable {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fired when the animation ends. Only when `enableAnimation = true`."
+          "text": "Fired after expanding."
         },
         "complexType": {
           "original": "ExpandableAnimationEndEvent",