@dso-toolkit/core 59.0.1 → 60.0.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 (116) hide show
  1. package/dist/cjs/dso-date-picker.cjs.entry.js +49 -568
  2. package/dist/cjs/dso-date-picker.cjs.entry.js.map +1 -1
  3. package/dist/cjs/dso-expandable.cjs.entry.js +1 -1
  4. package/dist/cjs/dso-expandable.cjs.entry.js.map +1 -1
  5. package/dist/cjs/dso-info_2.cjs.entry.js +15 -2
  6. package/dist/cjs/dso-info_2.cjs.entry.js.map +1 -1
  7. package/dist/cjs/dso-toggletip.cjs.entry.js +1 -1
  8. package/dist/cjs/dso-toggletip.cjs.entry.js.map +1 -1
  9. package/dist/cjs/dso-toolkit.cjs.js +1 -1
  10. package/dist/cjs/dso-tooltip.cjs.entry.js +1 -1
  11. package/dist/cjs/dso-tooltip.cjs.entry.js.map +1 -1
  12. package/dist/cjs/dso-viewer-grid.cjs.entry.js +177 -65
  13. package/dist/cjs/dso-viewer-grid.cjs.entry.js.map +1 -1
  14. package/dist/cjs/loader.cjs.js +1 -1
  15. package/dist/collection/components/date-picker/date-picker.css +4 -425
  16. package/dist/collection/components/date-picker/date-picker.interfaces.js.map +1 -1
  17. package/dist/collection/components/date-picker/date-picker.js +50 -510
  18. package/dist/collection/components/date-picker/date-picker.js.map +1 -1
  19. package/dist/collection/components/date-picker/date-utils.js +24 -100
  20. package/dist/collection/components/date-picker/date-utils.js.map +1 -1
  21. package/dist/collection/components/expandable/expandable.css +1 -0
  22. package/dist/collection/components/toggletip/toggletip.css +1 -0
  23. package/dist/collection/components/tooltip/tooltip.css +35 -26
  24. package/dist/collection/components/viewer-grid/components/document-panel.js +8 -0
  25. package/dist/collection/components/viewer-grid/components/document-panel.js.map +1 -0
  26. package/dist/collection/components/viewer-grid/components/index.js +1 -0
  27. package/dist/collection/components/viewer-grid/components/index.js.map +1 -1
  28. package/dist/collection/components/viewer-grid/components/main-panel.js +12 -8
  29. package/dist/collection/components/viewer-grid/components/main-panel.js.map +1 -1
  30. package/dist/collection/components/viewer-grid/viewer-grid.css +237 -48
  31. package/dist/collection/components/viewer-grid/viewer-grid.interfaces.js +13 -1
  32. package/dist/collection/components/viewer-grid/viewer-grid.interfaces.js.map +1 -1
  33. package/dist/collection/components/viewer-grid/viewer-grid.js +402 -59
  34. package/dist/collection/components/viewer-grid/viewer-grid.js.map +1 -1
  35. package/dist/components/dso-date-picker.js +55 -589
  36. package/dist/components/dso-date-picker.js.map +1 -1
  37. package/dist/components/dso-toggletip.js +1 -1
  38. package/dist/components/dso-toggletip.js.map +1 -1
  39. package/dist/components/dso-viewer-grid.js +186 -69
  40. package/dist/components/dso-viewer-grid.js.map +1 -1
  41. package/dist/components/expandable.js +1 -1
  42. package/dist/components/expandable.js.map +1 -1
  43. package/dist/components/selectable.js +14 -1
  44. package/dist/components/selectable.js.map +1 -1
  45. package/dist/components/tooltip.js +1 -1
  46. package/dist/components/tooltip.js.map +1 -1
  47. package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
  48. package/dist/dso-toolkit/dso-toolkit.esm.js.map +1 -1
  49. package/dist/dso-toolkit/p-0c14a2e5.entry.js +2 -0
  50. package/dist/dso-toolkit/p-0c14a2e5.entry.js.map +1 -0
  51. package/dist/dso-toolkit/{p-298453a9.entry.js → p-7d90b3b2.entry.js} +2 -2
  52. package/dist/dso-toolkit/{p-298453a9.entry.js.map → p-7d90b3b2.entry.js.map} +1 -1
  53. package/dist/dso-toolkit/p-8b24f933.entry.js +2 -0
  54. package/dist/dso-toolkit/p-8b24f933.entry.js.map +1 -0
  55. package/dist/dso-toolkit/p-dbea5bbd.entry.js +2 -0
  56. package/dist/dso-toolkit/p-dbea5bbd.entry.js.map +1 -0
  57. package/dist/dso-toolkit/p-ebda3d53.entry.js +2 -0
  58. package/dist/dso-toolkit/p-ebda3d53.entry.js.map +1 -0
  59. package/dist/dso-toolkit/p-f55b3647.entry.js +2 -0
  60. package/dist/dso-toolkit/{p-3631ce14.entry.js.map → p-f55b3647.entry.js.map} +1 -1
  61. package/dist/esm/dso-date-picker.entry.js +50 -569
  62. package/dist/esm/dso-date-picker.entry.js.map +1 -1
  63. package/dist/esm/dso-expandable.entry.js +1 -1
  64. package/dist/esm/dso-expandable.entry.js.map +1 -1
  65. package/dist/esm/dso-info_2.entry.js +14 -1
  66. package/dist/esm/dso-info_2.entry.js.map +1 -1
  67. package/dist/esm/dso-toggletip.entry.js +1 -1
  68. package/dist/esm/dso-toggletip.entry.js.map +1 -1
  69. package/dist/esm/dso-toolkit.js +1 -1
  70. package/dist/esm/dso-tooltip.entry.js +1 -1
  71. package/dist/esm/dso-tooltip.entry.js.map +1 -1
  72. package/dist/esm/dso-viewer-grid.entry.js +178 -66
  73. package/dist/esm/dso-viewer-grid.entry.js.map +1 -1
  74. package/dist/esm/loader.js +1 -1
  75. package/dist/types/components/date-picker/date-picker.d.ts +8 -99
  76. package/dist/types/components/date-picker/date-picker.interfaces.d.ts +9 -8
  77. package/dist/types/components/date-picker/date-utils.d.ts +6 -34
  78. package/dist/types/components/viewer-grid/components/document-panel.d.ts +10 -0
  79. package/dist/types/components/viewer-grid/components/index.d.ts +1 -0
  80. package/dist/types/components/viewer-grid/components/main-panel.d.ts +10 -4
  81. package/dist/types/components/viewer-grid/viewer-grid.d.ts +82 -17
  82. package/dist/types/components/viewer-grid/viewer-grid.interfaces.d.ts +27 -13
  83. package/dist/types/components.d.ts +87 -42
  84. package/package.json +2 -2
  85. package/dist/cjs/create-identifier-5900c27b.js +0 -19
  86. package/dist/cjs/create-identifier-5900c27b.js.map +0 -1
  87. package/dist/collection/components/date-picker/date-localization.js +0 -30
  88. package/dist/collection/components/date-picker/date-localization.js.map +0 -1
  89. package/dist/collection/components/date-picker/date-picker-day.js +0 -20
  90. package/dist/collection/components/date-picker/date-picker-day.js.map +0 -1
  91. package/dist/collection/components/date-picker/date-picker-month.js +0 -26
  92. package/dist/collection/components/date-picker/date-picker-month.js.map +0 -1
  93. package/dist/collection/components/date-picker/utils/month-range.js +0 -28
  94. package/dist/collection/components/date-picker/utils/month-range.js.map +0 -1
  95. package/dist/collection/components/date-picker/utils/range.js +0 -8
  96. package/dist/collection/components/date-picker/utils/range.js.map +0 -1
  97. package/dist/components/create-identifier.js +0 -17
  98. package/dist/components/create-identifier.js.map +0 -1
  99. package/dist/dso-toolkit/p-3631ce14.entry.js +0 -2
  100. package/dist/dso-toolkit/p-95b70498.entry.js +0 -2
  101. package/dist/dso-toolkit/p-95b70498.entry.js.map +0 -1
  102. package/dist/dso-toolkit/p-9dbe2931.entry.js +0 -2
  103. package/dist/dso-toolkit/p-9dbe2931.entry.js.map +0 -1
  104. package/dist/dso-toolkit/p-ad44136d.entry.js +0 -2
  105. package/dist/dso-toolkit/p-ad44136d.entry.js.map +0 -1
  106. package/dist/dso-toolkit/p-c19cfe3f.js +0 -2
  107. package/dist/dso-toolkit/p-c19cfe3f.js.map +0 -1
  108. package/dist/dso-toolkit/p-f08a5a06.entry.js +0 -2
  109. package/dist/dso-toolkit/p-f08a5a06.entry.js.map +0 -1
  110. package/dist/esm/create-identifier-479a4699.js +0 -17
  111. package/dist/esm/create-identifier-479a4699.js.map +0 -1
  112. package/dist/types/components/date-picker/date-localization.d.ts +0 -19
  113. package/dist/types/components/date-picker/date-picker-day.d.ts +0 -11
  114. package/dist/types/components/date-picker/date-picker-month.d.ts +0 -20
  115. package/dist/types/components/date-picker/utils/month-range.d.ts +0 -2
  116. package/dist/types/components/date-picker/utils/range.d.ts +0 -1
