@dso-toolkit/core 59.0.0 → 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.
- package/dist/cjs/dso-date-picker.cjs.entry.js +49 -568
- package/dist/cjs/dso-date-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-dropdown-menu.cjs.entry.js +4 -2
- package/dist/cjs/dso-dropdown-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-expandable.cjs.entry.js +1 -1
- package/dist/cjs/dso-expandable.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-header.cjs.entry.js +1 -1
- package/dist/cjs/dso-header.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-info_2.cjs.entry.js +15 -2
- package/dist/cjs/dso-info_2.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-toggletip.cjs.entry.js +1 -1
- package/dist/cjs/dso-toggletip.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-toolkit.cjs.js +1 -1
- package/dist/cjs/dso-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/dso-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-viewer-grid.cjs.entry.js +177 -65
- package/dist/cjs/dso-viewer-grid.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/date-picker/date-picker.css +4 -425
- package/dist/collection/components/date-picker/date-picker.interfaces.js.map +1 -1
- package/dist/collection/components/date-picker/date-picker.js +50 -510
- package/dist/collection/components/date-picker/date-picker.js.map +1 -1
- package/dist/collection/components/date-picker/date-utils.js +24 -100
- package/dist/collection/components/date-picker/date-utils.js.map +1 -1
- package/dist/collection/components/dropdown-menu/dropdown-menu.js +29 -2
- package/dist/collection/components/dropdown-menu/dropdown-menu.js.map +1 -1
- package/dist/collection/components/expandable/expandable.css +1 -0
- package/dist/collection/components/header/header.js +1 -1
- package/dist/collection/components/header/header.js.map +1 -1
- package/dist/collection/components/toggletip/toggletip.css +1 -0
- package/dist/collection/components/tooltip/tooltip.css +35 -26
- package/dist/collection/components/viewer-grid/components/document-panel.js +8 -0
- package/dist/collection/components/viewer-grid/components/document-panel.js.map +1 -0
- package/dist/collection/components/viewer-grid/components/index.js +1 -0
- package/dist/collection/components/viewer-grid/components/index.js.map +1 -1
- package/dist/collection/components/viewer-grid/components/main-panel.js +12 -8
- package/dist/collection/components/viewer-grid/components/main-panel.js.map +1 -1
- package/dist/collection/components/viewer-grid/viewer-grid.css +237 -48
- package/dist/collection/components/viewer-grid/viewer-grid.interfaces.js +13 -1
- package/dist/collection/components/viewer-grid/viewer-grid.interfaces.js.map +1 -1
- package/dist/collection/components/viewer-grid/viewer-grid.js +402 -59
- package/dist/collection/components/viewer-grid/viewer-grid.js.map +1 -1
- package/dist/components/dropdown-menu.js +5 -2
- package/dist/components/dropdown-menu.js.map +1 -1
- package/dist/components/dso-date-picker.js +55 -589
- package/dist/components/dso-date-picker.js.map +1 -1
- package/dist/components/dso-header.js +1 -1
- package/dist/components/dso-header.js.map +1 -1
- package/dist/components/dso-toggletip.js +1 -1
- package/dist/components/dso-toggletip.js.map +1 -1
- package/dist/components/dso-viewer-grid.js +186 -69
- package/dist/components/dso-viewer-grid.js.map +1 -1
- package/dist/components/expandable.js +1 -1
- package/dist/components/expandable.js.map +1 -1
- package/dist/components/selectable.js +14 -1
- package/dist/components/selectable.js.map +1 -1
- package/dist/components/tooltip.js +1 -1
- package/dist/components/tooltip.js.map +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js.map +1 -1
- package/dist/dso-toolkit/p-0c14a2e5.entry.js +2 -0
- package/dist/dso-toolkit/p-0c14a2e5.entry.js.map +1 -0
- package/dist/dso-toolkit/p-4e2407bf.entry.js +2 -0
- package/dist/dso-toolkit/p-4e2407bf.entry.js.map +1 -0
- package/dist/dso-toolkit/{p-dc6e37dd.entry.js → p-51cfeed4.entry.js} +2 -2
- package/dist/dso-toolkit/p-51cfeed4.entry.js.map +1 -0
- package/dist/dso-toolkit/{p-298453a9.entry.js → p-7d90b3b2.entry.js} +2 -2
- package/dist/dso-toolkit/{p-298453a9.entry.js.map → p-7d90b3b2.entry.js.map} +1 -1
- package/dist/dso-toolkit/p-8b24f933.entry.js +2 -0
- package/dist/dso-toolkit/p-8b24f933.entry.js.map +1 -0
- package/dist/dso-toolkit/p-dbea5bbd.entry.js +2 -0
- package/dist/dso-toolkit/p-dbea5bbd.entry.js.map +1 -0
- package/dist/dso-toolkit/p-ebda3d53.entry.js +2 -0
- package/dist/dso-toolkit/p-ebda3d53.entry.js.map +1 -0
- package/dist/dso-toolkit/p-f55b3647.entry.js +2 -0
- package/dist/dso-toolkit/{p-3631ce14.entry.js.map → p-f55b3647.entry.js.map} +1 -1
- package/dist/esm/dso-date-picker.entry.js +50 -569
- package/dist/esm/dso-date-picker.entry.js.map +1 -1
- package/dist/esm/dso-dropdown-menu.entry.js +4 -2
- package/dist/esm/dso-dropdown-menu.entry.js.map +1 -1
- package/dist/esm/dso-expandable.entry.js +1 -1
- package/dist/esm/dso-expandable.entry.js.map +1 -1
- package/dist/esm/dso-header.entry.js +1 -1
- package/dist/esm/dso-header.entry.js.map +1 -1
- package/dist/esm/dso-info_2.entry.js +14 -1
- package/dist/esm/dso-info_2.entry.js.map +1 -1
- package/dist/esm/dso-toggletip.entry.js +1 -1
- package/dist/esm/dso-toggletip.entry.js.map +1 -1
- package/dist/esm/dso-toolkit.js +1 -1
- package/dist/esm/dso-tooltip.entry.js +1 -1
- package/dist/esm/dso-tooltip.entry.js.map +1 -1
- package/dist/esm/dso-viewer-grid.entry.js +178 -66
- package/dist/esm/dso-viewer-grid.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/date-picker/date-picker.d.ts +8 -99
- package/dist/types/components/date-picker/date-picker.interfaces.d.ts +9 -8
- package/dist/types/components/date-picker/date-utils.d.ts +6 -34
- package/dist/types/components/dropdown-menu/dropdown-menu.d.ts +7 -0
- package/dist/types/components/viewer-grid/components/document-panel.d.ts +10 -0
- package/dist/types/components/viewer-grid/components/index.d.ts +1 -0
- package/dist/types/components/viewer-grid/components/main-panel.d.ts +10 -4
- package/dist/types/components/viewer-grid/viewer-grid.d.ts +82 -17
- package/dist/types/components/viewer-grid/viewer-grid.interfaces.d.ts +27 -13
- package/dist/types/components.d.ts +97 -42
- package/package.json +2 -2
- package/dist/cjs/create-identifier-5900c27b.js +0 -19
- package/dist/cjs/create-identifier-5900c27b.js.map +0 -1
- package/dist/collection/components/date-picker/date-localization.js +0 -30
- package/dist/collection/components/date-picker/date-localization.js.map +0 -1
- package/dist/collection/components/date-picker/date-picker-day.js +0 -20
- package/dist/collection/components/date-picker/date-picker-day.js.map +0 -1
- package/dist/collection/components/date-picker/date-picker-month.js +0 -26
- package/dist/collection/components/date-picker/date-picker-month.js.map +0 -1
- package/dist/collection/components/date-picker/utils/month-range.js +0 -28
- package/dist/collection/components/date-picker/utils/month-range.js.map +0 -1
- package/dist/collection/components/date-picker/utils/range.js +0 -8
- package/dist/collection/components/date-picker/utils/range.js.map +0 -1
- package/dist/components/create-identifier.js +0 -17
- package/dist/components/create-identifier.js.map +0 -1
- package/dist/dso-toolkit/p-3631ce14.entry.js +0 -2
- package/dist/dso-toolkit/p-41066f6f.entry.js +0 -2
- package/dist/dso-toolkit/p-41066f6f.entry.js.map +0 -1
- package/dist/dso-toolkit/p-95b70498.entry.js +0 -2
- package/dist/dso-toolkit/p-95b70498.entry.js.map +0 -1
- package/dist/dso-toolkit/p-9dbe2931.entry.js +0 -2
- package/dist/dso-toolkit/p-9dbe2931.entry.js.map +0 -1
- package/dist/dso-toolkit/p-ad44136d.entry.js +0 -2
- package/dist/dso-toolkit/p-ad44136d.entry.js.map +0 -1
- package/dist/dso-toolkit/p-c19cfe3f.js +0 -2
- package/dist/dso-toolkit/p-c19cfe3f.js.map +0 -1
- package/dist/dso-toolkit/p-dc6e37dd.entry.js.map +0 -1
- package/dist/dso-toolkit/p-f08a5a06.entry.js +0 -2
- package/dist/dso-toolkit/p-f08a5a06.entry.js.map +0 -1
- package/dist/esm/create-identifier-479a4699.js +0 -17
- package/dist/esm/create-identifier-479a4699.js.map +0 -1
- package/dist/types/components/date-picker/date-localization.d.ts +0 -19
- package/dist/types/components/date-picker/date-picker-day.d.ts +0 -11
- package/dist/types/components/date-picker/date-picker-month.d.ts +0 -20
- package/dist/types/components/date-picker/utils/month-range.d.ts +0 -2
- package/dist/types/components/date-picker/utils/range.d.ts +0 -1
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
export interface ViewerGridChangeSizeEvent {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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
|
|
19
|
-
|
|
20
|
-
|
|
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
|
|
23
|
-
export type
|
|
24
|
-
export
|
|
25
|
-
|
|
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,8 +12,9 @@ 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 {
|
|
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
|
+
import { Placement } from "@popperjs/core";
|
|
17
18
|
import { ExpandableAnimationEndEvent } from "./components/expandable/expandable";
|
|
18
19
|
import { HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
|
|
19
20
|
import { InfoButtonToggleEvent } from "./components/info-button/info-button.interfaces";
|
|
@@ -29,7 +30,7 @@ import { DsoScrollEndEvent } from "./components/scrollable/scrollable.interfaces
|
|
|
29
30
|
import { SelectableChangeEvent } from "./components/selectable/selectable.interfaces";
|
|
30
31
|
import { SlideToggleActiveEvent } from "./components/slide-toggle/slide-toggle.interfaces";
|
|
31
32
|
import { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
|
|
32
|
-
import {
|
|
33
|
+
import { ViewerGridActiveTabSwitchEvent, ViewerGridChangeSizeAnimationEndEvent, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent, ViewerGridMainExpandEvent, ViewerGridMainToggleEvent, ViewerGridMode, ViewerGridPanelSize, ViewerGridVdkTab, ViewerGridVrkTab } from "./components/viewer-grid/viewer-grid.interfaces";
|
|
33
34
|
export { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
|
|
34
35
|
export { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
|
|
35
36
|
export { AnnotationButtonClickEvent } from "./components/annotation-button/annotation-button";
|
|
@@ -37,8 +38,9 @@ export { AnnotationOutputCloseEvent } from "./components/annotation-output/annot
|
|
|
37
38
|
export { Suggestion } from "./components/autosuggest/autosuggest.interfaces";
|
|
38
39
|
export { DsoCardClickedEvent, ImageShape } from "./components/card/card.interfaces";
|
|
39
40
|
export { CardContainerMode } from "./components/card-container/card-container.interfaces";
|
|
40
|
-
export {
|
|
41
|
+
export { DatePickerChangeEvent, DatePickerFocusEvent, DatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
|
|
41
42
|
export { DocumentComponentOpenToggleEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentWijzigactie } from "./components/document-component/document-component.models";
|
|
43
|
+
export { Placement } from "@popperjs/core";
|
|
42
44
|
export { ExpandableAnimationEndEvent } from "./components/expandable/expandable";
|
|
43
45
|
export { HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
|
|
44
46
|
export { InfoButtonToggleEvent } from "./components/info-button/info-button.interfaces";
|
|
@@ -54,7 +56,7 @@ export { DsoScrollEndEvent } from "./components/scrollable/scrollable.interfaces
|
|
|
54
56
|
export { SelectableChangeEvent } from "./components/selectable/selectable.interfaces";
|
|
55
57
|
export { SlideToggleActiveEvent } from "./components/slide-toggle/slide-toggle.interfaces";
|
|
56
58
|
export { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
|
|
57
|
-
export {
|
|
59
|
+
export { ViewerGridActiveTabSwitchEvent, ViewerGridChangeSizeAnimationEndEvent, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent, ViewerGridMainExpandEvent, ViewerGridMainToggleEvent, ViewerGridMode, ViewerGridPanelSize, ViewerGridVdkTab, ViewerGridVrkTab } from "./components/viewer-grid/viewer-grid.interfaces";
|
|
58
60
|
export namespace Components {
|
|
59
61
|
interface DsoAccordion {
|
|
60
62
|
"_getState": () => Promise<AccordionInternalState>;
|
|
@@ -244,10 +246,6 @@ export namespace Components {
|
|
|
244
246
|
* ID of element that describes the input element
|
|
245
247
|
*/
|
|
246
248
|
"describedBy"?: string;
|
|
247
|
-
/**
|
|
248
|
-
* 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.
|
|
249
|
-
*/
|
|
250
|
-
"direction": DsoDatePickerDirection;
|
|
251
249
|
/**
|
|
252
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.
|
|
253
251
|
*/
|
|
@@ -256,10 +254,6 @@ export namespace Components {
|
|
|
256
254
|
* Should the input be focused on load?
|
|
257
255
|
*/
|
|
258
256
|
"dsoAutofocus": boolean;
|
|
259
|
-
/**
|
|
260
|
-
* Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus returning to the date picker's button. Default is true.
|
|
261
|
-
*/
|
|
262
|
-
"hide": (moveFocusToButton?: boolean) => Promise<void>;
|
|
263
257
|
/**
|
|
264
258
|
* Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.
|
|
265
259
|
*/
|
|
@@ -284,18 +278,6 @@ export namespace Components {
|
|
|
284
278
|
* Should the input be marked as required?
|
|
285
279
|
*/
|
|
286
280
|
"required": boolean;
|
|
287
|
-
/**
|
|
288
|
-
* Defines a specific role attribute for the date picker input.
|
|
289
|
-
*/
|
|
290
|
-
"role": string | null;
|
|
291
|
-
/**
|
|
292
|
-
* Sets focus on the date picker's input. Use this method instead of the global `focus()`.
|
|
293
|
-
*/
|
|
294
|
-
"setFocus": () => Promise<void | undefined>;
|
|
295
|
-
/**
|
|
296
|
-
* Show the calendar modal, moving focus to the calendar inside.
|
|
297
|
-
*/
|
|
298
|
-
"show": () => Promise<void>;
|
|
299
281
|
/**
|
|
300
282
|
* Date value. Must be in Dutch date format: DD-MM-YYYY.
|
|
301
283
|
*/
|
|
@@ -392,6 +374,10 @@ export namespace Components {
|
|
|
392
374
|
* Whether the menu is open or closed. This attribute is reflected and mutable.
|
|
393
375
|
*/
|
|
394
376
|
"open": boolean;
|
|
377
|
+
/**
|
|
378
|
+
* Force placement of dropdown. This property overrides `dropdownAlign`.
|
|
379
|
+
*/
|
|
380
|
+
"placement"?: Placement;
|
|
395
381
|
/**
|
|
396
382
|
* Set position strategy of dropdown options
|
|
397
383
|
*/
|
|
@@ -840,14 +826,39 @@ export namespace Components {
|
|
|
840
826
|
"focusItem": (path: TreeViewItem[]) => Promise<boolean>;
|
|
841
827
|
}
|
|
842
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;
|
|
843
842
|
/**
|
|
844
843
|
* Set to true when filterpanel should show.
|
|
845
844
|
*/
|
|
846
845
|
"filterpanelOpen": boolean;
|
|
847
846
|
/**
|
|
848
|
-
*
|
|
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`.
|
|
856
|
+
*/
|
|
857
|
+
"mainSize": ViewerGridPanelSize;
|
|
858
|
+
/**
|
|
859
|
+
* VRK or VDK implementation.
|
|
849
860
|
*/
|
|
850
|
-
"
|
|
861
|
+
"mode": ViewerGridMode;
|
|
851
862
|
/**
|
|
852
863
|
* Set to true when overlay should show.
|
|
853
864
|
*/
|
|
@@ -1504,10 +1515,6 @@ declare namespace LocalJSX {
|
|
|
1504
1515
|
* ID of element that describes the input element
|
|
1505
1516
|
*/
|
|
1506
1517
|
"describedBy"?: string;
|
|
1507
|
-
/**
|
|
1508
|
-
* 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.
|
|
1509
|
-
*/
|
|
1510
|
-
"direction"?: DsoDatePickerDirection;
|
|
1511
1518
|
/**
|
|
1512
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.
|
|
1513
1520
|
*/
|
|
@@ -1539,31 +1546,27 @@ declare namespace LocalJSX {
|
|
|
1539
1546
|
/**
|
|
1540
1547
|
* Event emitted the date picker input is blurred.
|
|
1541
1548
|
*/
|
|
1542
|
-
"onDsoBlur"?: (event: DsoDatePickerCustomEvent<
|
|
1549
|
+
"onDsoBlur"?: (event: DsoDatePickerCustomEvent<DatePickerFocusEvent>) => void;
|
|
1543
1550
|
/**
|
|
1544
1551
|
* Event emitted when a date is selected.
|
|
1545
1552
|
*/
|
|
1546
|
-
"onDsoDateChange"?: (event: DsoDatePickerCustomEvent<
|
|
1553
|
+
"onDsoDateChange"?: (event: DsoDatePickerCustomEvent<DatePickerChangeEvent>) => void;
|
|
1547
1554
|
/**
|
|
1548
1555
|
* Event emitted the date picker input is focused.
|
|
1549
1556
|
*/
|
|
1550
|
-
"onDsoFocus"?: (event: DsoDatePickerCustomEvent<
|
|
1557
|
+
"onDsoFocus"?: (event: DsoDatePickerCustomEvent<DatePickerFocusEvent>) => void;
|
|
1551
1558
|
/**
|
|
1552
1559
|
* Event emitted on key down in the date picker input.
|
|
1553
1560
|
*/
|
|
1554
|
-
"onDsoKeyDown"?: (event: DsoDatePickerCustomEvent<
|
|
1561
|
+
"onDsoKeyDown"?: (event: DsoDatePickerCustomEvent<DatePickerKeyboardEvent>) => void;
|
|
1555
1562
|
/**
|
|
1556
1563
|
* Event emitted on key up in the date picker input.
|
|
1557
1564
|
*/
|
|
1558
|
-
"onDsoKeyUp"?: (event: DsoDatePickerCustomEvent<
|
|
1565
|
+
"onDsoKeyUp"?: (event: DsoDatePickerCustomEvent<DatePickerKeyboardEvent>) => void;
|
|
1559
1566
|
/**
|
|
1560
1567
|
* Should the input be marked as required?
|
|
1561
1568
|
*/
|
|
1562
1569
|
"required"?: boolean;
|
|
1563
|
-
/**
|
|
1564
|
-
* Defines a specific role attribute for the date picker input.
|
|
1565
|
-
*/
|
|
1566
|
-
"role"?: string | null;
|
|
1567
1570
|
/**
|
|
1568
1571
|
* Date value. Must be in Dutch date format: DD-MM-YYYY.
|
|
1569
1572
|
*/
|
|
@@ -1672,6 +1675,10 @@ declare namespace LocalJSX {
|
|
|
1672
1675
|
* Whether the menu is open or closed. This attribute is reflected and mutable.
|
|
1673
1676
|
*/
|
|
1674
1677
|
"open"?: boolean;
|
|
1678
|
+
/**
|
|
1679
|
+
* Force placement of dropdown. This property overrides `dropdownAlign`.
|
|
1680
|
+
*/
|
|
1681
|
+
"placement"?: Placement;
|
|
1675
1682
|
/**
|
|
1676
1683
|
* Set position strategy of dropdown options
|
|
1677
1684
|
*/
|
|
@@ -2174,18 +2181,54 @@ declare namespace LocalJSX {
|
|
|
2174
2181
|
"onDsoOpenItem"?: (event: DsoTreeViewCustomEvent<TreeViewItem[]>) => void;
|
|
2175
2182
|
}
|
|
2176
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;
|
|
2177
2196
|
/**
|
|
2178
2197
|
* Set to true when filterpanel should show.
|
|
2179
2198
|
*/
|
|
2180
2199
|
"filterpanelOpen"?: boolean;
|
|
2181
2200
|
/**
|
|
2182
|
-
*
|
|
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.
|
|
2214
|
+
*/
|
|
2215
|
+
"mode"?: ViewerGridMode;
|
|
2216
|
+
/**
|
|
2217
|
+
* Emitted when user applies filterpanel options.
|
|
2183
2218
|
*/
|
|
2184
|
-
"
|
|
2219
|
+
"onDsoActiveTabSwitch"?: (event: DsoViewerGridCustomEvent<ViewerGridActiveTabSwitchEvent>) => void;
|
|
2185
2220
|
/**
|
|
2186
2221
|
* Emitted when user wants to close the overlay.
|
|
2187
2222
|
*/
|
|
2188
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;
|
|
2189
2232
|
/**
|
|
2190
2233
|
* Emitted when user applies filterpanel options.
|
|
2191
2234
|
*/
|
|
@@ -2195,9 +2238,21 @@ declare namespace LocalJSX {
|
|
|
2195
2238
|
*/
|
|
2196
2239
|
"onDsoFilterpanelCancel"?: (event: DsoViewerGridCustomEvent<ViewerGridFilterpanelCancelEvent>) => void;
|
|
2197
2240
|
/**
|
|
2198
|
-
*
|
|
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.
|
|
2199
2250
|
*/
|
|
2200
2251
|
"onDsoMainSizeChange"?: (event: DsoViewerGridCustomEvent<ViewerGridChangeSizeEvent>) => void;
|
|
2252
|
+
/**
|
|
2253
|
+
* Emitted after main size animation.
|
|
2254
|
+
*/
|
|
2255
|
+
"onDsoMainSizeChangeAnimationEnd"?: (event: DsoViewerGridCustomEvent<ViewerGridChangeSizeAnimationEndEvent>) => void;
|
|
2201
2256
|
/**
|
|
2202
2257
|
* Set to true when overlay should show.
|
|
2203
2258
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dso-toolkit/core",
|
|
3
|
-
"version": "
|
|
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": "^
|
|
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 +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,H as i,a as e}from"./p-3ca5b6f4.js";import{t as o}from"./p-86133aa5.js";import{h as n,c as r}from"./p-fd7891ef.js";import{v as h}from"./p-5d7f4ff2.js";const a=":host(:focus){outline:none}:host{display:inline-block}";const f=class{constructor(s){t(this,s);this.focusOutListener=t=>{if(!this.tabbables.includes(t.relatedTarget)){this.open=false}};this.keyDownListener=t=>{if(t.defaultPrevented){return}switch(t.key){case"ArrowDown":this.tabInPopup(1);break;case"ArrowUp":this.tabInPopup(-1);break;case"Escape":this.escape();break;case" ":if(t.target instanceof HTMLElement){t.target.click()}break;default:return}t.preventDefault()};this.escape=()=>{this.button.focus();this.open=false};this.open=false;this.dropdownAlign="left";this.dropdownOptionsOffset=2;this.checkable=false;this.boundary=undefined;this.strategy="auto"}watchPosition(){if(!this.popper){return}this.popper.setOptions({placement:this.dropdownAlign==="right"?"bottom-end":"bottom-start"})}watchOptionsOffset(){var t;(t=this.popper)===null||t===void 0?void 0:t.setOptions({modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}}]})}watchStrategy(){this.setStrategy()}setStrategy(){if(!this.popper){return}if(this.strategy==="absolute"||this.strategy==="fixed"){this.popper.setOptions({strategy:this.strategy});return}let t=this.host;const s=this.boundary||document;while(t&&t.parentNode!==s){t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentElement;if(t!==null&&n(t)){this.popper.setOptions({strategy:"fixed"});return}}this.popper.setOptions({strategy:"absolute"})}get button(){const t=this.host.querySelector('button[slot="toggle"]');if(!(t instanceof HTMLButtonElement)){throw new ReferenceError("Mandatory toggle button not found")}return t}get tabbables(){return o(this.host).filter((t=>t!==this.button))}componentDidLoad(){this.button.setAttribute("aria-haspopup","menu");this.button.setAttribute("aria-expanded","false");if(!this.button.id){this.button.id=h()}this.button.addEventListener("click",(()=>{this.open=!this.open}));const t=this.host.querySelector(".dso-dropdown-options");if(!t){throw new ReferenceError("Dropdown options not found")}t.setAttribute("role","menu");t.setAttribute("aria-labelledby",this.button.id);for(const t of Array.from(this.host.getElementsByTagName("ul"))){t.setAttribute("role","group");for(const s of Array.from(t.getElementsByTagName("li"))){s.setAttribute("role","none")}}if(this.popper){return}const s=this.host.querySelector(".dso-dropdown-options");if(!(s instanceof HTMLElement)){throw new Error("dropdown options element is not instanceof HTMLElement")}this.popper=r(this.button,s,{placement:this.dropdownAlign==="right"?"bottom-end":"bottom-start",modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}},{name:"preventOverflow",options:{boundary:this.boundary?document.querySelector(this.boundary):null},enabled:this.boundary!==undefined}]})}componentDidRender(){var t;this.setStrategy();if(this.open){(t=this.popper)===null||t===void 0?void 0:t.update()}for(const t of Array.from(this.host.getElementsByTagName("li"))){for(const s of o(t)){s.setAttribute("role",this.checkable?"menuitemradio":"menuitem");if(this.checkable){s.setAttribute("aria-checked",t.classList.contains("dso-checked").toString())}}}this.host.removeEventListener("keydown",this.keyDownListener);this.button.setAttribute("aria-expanded",this.open?"true":"false");if(this.open){this.host.addEventListener("keydown",this.keyDownListener)}this.tabbables.forEach((t=>{t.removeEventListener("click",this.escape);if(this.open){t.addEventListener("click",this.escape)}}))}disconnectedCallback(){var t;(t=this.popper)===null||t===void 0?void 0:t.destroy()}getActiveElement(t=document){const s=t.activeElement;if(!s){return null}if(s.shadowRoot){return this.getActiveElement(s.shadowRoot)}return s}tabInPopup(t){var s;const i=this.tabbables;const e=i.findIndex((t=>t===this.getActiveElement()));let o=e+t;if(o>=i.length){o=0}else if(o<0){o=i.length-1}(s=i[o])===null||s===void 0?void 0:s.focus()}render(){return s(i,{onFocusout:this.focusOutListener,tabindex:this.open?"-1":undefined},s("slot",{name:"toggle"}),s("div",{hidden:!this.open},s("slot",null)))}get host(){return e(this)}static get watchers(){return{dropdownAlign:["watchPosition"],dropdownOptionsOffset:["watchOptionsOffset"],strategy:["watchStrategy"]}}};f.style=a;export{f as dso_dropdown_menu};
|
|
2
|
-
//# sourceMappingURL=p-41066f6f.entry.js.map
|