@dso-toolkit/core 67.0.0 → 67.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 (81) hide show
  1. package/dist/cjs/dso-accordion-section.cjs.entry.js +5 -3
  2. package/dist/cjs/dso-accordion-section.cjs.entry.js.map +1 -1
  3. package/dist/cjs/dso-alert_6.cjs.entry.js +19 -3
  4. package/dist/cjs/dso-alert_6.cjs.entry.js.map +1 -1
  5. package/dist/cjs/dso-annotation-locatie_2.cjs.entry.js +31 -9
  6. package/dist/cjs/dso-annotation-locatie_2.cjs.entry.js.map +1 -1
  7. package/dist/cjs/dso-document-card.cjs.entry.js +1 -1
  8. package/dist/cjs/dso-document-card.cjs.entry.js.map +1 -1
  9. package/dist/cjs/dso-toolkit.cjs.js +1 -1
  10. package/dist/cjs/dsot-document-component-demo.cjs.entry.js +8 -3
  11. package/dist/cjs/dsot-document-component-demo.cjs.entry.js.map +1 -1
  12. package/dist/cjs/loader.cjs.js +1 -1
  13. package/dist/collection/components/accordion/components/accordion-section.css +14 -0
  14. package/dist/collection/components/accordion/components/accordion-section.interfaces.js.map +1 -1
  15. package/dist/collection/components/accordion/components/accordion-section.js +39 -8
  16. package/dist/collection/components/accordion/components/accordion-section.js.map +1 -1
  17. package/dist/collection/components/document-card/document-card.css +2 -1
  18. package/dist/collection/components/document-component/document-component-heading.js +15 -6
  19. package/dist/collection/components/document-component/document-component-heading.js.map +1 -1
  20. package/dist/collection/components/document-component/document-component.css +55 -7
  21. package/dist/collection/components/document-component/document-component.js +99 -2
  22. package/dist/collection/components/document-component/document-component.js.map +1 -1
  23. package/dist/collection/components/document-component/document-component.models.js.map +1 -1
  24. package/dist/collection/components/document-component-demo/document-component.demo.js +52 -3
  25. package/dist/collection/components/document-component-demo/document-component.demo.js.map +1 -1
  26. package/dist/collection/components/panel/panel.i18n.js +13 -0
  27. package/dist/collection/components/panel/panel.i18n.js.map +1 -0
  28. package/dist/collection/components/panel/panel.js +29 -1
  29. package/dist/collection/components/panel/panel.js.map +1 -1
  30. package/dist/components/document-component.js +35 -10
  31. package/dist/components/document-component.js.map +1 -1
  32. package/dist/components/dso-accordion-section.js +20 -11
  33. package/dist/components/dso-accordion-section.js.map +1 -1
  34. package/dist/components/dso-document-card.js +1 -1
  35. package/dist/components/dso-document-card.js.map +1 -1
  36. package/dist/components/dsot-document-component-demo.js +9 -3
  37. package/dist/components/dsot-document-component-demo.js.map +1 -1
  38. package/dist/components/panel.js +21 -2
  39. package/dist/components/panel.js.map +1 -1
  40. package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
  41. package/dist/dso-toolkit/dso-toolkit.esm.js.map +1 -1
  42. package/dist/dso-toolkit/p-39d0a5be.entry.js +2 -0
  43. package/dist/dso-toolkit/p-39d0a5be.entry.js.map +1 -0
  44. package/dist/dso-toolkit/p-3e9082b8.entry.js +2 -0
  45. package/dist/dso-toolkit/p-3e9082b8.entry.js.map +1 -0
  46. package/dist/dso-toolkit/p-758523a5.entry.js +2 -0
  47. package/dist/dso-toolkit/p-758523a5.entry.js.map +1 -0
  48. package/dist/dso-toolkit/{p-e05b8f92.entry.js → p-a83d9abb.entry.js} +2 -2
  49. package/dist/dso-toolkit/{p-e05b8f92.entry.js.map → p-a83d9abb.entry.js.map} +1 -1
  50. package/dist/dso-toolkit/p-c64628c7.entry.js +2 -0
  51. package/dist/dso-toolkit/p-c64628c7.entry.js.map +1 -0
  52. package/dist/esm/dso-accordion-section.entry.js +5 -3
  53. package/dist/esm/dso-accordion-section.entry.js.map +1 -1
  54. package/dist/esm/dso-alert_6.entry.js +19 -3
  55. package/dist/esm/dso-alert_6.entry.js.map +1 -1
  56. package/dist/esm/dso-annotation-locatie_2.entry.js +31 -9
  57. package/dist/esm/dso-annotation-locatie_2.entry.js.map +1 -1
  58. package/dist/esm/dso-document-card.entry.js +1 -1
  59. package/dist/esm/dso-document-card.entry.js.map +1 -1
  60. package/dist/esm/dso-toolkit.js +1 -1
  61. package/dist/esm/dsot-document-component-demo.entry.js +8 -3
  62. package/dist/esm/dsot-document-component-demo.entry.js.map +1 -1
  63. package/dist/esm/loader.js +1 -1
  64. package/dist/types/components/accordion/components/accordion-section.d.ts +7 -2
  65. package/dist/types/components/accordion/components/accordion-section.interfaces.d.ts +1 -0
  66. package/dist/types/components/document-component/document-component-heading.d.ts +3 -0
  67. package/dist/types/components/document-component/document-component.d.ts +18 -1
  68. package/dist/types/components/document-component/document-component.models.d.ts +7 -0
  69. package/dist/types/components/document-component-demo/document-component.demo.d.ts +11 -1
  70. package/dist/types/components/panel/panel.d.ts +6 -0
  71. package/dist/types/components/panel/panel.i18n.d.ts +2 -0
  72. package/dist/types/components.d.ts +66 -8
  73. package/package.json +3 -3
  74. package/dist/dso-toolkit/p-76dfbee3.entry.js +0 -2
  75. package/dist/dso-toolkit/p-76dfbee3.entry.js.map +0 -1
  76. package/dist/dso-toolkit/p-abe7047e.entry.js +0 -2
  77. package/dist/dso-toolkit/p-abe7047e.entry.js.map +0 -1
  78. package/dist/dso-toolkit/p-bc0a6bac.entry.js +0 -2
  79. package/dist/dso-toolkit/p-bc0a6bac.entry.js.map +0 -1
  80. package/dist/dso-toolkit/p-e665556c.entry.js +0 -2
  81. package/dist/dso-toolkit/p-e665556c.entry.js.map +0 -1
@@ -1,5 +1,5 @@
1
1
  import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
2
- import { DocumentComponentOpenToggleEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentWijzigactie, DocumentComponentInputType, DocumentComponentMarkFunction, DocumentComponentMarkItemHighlightEvent, DocumentComponentRecursiveToggleEvent, DocumentComponentRecursiveToggleState } from "./document-component.models";
2
+ import { DocumentComponentOpenToggleEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentWijzigactie, DocumentComponentAnnotationsWijzigactie, DocumentComponentInputType, DocumentComponentMarkFunction, DocumentComponentMarkItemHighlightEvent, DocumentComponentRecursiveToggleEvent, DocumentComponentRecursiveToggleState, DocumentComponentMode, DocumentComponentTableOfContentsClickEvent } from "./document-component.models";
3
3
  /**
4
4
  * @part _annotation-container - private part, do not touch.
5
5
  * @part _children-container - private part, do not touch.
@@ -75,6 +75,10 @@ export declare class DocumentComponent implements ComponentInterface {
75
75
  * The wijzigactie as in STOP.
76
76
  */
