@dso-toolkit/core 62.0.0 → 62.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/dist/cjs/dso-accordion-section.cjs.entry.js +39 -27
  2. package/dist/cjs/dso-accordion-section.cjs.entry.js.map +1 -1
  3. package/dist/cjs/dso-date-picker.cjs.entry.js +8 -8
  4. package/dist/cjs/dso-date-picker.cjs.entry.js.map +1 -1
  5. package/dist/cjs/dso-expandable.cjs.entry.js +4 -0
  6. package/dist/cjs/dso-expandable.cjs.entry.js.map +1 -1
  7. package/dist/cjs/dso-toolkit.cjs.js +1 -1
  8. package/dist/cjs/loader.cjs.js +1 -1
  9. package/dist/collection/components/accordion/components/accordion-section.interfaces.js.map +1 -1
  10. package/dist/collection/components/accordion/components/accordion-section.js +129 -9
  11. package/dist/collection/components/accordion/components/accordion-section.js.map +1 -1
  12. package/dist/collection/components/date-picker/date-utils.js +8 -8
  13. package/dist/collection/components/date-picker/date-utils.js.map +1 -1
  14. package/dist/collection/components/expandable/expandable.js +25 -1
  15. package/dist/collection/components/expandable/expandable.js.map +1 -1
  16. package/dist/components/attachments-counter.js +41 -0
  17. package/dist/components/attachments-counter.js.map +1 -0
  18. package/dist/components/dso-accordion-section.js +50 -31
  19. package/dist/components/dso-accordion-section.js.map +1 -1
  20. package/dist/components/dso-attachments-counter.js +1 -37
  21. package/dist/components/dso-attachments-counter.js.map +1 -1
  22. package/dist/components/dso-date-picker.js +8 -8
  23. package/dist/components/dso-date-picker.js.map +1 -1
  24. package/dist/components/expandable.js +4 -0
  25. package/dist/components/expandable.js.map +1 -1
  26. package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
  27. package/dist/dso-toolkit/dso-toolkit.esm.js.map +1 -1
  28. package/dist/dso-toolkit/p-000f7731.entry.js +2 -0
  29. package/dist/dso-toolkit/p-000f7731.entry.js.map +1 -0
  30. package/dist/dso-toolkit/{p-7d90b3b2.entry.js → p-4239e3d6.entry.js} +2 -2
  31. package/dist/dso-toolkit/p-4239e3d6.entry.js.map +1 -0
  32. package/dist/dso-toolkit/p-7edafced.entry.js +2 -0
  33. package/dist/dso-toolkit/p-7edafced.entry.js.map +1 -0
  34. package/dist/esm/dso-accordion-section.entry.js +40 -28
  35. package/dist/esm/dso-accordion-section.entry.js.map +1 -1
  36. package/dist/esm/dso-date-picker.entry.js +8 -8
  37. package/dist/esm/dso-date-picker.entry.js.map +1 -1
  38. package/dist/esm/dso-expandable.entry.js +4 -0
  39. package/dist/esm/dso-expandable.entry.js.map +1 -1
  40. package/dist/esm/dso-toolkit.js +1 -1
  41. package/dist/esm/loader.js +1 -1
  42. package/dist/types/components/accordion/components/accordion-section.d.ts +15 -1
  43. package/dist/types/components/accordion/components/accordion-section.interfaces.d.ts +11 -1
  44. package/dist/types/components/expandable/expandable.d.ts +7 -1
  45. package/dist/types/components.d.ts +25 -5
  46. package/package.json +2 -2
  47. package/dist/collection/components/accordion/components/handles/element.handle.js +0 -8
  48. package/dist/collection/components/accordion/components/handles/element.handle.js.map +0 -1
  49. package/dist/collection/components/accordion/components/handles/heading.handle.js +0 -15
  50. package/dist/collection/components/accordion/components/handles/heading.handle.js.map +0 -1
  51. package/dist/collection/components/accordion/components/handles/icon.handle.js +0 -14
  52. package/dist/collection/components/accordion/components/handles/icon.handle.js.map +0 -1
  53. package/dist/collection/components/accordion/components/handles/index.js +0 -5
  54. package/dist/collection/components/accordion/components/handles/index.js.map +0 -1
  55. package/dist/collection/components/accordion/components/handles/state-icon.handle.js +0 -19
  56. package/dist/collection/components/accordion/components/handles/state-icon.handle.js.map +0 -1
  57. package/dist/dso-toolkit/p-6b42f0cc.entry.js +0 -2
  58. package/dist/dso-toolkit/p-6b42f0cc.entry.js.map +0 -1
  59. package/dist/dso-toolkit/p-7d90b3b2.entry.js.map +0 -1
  60. package/dist/dso-toolkit/p-c47aea93.entry.js +0 -2
  61. package/dist/dso-toolkit/p-c47aea93.entry.js.map +0 -1
  62. package/dist/types/components/accordion/components/handles/element.handle.d.ts +0 -6
  63. package/dist/types/components/accordion/components/handles/heading.handle.d.ts +0 -6
  64. package/dist/types/components/accordion/components/handles/icon.handle.d.ts +0 -7
  65. package/dist/types/components/accordion/components/handles/index.d.ts +0 -4
  66. package/dist/types/components/accordion/components/handles/state-icon.handle.d.ts +0 -5