@@ -1,10 +1,9 @@
1
1
  export interface ViewerGridChangeSizeEvent {
2
- /**
3
- * Indicates whether it's before or after the animation
4
- */
5
- stage: "start" | "end";
6
- previousSize: MainSize;
7
- currentSize: MainSize;
2
+ currentSize: ViewerGridPanelSize;
3
+ nextSize: ViewerGridPanelSize;
4
+ }
5
+ export interface ViewerGridChangeSizeAnimationEndEvent {
6
+ currentSize: ViewerGridPanelSize;
8
7
  }
9
8
  export interface ViewerGridCloseOverlayEvent {
10
9
  originalEvent: MouseEvent | Event;
@@ -15,12 +14,27 @@ export interface ViewerGridFilterpanelCancelEvent {
15
14
  export interface ViewerGridFilterpanelApplyEvent {
16
15
  originalEvent: MouseEvent | Event;
17
16
  }
18
- export type MainSize = "small" | "medium" | "large";
19
- export type LabelSizeMap = {
20
- [key in MainSize]: string;
17
+ export interface ViewerGridActiveTabSwitchEvent {
18
+ tab: ViewerGridTab;
19
+ }
20
+ export interface ViewerGridMainExpandEvent {
21
+ expand: boolean;
22
+ }
23
+ export interface ViewerGridMainToggleEvent {
24
+ hide: boolean;
25
+ }
26
+ export type ViewerGridMode = "vdk" | "vrk";
27
+ export type ViewerGridPanelSize = "small" | "medium" | "large";
28
+ export type ViewerGridLabelSizeMap = {
29
+ [key in ViewerGridPanelSize]: string;
21
30
  };
22
- export declare const tabs: readonly ["main", "map"];
23
- export type Tabs = (typeof tabs)[number];
24
- export type TabLabelMap = {
25
- [key in Tabs]: string;
31
+ export declare const viewerGridVrkTabs: readonly ["main", "map"];
32
+ export type ViewerGridVrkTab = (typeof viewerGridVrkTabs)[number];
33
+ export declare const viewerGridVdkTabs: readonly ["search", "map", "document"];
34
+ export type ViewerGridVdkTab = (typeof viewerGridVdkTabs)[number];
35
+ export type ViewerGridTab = ViewerGridVrkTab | ViewerGridVdkTab;
36
+ export type ViewerGridTabLabelMap = {
37
+ [key in ViewerGridTab]: string;
26
38
  };
39
+ export declare const viewerGridTabLabelMap: ViewerGridTabLabelMap;
40
+ export declare const viewerGridSizeLabelMap: ViewerGridLabelSizeMap;
@@ -12,7 +12,7 @@ import { AnnotationOutputCloseEvent } from "./components/annotation-output/annot
12
12
  import { Suggestion } from "./components/autosuggest/autosuggest.interfaces";
13
13
  import { DsoCardClickedEvent, ImageShape } from "./components/card/card.interfaces";
14
14
  import { CardContainerMode } from "./components/card-container/card-container.interfaces";
15
- import { DsoDatePickerChangeEvent, DsoDatePickerDirection, DsoDatePickerFocusEvent, DsoDatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
15
+ import { DatePickerChangeEvent, DatePickerFocusEvent, DatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
16
16
  import { DocumentComponentOpenToggleEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentWijzigactie } from "./components/document-component/document-component.models";
17
17
  import { Placement } from "@popperjs/core";
18
18
  import { ExpandableAnimationEndEvent } from "./components/expandable/expandable";
@@ -30,7 +30,7 @@ import { DsoScrollEndEvent } from "./components/scrollable/scrollable.interfaces
30
30
  import { SelectableChangeEvent } from "./components/selectable/selectable.interfaces";
31
31
  import { SlideToggleActiveEvent } from "./components/slide-toggle/slide-toggle.interfaces";
32
32
  import { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
33
- import { MainSize, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent } from "./components/viewer-grid/viewer-grid.interfaces";
33
+ import { ViewerGridActiveTabSwitchEvent, ViewerGridChangeSizeAnimationEndEvent, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent, ViewerGridMainExpandEvent, ViewerGridMainToggleEvent, ViewerGridMode, ViewerGridPanelSize, ViewerGridVdkTab, ViewerGridVrkTab } from "./components/viewer-grid/viewer-grid.interfaces";
34
34
  export { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
35
35
  export { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
36
36
  export { AnnotationButtonClickEvent } from "./components/annotation-button/annotation-button";
@@ -38,7 +38,7 @@ export { AnnotationOutputCloseEvent } from "./components/annotation-output/annot
38
38
  export { Suggestion } from "./components/autosuggest/autosuggest.interfaces";
39
39
  export { DsoCardClickedEvent, ImageShape } from "./components/card/card.interfaces";
40
40
  export { CardContainerMode } from "./components/card-container/card-container.interfaces";
41
- export { DsoDatePickerChangeEvent, DsoDatePickerDirection, DsoDatePickerFocusEvent, DsoDatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
41
+ export { DatePickerChangeEvent, DatePickerFocusEvent, DatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
42
42
  export { DocumentComponentOpenToggleEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentWijzigactie } from "./components/document-component/document-component.models";
43
43
  export { Placement } from "@popperjs/core";
44
44
  export { ExpandableAnimationEndEvent } from "./components/expandable/expandable";
@@ -56,7 +56,7 @@ export { DsoScrollEndEvent } from "./components/scrollable/scrollable.interfaces
56
56
  export { SelectableChangeEvent } from "./components/selectable/selectable.interfaces";
57
57
  export { SlideToggleActiveEvent } from "./components/slide-toggle/slide-toggle.interfaces";
58
58
  export { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
59
- export { MainSize, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent } from "./components/viewer-grid/viewer-grid.interfaces";
59
+ export { ViewerGridActiveTabSwitchEvent, ViewerGridChangeSizeAnimationEndEvent, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent, ViewerGridMainExpandEvent, ViewerGridMainToggleEvent, ViewerGridMode, ViewerGridPanelSize, ViewerGridVdkTab, ViewerGridVrkTab } from "./components/viewer-grid/viewer-grid.interfaces";
60
60
  export namespace Components {
61
61
  interface DsoAccordion {
62
62
  "_getState": () => Promise<AccordionInternalState>;
@@ -246,10 +246,6 @@ export namespace Components {
246
246
  * ID of element that describes the input element
247
247
  */
248
248
  "describedBy"?: string;
249
- /**
250
- * Forces the opening direction of the calendar modal to be always left or right. This setting can be useful when the input is smaller than the opening date picker would be as by default the picker always opens towards right.
251
- */
252
- "direction": DsoDatePickerDirection;
253
249
  /**
254
250
  * Makes the date picker input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.
255
251
  */
@@ -258,10 +254,6 @@ export namespace Components {
258
254
  * Should the input be focused on load?
259
255
  */
260
256
  "dsoAutofocus": boolean;
261
- /**
262
- * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus returning to the date picker's button. Default is true.
263
- */
264
- "hide": (moveFocusToButton?: boolean) => Promise<void>;
265
257
  /**
266
258
  * Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.
267
259
  */
@@ -286,18 +278,6 @@ export namespace Components {
286
278
  * Should the input be marked as required?
287
279
  */
288
280
  "required": boolean;
289
- /**
290
- * Defines a specific role attribute for the date picker input.
291
- */
292
- "role": string | null;
293
- /**
294
- * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
295
- */
296
- "setFocus": () => Promise<void | undefined>;
297
- /**
298
- * Show the calendar modal, moving focus to the calendar inside.
299
- */
300
- "show": () => Promise<void>;
301
281
  /**
302
282
  * Date value. Must be in Dutch date format: DD-MM-YYYY.
303
283
  */
@@ -846,14 +826,39 @@ export namespace Components {
846
826
  "focusItem": (path: TreeViewItem[]) => Promise<boolean>;
847
827
  }
848
828
  interface DsoViewerGrid {
829
+ "_checkMainPanelVisibility": () => Promise<void>;
830
+ /**
831
+ * Set active tab in tab view.
832
+ */
833
+ "activeTab"?: ViewerGridVdkTab | ViewerGridVrkTab;
834
+ /**
835
+ * **VDK only.** Set to true when document panel should show.
836
+ */
837
+ "documentPanelOpen": boolean;
838
+ /**
839
+ * **VDK only.** Size of the panel when component loads. Default size is `large`.
840
+ */
841
+ "documentPanelSize": ViewerGridPanelSize;
849
842
  /**
850
843
  * Set to true when filterpanel should show.
851
844
  */
852
845
  "filterpanelOpen": boolean;
853
846
  /**
854
- * Size of the main content panel when component loads. Changing this attribute afterwards has no effect. Default size is `large`.
847
+ * **VDK only.** Set to show main panel expanded.
848
+ */
849
+ "mainPanelExpanded": boolean;
850
+ /**
851
+ * **VDK only.** Set to hide the main panel.
852
+ */
853
+ "mainPanelHidden": boolean;
854
+ /**
855
+ * Size of the panel when component loads. Default size is `large`.
855
856
  */
856
- "initialMainSize"?: MainSize;
857
+ "mainSize": ViewerGridPanelSize;
858
+ /**
859
+ * VRK or VDK implementation.
860
+ */
861
+ "mode": ViewerGridMode;
857
862
  /**
858
863
  * Set to true when overlay should show.
859
864
  */
@@ -1510,10 +1515,6 @@ declare namespace LocalJSX {
1510
1515
  * ID of element that describes the input element
1511
1516
  */
1512
1517
  "describedBy"?: string;
1513
- /**
1514
- * Forces the opening direction of the calendar modal to be always left or right. This setting can be useful when the input is smaller than the opening date picker would be as by default the picker always opens towards right.
1515
- */
1516
- "direction"?: DsoDatePickerDirection;
1517
1518
  /**
1518
1519
  * Makes the date picker input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.
1519
1520
  */
@@ -1545,31 +1546,27 @@ declare namespace LocalJSX {
1545
1546
  /**
1546
1547
  * Event emitted the date picker input is blurred.
1547
1548
  */
1548
- "onDsoBlur"?: (event: DsoDatePickerCustomEvent<DsoDatePickerFocusEvent>) => void;
1549
+ "onDsoBlur"?: (event: DsoDatePickerCustomEvent<DatePickerFocusEvent>) => void;
1549
1550
  /**
1550
1551
  * Event emitted when a date is selected.
1551
1552
  */
1552
- "onDsoDateChange"?: (event: DsoDatePickerCustomEvent<DsoDatePickerChangeEvent>) => void;
1553
+ "onDsoDateChange"?: (event: DsoDatePickerCustomEvent<DatePickerChangeEvent>) => void;
1553
1554
  /**
1554
1555
  * Event emitted the date picker input is focused.
1555
1556
  */
1556
- "onDsoFocus"?: (event: DsoDatePickerCustomEvent<DsoDatePickerFocusEvent>) => void;
1557
+ "onDsoFocus"?: (event: DsoDatePickerCustomEvent<DatePickerFocusEvent>) => void;
1557
1558
  /**
1558
1559
  * Event emitted on key down in the date picker input.
1559
1560
  */
1560
- "onDsoKeyDown"?: (event: DsoDatePickerCustomEvent<DsoDatePickerKeyboardEvent>) => void;
1561
+ "onDsoKeyDown"?: (event: DsoDatePickerCustomEvent<DatePickerKeyboardEvent>) => void;
1561
1562
  /**
1562
1563
  * Event emitted on key up in the date picker input.
1563
1564
  */
1564
- "onDsoKeyUp"?: (event: DsoDatePickerCustomEvent<DsoDatePickerKeyboardEvent>) => void;
1565
+ "onDsoKeyUp"?: (event: DsoDatePickerCustomEvent<DatePickerKeyboardEvent>) => void;
1565
1566
  /**
1566
1567
  * Should the input be marked as required?
1567
1568
  */
1568
1569
  "required"?: boolean;
1569
- /**
1570
- * Defines a specific role attribute for the date picker input.
1571
- */
1572
- "role"?: string | null;
1573
1570
  /**
1574
1571
  * Date value. Must be in Dutch date format: DD-MM-YYYY.
1575
1572
  */
@@ -2184,18 +2181,54 @@ declare namespace LocalJSX {
2184
2181
  "onDsoOpenItem"?: (event: DsoTreeViewCustomEvent<TreeViewItem[]>) => void;
2185
2182
  }
2186
2183
  interface DsoViewerGrid {
2184
+ /**
2185
+ * Set active tab in tab view.
2186
+ */
2187
+ "activeTab"?: ViewerGridVdkTab | ViewerGridVrkTab;
2188
+ /**
2189
+ * **VDK only.** Set to true when document panel should show.
2190
+ */
2191
+ "documentPanelOpen"?: boolean;
2192
+ /**
2193
+ * **VDK only.** Size of the panel when component loads. Default size is `large`.
2194
+ */
2195
+ "documentPanelSize"?: ViewerGridPanelSize;
2187
2196
  /**
2188
2197
  * Set to true when filterpanel should show.
2189
2198
  */
2190
2199
  "filterpanelOpen"?: boolean;
2191
2200
  /**
2192
- * Size of the main content panel when component loads. Changing this attribute afterwards has no effect. Default size is `large`.
2201
+ * **VDK only.** Set to show main panel expanded.
2202
+ */
2203
+ "mainPanelExpanded"?: boolean;
2204
+ /**
2205
+ * **VDK only.** Set to hide the main panel.
2206
+ */
2207
+ "mainPanelHidden"?: boolean;
2208
+ /**
2209
+ * Size of the panel when component loads. Default size is `large`.
2210
+ */
2211
+ "mainSize"?: ViewerGridPanelSize;
2212
+ /**
2213
+ * VRK or VDK implementation.
2193
2214
  */
2194
- "initialMainSize"?: MainSize;
2215
+ "mode"?: ViewerGridMode;
2216
+ /**
2217
+ * Emitted when user applies filterpanel options.
2218
+ */
2219
+ "onDsoActiveTabSwitch"?: (event: DsoViewerGridCustomEvent<ViewerGridActiveTabSwitchEvent>) => void;
2195
2220
  /**
2196
2221
  * Emitted when user wants to close the overlay.
2197
2222
  */
2198
2223
  "onDsoCloseOverlay"?: (event: DsoViewerGridCustomEvent<ViewerGridCloseOverlayEvent>) => void;
2224
+ /**
2225
+ * **VDK only.** Emitted on interaction with sizing buttons.
2226
+ */
2227
+ "onDsoDocumentPanelSizeChange"?: (event: DsoViewerGridCustomEvent<ViewerGridChangeSizeEvent>) => void;
2228
+ /**
2229
+ * **VDK only.** Emitted after main size animation.
2230
+ */
2231
+ "onDsoDocumentPanelSizeChangeAnimationEnd"?: (event: DsoViewerGridCustomEvent<ViewerGridChangeSizeAnimationEndEvent>) => void;
2199
2232
  /**
2200
2233
  * Emitted when user applies filterpanel options.
2201
2234
  */
@@ -2205,9 +2238,21 @@ declare namespace LocalJSX {
2205
2238
  */
2206
2239
  "onDsoFilterpanelCancel"?: (event: DsoViewerGridCustomEvent<ViewerGridFilterpanelCancelEvent>) => void;
2207
2240
  /**
2208
- * Emitted before and after main size animation. Inspect `detail` property for more information.
2241
+ * **VDK only.** Emitted when the user wants to expand the main panel.
2242
+ */
2243
+ "onDsoMainPanelExpand"?: (event: DsoViewerGridCustomEvent<ViewerGridMainExpandEvent>) => void;
2244
+ /**
2245
+ * **VDK only.** Emitted when the user toggles the visibility of the main panel. Also emitted by scripting when the panels do not fit anymore.
2246
+ */
2247
+ "onDsoMainPanelToggle"?: (event: DsoViewerGridCustomEvent<ViewerGridMainToggleEvent>) => void;
2248
+ /**
2249
+ * Emitted on interaction with sizing buttons.
2209
2250
  */
2210
2251
  "onDsoMainSizeChange"?: (event: DsoViewerGridCustomEvent<ViewerGridChangeSizeEvent>) => void;
2252
+ /**
2253
+ * Emitted after main size animation.
2254
+ */
2255
+ "onDsoMainSizeChangeAnimationEnd"?: (event: DsoViewerGridCustomEvent<ViewerGridChangeSizeAnimationEndEvent>) => void;
2211
2256
  /**
2212
2257
  * Set to true when overlay should show.
2213
2258
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dso-toolkit/core",
3
- "version": "59.0.1",
3
+ "version": "60.0.0",
4
4
  "description": "DSO Toolkit Web Components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/components/index.js",
@@ -25,7 +25,7 @@
25
25
  "@types/animejs": "^3.1.7",
26
26
  "animejs": "3.2.1",
27
27
  "clsx": "^2.0.0",
28
- "dso-toolkit": "^59.0.1",
28
+ "dso-toolkit": "^60.0.0",
29
29
  "escape-string-regexp": "^5.0.0",
30
30
  "focus-trap": "^7.5.2",
31
31
  "popper-max-size-modifier": "^0.2.0",
@@ -1,19 +0,0 @@
1
- 'use strict';
2
-
3
- /**
4
- * Form random hash
5
- */
6
- function chr4() {
7
- return Math.random().toString(16).slice(-4);
8
- }
9
- /**
10
- * Create random identifier with a prefix
11
- * @param prefix
12
- */
13
- function createIdentifier(prefix) {
14
- return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;
15
- }
16
-
17
- exports.createIdentifier = createIdentifier;
18
-
19
- //# sourceMappingURL=create-identifier-5900c27b.js.map
@@ -1 +0,0 @@
1
- {"file":"create-identifier-5900c27b.js","mappings":";;AAAA;;;SAGgB,IAAI;EAClB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9C,CAAC;AAED;;;;SAIgB,gBAAgB,CAAC,MAAc;EAC7C,OAAO,GAAG,MAAM,IAAI,IAAI,EAAE,GAAG,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,CAAC;AAClG;;;;","names":[],"sources":["src/utils/create-identifier.ts"],"sourcesContent":["/**\r\n * Form random hash\r\n */\r\nexport function chr4() {\r\n return Math.random().toString(16).slice(-4);\r\n}\r\n\r\n/**\r\n * Create random identifier with a prefix\r\n * @param prefix\r\n */\r\nexport function createIdentifier(prefix: string): string {\r\n return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\r\n}\r\n"],"version":3}
@@ -1,30 +0,0 @@
1
- const localization = {
2
- buttonLabel: "Kies datum",
3
- placeholder: "dd-mm-jjjj",
4
- selectedDateMessage: "Geselecteerde datum is",
5
- prevMonthLabel: "Vorige maand",
6
- nextMonthLabel: "Volgende maand",
7
- monthSelectLabel: "Maand",
8
- yearSelectLabel: "Jaar",
9
- closeLabel: "Sluiten",
10
- keyboardInstruction: "Gebruik de pijltjestoetsen om een dag te kiezen",
11
- calendarHeading: "Kies een datum",
12
- dayNames: ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"],
13
- monthNames: [
14
- "Januari",
15
- "Februari",
16
- "Maart",
17
- "April",
18
- "Mei",
19
- "Juni",
20
- "Juli",
21
- "Augustus",
22
- "September",
23
- "Oktober",
24
- "November",
25
- "December",
26
- ],
27
- monthNamesShort: ["Jan", "Feb", "Mrt", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
28
- };
29
- export default localization;
30
- //# sourceMappingURL=date-localization.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"date-localization.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-localization.ts"],"names":[],"mappings":"AAmBA,MAAM,YAAY,GAAqB;EACrC,WAAW,EAAE,YAAY;EACzB,WAAW,EAAE,YAAY;EACzB,mBAAmB,EAAE,wBAAwB;EAC7C,cAAc,EAAE,cAAc;EAC9B,cAAc,EAAE,gBAAgB;EAChC,gBAAgB,EAAE,OAAO;EACzB,eAAe,EAAE,MAAM;EACvB,UAAU,EAAE,SAAS;EACrB,mBAAmB,EAAE,iDAAiD;EACtE,eAAe,EAAE,gBAAgB;EACjC,QAAQ,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,CAAC;EAC1F,UAAU,EAAE;IACV,SAAS;IACT,UAAU;IACV,OAAO;IACP,OAAO;IACP,KAAK;IACL,MAAM;IACN,MAAM;IACN,UAAU;IACV,WAAW;IACX,SAAS;IACT,UAAU;IACV,UAAU;GACX;EACD,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;CACtG,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["type MonthsNames = [string, string, string, string, string, string, string, string, string, string, string, string];\r\ntype DayNames = [string, string, string, string, string, string, string];\r\n\r\nexport type DsoLocalizedText = {\r\n buttonLabel: string;\r\n placeholder: string;\r\n selectedDateMessage: string;\r\n prevMonthLabel: string;\r\n nextMonthLabel: string;\r\n monthSelectLabel: string;\r\n yearSelectLabel: string;\r\n closeLabel: string;\r\n keyboardInstruction: string;\r\n calendarHeading: string;\r\n dayNames: DayNames;\r\n monthNames: MonthsNames;\r\n monthNamesShort: MonthsNames;\r\n};\r\n\r\nconst localization: DsoLocalizedText = {\r\n buttonLabel: \"Kies datum\",\r\n placeholder: \"dd-mm-jjjj\",\r\n selectedDateMessage: \"Geselecteerde datum is\",\r\n prevMonthLabel: \"Vorige maand\",\r\n nextMonthLabel: \"Volgende maand\",\r\n monthSelectLabel: \"Maand\",\r\n yearSelectLabel: \"Jaar\",\r\n closeLabel: \"Sluiten\",\r\n keyboardInstruction: \"Gebruik de pijltjestoetsen om een dag te kiezen\",\r\n calendarHeading: \"Kies een datum\",\r\n dayNames: [\"Zondag\", \"Maandag\", \"Dinsdag\", \"Woensdag\", \"Donderdag\", \"Vrijdag\", \"Zaterdag\"],\r\n monthNames: [\r\n \"Januari\",\r\n \"Februari\",\r\n \"Maart\",\r\n \"April\",\r\n \"Mei\",\r\n \"Juni\",\r\n \"Juli\",\r\n \"Augustus\",\r\n \"September\",\r\n \"Oktober\",\r\n \"November\",\r\n \"December\",\r\n ],\r\n monthNamesShort: [\"Jan\", \"Feb\", \"Mrt\", \"Apr\", \"Mei\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Okt\", \"Nov\", \"Dec\"],\r\n};\r\n\r\nexport default localization;\r\n"]}
@@ -1,20 +0,0 @@
1
- import { h } from "@stencil/core";
2
- import { isEqual, printDutchDate } from "./date-utils";
3
- export const DatePickerDay = ({ focusedDay, today, day, onDaySelect, onKeyboardNavigation, focusedDayRef, inRange, }) => {
4
- const isToday = isEqual(day, today);
5
- const isFocused = isEqual(day, focusedDay);
6
- const notCurrentMonth = day.getMonth() !== focusedDay.getMonth();
7
- const isOutsideRange = !inRange;
8
- function handleClick(e) {
9
- onDaySelect(e, day);
10
- }
11
- return (h("button", { class: {
12
- "dso-date__day": true,
13
- "is-today": isToday,
14
- }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, disabled: isOutsideRange || notCurrentMonth, type: "button", ref: (el) => {
15
- if (isFocused && el && focusedDayRef) {
16
- focusedDayRef(el);
17
- }
18
- } }, h("span", { "aria-hidden": "true" }, day.getDate()), h("span", { class: "dso-date__vhidden" }, printDutchDate(day))));
19
- };
20
- //# sourceMappingURL=date-picker-day.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"date-picker-day.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker-day.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAuB,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAYvD,MAAM,CAAC,MAAM,aAAa,GAA4C,CAAC,EACrE,UAAU,EACV,KAAK,EACL,GAAG,EACH,WAAW,EACX,oBAAoB,EACpB,aAAa,EACb,OAAO,GACR,EAAE,EAAE;EACH,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;EACpC,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;EAC3C,MAAM,eAAe,GAAG,GAAG,CAAC,QAAQ,EAAE,KAAK,UAAU,CAAC,QAAQ,EAAE,CAAC;EACjE,MAAM,cAAc,GAAG,CAAC,OAAO,CAAC;EAEhC,SAAS,WAAW,CAAC,CAAa;IAChC,WAAW,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;EACtB,CAAC;EAED,OAAO,CACL,cACE,KAAK,EAAE;MACL,eAAe,EAAE,IAAI;MACrB,UAAU,EAAE,OAAO;KACpB,EACD,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC5B,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,oBAAoB,EAC/B,QAAQ,EAAE,cAAc,IAAI,eAAe,EAC3C,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;MACV,IAAI,SAAS,IAAI,EAAE,IAAI,aAAa,EAAE;QACpC,aAAa,CAAC,EAAE,CAAC,CAAC;OACnB;IACH,CAAC;IAED,2BAAkB,MAAM,IAAE,GAAG,CAAC,OAAO,EAAE,CAAQ;IAC/C,YAAM,KAAK,EAAC,mBAAmB,IAAE,cAAc,CAAC,GAAG,CAAC,CAAQ,CACrD,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h, FunctionalComponent } from \"@stencil/core\";\r\nimport { isEqual, printDutchDate } from \"./date-utils\";\r\n\r\nexport type DatePickerDayProps = {\r\n focusedDay: Date;\r\n today: Date;\r\n day: Date;\r\n inRange: boolean;\r\n onDaySelect: (event: MouseEvent, day: Date) => void;\r\n onKeyboardNavigation: (event: KeyboardEvent) => void;\r\n focusedDayRef?: (element: HTMLButtonElement) => void;\r\n};\r\n\r\nexport const DatePickerDay: FunctionalComponent<DatePickerDayProps> = ({\r\n focusedDay,\r\n today,\r\n day,\r\n onDaySelect,\r\n onKeyboardNavigation,\r\n focusedDayRef,\r\n inRange,\r\n}) => {\r\n const isToday = isEqual(day, today);\r\n const isFocused = isEqual(day, focusedDay);\r\n const notCurrentMonth = day.getMonth() !== focusedDay.getMonth();\r\n const isOutsideRange = !inRange;\r\n\r\n function handleClick(e: MouseEvent) {\r\n onDaySelect(e, day);\r\n }\r\n\r\n return (\r\n <button\r\n class={{\r\n \"dso-date__day\": true,\r\n \"is-today\": isToday,\r\n }}\r\n tabIndex={isFocused ? 0 : -1}\r\n onClick={handleClick}\r\n onKeyDown={onKeyboardNavigation}\r\n disabled={isOutsideRange || notCurrentMonth}\r\n type=\"button\"\r\n ref={(el) => {\r\n if (isFocused && el && focusedDayRef) {\r\n focusedDayRef(el);\r\n }\r\n }}\r\n >\r\n <span aria-hidden=\"true\">{day.getDate()}</span>\r\n <span class=\"dso-date__vhidden\">{printDutchDate(day)}</span>\r\n </button>\r\n );\r\n};\r\n"]}
@@ -1,26 +0,0 @@
1
- import { h } from "@stencil/core";
2
- import { DatePickerDay } from "./date-picker-day";
3
- import { getViewOfMonth, inRange, isEqual } from "./date-utils";
4
- function chunk(array, chunkSize) {
5
- const result = [];
6
- for (let i = 0; i < array.length; i += chunkSize) {
7
- result.push(array.slice(i, i + chunkSize));
8
- }
9
- return result;
10
- }
11
- function mapWithOffset(array, startingOffset, mapFn) {
12
- return array.map((_, i) => {
13
- const adjustedIndex = (i + startingOffset) % array.length;
14
- const item = array[adjustedIndex];
15
- if (!item) {
16
- throw new Error("No item found");
17
- }
18
- return mapFn(item);
19
- });
20
- }
21
- export const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, localization, firstDayOfWeek, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onMouseDown, onFocusIn, }) => {
22
- const today = new Date();
23
- const days = getViewOfMonth(focusedDate, firstDayOfWeek);
24
- return (h("table", { class: "dso-date__table", role: "grid", "aria-labelledby": labelledById, onFocusin: onFocusIn, onMouseDown: onMouseDown }, h("thead", null, h("tr", null, mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (h("th", { class: "dso-date__table-header", scope: "col" }, h("span", { "aria-hidden": "true" }, dayName.substr(0, 2)), h("span", { class: "dso-date__vhidden" }, dayName)))))), h("tbody", null, chunk(days, 7).map((week) => (h("tr", { class: "dso-date__row" }, week.map((day) => (h("td", { class: "dso-date__cell", role: "gridcell", "aria-selected": isEqual(day, selectedDate) ? "true" : undefined, "aria-current": isEqual(day, today) ? "date" : undefined }, h(DatePickerDay, { day: day, today: today, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef }))))))))));
25
- };
26
- //# sourceMappingURL=date-picker-month.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"date-picker-month.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker-month.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAuB,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAsB,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,OAAO,EAAc,OAAO,EAAE,MAAM,cAAc,CAAC;AAE5E,SAAS,KAAK,CAAI,KAAU,EAAE,SAAiB;EAC7C,MAAM,MAAM,GAAG,EAAE,CAAC;EAElB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,IAAI,SAAS,EAAE;IAChD,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC;GAC5C;EAED,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAS,aAAa,CAAO,KAAU,EAAE,cAAsB,EAAE,KAAqB;EACpF,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IACxB,MAAM,aAAa,GAAG,CAAC,CAAC,GAAG,cAAc,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;IAC1D,MAAM,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC;IAClC,IAAI,CAAC,IAAI,EAAE;MACT,MAAM,IAAI,KAAK,CAAC,eAAe,CAAC,CAAC;KAClC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC;EACrB,CAAC,CAAC,CAAC;AACL,CAAC;AAiBD,MAAM,CAAC,MAAM,eAAe,GAA8C,CAAC,EACzE,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,GAAG,EACH,GAAG,EACH,YAAY,EACZ,oBAAoB,EACpB,aAAa,EACb,WAAW,EACX,SAAS,GACV,EAAE,EAAE;EACH,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC;EACzB,MAAM,IAAI,GAAG,cAAc,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC;EAEzD,OAAO,CACL,aACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,MAAM,qBACM,YAAY,EAC7B,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW;IAExB;MACE,cACG,aAAa,CAAC,YAAY,CAAC,QAAQ,EAAE,cAAc,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CACjE,UAAI,KAAK,EAAC,wBAAwB,EAAC,KAAK,EAAC,KAAK;QAC5C,2BAAkB,MAAM,IAAE,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAQ;QACtD,YAAM,KAAK,EAAC,mBAAmB,IAAE,OAAO,CAAQ,CAC7C,CACN,CAAC,CACC,CACC;IACR,iBACG,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC5B,UAAI,KAAK,EAAC,eAAe,IACtB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,UACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,UAAU,mBACA,OAAO,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,kBAChD,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;MAEtD,EAAC,aAAa,IACZ,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,WAAW,EACvB,OAAO,EAAE,OAAO,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EAC/B,WAAW,EAAE,YAAY,EACzB,oBAAoB,EAAE,oBAAoB,EAC1C,aAAa,EAAE,aAAa,GAC5B,CACC,CACN,CAAC,CACC,CACN,CAAC,CACI,CACF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h, FunctionalComponent } from \"@stencil/core\";\r\nimport { DsoLocalizedText } from \"./date-localization\";\r\nimport { DatePickerDay, DatePickerDayProps } from \"./date-picker-day\";\r\nimport { getViewOfMonth, inRange, DaysOfWeek, isEqual } from \"./date-utils\";\r\n\r\nfunction chunk<T>(array: T[], chunkSize: number): T[][] {\r\n const result = [];\r\n\r\n for (let i = 0; i < array.length; i += chunkSize) {\r\n result.push(array.slice(i, i + chunkSize));\r\n }\r\n\r\n return result;\r\n}\r\n\r\nfunction mapWithOffset<T, U>(array: T[], startingOffset: number, mapFn: (item: T) => U): U[] {\r\n return array.map((_, i) => {\r\n const adjustedIndex = (i + startingOffset) % array.length;\r\n const item = array[adjustedIndex];\r\n if (!item) {\r\n throw new Error(\"No item found\");\r\n }\r\n\r\n return mapFn(item);\r\n });\r\n}\r\n\r\ntype DatePickerMonthProps = {\r\n selectedDate: Date | undefined;\r\n focusedDate: Date;\r\n labelledById: string;\r\n localization: DsoLocalizedText;\r\n firstDayOfWeek: DaysOfWeek;\r\n min?: Date;\r\n max?: Date;\r\n onDateSelect: DatePickerDayProps[\"onDaySelect\"];\r\n onKeyboardNavigation: DatePickerDayProps[\"onKeyboardNavigation\"];\r\n focusedDayRef: (element: HTMLButtonElement) => void;\r\n onFocusIn?: (e: FocusEvent) => void;\r\n onMouseDown?: (e: MouseEvent) => void;\r\n};\r\n\r\nexport const DatePickerMonth: FunctionalComponent<DatePickerMonthProps> = ({\r\n selectedDate,\r\n focusedDate,\r\n labelledById,\r\n localization,\r\n firstDayOfWeek,\r\n min,\r\n max,\r\n onDateSelect,\r\n onKeyboardNavigation,\r\n focusedDayRef,\r\n onMouseDown,\r\n onFocusIn,\r\n}) => {\r\n const today = new Date();\r\n const days = getViewOfMonth(focusedDate, firstDayOfWeek);\r\n\r\n return (\r\n <table\r\n class=\"dso-date__table\"\r\n role=\"grid\"\r\n aria-labelledby={labelledById}\r\n onFocusin={onFocusIn}\r\n onMouseDown={onMouseDown}\r\n >\r\n <thead>\r\n <tr>\r\n {mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (\r\n <th class=\"dso-date__table-header\" scope=\"col\">\r\n <span aria-hidden=\"true\">{dayName.substr(0, 2)}</span>\r\n <span class=\"dso-date__vhidden\">{dayName}</span>\r\n </th>\r\n ))}\r\n </tr>\r\n </thead>\r\n <tbody>\r\n {chunk(days, 7).map((week) => (\r\n <tr class=\"dso-date__row\">\r\n {week.map((day) => (\r\n <td\r\n class=\"dso-date__cell\"\r\n role=\"gridcell\"\r\n aria-selected={isEqual(day, selectedDate) ? \"true\" : undefined}\r\n aria-current={isEqual(day, today) ? \"date\" : undefined}\r\n >\r\n <DatePickerDay\r\n day={day}\r\n today={today}\r\n focusedDay={focusedDate}\r\n inRange={inRange(day, min, max)}\r\n onDaySelect={onDateSelect}\r\n onKeyboardNavigation={onKeyboardNavigation}\r\n focusedDayRef={focusedDayRef}\r\n />\r\n </td>\r\n ))}\r\n </tr>\r\n ))}\r\n </tbody>\r\n </table>\r\n );\r\n};\r\n"]}
@@ -1,28 +0,0 @@
1
- export function monthRange(localization, selectedYear, minDate, maxDate) {
2
- if (minDate && maxDate) {
3
- const { minYear, minMonth } = { minYear: minDate.getFullYear(), minMonth: minDate.getMonth() };
4
- const { maxYear, maxMonth } = { maxYear: maxDate.getFullYear(), maxMonth: maxDate.getMonth() };
5
- return localization.monthNames.filter((_month, index) => {
6
- if (minYear === selectedYear && maxYear === selectedYear) {
7
- return index >= minMonth && index >= maxMonth;
8
- }
9
- if (minYear === selectedYear) {
10
- return index >= minMonth;
11
- }
12
- if (maxYear === selectedYear) {
13
- return index <= maxMonth;
14
- }
15
- return true;
16
- });
17
- }
18
- if (minDate) {
19
- const { minYear, minMonth } = { minYear: minDate.getFullYear(), minMonth: minDate.getMonth() };
20
- return localization.monthNames.filter((_month, index) => minYear === selectedYear && index >= minMonth);
21
- }
22
- if (maxDate) {
23
- const { maxYear, maxMonth } = { maxYear: maxDate.getFullYear(), maxMonth: maxDate.getMonth() };
24
- return localization.monthNames.filter((_month, index) => maxYear === selectedYear && index <= maxMonth);
25
- }
26
- return localization.monthNames;
27
- }
28
- //# sourceMappingURL=month-range.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"month-range.js","sourceRoot":"","sources":["../../../../src/components/date-picker/utils/month-range.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,UAAU,CACxB,YAA8B,EAC9B,YAAoB,EACpB,OAAc,EACd,OAAc;EAEd,IAAI,OAAO,IAAI,OAAO,EAAE;IACtB,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC;IAC/F,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC;IAE/F,OAAO,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;MACtD,IAAI,OAAO,KAAK,YAAY,IAAI,OAAO,KAAK,YAAY,EAAE;QACxD,OAAO,KAAK,IAAI,QAAQ,IAAI,KAAK,IAAI,QAAQ,CAAC;OAC/C;MAED,IAAI,OAAO,KAAK,YAAY,EAAE;QAC5B,OAAO,KAAK,IAAI,QAAQ,CAAC;OAC1B;MAED,IAAI,OAAO,KAAK,YAAY,EAAE;QAC5B,OAAO,KAAK,IAAI,QAAQ,CAAC;OAC1B;MAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CAAC;GACJ;EAED,IAAI,OAAO,EAAE;IACX,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC;IAE/F,OAAO,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,OAAO,KAAK,YAAY,IAAI,KAAK,IAAI,QAAQ,CAAC,CAAC;GACzG;EAED,IAAI,OAAO,EAAE;IACX,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC;IAE/F,OAAO,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,OAAO,KAAK,YAAY,IAAI,KAAK,IAAI,QAAQ,CAAC,CAAC;GACzG;EAED,OAAO,YAAY,CAAC,UAAU,CAAC;AACjC,CAAC","sourcesContent":["import { DsoLocalizedText } from \"../date-localization\";\r\n\r\nexport function monthRange(\r\n localization: DsoLocalizedText,\r\n selectedYear: number,\r\n minDate?: Date,\r\n maxDate?: Date\r\n): string[] {\r\n if (minDate && maxDate) {\r\n const { minYear, minMonth } = { minYear: minDate.getFullYear(), minMonth: minDate.getMonth() };\r\n const { maxYear, maxMonth } = { maxYear: maxDate.getFullYear(), maxMonth: maxDate.getMonth() };\r\n\r\n return localization.monthNames.filter((_month, index) => {\r\n if (minYear === selectedYear && maxYear === selectedYear) {\r\n return index >= minMonth && index >= maxMonth;\r\n }\r\n\r\n if (minYear === selectedYear) {\r\n return index >= minMonth;\r\n }\r\n\r\n if (maxYear === selectedYear) {\r\n return index <= maxMonth;\r\n }\r\n\r\n return true;\r\n });\r\n }\r\n\r\n if (minDate) {\r\n const { minYear, minMonth } = { minYear: minDate.getFullYear(), minMonth: minDate.getMonth() };\r\n\r\n return localization.monthNames.filter((_month, index) => minYear === selectedYear && index >= minMonth);\r\n }\r\n\r\n if (maxDate) {\r\n const { maxYear, maxMonth } = { maxYear: maxDate.getFullYear(), maxMonth: maxDate.getMonth() };\r\n\r\n return localization.monthNames.filter((_month, index) => maxYear === selectedYear && index <= maxMonth);\r\n }\r\n\r\n return localization.monthNames;\r\n}\r\n"]}
@@ -1,8 +0,0 @@
1
- export function range(from, to) {
2
- const result = [];
3
- for (let i = from; i <= to; i++) {
4
- result.push(i);
5
- }
6
- return result;
7
- }
8
- //# sourceMappingURL=range.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"range.js","sourceRoot":"","sources":["../../../../src/components/date-picker/utils/range.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,KAAK,CAAC,IAAY,EAAE,EAAU;EAC5C,MAAM,MAAM,GAAa,EAAE,CAAC;EAC5B,KAAK,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE;IAC/B,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;GAChB;EACD,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["export function range(from: number, to: number) {\r\n const result: number[] = [];\r\n for (let i = from; i <= to; i++) {\r\n result.push(i);\r\n }\r\n return result;\r\n}\r\n"]}
@@ -1,17 +0,0 @@
1
- /**
2
- * Form random hash
3
- */
4
- function chr4() {
5
- return Math.random().toString(16).slice(-4);
6
- }
7
- /**
8
- * Create random identifier with a prefix
9
- * @param prefix
10
- */
11
- function createIdentifier(prefix) {
12
- return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;
13
- }
14
-
15
- export { createIdentifier as c };
16
-
17
- //# sourceMappingURL=create-identifier.js.map
@@ -1 +0,0 @@
1
- {"file":"create-identifier.js","mappings":"AAAA;;;SAGgB,IAAI;EAClB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9C,CAAC;AAED;;;;SAIgB,gBAAgB,CAAC,MAAc;EAC7C,OAAO,GAAG,MAAM,IAAI,IAAI,EAAE,GAAG,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,CAAC;AAClG;;;;","names":[],"sources":["src/utils/create-identifier.ts"],"sourcesContent":["/**\r\n * Form random hash\r\n */\r\nexport function chr4() {\r\n return Math.random().toString(16).slice(-4);\r\n}\r\n\r\n/**\r\n * Create random identifier with a prefix\r\n * @param prefix\r\n */\r\nexport function createIdentifier(prefix: string): string {\r\n return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\r\n}\r\n"],"version":3}
@@ -1,2 +0,0 @@
1
- import{r as e,c as s,h as t,F as l,f as o,a as c}from"./p-3ca5b6f4.js";import{c as a}from"./p-c87b4d11.js";import{c as i}from"./p-c19cfe3f.js";const d=":host{display:block;background-color:#f2f2f2;color:#000;padding:16px 32px 16px 16px;position:relative}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;right:8px;top:8px}:host(:not([active]):not([fixed])){display:none}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}*,*::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}";const b=class{constructor(t){e(this,t);this.dsoClose=s(this,"dsoClose",7);this.fixed=undefined;this.active=undefined}render(){return t(l,null,t("slot",null),!this.fixed&&t("button",{type:"button",onClick:e=>this.dsoClose.emit(e)},t("dso-icon",{icon:"times"}),t("span",{class:"sr-only"},"Sluiten")))}};b.style=d;const n='.sc-dso-selectable-h{display:block;position:relative}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-top:8px;padding-left:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-top:8px}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{height:24px;left:0;margin:0;opacity:0;position:absolute;top:0;width:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-left:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:"";height:20px;left:2px;position:absolute;top:2px;width:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);height:18px;left:3px;top:3px;width:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;height:22px;left:1px;top:1px;width:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:"";left:6px;opacity:0;position:absolute;top:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-top-color:transparent;border-width:0 0 3px 3px;height:8px;transform:rotate(-45deg);width:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);height:12px;width:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:"";height:12px;left:6px;opacity:0;position:absolute;top:6px;width:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}.sc-dso-selectable-h>dso-info.sc-dso-selectable{float:none;margin:8px 16px 0 0;width:100%}[invalid].sc-dso-selectable-h:not([invalid=false]){--dso-selectable-color:#ce3f51}.sc-dso-selectable-h:not(:last-child){margin-bottom:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block;position:relative;padding-inline-start:32px}.dso-selectable-container.has-info-button.sc-dso-selectable{padding-inline-end:32px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline-block;margin-inline:-32px;min-height:24px;padding-inline:32px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable:focus-within.dso-keyboard-focus{border-radius:2px;outline-offset:3px;outline:3px solid #008ccc}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);height:20px;left:2px;top:2px;width:20px}dso-info-button.sc-dso-selectable{position:absolute;right:0;top:0}';const r=class{constructor(t){e(this,t);this.dsoChange=s(this,"dsoChange",7);this.fallbackIdentifier=i("DsoSelectable");this.type=undefined;this.identifier=undefined;this.name=undefined;this.value=undefined;this.invalid=undefined;this.describedById=undefined;this.labelledById=undefined;this.disabled=undefined;this.required=undefined;this.checked=undefined;this.indeterminate=undefined;this.infoFixed=undefined;this.infoActive=false;this.keyboardFocus=false}async toggleInfo(e){this.infoActive=e!==null&&e!==void 0?e:!this.infoActive}componentDidLoad(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect();this.mutationObserver=new MutationObserver((()=>o(this.host)));this.mutationObserver.observe(this.host,{childList:true});this.setIndeterminate()}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()}setIndeterminate(){if(!(this.input instanceof HTMLInputElement)||this.type!=="checkbox"){return}this.input.indeterminate=!!this.indeterminate}render(){var e;const s=!!this.host.querySelector('[slot="info"]');return t(l,null,t("div",{class:a("dso-selectable-container",{"has-info-button":s})},t("div",{class:a("dso-selectable-input-wrapper",{"dso-keyboard-focus":this.keyboardFocus})},t("input",{type:this.type,id:this.getIdentifier(),value:this.value,name:this.name,"aria-invalid":(e=this.invalid)===null||e===void 0?void 0:e.toString(),"aria-describedby":s&&this.infoFixed?this.describedById:undefined,"aria-labelledBy":this.labelledById,disabled:this.disabled,required:this.required,checked:this.checked,onChange:e=>this.dsoChange.emit(e),onBlur:()=>this.keyboardFocus=false,onKeyUp:()=>this.keyboardFocus=true,ref:e=>this.input=e}),!this.labelledById?t("label",{htmlFor:this.getIdentifier()},t("slot",null)):t("label",null)),s&&t(l,null,!this.infoFixed&&t("dso-info-button",{active:this.infoActive,onDsoToggle:e=>this.infoActive=e.detail.active}))),s&&t("dso-info",{id:s&&this.infoFixed?this.describedById:undefined,fixed:this.infoFixed,active:this.infoActive,onDsoClose:()=>this.infoActive=false},t("div",null,t("slot",{name:"info"}))))}getIdentifier(){var e;return(e=this.identifier)!==null&&e!==void 0?e:this.fallbackIdentifier}get host(){return c(this)}static get watchers(){return{indeterminate:["setIndeterminate"]}}};r.style=n;export{b as dso_info,r as dso_selectable};
2
- //# sourceMappingURL=p-3631ce14.entry.js.map
@@ -1,2 +0,0 @@
1
- import{r as t,h as s,F as i,a as e}from"./p-3ca5b6f4.js";const o="*,*::after,*::before{box-sizing:border-box}:host{display:inline-block}:host(:focus){outline:none}";const h=class{constructor(s){t(this,s);this.click=()=>{this.active?this.close():this.open()};this.open=()=>{this.active=true;this.host.addEventListener("keydown",this.keyDownListener);this.host.addEventListener("focusout",this.focusOutListener)};this.close=()=>{this.host.removeEventListener("focusout",this.focusOutListener);this.host.removeEventListener("keydown",this.keyDownListener);this.active=false};this.focusOutListener=t=>{if(!this.host.contains(t.relatedTarget)){this.close()}};this.keyDownListener=t=>{var s;if(!t.defaultPrevented&&t.key==="Escape"){this.close();(s=this.infoButton)===null||s===void 0?void 0:s.setFocus();t.preventDefault()}return};this.active=false;this.label="Toelichting";this.position="right";this.small=undefined;this.secondary=undefined}render(){return s(i,null,s("dso-info-button",{"aria-describedby":"toggle",onClick:this.click,label:this.label,active:this.active,secondary:this.secondary,ref:t=>this.infoButton=t}),s("dso-tooltip",{stateless:true,descriptive:true,id:"toggle",strategy:"absolute",active:this.active,position:this.position,small:this.small},s("slot",null)))}get host(){return e(this)}};h.style=o;export{h as dso_toggletip};
2
- //# sourceMappingURL=p-95b70498.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["toggletipCss","Toggletip","this","click","active","close","open","host","addEventListener","keyDownListener","focusOutListener","removeEventListener","event","contains","relatedTarget","defaultPrevented","key","_a","infoButton","setFocus","preventDefault","render","h","Fragment","onClick","label","secondary","ref","element","stateless","descriptive","id","strategy","position","small"],"sources":["src/components/toggletip/toggletip.scss?tag=dso-toggletip&encapsulation=shadow","src/components/toggletip/toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: inline-block;\r\n}\r\n\r\n:host(:focus) {\r\n outline: none;\r\n}\r\n","import { h, Component, Fragment, Element, Prop, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-toggletip\",\r\n styleUrl: \"toggletip.scss\",\r\n shadow: true,\r\n})\r\nexport class Toggletip {\r\n @Element()\r\n host!: HTMLDsoToggletipElement;\r\n\r\n @State()\r\n active = false;\r\n\r\n /**\r\n * Toggletip label.\r\n */\r\n @Prop()\r\n label = \"Toelichting\";\r\n\r\n /**\r\n * Toggletip position.\r\n */\r\n @Prop()\r\n position: \"top\" | \"right\" | \"bottom\" | \"left\" = \"right\";\r\n\r\n /**\r\n * Set to true for small Toggletip.\r\n */\r\n @Prop()\r\n small?: boolean;\r\n\r\n /**\r\n * Set to true for secondary Toggletip.\r\n */\r\n @Prop()\r\n secondary?: boolean;\r\n\r\n private infoButton?: HTMLDsoInfoButtonElement;\r\n\r\n private click = () => {\r\n this.active ? this.close() : this.open();\r\n };\r\n\r\n private open = () => {\r\n this.active = true;\r\n this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n this.host.addEventListener(\"focusout\", this.focusOutListener);\r\n };\r\n\r\n private close = () => {\r\n this.host.removeEventListener(\"focusout\", this.focusOutListener);\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.active = false;\r\n };\r\n\r\n private focusOutListener = (event: FocusEvent) => {\r\n if (!this.host.contains(event.relatedTarget as Node)) {\r\n this.close();\r\n }\r\n };\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (!event.defaultPrevented && event.key === \"Escape\") {\r\n this.close();\r\n this.infoButton?.setFocus();\r\n event.preventDefault();\r\n }\r\n\r\n return;\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n <dso-info-button\r\n aria-describedby=\"toggle\"\r\n onClick={this.click}\r\n label={this.label}\r\n active={this.active}\r\n secondary={this.secondary}\r\n ref={(element) => (this.infoButton = element)}\r\n />\r\n <dso-tooltip\r\n stateless\r\n descriptive\r\n id=\"toggle\"\r\n strategy=\"absolute\"\r\n active={this.active}\r\n position={this.position}\r\n small={this.small}\r\n >\r\n <slot />\r\n </dso-tooltip>\r\n </>\r\n );\r\n }\r\n}\r\n"],"mappings":"yDAAA,MAAMA,EAAe,oG,MCORC,EAAS,M,yBAiCZC,KAAAC,MAAQ,KACdD,KAAKE,OAASF,KAAKG,QAAUH,KAAKI,MAAM,EAGlCJ,KAAAI,KAAO,KACbJ,KAAKE,OAAS,KACdF,KAAKK,KAAKC,iBAAiB,UAAWN,KAAKO,iBAC3CP,KAAKK,KAAKC,iBAAiB,WAAYN,KAAKQ,iBAAiB,EAGvDR,KAAAG,MAAQ,KACdH,KAAKK,KAAKI,oBAAoB,WAAYT,KAAKQ,kBAC/CR,KAAKK,KAAKI,oBAAoB,UAAWT,KAAKO,iBAC9CP,KAAKE,OAAS,KAAK,EAGbF,KAAAQ,iBAAoBE,IAC1B,IAAKV,KAAKK,KAAKM,SAASD,EAAME,eAAwB,CACpDZ,KAAKG,O,GAIDH,KAAAO,gBAAmBG,I,MACzB,IAAKA,EAAMG,kBAAoBH,EAAMI,MAAQ,SAAU,CACrDd,KAAKG,SACLY,EAAAf,KAAKgB,cAAU,MAAAD,SAAA,SAAAA,EAAEE,WACjBP,EAAMQ,gB,CAGR,Q,YAzDO,M,WAMD,c,cAMwC,Q,8CAgDhD,MAAAC,GACE,OACEC,EAAAC,EAAA,KACED,EAAA,sCACmB,SACjBE,QAAStB,KAAKC,MACdsB,MAAOvB,KAAKuB,MACZrB,OAAQF,KAAKE,OACbsB,UAAWxB,KAAKwB,UAChBC,IAAMC,GAAa1B,KAAKgB,WAAaU,IAEvCN,EAAA,eACEO,UAAS,KACTC,YAAW,KACXC,GAAG,SACHC,SAAS,WACT5B,OAAQF,KAAKE,OACb6B,SAAU/B,KAAK+B,SACfC,MAAOhC,KAAKgC,OAEZZ,EAAA,c"}