77
77
  wijzigactie?: DocumentComponentWijzigactie;
78
+ /**
79
+ * The wijzigactie for all annotations.
80
+ */
81
+ annotationsWijzigactie?: DocumentComponentAnnotationsWijzigactie;
78
82
  /**
79
83
  * To mark text.
80
84
  */
@@ -83,6 +87,14 @@ export declare class DocumentComponent implements ComponentInterface {
83
87
  * Shows the recursive toggle button. When the user activates this button the event `dsoRecursiveToggle` is emitted.
84
88
  */
85
89
  recursiveToggle: DocumentComponentRecursiveToggleState;
90
+ /**
91
+ * The mode of the Document Component. One of "document" or "table-of-contents". Defaults to "document"
92
+ */
93
+ mode: DocumentComponentMode;
94
+ /**
95
+ * The URL to which the Heading links (only in mode="table-of-contents").
96
+ */
97
+ href?: string;
86
98
  /**
87
99
  * Emitted when the user activates the recursive toggle.
88
100
  */
@@ -91,6 +103,10 @@ export declare class DocumentComponent implements ComponentInterface {
91
103
  * Emitted when the user activates the toggle.
92
104
  */
93
105
  dsoOpenToggle: EventEmitter<DocumentComponentOpenToggleEvent>;
106
+ /**
107
+ * Emitted when the user clicks the heading in mode="table-of-contents".
108
+ */
109
+ dsoTableOfContentsClick: EventEmitter<DocumentComponentTableOfContentsClickEvent>;
94
110
  /**
95
111
  * Emitted when the user actives intRef or intIoRef anchors in Ozon Content
96
112
  */
@@ -108,5 +124,6 @@ export declare class DocumentComponent implements ComponentInterface {
108
124
  private suffix;
109
125
  private handleOzonContentAnchorClick;
110
126
  private handleRecursiveToggleClick;
127
+ private showOntwerpBadge;
111
128
  render(): any;
112
129
  }
@@ -8,6 +8,7 @@ export interface DocumentComponentToggleAnnotationEvent {
8
8
  originalEvent: Event;
9
9
  }
10
10
  export type DocumentComponentWijzigactie = "voegtoe" | "verwijder" | "nieuweContainer" | "verwijderContainer";
11
+ export type DocumentComponentAnnotationsWijzigactie = "voegtoe" | "verwijder";
11
12
  export interface DocumentComponentOzonContentAnchorClickEvent {
12
13
  originalEvent: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>;
13
14
  ozonContentAnchorClick: OzonContentAnchorClickEvent;
@@ -26,3 +27,9 @@ export interface DocumentComponentRecursiveToggleEvent {
26
27
  current: DocumentComponentRecursiveToggleState;
27
28
  next: boolean;
28
29
  }
30
+ export type DocumentComponentMode = "document" | "table-of-contents";
31
+ export interface DocumentComponentTableOfContentsClickEvent {
32
+ originalEvent: MouseEvent;
33
+ /** True when user clicked the document component heading while holding Ctrl, Alt or other modifiers, or when the document component heading is right-clicked. Can be used to determine navigation. */
34
+ isModifiedEvent: boolean;
35
+ }
@@ -1,5 +1,5 @@
1
1
  import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
2
- import { DocumentComponentOzonContentAnchorClickEvent, DocumentComponentWijzigactie } from "../document-component/document-component.models";
2
+ import { DocumentComponentMode, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentTableOfContentsClickEvent, DocumentComponentWijzigactie } from "../document-component/document-component.models";
3
3
  interface DocumentEmbedded {
4
4
  _embedded?: {
5
5
  ontwerpTekststructuurDocumentComponenten?: DocumentComponent[];
@@ -18,6 +18,7 @@ interface DocumentComponent extends DocumentEmbedded {
18
18
  vervallen?: boolean;
19
19
  bevatOntwerpInformatie?: boolean;
20
20
  wijzigactie?: DocumentComponentWijzigactie;
21
+ mode: DocumentComponentMode;
21
22
  }
22
23
  export declare class DocumentComponentDemo implements ComponentInterface {
23
24
  /**
@@ -32,10 +33,18 @@ export declare class DocumentComponentDemo implements ComponentInterface {
32
33
  * The default state for all Document Components.
33
34
  */
34
35
  openDefault: boolean;
36
+ /**
37
+ * The mode of the Document Component. One of "document" or "table-of-contents". Defaults to "document"
38
+ */
39
+ mode: DocumentComponentMode;
35
40
  /**
36
41
  * To demo user interacting with IntRef or IntIoRef elements.
37
42
  */
38
43
  dsotOzonContentAnchorClick: EventEmitter<DocumentComponentOzonContentAnchorClickEvent>;
44
+ /**
45
+ * To demo user interacting the heading in mode="table-of-contents".
46
+ */
47
+ dsotTableOfContentsClick: EventEmitter<DocumentComponentTableOfContentsClickEvent>;
39
48
  response?: DocumentEmbedded;
40
49
  document?: DocumentComponent;
41
50
  openOrClosed: DocumentComponent[];
@@ -54,6 +63,7 @@ export declare class DocumentComponentDemo implements ComponentInterface {
54
63
  private handleAnnotationToggle;
55
64
  private handleSelectableChange;
56
65
  private handleOzonContentAnchorClick;
66
+ private handleTableOfContentsClick;
57
67
  private isCheckedSlideToggle;
58
68
  private hasFilteredChildren;
59
69
  private isOpen;
@@ -7,9 +7,15 @@ export interface PanelCloseEvent {
7
7
  * @slot heading - The heading (h2 - h6) with the title of the panel
8
8
  */
9
9
  export declare class Panel implements ComponentInterface {
10
+ host: HTMLDsoPanelElement;
11
+ /**
12
+ * The accessible name for the close button.
13
+ */
14
+ closeButtonLabel?: string;
10
15
  /**
11
16
  * Emitted when the user click the close button.
12
17
  */
13
18
  dsoCloseClick: EventEmitter<PanelCloseEvent>;
19
+ private text;
14
20
  render(): any;
15
21
  }
@@ -0,0 +1,2 @@
1
+ import { Resource } from "../../utils/i18n";
2
+ export declare const translations: Resource;
@@ -6,11 +6,11 @@
6
6
  */
7
7
  import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
8
8
  import { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
9
- import { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionAnimationStartEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
9
+ import { RenvooiValue } from "./components/renvooi/renvooi.interfaces";
10
+ import { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionAnimationStartEvent, AccordionSectionState, AccordionSectionToggleClickEvent, AccordionSectionWijzigactie } from "./components/accordion/components/accordion-section.interfaces";
10
11
  import { LabelStatus } from "./components/label/label.interfaces";
11
12
  import { AdvancedSelectChangeEvent, AdvancedSelectOption, AdvancedSelectOptionOrGroup, AdvancedSelectRedirectEvent } from "./components/advanced-select/advanced-select.interfaces";
12
13
  import { AnnotationActiveChangeEvent, AnnotationWijzigactie } from "./components/annotation/annotation.interfaces";
13
- import { RenvooiValue } from "./components/renvooi/renvooi.interfaces";
14
14
  import { AnnotationKaartClickEvent } from "./components/annotation/annotation-kaart/annotation-kaart.interfaces";
15
15
  import { AutosuggestMarkFunction, Suggestion } from "./components/autosuggest/autosuggest.interfaces";
16
16
  import { BadgeStatus } from "./components/badge/badge.interfaces";
@@ -19,7 +19,7 @@ import { CardContainerMode } from "./components/card-container/card-container.in
19
19
  import { DatePickerBlurEvent, DatePickerChangeEvent, DatePickerFocusEvent, DatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
20
20
  import { DsoDatePickerLegacyChangeEvent, DsoDatePickerLegacyDirection, DsoDatePickerLegacyFocusEvent, DsoDatePickerLegacyKeyboardEvent } from "./components/date-picker-legacy/date-picker-legacy.interfaces";
21
21
  import { DocumentCardClickEvent } from "./components/document-card/document-card.interfaces";
22
- import { DocumentComponentInputType, DocumentComponentMarkFunction, DocumentComponentMarkItemHighlightEvent, DocumentComponentOpenToggleEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentRecursiveToggleEvent, DocumentComponentRecursiveToggleState, DocumentComponentToggleAnnotationEvent, DocumentComponentWijzigactie } from "./components/document-component/document-component.models";
22
+ import { DocumentComponentAnnotationsWijzigactie, DocumentComponentInputType, DocumentComponentMarkFunction, DocumentComponentMarkItemHighlightEvent, DocumentComponentMode, DocumentComponentOpenToggleEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentRecursiveToggleEvent, DocumentComponentRecursiveToggleState, DocumentComponentTableOfContentsClickEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentWijzigactie } from "./components/document-component/document-component.models";
23
23
  import { Placement } from "@popperjs/core";
24
24
  import { ExpandableAnimationEndEvent, ExpandableAnimationStartEvent } from "./components/expandable/expandable";
25
25
  import { HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
@@ -46,11 +46,11 @@ import { TabsSwitchEvent } from "./components/tabs/tabs.interfaces";
46
46
  import { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
47
47
  import { ViewerGridActiveTabSwitchEvent, ViewerGridChangeSizeAnimationEndEvent, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent, ViewerGridMainExpandEvent, ViewerGridMainToggleEvent, ViewerGridMode, ViewerGridPanelSize, ViewerGridVdkTab, ViewerGridVrkTab } from "./components/viewer-grid/viewer-grid.interfaces";
48
48
  export { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
49
- export { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionAnimationStartEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
49
+ export { RenvooiValue } from "./components/renvooi/renvooi.interfaces";
50
+ export { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionAnimationStartEvent, AccordionSectionState, AccordionSectionToggleClickEvent, AccordionSectionWijzigactie } from "./components/accordion/components/accordion-section.interfaces";
50
51
  export { LabelStatus } from "./components/label/label.interfaces";
51
52
  export { AdvancedSelectChangeEvent, AdvancedSelectOption, AdvancedSelectOptionOrGroup, AdvancedSelectRedirectEvent } from "./components/advanced-select/advanced-select.interfaces";
52
53
  export { AnnotationActiveChangeEvent, AnnotationWijzigactie } from "./components/annotation/annotation.interfaces";
53
- export { RenvooiValue } from "./components/renvooi/renvooi.interfaces";
54
54
  export { AnnotationKaartClickEvent } from "./components/annotation/annotation-kaart/annotation-kaart.interfaces";
55
55
  export { AutosuggestMarkFunction, Suggestion } from "./components/autosuggest/autosuggest.interfaces";
56
56
  export { BadgeStatus } from "./components/badge/badge.interfaces";
@@ -59,7 +59,7 @@ export { CardContainerMode } from "./components/card-container/card-container.in
59
59
  export { DatePickerBlurEvent, DatePickerChangeEvent, DatePickerFocusEvent, DatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
60
60
  export { DsoDatePickerLegacyChangeEvent, DsoDatePickerLegacyDirection, DsoDatePickerLegacyFocusEvent, DsoDatePickerLegacyKeyboardEvent } from "./components/date-picker-legacy/date-picker-legacy.interfaces";
61
61
  export { DocumentCardClickEvent } from "./components/document-card/document-card.interfaces";
62
- export { DocumentComponentInputType, DocumentComponentMarkFunction, DocumentComponentMarkItemHighlightEvent, DocumentComponentOpenToggleEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentRecursiveToggleEvent, DocumentComponentRecursiveToggleState, DocumentComponentToggleAnnotationEvent, DocumentComponentWijzigactie } from "./components/document-component/document-component.models";
62
+ export { DocumentComponentAnnotationsWijzigactie, DocumentComponentInputType, DocumentComponentMarkFunction, DocumentComponentMarkItemHighlightEvent, DocumentComponentMode, DocumentComponentOpenToggleEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentRecursiveToggleEvent, DocumentComponentRecursiveToggleState, DocumentComponentTableOfContentsClickEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentWijzigactie } from "./components/document-component/document-component.models";
63
63
  export { Placement } from "@popperjs/core";
64
64
  export { ExpandableAnimationEndEvent, ExpandableAnimationStartEvent } from "./components/expandable/expandable";
65
65
  export { HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
@@ -109,7 +109,7 @@ export namespace Components {
109
109
  /**
110
110
  * The title of the handle
111
111
  */
112
- "handleTitle"?: string;
112
+ "handleTitle": RenvooiValue | undefined;
113
113
  /**
114
114
  * When set the handle will render as a `<a>`. When undefined it renders as a `<button>`
115
115
  */
@@ -146,6 +146,10 @@ export namespace Components {
146
146
  * The status of the section.
147
147
  */
148
148
  "statusDescription"?: string;
149
+ /**
150
+ * An optional 'wijzigactie' that signals if the section is added or removed.
151
+ */
152
+ "wijzigactie"?: AccordionSectionWijzigactie;
149
153
  }
150
154
  interface DsoActionList {
151
155
  /**
@@ -515,6 +519,10 @@ export namespace Components {
515
519
  * Enables annotations.
516
520
  */
517
521
  "annotated": boolean;
522
+ /**
523
+ * The wijzigactie for all annotations.
524
+ */
525
+ "annotationsWijzigactie"?: DocumentComponentAnnotationsWijzigactie;
518
526
  /**
519
527
  * Marks as draft.
520
528
  */
@@ -535,6 +543,10 @@ export namespace Components {
535
543
  * The heading element to use.
536
544
  */
537
545
  "heading": "h2" | "h3" | "h4" | "h5" | "h6";
546
+ /**
547
+ * The URL to which the Heading links (only in mode="table-of-contents").
548
+ */
549
+ "href"?: string;
538
550
  /**
539
551
  * The Inhoud XML.
540
552
  */
@@ -547,6 +559,10 @@ export namespace Components {
547
559
  * To mark text.
548
560
  */
549
561
  "mark"?: DocumentComponentMarkFunction;
562
+ /**
563
+ * The mode of the Document Component. One of "document" or "table-of-contents". Defaults to "document"
564
+ */
565
+ "mode": DocumentComponentMode;
550
566
  /**
551
567
  * Marks this Document Component as not-applicable.
552
568
  */
@@ -977,6 +993,10 @@ export namespace Components {
977
993
  "totalPages"?: number;
978
994
  }
979
995
  interface DsoPanel {
996
+ /**
997
+ * The accessible name for the close button.
998
+ */
999
+ "closeButtonLabel"?: string;
980
1000
  }
981
1001
  interface DsoPlekinfoCard {
982
1002
  /**
@@ -1274,6 +1294,10 @@ export namespace Components {
1274
1294
  * Name of the file to load.
1275
1295
  */
1276
1296
  "jsonFile"?: string;
1297
+ /**
1298
+ * The mode of the Document Component. One of "document" or "table-of-contents". Defaults to "document"
1299
+ */
1300
+ "mode": DocumentComponentMode;
1277
1301
  /**
1278
1302
  * The default state for all Document Components.
1279
1303
  */
@@ -1716,6 +1740,7 @@ declare global {
1716
1740
  interface HTMLDsoDocumentComponentElementEventMap {
1717
1741
  "dsoRecursiveToggle": DocumentComponentRecursiveToggleEvent;
1718
1742
  "dsoOpenToggle": DocumentComponentOpenToggleEvent;
1743
+ "dsoTableOfContentsClick": DocumentComponentTableOfContentsClickEvent;
1719
1744
  "dsoOzonContentAnchorClick": DocumentComponentOzonContentAnchorClickEvent;
1720
1745
  "dsoAnnotationToggle": DocumentComponentToggleAnnotationEvent;
1721
1746
  "dsoMarkItemHighlight": DocumentComponentMarkItemHighlightEvent;
@@ -2281,6 +2306,7 @@ declare global {
2281
2306
  };
2282
2307
  interface HTMLDsotDocumentComponentDemoElementEventMap {
2283
2308
  "dsotOzonContentAnchorClick": DocumentComponentOzonContentAnchorClickEvent;
2309
+ "dsotTableOfContentsClick": DocumentComponentTableOfContentsClickEvent;
2284
2310
  }
2285
2311
  interface HTMLDsotDocumentComponentDemoElement extends Components.DsotDocumentComponentDemo, HTMLStencilElement {
2286
2312
  addEventListener<K extends keyof HTMLDsotDocumentComponentDemoElementEventMap>(type: K, listener: (this: HTMLDsotDocumentComponentDemoElement, ev: DsotDocumentComponentDemoCustomEvent<HTMLDsotDocumentComponentDemoElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2379,7 +2405,7 @@ declare namespace LocalJSX {
2379
2405
  /**
2380
2406
  * The title of the handle
2381
2407
  */
2382
- "handleTitle"?: string;
2408
+ "handleTitle": RenvooiValue | undefined;
2383
2409
  /**
2384
2410
  * When set the handle will render as a `<a>`. When undefined it renders as a `<button>`
2385
2411
  */
@@ -2428,6 +2454,10 @@ declare namespace LocalJSX {
2428
2454
  * The status of the section.
2429
2455
  */
2430
2456
  "statusDescription"?: string;
2457
+ /**
2458
+ * An optional 'wijzigactie' that signals if the section is added or removed.
2459
+ */
2460
+ "wijzigactie"?: AccordionSectionWijzigactie;
2431
2461
  }
2432
2462
  interface DsoActionList {
2433
2463
  /**
@@ -2873,6 +2903,10 @@ declare namespace LocalJSX {
2873
2903
  * Enables annotations.
2874
2904
  */
2875
2905
  "annotated"?: boolean;
2906
+ /**
2907
+ * The wijzigactie for all annotations.
2908
+ */
2909
+ "annotationsWijzigactie"?: DocumentComponentAnnotationsWijzigactie;
2876
2910
  /**
2877
2911
  * Marks as draft.
2878
2912
  */
@@ -2893,6 +2927,10 @@ declare namespace LocalJSX {
2893
2927
  * The heading element to use.
2894
2928
  */
2895
2929
  "heading"?: "h2" | "h3" | "h4" | "h5" | "h6";
2930
+ /**
2931
+ * The URL to which the Heading links (only in mode="table-of-contents").
2932
+ */
2933
+ "href"?: string;
2896
2934
  /**
2897
2935
  * The Inhoud XML.
2898
2936
  */
@@ -2905,6 +2943,10 @@ declare namespace LocalJSX {
2905
2943
  * To mark text.
2906
2944
  */
2907
2945
  "mark"?: DocumentComponentMarkFunction;
2946
+ /**
2947
+ * The mode of the Document Component. One of "document" or "table-of-contents". Defaults to "document"
2948
+ */
2949
+ "mode"?: DocumentComponentMode;
2908
2950
  /**
2909
2951
  * Marks this Document Component as not-applicable.
2910
2952
  */
@@ -2933,6 +2975,10 @@ declare namespace LocalJSX {
2933
2975
  * Emitted when the user activates the recursive toggle.
2934
2976
  */
2935
2977
  "onDsoRecursiveToggle"?: (event: DsoDocumentComponentCustomEvent<DocumentComponentRecursiveToggleEvent>) => void;
2978
+ /**
2979
+ * Emitted when the user clicks the heading in mode="table-of-contents".
2980
+ */
2981
+ "onDsoTableOfContentsClick"?: (event: DsoDocumentComponentCustomEvent<DocumentComponentTableOfContentsClickEvent>) => void;
2936
2982
  /**
2937
2983
  * This boolean attribute indicates whether the children are visible.
2938
2984
  */
@@ -3449,6 +3495,10 @@ declare namespace LocalJSX {
3449
3495
  "totalPages"?: number;
3450
3496
  }
3451
3497
  interface DsoPanel {
3498
+ /**
3499
+ * The accessible name for the close button.
3500
+ */
3501
+ "closeButtonLabel"?: string;
3452
3502
  /**
3453
3503
  * Emitted when the user click the close button.
3454
3504
  */
@@ -3804,10 +3854,18 @@ declare namespace LocalJSX {
3804
3854
  * Name of the file to load.
3805
3855
  */
3806
3856
  "jsonFile"?: string;
3857
+ /**
3858
+ * The mode of the Document Component. One of "document" or "table-of-contents". Defaults to "document"
3859
+ */
3860
+ "mode"?: DocumentComponentMode;
3807
3861
  /**
3808
3862
  * To demo user interacting with IntRef or IntIoRef elements.
3809
3863
  */
3810
3864
  "onDsotOzonContentAnchorClick"?: (event: DsotDocumentComponentDemoCustomEvent<DocumentComponentOzonContentAnchorClickEvent>) => void;
3865
+ /**
3866
+ * To demo user interacting the heading in mode="table-of-contents".
3867
+ */
3868
+ "onDsotTableOfContentsClick"?: (event: DsotDocumentComponentDemoCustomEvent<DocumentComponentTableOfContentsClickEvent>) => void;
3811
3869
  /**
3812
3870
  * The default state for all Document Components.
3813
3871
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dso-toolkit/core",
3
- "version": "67.0.0",
3
+ "version": "67.1.0",
4
4
  "description": "DSO Toolkit Web Components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/components/index.js",
@@ -23,7 +23,7 @@
23
23
  "@stencil/core": "4.22.2",
24
24
  "@stencil/store": "^2.0.16",
25
25
  "clsx": "^2.1.1",
26
- "dso-toolkit": "^67.0.0",
26
+ "dso-toolkit": "^67.1.0",
27
27
  "escape-string-regexp": "^5.0.0",
28
28
  "focus-trap": "^7.6.1",
29
29
  "i18next": "^23.16.5",
@@ -54,7 +54,7 @@
54
54
  "typescript": "~5.5.4"
55
55
  },
56
56
  "peerDependencies": {
57
- "dso-toolkit": "67.0.0"
57
+ "dso-toolkit": "67.1.0"
58
58
  },
59
59
  "nx": {
60
60
  "includedScripts": []
@@ -1,2 +0,0 @@
1
- import{r as o,c as n,f as t,h as s,F as d,H as e,a as c}from"./p-7fc1e494.js";const a={success:"succes:",info:"info:",warning:"waarschuwing:",danger:"fout:",error:"fout:"};const i="*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}:host{display:block}:host .dso-section-handle{font-size:1em;font-weight:600;line-height:1.375em;margin:0;position:relative}:host .dso-section-handle>a:active{text-decoration:none}:host .dso-section-handle a{text-decoration:none}:host .dso-section-handle a:hover,:host .dso-section-handle a:focus-visible{text-decoration:none}:host .dso-section-handle a:active{text-decoration:underline}:host .dso-section-handle .dso-status{font-weight:400;text-decoration:underline}:host .dso-section-handle>button,:host .dso-section-handle>a{align-items:flex-start;background-color:transparent;border:0;cursor:pointer;display:flex;font-family:Asap, sans-serif;font-size:1em;font-weight:600;line-height:1.375em;margin:0;padding-block:12px;padding-inline:16px;text-align:start;inline-size:100%;word-break:break-word}:host .dso-section-handle>button dso-icon,:host .dso-section-handle>a dso-icon{flex-shrink:0}:host .dso-section-handle>button dso-icon.dso-section-handle-chevron,:host .dso-section-handle>a dso-icon.dso-section-handle-chevron{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:rotate(0)}:host .dso-section-handle>button>.dso-section-handle-addons:first-child,:host .dso-section-handle>button>dso-icon:first-child,:host .dso-section-handle>a>.dso-section-handle-addons:first-child,:host .dso-section-handle>a>dso-icon:first-child{margin-inline-end:8px}:host .dso-section-handle>button>dso-icon:last-child,:host .dso-section-handle>a>dso-icon:last-child{margin-inline-start:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child,:host .dso-section-handle>a>.dso-section-handle-addons:last-child{margin-inline-start:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-icon,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-icon{margin-inline-start:16px}:host .dso-section-handle>button>dso-label,:host .dso-section-handle>a>dso-label{margin-inline-start:auto;padding-inline-start:8px;word-break:normal}:host .dso-section-handle>button>dso-label+dso-icon:last-child,:host .dso-section-handle>button>dso-label+.dso-section-handle-addons:last-child,:host .dso-section-handle>a>dso-label+dso-icon:last-child,:host .dso-section-handle>a>dso-label+.dso-section-handle-addons:last-child{margin-inline-start:8px}:host([open]:not([open=false])) .dso-section-handle>button .dso-section-handle-chevron:first-child,:host([open]:not([open=false])) .dso-section-handle>a .dso-section-handle-chevron:first-child{transform:rotate(90deg)}:host([open]:not([open=false])) .dso-section-handle>button .dso-section-handle-chevron:last-child,:host([open]:not([open=false])) .dso-section-handle>a .dso-section-handle-chevron:last-child{transform:rotate(-180deg)}.dso-section-body{background-color:#fff;border-block-start:0;margin-block-start:-4px}.dso-section-body .dso-section-body-content{padding-block:20px 16px;padding-inline:16px}:host(.dso-accordion-default) .dso-section-handle{background-color:#fff;border:1px solid #8b4a6a;border-radius:4px}:host(.dso-accordion-default) .dso-section-handle a,:host(.dso-accordion-default) .dso-section-handle button{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-handle a:hover,:host(.dso-accordion-default) .dso-section-handle a:active,:host(.dso-accordion-default) .dso-section-handle a.active,:host(.dso-accordion-default) .dso-section-handle button:hover,:host(.dso-accordion-default) .dso-section-handle button:active,:host(.dso-accordion-default) .dso-section-handle button.active{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-body{border:1px solid #8b4a6a;border-radius:0 0 4px 4px}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle{background-color:#8b4a6a;border-radius:0;border-start-start-radius:4px;border-start-end-radius:4px}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle button{color:#fff}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-default.dso-nested-accordion[open]:not([open=false])) .dso-section-body{background-color:#e5e5e5}:host(.dso-accordion-compact) .dso-section-handle{border-block-end:1px solid transparent;border-block-start:1px solid #ccc}:host(.dso-accordion-compact) .dso-section-handle a,:host(.dso-accordion-compact) .dso-section-handle button{color:#39870c;padding-block-end:11px;padding-inline-start:0;padding-block-start:11px}:host(.dso-accordion-compact) .dso-section-handle a:hover,:host(.dso-accordion-compact) .dso-section-handle a:active,:host(.dso-accordion-compact) .dso-section-handle a.active,:host(.dso-accordion-compact) .dso-section-handle button:hover,:host(.dso-accordion-compact) .dso-section-handle button:active,:host(.dso-accordion-compact) .dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact) .dso-section-body .dso-section-body-content{padding-inline-start:32px;padding-block-start:0;padding-inline-end:0}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle button{padding-inline-start:16px}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-inline-start:16px;padding-inline-end:0}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button{color:#39870c}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a:hover,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a:active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a.active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button:hover,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button:active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-body{border-block-start:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-block-end:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-block-end:0}:host(.dso-accordion-compact-black) .dso-section-handle{border-block-end:1px solid transparent;border-block-start:1px solid #ccc}:host(.dso-accordion-compact-black) .dso-section-handle a,:host(.dso-accordion-compact-black) .dso-section-handle button{color:#000;padding-block-end:11px;padding-inline-start:0;padding-block-start:11px}:host(.dso-accordion-compact-black) .dso-section-handle a:hover,:host(.dso-accordion-compact-black) .dso-section-handle a:active,:host(.dso-accordion-compact-black) .dso-section-handle a.active,:host(.dso-accordion-compact-black) .dso-section-handle button:hover,:host(.dso-accordion-compact-black) .dso-section-handle button:active,:host(.dso-accordion-compact-black) .dso-section-handle button.active{color:#000}:host(.dso-accordion-compact-black) .dso-section-body .dso-section-body-content{padding-inline-start:32px;padding-block-start:0;padding-inline-end:0}:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-handle button{padding-inline-start:16px}:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-inline-start:16px;padding-inline-end:0}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button{color:#000}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a:hover,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a:active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a.active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button:hover,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button:active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button.active{color:#000}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-body{border-block-start:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-block-end:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-block-end:0}:host(.dso-accordion-conclusion) .dso-section-handle{background-color:#f2f2f2;border:1px solid #f2f2f2}:host(.dso-accordion-conclusion) .dso-section-handle a,:host(.dso-accordion-conclusion) .dso-section-handle button{color:#000}:host(.dso-accordion-conclusion) .dso-section-handle a:hover,:host(.dso-accordion-conclusion) .dso-section-handle a:active,:host(.dso-accordion-conclusion) .dso-section-handle a.active,:host(.dso-accordion-conclusion) .dso-section-handle button:hover,:host(.dso-accordion-conclusion) .dso-section-handle button:active,:host(.dso-accordion-conclusion) .dso-section-handle button.active{background-color:#e5e5e5}:host(.dso-accordion-conclusion) .dso-section-handle a dso-attachments-counter,:host(.dso-accordion-conclusion) .dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#000;--dso-icon:var(--di-paperclip-zwart)}:host(.dso-accordion-conclusion) .dso-section-body{border:2px solid #f2f2f2}:host(.dso-accordion-conclusion[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle{background-color:#f2f2f2}:host(.dso-accordion-conclusion.dso-nested-accordion[open]:not([open=false])){background-color:#fff}:host(.dso-accordion-neutral) .dso-section-handle{background-color:transparent;border:none;border-radius:4px;margin-block-end:2px}:host(.dso-accordion-neutral) .dso-section-handle a,:host(.dso-accordion-neutral) .dso-section-handle button{color:#000;padding-block:5px;padding-inline:0 16px}:host(.dso-accordion-neutral) .dso-section-handle a:hover,:host(.dso-accordion-neutral) .dso-section-handle a:active,:host(.dso-accordion-neutral) .dso-section-handle a.active,:host(.dso-accordion-neutral) .dso-section-handle button:hover,:host(.dso-accordion-neutral) .dso-section-handle button:active,:host(.dso-accordion-neutral) .dso-section-handle button.active{color:#000}:host(.dso-accordion-neutral) .dso-section-handle a .info-icon,:host(.dso-accordion-neutral) .dso-section-handle button .info-icon{color:#39870c;margin-inline-start:8px}:host(.dso-accordion-neutral) .dso-section-handle dso-icon,:host(.dso-accordion-neutral) .dso-section-handle svg.di{vertical-align:top}:host(.dso-accordion-neutral) .dso-section-body[open],:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide){background-color:transparent;border:1px solid #275937;box-shadow:1px 3px 4px rgba(0, 0, 0, 0.5);margin-block:-2px 0}:host(.dso-accordion-neutral) .dso-section-body[open].dso-animate-ready,:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide).dso-animate-ready{transition-property:grid-template-rows, margin-block, border}:host(.dso-accordion-neutral) .dso-section-body[open] .dso-section-body-content,:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide) .dso-section-body-content{padding-block:16px 24px;padding-inline:16px}@media screen and (min-width: 480px){:host(.dso-accordion-neutral) .dso-section-body[open] .dso-section-body-content,:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide) .dso-section-body-content{padding-block:16px 24px;padding-inline:32px}}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle{background-color:transparant;border-radius:0;border-start-start-radius:4px;border-start-end-radius:4px}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle button{color:#000}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-neutral[open]:not([open=false])) .dso-section-body{margin-block-end:16px;margin-block-start:2px}:host(.dso-accordion-neutral.dso-nested-accordion[open]:not([open=false])) .dso-section-body{background-color:#e5e5e5}";const r=i;const l=window["_dsoLog"]===true?console.log.bind(console.log):function(){};const h=({handleUrl:o,onClick:n,open:t,handleElementRef:d},e)=>{if(o){return s("a",{href:o,onClick:n,"aria-expanded":t?"true":"false",ref:d},e)}return s("button",{type:"button",onClick:n,"aria-expanded":t?"true":"false",ref:d},e)};const p=({heading:o,ref:n},t)=>{switch(o){default:case"h2":return s("h2",{ref:n,class:"dso-section-handle"},t);case"h3":return s("h3",{ref:n,class:"dso-section-handle"},t);case"h4":return s("h4",{ref:n,class:"dso-section-handle"},t);case"h5":return s("h5",{ref:n,class:"dso-section-handle"},t)}};const u=({state:o,icon:n,attachmentCount:t})=>{if(o){return s(b,{state:o})}if(t){return s("dso-attachments-counter",{count:t})}if(n){return s("dso-icon",{icon:n})}};const b=({state:o})=>{if(o==="error"){return s("dso-icon",{icon:"status-error"})}if(o==="danger"){return s("dso-icon",{icon:"status-danger"})}if(o==="success"){return s("dso-icon",{icon:"status-success"})}if(o==="info"){return s("dso-icon",{icon:"status-info"})}if(o==="warning"){return s("dso-icon",{icon:"status-warning"})}};const f=class{constructor(t){o(this,t);this.dsoToggleClick=n(this,"dsoToggleClick",3);this.dsoAnimationStart=n(this,"dsoAnimationStart",3);this.dsoAnimationEnd=n(this,"dsoAnimationEnd",3);this.handleClick=o=>{this.dsoToggleClick.emit({originalEvent:o,open:!this.open})};this.handleExpandableAnimationStart=o=>{this.dsoAnimationStart.emit({animation:this.open?"opening":"closing",scrollIntoView:(n="auto")=>this.scrollIntoView(o.detail.bodyHeight,n)})};this.handleExpandableAnimationEnd=o=>{this.dsoAnimationEnd.emit({open:this.open,scrollIntoView:(n="auto")=>this.scrollIntoView(o.detail.bodyHeight,n)})};this.handleTitle=undefined;this.heading="h2";this.handleUrl=undefined;this.status=undefined;this.attachmentCount=undefined;this.icon=undefined;this.statusDescription=undefined;this.open=false;this.hasNestedAccordion=false;this.label=undefined;this.labelStatus=undefined;this.hover=false}async focusHandle(){var o;(o=this.handleElementRef)===null||o===void 0?void 0:o.focus()}get containsNestedAccordion(){return this.host.querySelector("dso-accordion")!==null}componentWillLoad(){var o;(o=this.accordion)===null||o===void 0?void 0:o._getState().then((o=>{this.accordionState=o;t(this.host)}))}get isNeutral(){var o;return((o=this.accordionState)===null||o===void 0?void 0:o.variant)==="neutral"}async scrollIntoView(o,n="auto"){var t,s;l(`DSO Toolkit [Accordion Section] scrollIntoView(bodyHeight: ${JSON.stringify(o)}, behavior: ${JSON.stringify(n)})`);const d=(t=this.sectionBody)===null||t===void 0?void 0:t.getBoundingClientRect();const e=(s=this.sectionHeading)===null||s===void 0?void 0:s.getBoundingClientRect();l(`DSO Toolkit [Accordion Section] const bodyClientRect = ${JSON.stringify(d)};`);l(`DSO Toolkit [Accordion Section] const headingClientRect = ${JSON.stringify(e)};`);l(`DSO Toolkit [Accordion Section] this.accordionState = ${JSON.stringify(this.accordionState)};`);l(`DSO Toolkit [Accordion Section] this.open = ${JSON.stringify(this.open)};`);if(!d||!e||!this.accordionState){l(`DSO Toolkit [Accordion Section] returning`);return}const c=e.top+e.height+(this.open?o!==null&&o!==void 0?o:0:0);l(`DSO Toolkit [Accordion Section] const sectionBottomY = ${JSON.stringify(c)};`);l(`DSO Toolkit [Accordion Section] window.innerHeight = ${JSON.stringify(window.innerHeight)};`);const a=this.host.getBoundingClientRect();const i=window.scrollY||document.documentElement.scrollTop||document.body.scrollTop;const r=document.documentElement.clientTop||document.body.clientTop||0;const h=a.top+i-r;l("DSO Toolkit [Accordion Section] scroll",{box:a,scrollTop:i,clientTop:r,top:h});if(c>window.innerHeight){l(`DSO Toolkit [Accordion Section] sectionBottomY > window.innerHeight === ${JSON.stringify(c>window.innerHeight)};`);const o=c-e.top;const t=o>window.innerHeight;l(`DSO Toolkit [Accordion Section] const expandedAccordionHeight = ${JSON.stringify(o)};`);l(`DSO Toolkit [Accordion Section] const shouldScrollToTopOfSection = ${JSON.stringify(t)};`);window.scrollTo({top:t?h:h-(window.innerHeight-o),behavior:n})}else if(e.top<0){l(`DSO Toolkit [Accordion Section] headingClientRect.top < 0 === ${JSON.stringify(e.top<0)};`);window.scrollTo({top:h,behavior:n})}}get accordion(){return this.host.closest("dso-accordion")}render(){var o;const{variant:n,reverseAlign:t}=(o=this.accordionState)!==null&&o!==void 0?o:{};const c=!!this.statusDescription||!!this.status||!!this.icon||!!this.attachmentCount;return s(e,{key:"23337050418689dbfc47c9542db507be85152548",class:{"dso-accordion-section":true,["dso-accordion-"+n]:true,"dso-nested-accordion":this.hasNestedAccordion||this.containsNestedAccordion,"dso-accordion-reverse-align":t!==null&&t!==void 0?t:false},hidden:!n,onMouseenter:()=>this.hover=true,onMouseleave:()=>this.hover=false},s(p,{key:"8493773157cbad694a9276a34edf42f28971c1d3",heading:this.heading,ref:o=>this.sectionHeading=o},s(h,{key:"03af7533dc94bef4e5a7ef4bea580075f02c892c",handleUrl:this.handleUrl,onClick:this.handleClick,open:this.open,handleElementRef:o=>this.handleElementRef=o},t?s(d,null,c&&s("div",{class:"dso-section-handle-addons"},s(u,{icon:this.icon})),s("span",null,this.handleTitle),this.label&&s("dso-label",{status:this.labelStatus,compact:true},this.label),s("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-down"})):s(d,null,s("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-right"}),this.status&&s("span",{class:"sr-only"},a[this.status]),s("span",null,this.handleTitle,this.isNeutral&&s("dso-icon",{class:"info-icon",icon:this.open||this.hover?"info-active":"info"})),this.label&&s("dso-label",{status:this.labelStatus,compact:true},this.label),c&&s("div",{class:"dso-section-handle-addons"},this.statusDescription&&s("span",{class:"dso-status"},this.statusDescription),s(u,{state:this.status,icon:this.icon,attachmentCount:this.attachmentCount}))))),s("dso-expandable",{key:"a2ffd853eb9dfd47220f64a6af05bd1a78bb1efe",class:"dso-section-body",open:this.open,enableAnimation:true,minimumHeight:this.isNeutral?0:4,onDsoExpandableAnimationStart:this.handleExpandableAnimationStart,onDsoExpandableAnimationEnd:this.handleExpandableAnimationEnd},s("div",{key:"1d0233d7f7464ba1d0071d401761923d7b644661",class:"dso-section-body-content",ref:o=>this.sectionBody=o},s("slot",{key:"125ac6d140ca961facba19f52ac0ba12dc2b6364"}))))}get host(){return c(this)}};f.style=r;export{f as dso_accordion_section};
2
- //# sourceMappingURL=p-76dfbee3.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["stateMap","success","info","warning","danger","error","accordionSectionCss","DsoAccordionSectionStyle0","log","window","console","bind","HandleElement","handleUrl","onClick","open","handleElementRef","children","h","href","ref","type","Handle","heading","class","HandleIcon","state","icon","attachmentCount","HandleStateIcon","count","AccordionSection","this","handleClick","event","dsoToggleClick","emit","originalEvent","handleExpandableAnimationStart","e","dsoAnimationStart","animation","scrollIntoView","behavior","detail","bodyHeight","handleExpandableAnimationEnd","dsoAnimationEnd","focusHandle","_a","focus","containsNestedAccordion","host","querySelector","componentWillLoad","accordion","_getState","then","accordionState","forceUpdate","isNeutral","variant","JSON","stringify","bodyClientRect","sectionBody","getBoundingClientRect","headingClientRect","_b","sectionHeading","sectionBottomY","top","height","innerHeight","box","scrollTop","scrollY","document","documentElement","body","clientTop","expandedAccordionHeight","shouldScrollToTopOfSection","scrollTo","closest","render","reverseAlign","hasAddons","statusDescription","status","Host","key","hasNestedAccordion","hidden","onMouseenter","hover","onMouseleave","element","Fragment","handleTitle","label","labelStatus","compact","enableAnimation","minimumHeight","onDsoExpandableAnimationStart","onDsoExpandableAnimationEnd"],"sources":["src/components/accordion/components/accordion-section.interfaces.ts","src/components/accordion/components/accordion-section.scss?tag=dso-accordion-section&encapsulation=shadow","src/components/accordion/components/accordion-section.tsx"],"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","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/accordion\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"accordion-section-theme-compact\";\r\n@use \"accordion-section-theme-compact-black\";\r\n@use \"accordion-section-theme-conclusion\";\r\n@use \"accordion-section-theme-default\";\r\n@use \"accordion-section-theme-neutral\";\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:host {\r\n display: block;\r\n\r\n .dso-section-handle {\r\n font-size: 1em;\r\n font-weight: 600;\r\n line-height: accordion.$handle-line-height;\r\n margin: 0;\r\n position: relative;\r\n\r\n > a:active {\r\n text-decoration: none;\r\n }\r\n\r\n a {\r\n @include anchor.clean();\r\n }\r\n\r\n .dso-status {\r\n font-weight: 400;\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n .dso-section-handle > button,\r\n .dso-section-handle > a {\r\n align-items: flex-start;\r\n background-color: transparent;\r\n border: 0;\r\n cursor: pointer;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n font-size: 1em;\r\n font-weight: 600;\r\n line-height: accordion.$handle-line-height;\r\n margin: 0;\r\n padding-block: accordion.$block-padding;\r\n padding-inline: accordion.$inline-padding;\r\n text-align: start;\r\n inline-size: 100%;\r\n word-break: break-word;\r\n\r\n dso-icon {\r\n flex-shrink: 0;\r\n\r\n &.dso-section-handle-chevron {\r\n @include utilities.transition(transform);\r\n\r\n transform: rotate(0);\r\n }\r\n }\r\n\r\n > .dso-section-handle-addons:first-child,\r\n > dso-icon:first-child {\r\n margin-inline-end: units.$u1;\r\n }\r\n\r\n > dso-icon:last-child {\r\n margin-inline-start: auto;\r\n }\r\n\r\n > .dso-section-handle-addons:last-child {\r\n margin-inline-start: auto;\r\n\r\n dso-attachments-counter,\r\n dso-icon {\r\n margin-inline-start: units.$u2;\r\n }\r\n }\r\n\r\n > dso-label {\r\n margin-inline-start: auto;\r\n padding-inline-start: units.$u1;\r\n word-break: normal;\r\n\r\n & + dso-icon:last-child,\r\n & + .dso-section-handle-addons:last-child {\r\n margin-inline-start: units.$u1;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host([open]:not([open=\"false\"])) {\r\n .dso-section-handle {\r\n > button,\r\n > a {\r\n .dso-section-handle-chevron {\r\n &:first-child {\r\n transform: rotate(90deg);\r\n }\r\n\r\n &:last-child {\r\n transform: rotate(-180deg);\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-section-body {\r\n background-color: colors.$wit;\r\n border-block-start: 0;\r\n margin-block-start: accordion.$border-radius * -1;\r\n\r\n .dso-section-body-content {\r\n padding-block: units.$u2 + accordion.$border-radius units.$u2;\r\n padding-inline: units.$u2;\r\n }\r\n}\r\n\r\n// Default\r\n:host(.dso-accordion-default) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default();\r\n}\r\n\r\n:host(.dso-accordion-default[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default-open();\r\n}\r\n\r\n:host(.dso-accordion-default.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default-open-nested();\r\n}\r\n\r\n// Compact\r\n:host(.dso-accordion-compact) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-accordion-reverse-align) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-open();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-open-nested();\r\n}\r\n\r\n// Compact black\r\n:host(.dso-accordion-compact-black) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-reverse-align) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact-black[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open-nested();\r\n}\r\n\r\n// Conclusion\r\n:host(.dso-accordion-conclusion) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion();\r\n}\r\n\r\n:host(.dso-accordion-conclusion[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open();\r\n}\r\n\r\n:host(.dso-accordion-conclusion.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open-nested();\r\n}\r\n\r\n// Neutral\r\n:host(.dso-accordion-neutral) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral();\r\n}\r\n\r\n:host(.dso-accordion-neutral[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open();\r\n}\r\n\r\n:host(.dso-accordion-neutral.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open-nested();\r\n}\r\n","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\nimport { LabelStatus } from \"../../label/label.interfaces\";\r\n\r\n// eslint-disable-next-line no-console\r\nconst log = (window as any)[\"_dsoLog\"] === true ? console.log.bind(console.log) : function () {};\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 * The label to be displayed in the heading handle inside a Label (optional)\r\n */\r\n @Prop()\r\n label?: string;\r\n\r\n /**\r\n * The status of the Label in the heading handle (optional)\r\n */\r\n @Prop()\r\n labelStatus?: LabelStatus;\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 log(\r\n `DSO Toolkit [Accordion Section] scrollIntoView(bodyHeight: ${JSON.stringify(\r\n bodyHeight,\r\n )}, behavior: ${JSON.stringify(behavior)})`,\r\n );\r\n\r\n const bodyClientRect = this.sectionBody?.getBoundingClientRect();\r\n const headingClientRect = this.sectionHeading?.getBoundingClientRect();\r\n\r\n log(`DSO Toolkit [Accordion Section] const bodyClientRect = ${JSON.stringify(bodyClientRect)};`);\r\n log(`DSO Toolkit [Accordion Section] const headingClientRect = ${JSON.stringify(headingClientRect)};`);\r\n log(`DSO Toolkit [Accordion Section] this.accordionState = ${JSON.stringify(this.accordionState)};`);\r\n log(`DSO Toolkit [Accordion Section] this.open = ${JSON.stringify(this.open)};`);\r\n\r\n if (!bodyClientRect || !headingClientRect || !this.accordionState) {\r\n log(`DSO Toolkit [Accordion Section] returning`);\r\n\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\r\n log(`DSO Toolkit [Accordion Section] const sectionBottomY = ${JSON.stringify(sectionBottomY)};`);\r\n log(`DSO Toolkit [Accordion Section] window.innerHeight = ${JSON.stringify(window.innerHeight)};`);\r\n\r\n const box = this.host.getBoundingClientRect();\r\n\r\n const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;\r\n const clientTop = document.documentElement.clientTop || document.body.clientTop || 0;\r\n const top = box.top + scrollTop - clientTop;\r\n\r\n log(\"DSO Toolkit [Accordion Section] scroll\", { box, scrollTop, clientTop, top });\r\n\r\n if (sectionBottomY > window.innerHeight) {\r\n log(\r\n `DSO Toolkit [Accordion Section] sectionBottomY > window.innerHeight === ${JSON.stringify(\r\n sectionBottomY > window.innerHeight,\r\n )};`,\r\n );\r\n\r\n const expandedAccordionHeight = sectionBottomY - headingClientRect.top;\r\n const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;\r\n\r\n log(\r\n `DSO Toolkit [Accordion Section] const expandedAccordionHeight = ${JSON.stringify(expandedAccordionHeight)};`,\r\n );\r\n log(\r\n `DSO Toolkit [Accordion Section] const shouldScrollToTopOfSection = ${JSON.stringify(\r\n shouldScrollToTopOfSection,\r\n )};`,\r\n );\r\n\r\n window.scrollTo({\r\n top: shouldScrollToTopOfSection ? top : top - (window.innerHeight - expandedAccordionHeight),\r\n behavior,\r\n });\r\n } else if (headingClientRect.top < 0) {\r\n log(\r\n `DSO Toolkit [Accordion Section] headingClientRect.top < 0 === ${JSON.stringify(headingClientRect.top < 0)};`,\r\n );\r\n\r\n window.scrollTo({\r\n top,\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 {this.label && (\r\n <dso-label status={this.labelStatus} compact>\r\n {this.label}\r\n </dso-label>\r\n )}\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 {this.label && (\r\n <dso-label status={this.labelStatus} compact>\r\n {this.label}\r\n </dso-label>\r\n )}\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"],"mappings":"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","ignoreList":[]}