@@ -6,7 +6,7 @@ const index = require('./index-d46ec033.js');
6
6
 
7
7
  const defineCustomElements = (win, options) => {
8
8
  if (typeof window === 'undefined') return undefined;
9
- 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);
9
+ 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"],"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);
10
10
  };
11
11
 
12
12
  exports.setNonce = index.setNonce;
@@ -1 +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"]}
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 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"]}
@@ -1,6 +1,52 @@
1
1
  import { h, forceUpdate, Fragment, Host, } from "@stencil/core";
2
2
  import { stateMap, } from "./accordion-section.interfaces";
3
- import { Handle, HandleElement, HandleIcon } from "./handles";
3
+ const HandleElement = ({ handleUrl, onClick, open, handleElementRef }, children) => {
4
+ if (handleUrl) {
5
+ return (h("a", { href: handleUrl, onClick: onClick, "aria-expanded": open ? "true" : "false", ref: handleElementRef }, children));
6
+ }
7
+ return (h("button", { type: "button", onClick: onClick, "aria-expanded": open ? "true" : "false", ref: handleElementRef }, children));
8
+ };
9
+ const Handle = ({ heading, ref }, children) => {
10
+ switch (heading) {
11
+ default:
12
+ case "h2":
13
+ return (h("h2", { ref: ref, class: "dso-section-handle" }, children));
14
+ case "h3":
15
+ return (h("h3", { ref: ref, class: "dso-section-handle" }, children));
16
+ case "h4":
17
+ return (h("h4", { ref: ref, class: "dso-section-handle" }, children));
18
+ case "h5":
19
+ return (h("h5", { ref: ref, class: "dso-section-handle" }, children));
20
+ }
21
+ };
22
+ const HandleIcon = ({ state, icon, attachmentCount }) => {
23
+ if (state) {
24
+ return h(HandleStateIcon, { state: state });
25
+ }
26
+ if (attachmentCount) {
27
+ return h("dso-attachments-counter", { count: attachmentCount });
28
+ }
29
+ if (icon) {
30
+ return h("dso-icon", { icon: icon });
31
+ }
32
+ };
33
+ const HandleStateIcon = ({ state }) => {
34
+ if (state === "error") {
35
+ return h("dso-icon", { icon: "status-error" });
36
+ }
37
+ if (state === "danger") {
38
+ return h("dso-icon", { icon: "status-danger" });
39
+ }
40
+ if (state === "success") {
41
+ return h("dso-icon", { icon: "status-success" });
42
+ }
43
+ if (state === "info") {
44
+ return h("dso-icon", { icon: "status-info" });
45
+ }
46
+ if (state === "warning") {
47
+ return h("dso-icon", { icon: "status-warning" });
48
+ }
49
+ };
4
50
  export class AccordionSection {
5
51
  constructor() {
6
52
  this.handleClick = (event) => {
@@ -9,10 +55,16 @@ export class AccordionSection {
9
55
  open: !this.open,
10
56
  });
11
57
  };
58
+ this.handleExpandableAnimationStart = (e) => {
59
+ this.dsoAnimationStart.emit({
60
+ animation: this.open ? "opening" : "closing",
61
+ scrollIntoView: (behavior = "auto") => this.scrollIntoView(e.detail.bodyHeight, behavior),
62
+ });
63
+ };
12
64
  this.handleExpandableAnimationEnd = (e) => {
13
65
  this.dsoAnimationEnd.emit({
14
66
  open: this.open,
15
- scrollIntoView: () => this.scrollIntoView(e.detail.bodyHeight),
67
+ scrollIntoView: (behavior = "auto") => this.scrollIntoView(e.detail.bodyHeight, behavior),
16
68
  });
17
69
  };
18
70
  this.handleTitle = undefined;
@@ -26,9 +78,18 @@ export class AccordionSection {
26
78
  this.hasNestedAccordion = false;
27
79
  this.hover = false;
28
80
  }
81
+ /**
82
+ * Calling this method will set focus to the handle.
83
+ */
84
+ async focusHandle() {
85
+ var _a;
86
+ (_a = this.handleElementRef) === null || _a === void 0 ? void 0 : _a.focus();
87
+ }
88
+ get containsNestedAccordion() {
89
+ return this.host.querySelector("dso-accordion") !== null;
90
+ }
29
91
  componentWillLoad() {
30
92
  var _a;
31
- this.hasNestedAccordion = this.host.querySelector("dso-accordion") !== null;
32
93
  (_a = this.accordion) === null || _a === void 0 ? void 0 : _a._getState().then((state) => {
33
94
  this.accordionState = state;
34
95
  forceUpdate(this.host);
@@ -38,7 +99,7 @@ export class AccordionSection {
38
99
  var _a;
39
100
  return ((_a = this.accordionState) === null || _a === void 0 ? void 0 : _a.variant) === "neutral";
40
101
  }
41
- async scrollIntoView(bodyHeight) {
102
+ async scrollIntoView(bodyHeight, behavior = "auto") {
42
103
  var _a, _b;
43
104
  const bodyClientRect = (_a = this.sectionBody) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
44
105
  const headingClientRect = (_b = this.sectionHeading) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
@@ -54,13 +115,13 @@ export class AccordionSection {
54
115
  top: shouldScrollToTopOfSection
55
116
  ? this.host.offsetTop
56
117
  : this.host.offsetTop - (window.innerHeight - expandedAccordionHeight),
57
- behavior: "smooth",
118
+ behavior,
58
119
  });
59
120
  }
60
121
  else if (headingClientRect.top < 0) {
61
122
  window.scrollTo({
62
123
  top: this.host.offsetTop,
63
- behavior: "smooth",
124
+ behavior,
64
125
  });
65
126
  }
66
127
  }
@@ -74,9 +135,9 @@ export class AccordionSection {
74
135
  return (h(Host, { class: {
75
136
  "dso-accordion-section": true,
76
137
  ["dso-accordion-" + variant]: true,
77
- "dso-nested-accordion": this.hasNestedAccordion,
138
+ "dso-nested-accordion": this.hasNestedAccordion || this.containsNestedAccordion,
78
139
  "dso-accordion-reverse-align": reverseAlign !== null && reverseAlign !== void 0 ? reverseAlign : false,
79
- }, 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)))));
140
+ }, 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)))));
80
141
  }
81
142
  static get is() { return "dso-accordion-section"; }
82
143
  static get encapsulation() { return "shadow"; }
@@ -241,12 +302,29 @@ export class AccordionSection {
241
302
  "attribute": "open",
242
303
  "reflect": true,
243
304
  "defaultValue": "false"
305
+ },
306
+ "hasNestedAccordion": {
307
+ "type": "boolean",
308
+ "mutable": false,
309
+ "complexType": {
310
+ "original": "boolean",
311
+ "resolved": "boolean",
312
+ "references": {}
313
+ },
314
+ "required": false,
315
+ "optional": false,
316
+ "docs": {
317
+ "tags": [],
318
+ "text": "Set when this Accordion Section contains or will contain an Accordion."
319
+ },
320
+ "attribute": "has-nested-accordion",
321
+ "reflect": true,
322
+ "defaultValue": "false"
244
323
  }
245
324
  };
246
325
  }
247
326
  static get states() {
248
327
  return {
249
- "hasNestedAccordion": {},
250
328
  "hover": {}
251
329
  };
252
330
  }
@@ -272,6 +350,27 @@ export class AccordionSection {
272
350
  }
273
351
  }
274
352
  }
353
+ }, {
354
+ "method": "dsoAnimationStart",
355
+ "name": "dsoAnimationStart",
356
+ "bubbles": false,
357
+ "cancelable": true,
358
+ "composed": true,
359
+ "docs": {
360
+ "tags": [],
361
+ "text": "Event emitted when the Accordion Section starts its toggle animation."
362
+ },
363
+ "complexType": {
364
+ "original": "AccordionSectionAnimationStartEvent",
365
+ "resolved": "AccordionSectionAnimationStartEvent",
366
+ "references": {
367
+ "AccordionSectionAnimationStartEvent": {
368
+ "location": "import",
369
+ "path": "./accordion-section.interfaces",
370
+ "id": "src/components/accordion/components/accordion-section.interfaces.ts::AccordionSectionAnimationStartEvent"
371
+ }
372
+ }
373
+ }
275
374
  }, {
276
375
  "method": "dsoAnimationEnd",
277
376
  "name": "dsoAnimationEnd",
@@ -295,6 +394,27 @@ export class AccordionSection {
295
394
  }
296
395
  }];
297
396
  }
397
+ static get methods() {
398
+ return {
399
+ "focusHandle": {
400
+ "complexType": {
401
+ "signature": "() => Promise<void>",
402
+ "parameters": [],
403
+ "references": {
404
+ "Promise": {
405
+ "location": "global",
406
+ "id": "global::Promise"
407
+ }
408
+ },
409
+ "return": "Promise<void>"
410
+ },
411
+ "docs": {
412
+ "text": "Calling this method will set focus to the handle.",
413
+ "tags": []
414
+ }
415
+ }
416
+ };
417
+ }
298
418
  static get elementRef() { return "host"; }
299
419
  }
300
420
  //# sourceMappingURL=accordion-section.js.map
@@ -1 +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"]}
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 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"]}
@@ -9,12 +9,12 @@ export function parseToValueFormat(value) {
9
9
  if (matches.length === 3 &&
10
10
  typeof matches[0] === "string" &&
11
11
  typeof matches[1] === "string" &&
12
- typeof matches[2] === "string" &&
13
- matches[2].length === 4) {
14
- return matches
15
- .map((match) => (match.length === 1 ? `0${match}` : match))
16
- .reverse()
17
- .join("-");
12
+ typeof matches[2] === "string") {
13
+ const [d, m, y] = matches;
14
+ const dd = d.padStart(2, "0");
15
+ const mm = m.padStart(2, "0");
16
+ const yyyy = y.padStart(4, "0");
17
+ return [yyyy, mm, dd].join("-");
18
18
  }
19
19
  return value;
20
20
  }
@@ -27,7 +27,7 @@ export function parseToDutchFormat(date) {
27
27
  }
28
28
  const dd = date.getDate().toString(10).padStart(2, "0");
29
29
  const mm = (date.getMonth() + 1).toString(10).padStart(2, "0");
30
- const yyyy = date.getFullYear().toString(10);
31
- return `${dd}-${mm}-${yyyy}`;
30
+ const yyyy = date.getFullYear().toString(10).padStart(4, "0");
31
+ return [dd, mm, yyyy].join("-");
32
32
  }
33
33
  //# sourceMappingURL=date-utils.js.map
@@ -1 +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"]}
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,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"]}
@@ -68,6 +68,9 @@ export class Expandable {
68
68
  duration: 260,
69
69
  autoplay: false,
70
70
  direction: "normal",
71
+ changeBegin: () => {
72
+ this.dsoExpandableAnimationStart.emit({});
73
+ },
71
74
  begin: () => {
72
75
  if (this.open) {
73
76
  this.host.style.visibility = "";
@@ -188,6 +191,27 @@ export class Expandable {
188
191
  }
189
192
  static get events() {
190
193
  return [{
194
+ "method": "dsoExpandableAnimationStart",
195
+ "name": "dsoExpandableAnimationStart",
196
+ "bubbles": false,
197
+ "cancelable": true,
198
+ "composed": true,
199
+ "docs": {
200
+ "tags": [],
201
+ "text": "Fired before expanding."
202
+ },
203
+ "complexType": {
204
+ "original": "ExpandableAnimationStartEvent",
205
+ "resolved": "ExpandableAnimationStartEvent",
206
+ "references": {
207
+ "ExpandableAnimationStartEvent": {
208
+ "location": "local",
209
+ "path": "/usr/src/app/packages/core/src/components/expandable/expandable.tsx",
210
+ "id": "src/components/expandable/expandable.tsx::ExpandableAnimationStartEvent"
211
+ }
212
+ }
213
+ }
214
+ }, {
191
215
  "method": "dsoExpandableAnimationEnd",
192
216
  "name": "dsoExpandableAnimationEnd",
193
217
  "bubbles": false,
@@ -195,7 +219,7 @@ export class Expandable {
195
219
  "composed": true,
196
220
  "docs": {
197
221
  "tags": [],
198
- "text": "Fired when the animation ends. Only when `enableAnimation = true`."
222
+ "text": "Fired after expanding."
199
223
  },
200
224
  "complexType": {
201
225
  "original": "ExpandableAnimationEndEvent",
@@ -1 +1 @@
1
- {"version":3,"file":"expandable.js","sourceRoot":"","sources":["../../../src/components/expandable/expandable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n h,\r\n Host,\r\n Prop,\r\n State,\r\n Watch,\r\n} from \"@stencil/core\";\r\nimport anime, { AnimeInstance } from \"animejs\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nexport interface ExpandableAnimationEndEvent {\r\n bodyHeight: number | undefined;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-expandable\",\r\n styleUrl: \"expandable.scss\",\r\n shadow: true,\r\n})\r\nexport class Expandable implements ComponentInterface {\r\n private resizeObserver?: ResizeObserver;\r\n\r\n private bodyHeight?: number;\r\n\r\n private animeInstance?: AnimeInstance;\r\n\r\n @Element()\r\n host!: HTMLDsoExpandableElement;\r\n\r\n /**\r\n * Set to `true` to expand the content.\r\n */\r\n @Prop({ reflect: true })\r\n open?: boolean;\r\n\r\n /**\r\n * Set to `true` to show the content animated.\r\n */\r\n @Prop()\r\n enableAnimation = false;\r\n\r\n /**\r\n * When enableAnimation is set to `true`, this property specifies the height of this element at which the animation will expand from / collapse to\r\n */\r\n @Prop()\r\n minimumHeight?: number;\r\n\r\n @State()\r\n animationReady = false;\r\n\r\n @Watch(\"open\")\r\n toggleOpen() {\r\n if (this.enableAnimation) {\r\n this.activateAnimation();\r\n }\r\n }\r\n\r\n @Watch(\"enableAnimation\")\r\n toggleEnableAnimation(enableAnimation: boolean) {\r\n if (enableAnimation) {\r\n this.prepareAnimationResizeObserver();\r\n this.activateObserver();\r\n } else {\r\n this.resizeObserver?.disconnect();\r\n delete this.animeInstance;\r\n this.host.removeAttribute(\"style\");\r\n }\r\n }\r\n\r\n /**\r\n * Fired when the animation ends. Only when `enableAnimation = true`.\r\n */\r\n @Event({ bubbles: false })\r\n dsoExpandableAnimationEnd!: EventEmitter<ExpandableAnimationEndEvent>;\r\n\r\n componentDidLoad(): void {\r\n if (this.enableAnimation) {\r\n this.prepareAnimationResizeObserver();\r\n }\r\n\r\n this.activateObserver();\r\n }\r\n\r\n private activateObserver() {\r\n this.resizeObserver?.observe(this.host);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.resizeObserver?.disconnect();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n aria-hidden={this.open ? \"false\" : \"true\"}\r\n class={clsx({\r\n \"dso-animate-ready\": this.enableAnimation && this.animationReady,\r\n \"dso-hide\": !this.enableAnimation && !this.open,\r\n })}\r\n >\r\n <slot />\r\n </Host>\r\n );\r\n }\r\n\r\n private prepareAnimationResizeObserver(): void {\r\n this.resizeObserver = new ResizeObserver(\r\n debounce(([entry]) => {\r\n if (!entry) {\r\n throw new Error(\"No entry found\");\r\n }\r\n\r\n // entry.contentRect does not include padding, so we use getBoundingClientRect.\r\n const height = entry.target.getBoundingClientRect().height;\r\n\r\n if (this.bodyHeight !== height) {\r\n this.bodyHeight = height;\r\n }\r\n\r\n this.instantiateAnimation();\r\n }, 150)\r\n );\r\n }\r\n\r\n private instantiateAnimation(): void {\r\n this.animeInstance = anime({\r\n targets: this.host,\r\n height: this.minimumHeight ?? 0,\r\n easing: \"cubicBezier(0.4, 0, 0.2, 1)\",\r\n duration: 260,\r\n autoplay: false,\r\n direction: \"normal\",\r\n begin: () => {\r\n if (this.open) {\r\n this.host.style.visibility = \"\";\r\n this.host.style.position = \"\";\r\n this.host.style.bottom = \"\";\r\n }\r\n },\r\n complete: () => {\r\n this.host.style.height = \"\";\r\n\r\n if (!this.open) {\r\n this.host.style.visibility = \"hidden\";\r\n this.host.style.position = \"absolute\";\r\n this.host.style.bottom = \"100%\";\r\n }\r\n },\r\n changeComplete: () => {\r\n this.dsoExpandableAnimationEnd.emit({ bodyHeight: this.bodyHeight });\r\n },\r\n });\r\n\r\n if (!this.open) {\r\n this.animeInstance.reverse();\r\n this.animeInstance.play();\r\n }\r\n\r\n if (this.host) {\r\n this.host.style.height = \"\";\r\n }\r\n\r\n this.animationReady = !!this.animeInstance;\r\n }\r\n\r\n private activateAnimation(): void {\r\n if (this.animeInstance) {\r\n if (this.animeInstance.progress > 0 && this.animeInstance.progress < 100) {\r\n this.animeInstance.reverse();\r\n } else {\r\n if (this.open) {\r\n this.animeInstance.direction = \"reverse\";\r\n this.animeInstance.play();\r\n } else {\r\n this.animeInstance.direction = \"normal\";\r\n this.animeInstance.play();\r\n }\r\n }\r\n }\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"expandable.js","sourceRoot":"","sources":["../../../src/components/expandable/expandable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n h,\r\n Host,\r\n Prop,\r\n State,\r\n Watch,\r\n} from \"@stencil/core\";\r\nimport anime, { AnimeInstance } from \"animejs\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nexport interface ExpandableAnimationStartEvent {}\r\n\r\nexport interface ExpandableAnimationEndEvent {\r\n bodyHeight: number | undefined;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-expandable\",\r\n styleUrl: \"expandable.scss\",\r\n shadow: true,\r\n})\r\nexport class Expandable implements ComponentInterface {\r\n private resizeObserver?: ResizeObserver;\r\n\r\n private bodyHeight?: number;\r\n\r\n private animeInstance?: AnimeInstance;\r\n\r\n @Element()\r\n host!: HTMLDsoExpandableElement;\r\n\r\n /**\r\n * Set to `true` to expand the content.\r\n */\r\n @Prop({ reflect: true })\r\n open?: boolean;\r\n\r\n /**\r\n * Set to `true` to show the content animated.\r\n */\r\n @Prop()\r\n enableAnimation = false;\r\n\r\n /**\r\n * When enableAnimation is set to `true`, this property specifies the height of this element at which the animation will expand from / collapse to\r\n */\r\n @Prop()\r\n minimumHeight?: number;\r\n\r\n @State()\r\n animationReady = false;\r\n\r\n @Watch(\"open\")\r\n toggleOpen() {\r\n if (this.enableAnimation) {\r\n this.activateAnimation();\r\n }\r\n }\r\n\r\n @Watch(\"enableAnimation\")\r\n toggleEnableAnimation(enableAnimation: boolean) {\r\n if (enableAnimation) {\r\n this.prepareAnimationResizeObserver();\r\n this.activateObserver();\r\n } else {\r\n this.resizeObserver?.disconnect();\r\n delete this.animeInstance;\r\n this.host.removeAttribute(\"style\");\r\n }\r\n }\r\n\r\n /**\r\n * Fired before expanding.\r\n */\r\n @Event({ bubbles: false })\r\n dsoExpandableAnimationStart!: EventEmitter<ExpandableAnimationStartEvent>;\r\n\r\n /**\r\n * Fired after expanding.\r\n */\r\n @Event({ bubbles: false })\r\n dsoExpandableAnimationEnd!: EventEmitter<ExpandableAnimationEndEvent>;\r\n\r\n componentDidLoad(): void {\r\n if (this.enableAnimation) {\r\n this.prepareAnimationResizeObserver();\r\n }\r\n\r\n this.activateObserver();\r\n }\r\n\r\n private activateObserver() {\r\n this.resizeObserver?.observe(this.host);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.resizeObserver?.disconnect();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n aria-hidden={this.open ? \"false\" : \"true\"}\r\n class={clsx({\r\n \"dso-animate-ready\": this.enableAnimation && this.animationReady,\r\n \"dso-hide\": !this.enableAnimation && !this.open,\r\n })}\r\n >\r\n <slot />\r\n </Host>\r\n );\r\n }\r\n\r\n private prepareAnimationResizeObserver(): void {\r\n this.resizeObserver = new ResizeObserver(\r\n debounce(([entry]) => {\r\n if (!entry) {\r\n throw new Error(\"No entry found\");\r\n }\r\n\r\n // entry.contentRect does not include padding, so we use getBoundingClientRect.\r\n const height = entry.target.getBoundingClientRect().height;\r\n\r\n if (this.bodyHeight !== height) {\r\n this.bodyHeight = height;\r\n }\r\n\r\n this.instantiateAnimation();\r\n }, 150)\r\n );\r\n }\r\n\r\n private instantiateAnimation(): void {\r\n this.animeInstance = anime({\r\n targets: this.host,\r\n height: this.minimumHeight ?? 0,\r\n easing: \"cubicBezier(0.4, 0, 0.2, 1)\",\r\n duration: 260,\r\n autoplay: false,\r\n direction: \"normal\",\r\n changeBegin: () => {\r\n this.dsoExpandableAnimationStart.emit({});\r\n },\r\n begin: () => {\r\n if (this.open) {\r\n this.host.style.visibility = \"\";\r\n this.host.style.position = \"\";\r\n this.host.style.bottom = \"\";\r\n }\r\n },\r\n complete: () => {\r\n this.host.style.height = \"\";\r\n\r\n if (!this.open) {\r\n this.host.style.visibility = \"hidden\";\r\n this.host.style.position = \"absolute\";\r\n this.host.style.bottom = \"100%\";\r\n }\r\n },\r\n changeComplete: () => {\r\n this.dsoExpandableAnimationEnd.emit({ bodyHeight: this.bodyHeight });\r\n },\r\n });\r\n\r\n if (!this.open) {\r\n this.animeInstance.reverse();\r\n this.animeInstance.play();\r\n }\r\n\r\n if (this.host) {\r\n this.host.style.height = \"\";\r\n }\r\n\r\n this.animationReady = !!this.animeInstance;\r\n }\r\n\r\n private activateAnimation(): void {\r\n if (this.animeInstance) {\r\n if (this.animeInstance.progress > 0 && this.animeInstance.progress < 100) {\r\n this.animeInstance.reverse();\r\n } else {\r\n if (this.open) {\r\n this.animeInstance.direction = \"reverse\";\r\n this.animeInstance.play();\r\n } else {\r\n this.animeInstance.direction = \"normal\";\r\n this.animeInstance.play();\r\n }\r\n }\r\n }\r\n }\r\n}\r\n"]}
@@ -0,0 +1,41 @@
1
+ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
+ import { d as defineCustomElement$1 } from './icon.js';
3
+
4
+ const attachmentsCounterCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-attachments{color:var(--dso-attachments-counter-color, #666);display:inline-block;font-weight:400;text-decoration:none;white-space:nowrap}";
5
+
6
+ const AttachmentsCounter = /*@__PURE__*/ proxyCustomElement(class AttachmentsCounter extends HTMLElement {
7
+ constructor() {
8
+ super();
9
+ this.__registerHost();
10
+ this.__attachShadow();
11
+ this.count = undefined;
12
+ }
13
+ render() {
14
+ return (h("span", { class: "dso-attachments" }, this.count, " ", h("span", { class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), h("dso-icon", { icon: "paperclip" })));
15
+ }
16
+ static get style() { return attachmentsCounterCss; }
17
+ }, [1, "dso-attachments-counter", {
18
+ "count": [2]
19
+ }]);
20
+ function defineCustomElement() {
21
+ if (typeof customElements === "undefined") {
22
+ return;
23
+ }
24
+ const components = ["dso-attachments-counter", "dso-icon"];
25
+ components.forEach(tagName => { switch (tagName) {
26
+ case "dso-attachments-counter":
27
+ if (!customElements.get(tagName)) {
28
+ customElements.define(tagName, AttachmentsCounter);
29
+ }
30
+ break;
31
+ case "dso-icon":
32
+ if (!customElements.get(tagName)) {
33
+ defineCustomElement$1();
34
+ }
35
+ break;
36
+ } });
37
+ }
38
+
39
+ export { AttachmentsCounter as A, defineCustomElement as d };
40
+
41
+ //# sourceMappingURL=attachments-counter.js.map
@@ -0,0 +1 @@
1
+ {"file":"attachments-counter.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,4UAA4U;;MCO7V,kBAAkB;;;;;;;EAO7B,MAAM;IACJ,QACE,YAAM,KAAK,EAAC,iBAAiB,IAC1B,IAAI,CAAC,KAAK,OAAE,YAAM,KAAK,EAAC,SAAS,eAAS,IAAI,CAAC,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAQ,EAC9E,gBAAU,IAAI,EAAC,WAAW,GAAY,CACjC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/attachments-counter/attachments-counter.scss?tag=dso-attachments-counter&encapsulation=shadow","src/components/attachments-counter/attachments-counter.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/attachments-counter\";\r\n\r\n:host {\r\n display: inline-block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-attachments {\r\n @include attachments-counter.root();\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-attachments-counter\",\r\n styleUrl: \"attachments-counter.scss\",\r\n shadow: true,\r\n})\r\nexport class AttachmentsCounter {\r\n /**\r\n * The number of attachments.\r\n */\r\n @Prop()\r\n count!: number;\r\n\r\n render() {\r\n return (\r\n <span class=\"dso-attachments\">\r\n {this.count} <span class=\"sr-only\">bijlage{this.count !== 1 ? \"n\" : \"\"}</span>\r\n <dso-icon icon=\"paperclip\"></dso-icon>\r\n </span>\r\n );\r\n }\r\n}\r\n"],"version":3}