@dso-toolkit/core 62.9.0 → 62.10.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 +45 -22
- package/dist/cjs/dso-date-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-list-button.cjs.entry.js +23 -9
- package/dist/cjs/dso-list-button.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-modal.cjs.entry.js +3 -1
- package/dist/cjs/dso-modal.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-toolkit.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/date-picker/date-picker.interfaces.js.map +1 -1
- package/dist/collection/components/date-picker/date-picker.js +49 -26
- package/dist/collection/components/date-picker/date-picker.js.map +1 -1
- package/dist/collection/components/list-button/list-button.js +41 -10
- package/dist/collection/components/list-button/list-button.js.map +1 -1
- package/dist/collection/components/modal/modal.js +3 -1
- package/dist/collection/components/modal/modal.js.map +1 -1
- package/dist/components/dso-date-picker.js +45 -22
- package/dist/components/dso-date-picker.js.map +1 -1
- package/dist/components/dso-list-button.js +25 -10
- package/dist/components/dso-list-button.js.map +1 -1
- package/dist/components/dso-modal.js +3 -1
- package/dist/components/dso-modal.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-638ad5e5.entry.js +2 -0
- package/dist/dso-toolkit/p-638ad5e5.entry.js.map +1 -0
- package/dist/dso-toolkit/{p-5f39d08c.entry.js → p-b36ab83a.entry.js} +2 -2
- package/dist/dso-toolkit/p-b36ab83a.entry.js.map +1 -0
- package/dist/dso-toolkit/p-f6d1d215.entry.js +2 -0
- package/dist/dso-toolkit/p-f6d1d215.entry.js.map +1 -0
- package/dist/esm/dso-date-picker.entry.js +45 -22
- package/dist/esm/dso-date-picker.entry.js.map +1 -1
- package/dist/esm/dso-list-button.entry.js +24 -10
- package/dist/esm/dso-list-button.entry.js.map +1 -1
- package/dist/esm/dso-modal.entry.js +3 -1
- package/dist/esm/dso-modal.entry.js.map +1 -1
- package/dist/esm/dso-toolkit.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/date-picker/date-picker.d.ts +4 -2
- package/dist/types/components/date-picker/date-picker.interfaces.d.ts +5 -1
- package/dist/types/components/list-button/list-button.d.ts +8 -0
- package/dist/types/components.d.ts +12 -4
- package/package.json +2 -2
- package/dist/dso-toolkit/p-5f39d08c.entry.js.map +0 -1
- package/dist/dso-toolkit/p-7b36db3a.entry.js +0 -2
- package/dist/dso-toolkit/p-7b36db3a.entry.js.map +0 -1
- package/dist/dso-toolkit/p-e2f7399e.entry.js +0 -2
- package/dist/dso-toolkit/p-e2f7399e.entry.js.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
1
|
+
import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { c as createFocusTrap } from './focus-trap.esm.js';
|
|
3
3
|
import { c as clsx } from './clsx.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './icon.js';
|
|
@@ -21,15 +21,28 @@ const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends HTM
|
|
|
21
21
|
this.max = undefined;
|
|
22
22
|
this.checked = false;
|
|
23
23
|
this.disabled = false;
|
|
24
|
+
this.subcontentPrefix = undefined;
|
|
24
25
|
this.manual = true;
|
|
25
26
|
}
|
|
27
|
+
get subcontentSlot() {
|
|
28
|
+
return this.host.querySelector("[slot='subcontent']");
|
|
29
|
+
}
|
|
26
30
|
watchManualCallback() {
|
|
27
31
|
if (!this.manual && this.manualCount) {
|
|
28
32
|
this.stopManualCountInput();
|
|
29
33
|
}
|
|
30
34
|
}
|
|
35
|
+
connectedCallback() {
|
|
36
|
+
this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
|
|
37
|
+
this.mutationObserver.observe(this.host, {
|
|
38
|
+
characterData: true,
|
|
39
|
+
childList: true,
|
|
40
|
+
subtree: true,
|
|
41
|
+
attributes: true,
|
|
42
|
+
});
|
|
43
|
+
}
|
|
31
44
|
componentDidRender() {
|
|
32
|
-
var _a;
|
|
45
|
+
var _a, _b;
|
|
33
46
|
if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {
|
|
34
47
|
this.trap = createFocusTrap(this.manualInputWrapperElement, {
|
|
35
48
|
escapeDeactivates: true,
|
|
@@ -46,10 +59,13 @@ const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends HTM
|
|
|
46
59
|
(_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
|
|
47
60
|
delete this.trap;
|
|
48
61
|
}
|
|
62
|
+
(_b = this.subcontentSlot) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-hidden", "true");
|
|
49
63
|
}
|
|
50
64
|
disconnectedCallback() {
|
|
51
|
-
var _a;
|
|
65
|
+
var _a, _b;
|
|
52
66
|
(_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
|
|
67
|
+
(_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
|
|
68
|
+
delete this.mutationObserver;
|
|
53
69
|
}
|
|
54
70
|
handleOnChange({ target }) {
|
|
55
71
|
if (target instanceof HTMLInputElement) {
|
|
@@ -59,7 +75,7 @@ const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends HTM
|
|
|
59
75
|
stepValue(e, direction) {
|
|
60
76
|
if (typeof this.count === "number") {
|
|
61
77
|
const newValue = direction === "increment" ? this.count + 1 : this.count - 1;
|
|
62
|
-
if (this.isNewCountValid(newValue)
|
|
78
|
+
if (!this.isNewCountValid(newValue)) {
|
|
63
79
|
return;
|
|
64
80
|
}
|
|
65
81
|
this.dsoCountChange.emit({
|
|
@@ -99,18 +115,16 @@ const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends HTM
|
|
|
99
115
|
this.manualCount = undefined;
|
|
100
116
|
}
|
|
101
117
|
isNewCountValid(newValue) {
|
|
102
|
-
|
|
118
|
+
return !(this.min !== undefined &&
|
|
103
119
|
this.max !== undefined &&
|
|
104
|
-
(newValue < Number(this.min) || newValue > Number(this.max)))
|
|
105
|
-
return false;
|
|
106
|
-
}
|
|
107
|
-
return true;
|
|
120
|
+
(newValue < Number(this.min) || newValue > Number(this.max)));
|
|
108
121
|
}
|
|
109
122
|
render() {
|
|
110
123
|
const showButtonInputs = this.manualCount === undefined;
|
|
111
124
|
const selected = this.checked || (this.count !== undefined && this.count > 0);
|
|
112
|
-
return (h("div", { class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { class: "dso-selectable" }, h("input", { id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam",
|
|
125
|
+
return (h("div", { class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { class: "dso-selectable" }, h("input", { id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), h("label", { htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (h("div", { class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", h("div", { innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (h("span", { class: "dso-sublabel", id: "sublabel" }, this.sublabel)), h("slot", { name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (h("button", { type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { icon: "minus-circle" }), h("span", { class: "sr-only" }, "Aantal verlagen"))), h("div", { class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (h("input", { class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), h("form", { onSubmit: (e) => this.setCount(e) }, h("div", { ref: (element) => (this.manualInputWrapperElement = element) }, h("input", { class: clsx("form-control", { hidden: showButtonInputs }), type: "number", "aria-label": "Aantal", value: this.manualCount, min: this.min, max: this.max, onInput: (e) => this.handleOnChange(e) })), this.manual && (h("button", { class: clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (h("span", { class: "sr-only" }, "Zet waarde")))))), showButtonInputs && (h("button", { type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { icon: "plus-circle" }), h("span", { class: "sr-only" }, "Aantal verhogen")))))));
|
|
113
126
|
}
|
|
127
|
+
get host() { return this; }
|
|
114
128
|
static get watchers() { return {
|
|
115
129
|
"manual": ["watchManualCallback"]
|
|
116
130
|
}; }
|
|
@@ -123,6 +137,7 @@ const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends HTM
|
|
|
123
137
|
"max": [8],
|
|
124
138
|
"checked": [516],
|
|
125
139
|
"disabled": [516],
|
|
140
|
+
"subcontentPrefix": [1, "subcontent-prefix"],
|
|
126
141
|
"manual": [4],
|
|
127
142
|
"manualInputWrapperElement": [32],
|
|
128
143
|
"manualCount": [32]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dso-list-button.js","mappings":"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","names":[],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/input-number\";\r\n@use \"~dso-toolkit/src/components/list-button\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-manual-input-button {\r\n cursor: text;\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n @include input-number.root();\r\n}\r\n\r\n.dso-button-group {\r\n @include list-button.button-group(\".dso-input-number\", \".dso-list-button\");\r\n}\r\n\r\n.dso-selectable {\r\n @include selectable.root(\"dso-info\");\r\n\r\n label {\r\n font-weight: 700;\r\n }\r\n}\r\n\r\n.dso-list-button {\r\n @include button.base($modifiers: false);\r\n @include list-button.root();\r\n\r\n .dso-sublabel {\r\n padding-left: selectable.$size + units.$u1;\r\n }\r\n}\r\n\r\n.dso-list-button,\r\n.dso-button-group {\r\n + .dso-list-button,\r\n + .dso-button-group {\r\n @include list-button.sibling();\r\n }\r\n}\r\n\r\n.dso-input-wrapper {\r\n position: relative;\r\n\r\n .form-control {\r\n width: 9ch;\r\n }\r\n}\r\n\r\n.form-control {\r\n @include form-control.root();\r\n}\r\n\r\n.dso-manual-input-button[type=\"button\"] {\r\n background-color: transparent;\r\n border: 0;\r\n bottom: 0;\r\n left: 0;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n}\r\n\r\n.hidden {\r\n display: none !important;\r\n}\r\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter, State, Watch } from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n private trap?: FocusTrap;\r\n\r\n @State()\r\n private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n @State()\r\n manualCount?: number;\r\n\r\n /**\r\n * The label of the List Button.\r\n */\r\n @Prop()\r\n label?: string;\r\n\r\n /**\r\n * The sublabel of the List Button.\r\n */\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /**\r\n * When defined the count can show on the List Button.\r\n */\r\n @Prop()\r\n count?: number;\r\n\r\n /**\r\n * The minimum value.\r\n */\r\n @Prop()\r\n min?: string | number;\r\n\r\n /**\r\n * The maximum value.\r\n */\r\n @Prop()\r\n max?: string | number;\r\n\r\n /**\r\n * Whether the List Button is checked.\r\n */\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /**\r\n * Whether the List Button is disabled.\r\n */\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /**\r\n * Allow user to directly input a value.\r\n *\r\n * Set to `false` to force users to use plus/minus buttons.\r\n */\r\n @Prop()\r\n manual = true;\r\n\r\n /**\r\n * Emitted when the user changes the count.\r\n */\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /**\r\n * Emitted when the user activates the List Button itself.\r\n *\r\n * Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n @Watch(\"manual\")\r\n watchManualCallback() {\r\n if (!this.manual && this.manualCount) {\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n escapeDeactivates: true,\r\n setReturnFocus: false,\r\n\r\n clickOutsideDeactivates: (e) => {\r\n this.setCount(e);\r\n\r\n return true;\r\n },\r\n onDeactivate: () => this.stopManualCountInput(),\r\n onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n }).activate();\r\n } else if (this.manualCount === undefined && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.trap?.deactivate();\r\n }\r\n\r\n private handleOnChange({ target }: Event): void {\r\n if (target instanceof HTMLInputElement) {\r\n this.manualCount = target.valueAsNumber;\r\n }\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (this.isNewCountValid(newValue) === false) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private setCount(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.manualCount,\r\n });\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private startManualCountInput(): void {\r\n this.manualCount = this.count;\r\n }\r\n\r\n private stopManualCountInput(): void {\r\n this.manualCount = undefined;\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n if (\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) || newValue > Number(this.max))\r\n ) {\r\n return false;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n render() {\r\n const showButtonInputs = this.manualCount === undefined;\r\n\r\n const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n checked={selected}\r\n disabled={this.disabled}\r\n aria-label={this.label}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n </div>\r\n {this.sublabel && <span class=\"dso-sublabel\">{this.sublabel}</span>}\r\n <slot name=\"subcontent\" />\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.min) || this.disabled}\r\n onClick={(e) => this.stepValue(e, \"decrement\")}\r\n >\r\n <dso-icon icon=\"minus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verlagen</span>\r\n </button>\r\n )}\r\n\r\n <div class=\"dso-input-wrapper\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <input\r\n class=\"dso-input-step-counter\"\r\n type=\"number\"\r\n tabIndex={-1}\r\n aria-label=\"Aantal\"\r\n value={this.count}\r\n readOnly\r\n />\r\n )}\r\n\r\n <form onSubmit={(e) => this.setCount(e)}>\r\n <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n <input\r\n class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n type=\"number\"\r\n aria-label=\"Aantal\"\r\n value={this.manualCount}\r\n min={this.min}\r\n max={this.max}\r\n onInput={(e) => this.handleOnChange(e)}\r\n />\r\n </div>\r\n\r\n {this.manual === true && (\r\n <button\r\n class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n type={!showButtonInputs ? \"submit\" : \"button\"}\r\n disabled={this.disabled}\r\n onClick={() => showButtonInputs && this.startManualCountInput()}\r\n >\r\n {showButtonInputs ? (\r\n <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n ) : (\r\n <span class=\"sr-only\">Zet waarde</span>\r\n )}\r\n </button>\r\n )}\r\n </form>\r\n </div>\r\n\r\n {showButtonInputs && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.max) || this.disabled}\r\n onClick={(e) => this.stepValue(e, \"increment\")}\r\n >\r\n <dso-icon icon=\"plus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verhogen</span>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
1
|
+
{"file":"dso-list-button.js","mappings":"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","names":[],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/input-number\";\r\n@use \"~dso-toolkit/src/components/list-button\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-manual-input-button {\r\n cursor: text;\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n @include input-number.root();\r\n}\r\n\r\n.dso-button-group {\r\n @include list-button.button-group(\".dso-input-number\", \".dso-list-button\");\r\n}\r\n\r\n.dso-selectable {\r\n @include selectable.root(\"dso-info\");\r\n\r\n label {\r\n font-weight: 700;\r\n }\r\n}\r\n\r\n.dso-list-button {\r\n @include button.base($modifiers: false);\r\n @include list-button.root();\r\n\r\n .dso-sublabel {\r\n padding-left: selectable.$size + units.$u1;\r\n }\r\n}\r\n\r\n.dso-list-button,\r\n.dso-button-group {\r\n + .dso-list-button,\r\n + .dso-button-group {\r\n @include list-button.sibling();\r\n }\r\n}\r\n\r\n.dso-input-wrapper {\r\n position: relative;\r\n\r\n .form-control {\r\n width: 9ch;\r\n }\r\n}\r\n\r\n.form-control {\r\n @include form-control.root();\r\n}\r\n\r\n.dso-manual-input-button[type=\"button\"] {\r\n background-color: transparent;\r\n border: 0;\r\n bottom: 0;\r\n left: 0;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n}\r\n\r\n.hidden {\r\n display: none !important;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n h,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n State,\r\n Watch,\r\n forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoListButtonElement;\r\n\r\n private trap?: FocusTrap;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private get subcontentSlot() {\r\n return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n }\r\n\r\n @State()\r\n private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n @State()\r\n manualCount?: number;\r\n\r\n /**\r\n * The label of the List Button.\r\n */\r\n @Prop()\r\n label?: string;\r\n\r\n /**\r\n * The sublabel of the List Button.\r\n */\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /**\r\n * When defined the count can show on the List Button.\r\n */\r\n @Prop()\r\n count?: number;\r\n\r\n /**\r\n * The minimum value.\r\n */\r\n @Prop()\r\n min?: string | number;\r\n\r\n /**\r\n * The maximum value.\r\n */\r\n @Prop()\r\n max?: string | number;\r\n\r\n /**\r\n * Whether the List Button is checked.\r\n */\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /**\r\n * Whether the List Button is disabled.\r\n */\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /**\r\n * Prefix to subcontent for the purpose of screenreading.\r\n */\r\n @Prop()\r\n subcontentPrefix?: string;\r\n\r\n /**\r\n * Allow user to directly input a value.\r\n *\r\n * Set to `false` to force users to use plus/minus buttons.\r\n */\r\n @Prop()\r\n manual = true;\r\n\r\n /**\r\n * Emitted when the user changes the count.\r\n */\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /**\r\n * Emitted when the user activates the List Button itself.\r\n *\r\n * Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n @Watch(\"manual\")\r\n watchManualCallback() {\r\n if (!this.manual && this.manualCount) {\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n escapeDeactivates: true,\r\n setReturnFocus: false,\r\n\r\n clickOutsideDeactivates: (e) => {\r\n this.setCount(e);\r\n\r\n return true;\r\n },\r\n onDeactivate: () => this.stopManualCountInput(),\r\n onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n }).activate();\r\n } else if (this.manualCount === undefined && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n\r\n this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.trap?.deactivate();\r\n\r\n this.mutationObserver?.disconnect();\r\n delete this.mutationObserver;\r\n }\r\n\r\n private handleOnChange({ target }: Event): void {\r\n if (target instanceof HTMLInputElement) {\r\n this.manualCount = target.valueAsNumber;\r\n }\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (!this.isNewCountValid(newValue)) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private setCount(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.manualCount,\r\n });\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private startManualCountInput(): void {\r\n this.manualCount = this.count;\r\n }\r\n\r\n private stopManualCountInput(): void {\r\n this.manualCount = undefined;\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n return !(\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) || newValue > Number(this.max))\r\n );\r\n }\r\n\r\n render() {\r\n const showButtonInputs = this.manualCount === undefined;\r\n\r\n const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n aria-describedby={\r\n [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") || null\r\n }\r\n checked={selected}\r\n disabled={this.disabled}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n {this.subcontentSlot && (\r\n <div class=\"sr-only\" id=\"description\">\r\n {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n </div>\r\n )}\r\n </div>\r\n {this.sublabel && (\r\n <span class=\"dso-sublabel\" id=\"sublabel\">\r\n {this.sublabel}\r\n </span>\r\n )}\r\n <slot name=\"subcontent\" />\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.min) || this.disabled}\r\n onClick={(e) => this.stepValue(e, \"decrement\")}\r\n >\r\n <dso-icon icon=\"minus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verlagen</span>\r\n </button>\r\n )}\r\n\r\n <div class=\"dso-input-wrapper\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <input\r\n class=\"dso-input-step-counter\"\r\n type=\"number\"\r\n tabIndex={-1}\r\n aria-label=\"Aantal\"\r\n value={this.count}\r\n readOnly\r\n />\r\n )}\r\n\r\n <form onSubmit={(e) => this.setCount(e)}>\r\n <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n <input\r\n class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n type=\"number\"\r\n aria-label=\"Aantal\"\r\n value={this.manualCount}\r\n min={this.min}\r\n max={this.max}\r\n onInput={(e) => this.handleOnChange(e)}\r\n />\r\n </div>\r\n\r\n {this.manual && (\r\n <button\r\n class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n type={!showButtonInputs ? \"submit\" : \"button\"}\r\n disabled={this.disabled}\r\n onClick={() => showButtonInputs && this.startManualCountInput()}\r\n >\r\n {showButtonInputs ? (\r\n <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n ) : (\r\n <span class=\"sr-only\">Zet waarde</span>\r\n )}\r\n </button>\r\n )}\r\n </form>\r\n </div>\r\n\r\n {showButtonInputs && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.max) || this.disabled}\r\n onClick={(e) => this.stepValue(e, \"increment\")}\r\n >\r\n <dso-icon icon=\"plus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verhogen</span>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -23,7 +23,9 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
|
|
|
23
23
|
}
|
|
24
24
|
componentDidLoad() {
|
|
25
25
|
var _a;
|
|
26
|
-
(_a = this.htmlDialogElement) === null || _a === void 0 ? void 0 : _a.
|
|
26
|
+
if ((_a = this.htmlDialogElement) === null || _a === void 0 ? void 0 : _a.isConnected) {
|
|
27
|
+
this.htmlDialogElement.showModal();
|
|
28
|
+
}
|
|
27
29
|
document.body.classList.add("dso-modal-open");
|
|
28
30
|
}
|
|
29
31
|
disconnectedCallback() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dso-modal.js","mappings":";;;;;AAAA,MAAM,QAAQ,GAAG,83LAA83L;;MCUl4L,KAAK;;;;;;kBAOP,EAAE,EAAE;;;;gBAqBS,QAAQ;2BAQZ,IAAI;;EAQtB,iBAAiB;IACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;GACtE;EAED,gBAAgB;;IACd,MAAA,IAAI,CAAC,iBAAiB,0CAAE,SAAS,EAAE,CAAC;
|
|
1
|
+
{"file":"dso-modal.js","mappings":";;;;;AAAA,MAAM,QAAQ,GAAG,83LAA83L;;MCUl4L,KAAK;;;;;;kBAOP,EAAE,EAAE;;;;gBAqBS,QAAQ;2BAQZ,IAAI;;EAQtB,iBAAiB;IACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;GACtE;EAED,gBAAgB;;IACd,IAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,EAAE;MACvC,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC;KACpC;IAED,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;GAC/C;EAED,oBAAoB;;IAClB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;IACjD,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;GACjC;EAED,MAAM;;IACJ,QACE,cACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,SAAS,gBACjB,MAAM,qBACA,IAAI,CAAC,MAAM,EAC5B,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC;QACV,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;OAC1C,IAED,WAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,IACpC,IAAI,CAAC,UAAU,IACd,WAAK,KAAK,EAAC,YAAY,IACrB,UAAI,EAAE,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,UAAU,CAAM,EAC1C,IAAI,CAAC,eAAe,KACnB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,IAC9F,gBAAU,IAAI,EAAC,OAAO,GAAY,EAClC,YAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACG,KAEN,YAAM,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,cAE9B,CACR,EAED,0BACE,WAAK,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,IAC/B,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACS,EAEhB,IAAI,CAAC,SAAS,KACb,WAAK,KAAK,EAAC,YAAY,IACrB,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,CACC,EACT;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n// fullscreen option\r\n:host([fullscreen]) dialog {\r\n @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n :host dialog {\r\n @include modal.fullscreen();\r\n }\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n dso-icon {\r\n color: modal.$close-icon-color;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-modal\",\r\n styleUrl: \"modal.scss\",\r\n shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n private htmlDialogElement?: HTMLDialogElement;\r\n\r\n @Element()\r\n host!: HTMLDsoModalElement;\r\n\r\n @State()\r\n ariaId = v4();\r\n\r\n @State()\r\n hasFooter?: boolean;\r\n\r\n /**\r\n * when set the modal will be shown in fullscreen.\r\n */\r\n @Prop({ reflect: true })\r\n fullscreen?: boolean;\r\n\r\n /**\r\n * The title of the Modal.\r\n */\r\n @Prop()\r\n modalTitle?: string;\r\n\r\n /**\r\n * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n */\r\n @Prop()\r\n role: string | null = \"dialog\";\r\n\r\n /**\r\n * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n *\r\n * Needs `modalTitle` to be set.\r\n */\r\n @Prop()\r\n showCloseButton = true;\r\n\r\n /**\r\n * Emitted when the user wants to close the Modal.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n componentWillLoad(): void {\r\n this.hasFooter = this.host.querySelector(\"[slot='footer']\") !== null;\r\n }\r\n\r\n componentDidLoad(): void {\r\n if (this.htmlDialogElement?.isConnected) {\r\n this.htmlDialogElement.showModal();\r\n }\r\n\r\n document.body.classList.add(\"dso-modal-open\");\r\n }\r\n\r\n disconnectedCallback(): void {\r\n document.body.classList.remove(\"dso-modal-open\");\r\n this.htmlDialogElement?.close();\r\n }\r\n\r\n render() {\r\n return (\r\n <dialog\r\n class=\"dso-modal\"\r\n role={this.role ?? undefined}\r\n aria-modal=\"true\"\r\n aria-labelledby={this.ariaId}\r\n ref={(element) => (this.htmlDialogElement = element)}\r\n onCancel={(e) => {\r\n e.preventDefault();\r\n\r\n this.dsoClose.emit({ originalEvent: e });\r\n }}\r\n >\r\n <div class=\"dso-dialog\" role=\"document\">\r\n {this.modalTitle ? (\r\n <div class=\"dso-header\">\r\n <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n {this.showCloseButton && (\r\n <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n )}\r\n </div>\r\n ) : (\r\n <span class=\"sr-only\" id={this.ariaId}>\r\n Dialoog\r\n </span>\r\n )}\r\n\r\n <dso-scrollable>\r\n <div class=\"dso-body\" tabIndex={0}>\r\n <slot name=\"body\" />\r\n </div>\r\n </dso-scrollable>\r\n\r\n {this.hasFooter && (\r\n <div class=\"dso-footer\">\r\n <slot name=\"footer\" />\r\n </div>\r\n )}\r\n </div>\r\n </dialog>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as o}from"./p-4592810d.js";export{s as setNonce}from"./p-4592810d.js";const t=()=>{const o=import.meta.url;const t={};if(o!==""){t.resourcesUrl=new URL(".",o).href}return e(t)};t().then((e=>o([["p-d24073fe",[[2,"dsot-document-component-demo",{showCanvas:[516,"show-canvas"],jsonFile:[1,"json-file"],openDefault:[4,"open-default"],response:[32],document:[32],openOrClosed:[32],openedAnnotation:[32],filtered:[32],notApplicable:[32],activeAnnotationSelectables:[32]},null,{jsonFile:["jsonFileWatcher"],openDefault:["openDefaultWatcher"]}]]],["p-51f9702b",[[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]]],["p-c1bab0f1",[[1,"dso-map-overlays",{group:[1],overlays:[16]}]]],["p-a3f28ef2",[[1,"dso-accordion-section",{handleTitle:[1,"handle-title"],heading:[1],handleUrl:[1,"handle-url"],status:[1],attachmentCount:[2,"attachment-count"],icon:[1],statusDescription:[1,"status-description"],open:[516],hasNestedAccordion:[516,"has-nested-accordion"],hover:[32],focusHandle:[64]}]]],["p-43511221",[[1,"dso-toggletip",{label:[1],position:[1],small:[4],secondary:[4],active:[32]}]]],["p-193b7e46",[[6,"dso-header",{mainMenu:[16],useDropDownMenu:[1,"use-drop-down-menu"],authStatus:[1,"auth-status"],loginUrl:[1,"login-url"],logoutUrl:[1,"logout-url"],showHelp:[4,"show-help"],helpUrl:[1,"help-url"],userProfileName:[1,"user-profile-name"],userProfileUrl:[1,"user-profile-url"],userHomeUrl:[1,"user-home-url"],userHomeActive:[4,"user-home-active"],showDropDown:[32],overflowMenuItems:[32],dropdownOptionsOffset:[32]},null,{useDropDownMenu:["setShowDropDown"]}]]],["p-e1cb1603",[[1,"dso-map-controls",{open:[1540],disableZoom:[1,"disable-zoom"],hideContent:[32],toggleVisibility:[64]},null,{open:["watchOpen"]}]]],["p-
|
|
1
|
+
import{p as e,b as o}from"./p-4592810d.js";export{s as setNonce}from"./p-4592810d.js";const t=()=>{const o=import.meta.url;const t={};if(o!==""){t.resourcesUrl=new URL(".",o).href}return e(t)};t().then((e=>o([["p-d24073fe",[[2,"dsot-document-component-demo",{showCanvas:[516,"show-canvas"],jsonFile:[1,"json-file"],openDefault:[4,"open-default"],response:[32],document:[32],openOrClosed:[32],openedAnnotation:[32],filtered:[32],notApplicable:[32],activeAnnotationSelectables:[32]},null,{jsonFile:["jsonFileWatcher"],openDefault:["openDefaultWatcher"]}]]],["p-51f9702b",[[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]]],["p-c1bab0f1",[[1,"dso-map-overlays",{group:[1],overlays:[16]}]]],["p-a3f28ef2",[[1,"dso-accordion-section",{handleTitle:[1,"handle-title"],heading:[1],handleUrl:[1,"handle-url"],status:[1],attachmentCount:[2,"attachment-count"],icon:[1],statusDescription:[1,"status-description"],open:[516],hasNestedAccordion:[516,"has-nested-accordion"],hover:[32],focusHandle:[64]}]]],["p-43511221",[[1,"dso-toggletip",{label:[1],position:[1],small:[4],secondary:[4],active:[32]}]]],["p-193b7e46",[[6,"dso-header",{mainMenu:[16],useDropDownMenu:[1,"use-drop-down-menu"],authStatus:[1,"auth-status"],loginUrl:[1,"login-url"],logoutUrl:[1,"logout-url"],showHelp:[4,"show-help"],helpUrl:[1,"help-url"],userProfileName:[1,"user-profile-name"],userProfileUrl:[1,"user-profile-url"],userHomeUrl:[1,"user-home-url"],userHomeActive:[4,"user-home-active"],showDropDown:[32],overflowMenuItems:[32],dropdownOptionsOffset:[32]},null,{useDropDownMenu:["setShowDropDown"]}]]],["p-e1cb1603",[[1,"dso-map-controls",{open:[1540],disableZoom:[1,"disable-zoom"],hideContent:[32],toggleVisibility:[64]},null,{open:["watchOpen"]}]]],["p-b36ab83a",[[1,"dso-modal",{fullscreen:[516],modalTitle:[1,"modal-title"],role:[1],showCloseButton:[4,"show-close-button"],ariaId:[32],hasFooter:[32]}]]],["p-6d602847",[[1,"dso-pagination",{totalPages:[2,"total-pages"],currentPage:[2,"current-page"],formatHref:[16],availablePositions:[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-302764ae",[[1,"dso-tree-view",{collection:[16],focusItem:[64]}]]],["p-977dde7f",[[1,"dso-action-list-item",{step:[2],itemTitle:[1,"item-title"],flowLine:[4,"flow-line"],warning:[4],divider:[4]}]]],["p-df63a085",[[6,"dso-autosuggest",{suggestions:[16],loading:[4],loadingLabel:[1,"loading-label"],loadingDelayed:[2,"loading-delayed"],notFoundLabel:[1,"not-found-label"],suggestOnFocus:[4,"suggest-on-focus"],showSuggestions:[32],selectedSuggestion:[32],notFound:[32],showLoading:[32]},[[4,"click","onDocumentClick"]],{suggestions:["suggestionsWatcher"]}]]],["p-9c34ee39",[[1,"dso-card",{clickable:[516],imageShape:[513,"image-shape"],href:[513]}]]],["p-84be819d",[[2,"dso-date-picker-legacy",{name:[1],identifier:[1],disabled:[516],role:[1],direction:[1],required:[4],invalid:[516],describedBy:[1,"described-by"],dsoAutofocus:[4,"dso-autofocus"],value:[1537],min:[1],max:[1],activeFocus:[32],focusedDay:[32],open:[32],visible:[32],setFocus:[64],show:[64],hide:[64]},[[6,"click","handleDocumentClick"]]]]],["p-eb7275e9",[[1,"dso-helpcenter-panel",{label:[1],url:[1],visibility:[32],isOpen:[32],slideState:[32],loadIframe:[32]},[[8,"keydown","keyDownListener"]],{url:["watchUrl"],isOpen:["watchIsOpen"]}]]],["p-638ad5e5",[[1,"dso-list-button",{label:[1],sublabel:[1],count:[2],min:[8],max:[8],checked:[516],disabled:[516],subcontentPrefix:[1,"subcontent-prefix"],manual:[4],manualInputWrapperElement:[32],manualCount:[32]},null,{manual:["watchManualCallback"]}]]],["p-159c0a88",[[1,"dso-mark-bar",{value:[1],label:[1],current:[2],totalCount:[2,"total-count"],dsoFocus:[64]}]]],["p-b6af439e",[[1,"dso-accordion",{variant:[513],reverseAlign:[516,"reverse-align"],_getState:[64]},null,{variant:["updateVariant"],reverseAlign:["updateReverseAlign"]}]]],["p-33416b1d",[[1,"dso-action-list",{listTitle:[1,"list-title"]}]]],["p-15c3da8e",[[1,"dso-banner",{status:[513],compact:[4],noIcon:[4,"no-icon"]}]]],["p-09552584",[[1,"dso-card-container",{mode:[513]}]]],["p-f6d1d215",[[2,"dso-date-picker",{name:[1],identifier:[1],disabled:[516],required:[516],invalid:[516],describedBy:[1,"described-by"],dsoAutofocus:[4,"dso-autofocus"],value:[513],min:[1],max:[1]}]]],["p-482c8ebd",[[1,"dso-highlight-box",{yellow:[4],border:[4],white:[4],dropShadow:[4,"drop-shadow"],step:[2]}]]],["p-ea6ca8b2",[[1,"dso-logo",{label:[513],ribbon:[1]}]]],["p-7cac2dd2",[[1,"dso-progress-bar",{progress:[2],min:[2],max:[2]}]]],["p-bf04808f",[[1,"dso-viewer-grid",{mode:[513],filterpanelOpen:[516,"filterpanel-open"],overlayOpen:[516,"overlay-open"],documentPanelOpen:[516,"document-panel-open"],mainSize:[513,"main-size"],activeTab:[1,"active-tab"],documentPanelSize:[513,"document-panel-size"],mainPanelExpanded:[4,"main-panel-expanded"],mainPanelHidden:[4,"main-panel-hidden"],tabView:[32],_checkMainPanelVisibility:[64]},null,{documentPanelOpen:["documentPanelOpenWatcher"],filterpanelOpen:["filterpanelOpenWatcher"],overlayOpen:["overlayOpenWatcher"]}]]],["p-11eb95a2",[[1,"dso-attachments-counter",{count:[2]}]]],["p-09e0f1a6",[[1,"dso-dropdown-menu",{open:[1540],dropdownAlign:[1,"dropdown-align"],dropdownOptionsOffset:[2,"dropdown-options-offset"],checkable:[4],boundary:[1],placement:[1],strategy:[1]},null,{placement:["watchPosition"],dropdownAlign:["watchPosition"],dropdownOptionsOffset:["watchOptionsOffset"],strategy:["watchStrategy"]}]]],["p-56136f3c",[[1,"dso-progress-indicator",{label:[1],size:[513],block:[4]}]]],["p-1180ebe3",[[1,"dso-scrollable",{scrollPosition:[32],_setScrollState:[64]}]]],["p-1981592d",[[1,"dso-expandable",{open:[516],enableAnimation:[516,"enable-animation"],minimumHeight:[2,"minimum-height"],animationReady:[32],isOpen:[32]},null,{open:["toggleOpen"],enableAnimation:["toggleEnableAnimation"]}]]],["p-a435b9fd",[[1,"dso-responsive-element",{sizeAlias:[32],sizeWidth:[32],getSize:[64]}]]],["p-e348d48b",[[1,"dso-icon",{icon:[1]}]]],["p-fd4b0b0b",[[1,"dso-info-button",{active:[1540],secondary:[4],label:[1],hover:[32],setFocus:[64]}]]],["p-336aefb5",[[6,"dso-selectable",{type:[1],identifier:[1],name:[1],value:[1],invalid:[4],describedById:[1,"described-by-id"],labelledById:[1,"labelled-by-id"],disabled:[4],required:[4],checked:[516],indeterminate:[4],infoFixed:[4,"info-fixed"],infoActive:[32],keyboardFocus:[32],toggleInfo:[64]},null,{indeterminate:["setIndeterminate"]}],[1,"dso-info",{fixed:[516],active:[516]}]]],["p-b0116121",[[1,"dso-tooltip",{descriptive:[516],position:[1],strategy:[1],noArrow:[4,"no-arrow"],stateless:[4],small:[4],active:[1540],hidden:[32],activate:[64],deactivate:[64]},null,{position:["watchPosition"],strategy:["watchStrategy"],active:["watchActive"]}]]],["p-35dae23f",[[1,"dso-ozon-content",{content:[1],inline:[516],mark:[16],state:[32]},null,{content:["contentWatcher"]}],[1,"dso-label",{compact:[4],removable:[4],status:[1],truncate:[4],removeHover:[32],removeFocus:[32],textHover:[32],textFocus:[32],isTruncated:[32],labelText:[32],_truncateLabel:[64]},[[4,"keydown","keyDownListener"]],{removable:["watchRemovable"],truncate:["watchTruncate"]}],[1,"dso-alert",{status:[1],roleAlert:[4,"role-alert"]}],[0,"dso-annotation-button",{identifier:[1],open:[4]}],[1,"dso-badge",{status:[1]}],[1,"dso-image-overlay",{active:[32],zoomable:[32]},[[2,"load","loadListener"]]],[1,"dso-table",{noModal:[516,"no-modal"],isResponsive:[516,"is-responsive"],modalActive:[32],placeholderHeight:[32]}]]],["p-39962ce8",[[1,"dso-document-component",{heading:[1],label:[1],nummer:[1],opschrift:[1],inhoud:[1],open:[516],filtered:[516],notApplicable:[516,"not-applicable"],genesteOntwerpInformatie:[516,"geneste-ontwerp-informatie"],bevatOntwerpInformatie:[516,"bevat-ontwerp-informatie"],annotated:[516],gereserveerd:[4],vervallen:[4],openAnnotation:[4,"open-annotation"],alternativeTitle:[1,"alternative-title"],type:[513],wijzigactie:[513],mark:[16],recursiveToggle:[8,"recursive-toggle"]}],[4,"dso-annotation-output",{identifier:[513],annotationPrefix:[513,"annotation-prefix"],open:[516]}],[4,"dso-slide-toggle",{checked:[4],disabled:[4],accessibleLabel:[1,"accessible-label"],labelledbyId:[1,"labelledby-id"],identifier:[1],hasVisibleLabel:[32]}]]]],e)));
|
|
2
2
|
//# sourceMappingURL=dso-toolkit.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","showCanvas","jsonFile","openDefault","response","document","openOrClosed","openedAnnotation","filtered","notApplicable","activeAnnotationSelectables","group","baseLayers","overlays","handleTitle","heading","handleUrl","status","attachmentCount","icon","statusDescription","open","hasNestedAccordion","hover","focusHandle","label","position","small","secondary","active","mainMenu","useDropDownMenu","authStatus","loginUrl","logoutUrl","showHelp","helpUrl","userProfileName","userProfileUrl","userHomeUrl","userHomeActive","showDropDown","overflowMenuItems","dropdownOptionsOffset","disableZoom","hideContent","toggleVisibility","fullscreen","modalTitle","role","showCloseButton","ariaId","hasFooter","totalPages","currentPage","formatHref","availablePositions","collection","focusItem","step","itemTitle","flowLine","warning","divider","suggestions","loading","loadingLabel","loadingDelayed","notFoundLabel","suggestOnFocus","showSuggestions","selectedSuggestion","notFound","showLoading","clickable","imageShape","name","identifier","disabled","direction","required","invalid","describedBy","dsoAutofocus","value","min","max","activeFocus","focusedDay","visible","setFocus","show","hide","visibility","isOpen","slideState","loadIframe","sublabel","count","checked","manual","manualInputWrapperElement","manualCount","current","totalCount","dsoFocus","variant","reverseAlign","_getState","listTitle","compact","noIcon","mode","yellow","border","white","dropShadow","ribbon","progress","filterpanelOpen","overlayOpen","documentPanelOpen","mainSize","activeTab","documentPanelSize","mainPanelExpanded","mainPanelHidden","tabView","_checkMainPanelVisibility","dropdownAlign","checkable","boundary","placement","strategy","size","block","scrollPosition","_setScrollState","enableAnimation","minimumHeight","animationReady","sizeAlias","sizeWidth","getSize","type","describedById","labelledById","indeterminate","infoFixed","infoActive","keyboardFocus","toggleInfo","fixed","descriptive","noArrow","stateless","hidden","activate","deactivate","content","inline","mark","state","removable","truncate","removeHover","removeFocus","textHover","textFocus","isTruncated","labelText","_truncateLabel","roleAlert","zoomable","noModal","isResponsive","modalActive","placeholderHeight","nummer","opschrift","inhoud","genesteOntwerpInformatie","bevatOntwerpInformatie","annotated","gereserveerd","vervallen","openAnnotation","alternativeTitle","wijzigactie","recursiveToggle","annotationPrefix","accessibleLabel","labelledbyId","hasVisibleLabel"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.7.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n if (importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n }\n return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAKA,MAAMA,EAAe,KAajB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACnBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACrD,CACI,OAAOC,EAAeJ,EAAK,ECnB/BH,IAAeQ,MAAKC,GAEXC,EAAc,kDAAuC,CAAAC,WAAA,oBAAAC,SAAA,gBAAAC,YAAA,mBAAAC,SAAA,KAAAC,SAAA,KAAAC,aAAA,KAAAC,iBAAA,KAAAC,SAAA,KAAAC,cAAA,KAAAC,4BAAA,YAAAR,SAAA,oBAAAC,YAAA,oEAAAQ,MAAA,IAAAC,WAAA,+CAAAD,MAAA,IAAAE,SAAA,oDAAAC,YAAA,mBAAAC,QAAA,IAAAC,UAAA,iBAAAC,OAAA,IAAAC,gBAAA,uBAAAC,KAAA,IAAAC,kBAAA,yBAAAC,KAAA,MAAAC,mBAAA,6BAAAC,MAAA,KAAAC,YAAA,4CAAAC,MAAA,IAAAC,SAAA,IAAAC,MAAA,IAAAC,UAAA,IAAAC,OAAA,yCAAAC,SAAA,KAAAC,gBAAA,yBAAAC,WAAA,kBAAAC,SAAA,gBAAAC,UAAA,iBAAAC,SAAA,gBAAAC,QAAA,eAAAC,gBAAA,wBAAAC,eAAA,uBAAAC,YAAA,oBAAAC,eAAA,uBAAAC,aAAA,KAAAC,kBAAA,KAAAC,sBAAA,YAAAZ,gBAAA,8DAAAV,KAAA,OAAAuB,YAAA,mBAAAC,YAAA,KAAAC,iBAAA,YAAAzB,KAAA,iDAAA0B,WAAA,MAAAC,WAAA,kBAAAC,KAAA,IAAAC,gBAAA,wBAAAC,OAAA,KAAAC,UAAA,6CAAAC,WAAA,kBAAAC,YAAA,mBAAAC,WAAA,KAAAC,mBAAA,sFAAAC,WAAA,KAAAC,UAAA,mDAAAC,KAAA,IAAAC,UAAA,iBAAAC,SAAA,gBAAAC,QAAA,IAAAC,QAAA,6CAAAC,YAAA,KAAAC,QAAA,IAAAC,aAAA,oBAAAC,eAAA,sBAAAC,cAAA,sBAAAC,eAAA,uBAAAC,gBAAA,KAAAC,mBAAA,KAAAC,SAAA,KAAAC,YAAA,uCAAAT,YAAA,yDAAAU,UAAA,MAAAC,WAAA,oBAAA/E,KAAA,sDAAAgF,KAAA,IAAAC,WAAA,IAAAC,SAAA,MAAA7B,KAAA,IAAA8B,UAAA,IAAAC,SAAA,IAAAC,QAAA,MAAAC,YAAA,mBAAAC,aAAA,oBAAAC,MAAA,OAAAC,IAAA,IAAAC,IAAA,IAAAC,YAAA,KAAAC,WAAA,KAAAnE,KAAA,KAAAoE,QAAA,KAAAC,SAAA,KAAAC,KAAA,KAAAC,KAAA,uFAAAnE,MAAA,IAAAjC,IAAA,IAAAqG,WAAA,KAAAC,OAAA,KAAAC,WAAA,KAAAC,WAAA,yCAAAxG,IAAA,aAAAsG,OAAA,yDAAArE,MAAA,IAAAwE,SAAA,IAAAC,MAAA,IAAAb,IAAA,IAAAC,IAAA,IAAAa,QAAA,MAAArB,SAAA,MAAAsB,OAAA,IAAAC,0BAAA,KAAAC,YAAA,YAAAF,OAAA,
|
|
1
|
+
{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","showCanvas","jsonFile","openDefault","response","document","openOrClosed","openedAnnotation","filtered","notApplicable","activeAnnotationSelectables","group","baseLayers","overlays","handleTitle","heading","handleUrl","status","attachmentCount","icon","statusDescription","open","hasNestedAccordion","hover","focusHandle","label","position","small","secondary","active","mainMenu","useDropDownMenu","authStatus","loginUrl","logoutUrl","showHelp","helpUrl","userProfileName","userProfileUrl","userHomeUrl","userHomeActive","showDropDown","overflowMenuItems","dropdownOptionsOffset","disableZoom","hideContent","toggleVisibility","fullscreen","modalTitle","role","showCloseButton","ariaId","hasFooter","totalPages","currentPage","formatHref","availablePositions","collection","focusItem","step","itemTitle","flowLine","warning","divider","suggestions","loading","loadingLabel","loadingDelayed","notFoundLabel","suggestOnFocus","showSuggestions","selectedSuggestion","notFound","showLoading","clickable","imageShape","name","identifier","disabled","direction","required","invalid","describedBy","dsoAutofocus","value","min","max","activeFocus","focusedDay","visible","setFocus","show","hide","visibility","isOpen","slideState","loadIframe","sublabel","count","checked","subcontentPrefix","manual","manualInputWrapperElement","manualCount","current","totalCount","dsoFocus","variant","reverseAlign","_getState","listTitle","compact","noIcon","mode","yellow","border","white","dropShadow","ribbon","progress","filterpanelOpen","overlayOpen","documentPanelOpen","mainSize","activeTab","documentPanelSize","mainPanelExpanded","mainPanelHidden","tabView","_checkMainPanelVisibility","dropdownAlign","checkable","boundary","placement","strategy","size","block","scrollPosition","_setScrollState","enableAnimation","minimumHeight","animationReady","sizeAlias","sizeWidth","getSize","type","describedById","labelledById","indeterminate","infoFixed","infoActive","keyboardFocus","toggleInfo","fixed","descriptive","noArrow","stateless","hidden","activate","deactivate","content","inline","mark","state","removable","truncate","removeHover","removeFocus","textHover","textFocus","isTruncated","labelText","_truncateLabel","roleAlert","zoomable","noModal","isResponsive","modalActive","placeholderHeight","nummer","opschrift","inhoud","genesteOntwerpInformatie","bevatOntwerpInformatie","annotated","gereserveerd","vervallen","openAnnotation","alternativeTitle","wijzigactie","recursiveToggle","annotationPrefix","accessibleLabel","labelledbyId","hasVisibleLabel"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.7.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n if (importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n }\n return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAKA,MAAMA,EAAe,KAajB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACnBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACrD,CACI,OAAOC,EAAeJ,EAAK,ECnB/BH,IAAeQ,MAAKC,GAEXC,EAAc,kDAAuC,CAAAC,WAAA,oBAAAC,SAAA,gBAAAC,YAAA,mBAAAC,SAAA,KAAAC,SAAA,KAAAC,aAAA,KAAAC,iBAAA,KAAAC,SAAA,KAAAC,cAAA,KAAAC,4BAAA,YAAAR,SAAA,oBAAAC,YAAA,oEAAAQ,MAAA,IAAAC,WAAA,+CAAAD,MAAA,IAAAE,SAAA,oDAAAC,YAAA,mBAAAC,QAAA,IAAAC,UAAA,iBAAAC,OAAA,IAAAC,gBAAA,uBAAAC,KAAA,IAAAC,kBAAA,yBAAAC,KAAA,MAAAC,mBAAA,6BAAAC,MAAA,KAAAC,YAAA,4CAAAC,MAAA,IAAAC,SAAA,IAAAC,MAAA,IAAAC,UAAA,IAAAC,OAAA,yCAAAC,SAAA,KAAAC,gBAAA,yBAAAC,WAAA,kBAAAC,SAAA,gBAAAC,UAAA,iBAAAC,SAAA,gBAAAC,QAAA,eAAAC,gBAAA,wBAAAC,eAAA,uBAAAC,YAAA,oBAAAC,eAAA,uBAAAC,aAAA,KAAAC,kBAAA,KAAAC,sBAAA,YAAAZ,gBAAA,8DAAAV,KAAA,OAAAuB,YAAA,mBAAAC,YAAA,KAAAC,iBAAA,YAAAzB,KAAA,iDAAA0B,WAAA,MAAAC,WAAA,kBAAAC,KAAA,IAAAC,gBAAA,wBAAAC,OAAA,KAAAC,UAAA,6CAAAC,WAAA,kBAAAC,YAAA,mBAAAC,WAAA,KAAAC,mBAAA,sFAAAC,WAAA,KAAAC,UAAA,mDAAAC,KAAA,IAAAC,UAAA,iBAAAC,SAAA,gBAAAC,QAAA,IAAAC,QAAA,6CAAAC,YAAA,KAAAC,QAAA,IAAAC,aAAA,oBAAAC,eAAA,sBAAAC,cAAA,sBAAAC,eAAA,uBAAAC,gBAAA,KAAAC,mBAAA,KAAAC,SAAA,KAAAC,YAAA,uCAAAT,YAAA,yDAAAU,UAAA,MAAAC,WAAA,oBAAA/E,KAAA,sDAAAgF,KAAA,IAAAC,WAAA,IAAAC,SAAA,MAAA7B,KAAA,IAAA8B,UAAA,IAAAC,SAAA,IAAAC,QAAA,MAAAC,YAAA,mBAAAC,aAAA,oBAAAC,MAAA,OAAAC,IAAA,IAAAC,IAAA,IAAAC,YAAA,KAAAC,WAAA,KAAAnE,KAAA,KAAAoE,QAAA,KAAAC,SAAA,KAAAC,KAAA,KAAAC,KAAA,uFAAAnE,MAAA,IAAAjC,IAAA,IAAAqG,WAAA,KAAAC,OAAA,KAAAC,WAAA,KAAAC,WAAA,yCAAAxG,IAAA,aAAAsG,OAAA,yDAAArE,MAAA,IAAAwE,SAAA,IAAAC,MAAA,IAAAb,IAAA,IAAAC,IAAA,IAAAa,QAAA,MAAArB,SAAA,MAAAsB,iBAAA,wBAAAC,OAAA,IAAAC,0BAAA,KAAAC,YAAA,YAAAF,OAAA,8DAAAjB,MAAA,IAAA3D,MAAA,IAAA+E,QAAA,IAAAC,WAAA,kBAAAC,SAAA,4CAAAC,QAAA,MAAAC,aAAA,sBAAAC,UAAA,YAAAF,QAAA,kBAAAC,aAAA,gEAAAE,UAAA,qDAAA7F,OAAA,MAAA8F,QAAA,IAAAC,OAAA,0DAAAC,KAAA,+CAAArC,KAAA,IAAAC,WAAA,IAAAC,SAAA,MAAAE,SAAA,MAAAC,QAAA,MAAAC,YAAA,mBAAAC,aAAA,oBAAAC,MAAA,MAAAC,IAAA,IAAAC,IAAA,+CAAA4B,OAAA,IAAAC,OAAA,IAAAC,MAAA,IAAAC,WAAA,kBAAA1D,KAAA,sCAAAlC,MAAA,MAAA6F,OAAA,8CAAAC,SAAA,IAAAlC,IAAA,IAAAC,IAAA,6CAAA2B,KAAA,MAAAO,gBAAA,yBAAAC,YAAA,qBAAAC,kBAAA,4BAAAC,SAAA,kBAAAC,UAAA,iBAAAC,kBAAA,4BAAAC,kBAAA,0BAAAC,gBAAA,wBAAAC,QAAA,KAAAC,0BAAA,YAAAP,kBAAA,6BAAAF,gBAAA,2BAAAC,YAAA,wEAAAvB,MAAA,+CAAA7E,KAAA,OAAA6G,cAAA,qBAAAvF,sBAAA,8BAAAwF,UAAA,IAAAC,SAAA,IAAAC,UAAA,IAAAC,SAAA,WAAAD,UAAA,kBAAAH,cAAA,kBAAAvF,sBAAA,uBAAA2F,SAAA,kEAAA7G,MAAA,IAAA8G,KAAA,MAAAC,MAAA,4CAAAC,eAAA,KAAAC,gBAAA,6CAAArH,KAAA,MAAAsH,gBAAA,yBAAAC,cAAA,qBAAAC,eAAA,KAAA/C,OAAA,YAAAzE,KAAA,eAAAsH,gBAAA,0EAAAG,UAAA,KAAAC,UAAA,KAAAC,QAAA,uCAAA7H,KAAA,6CAAAU,OAAA,OAAAD,UAAA,IAAAH,MAAA,IAAAF,MAAA,KAAAmE,SAAA,6CAAAuD,KAAA,IAAApE,WAAA,IAAAD,KAAA,IAAAQ,MAAA,IAAAH,QAAA,IAAAiE,cAAA,sBAAAC,aAAA,qBAAArE,SAAA,IAAAE,SAAA,IAAAmB,QAAA,MAAAiD,cAAA,IAAAC,UAAA,iBAAAC,WAAA,KAAAC,cAAA,KAAAC,WAAA,YAAAJ,cAAA,sCAAAK,MAAA,MAAA5H,OAAA,2CAAA6H,YAAA,MAAAhI,SAAA,IAAA4G,SAAA,IAAAqB,QAAA,eAAAC,UAAA,IAAAjI,MAAA,IAAAE,OAAA,OAAAgI,OAAA,KAAAC,SAAA,KAAAC,WAAA,YAAArI,SAAA,kBAAA4G,SAAA,kBAAAzG,OAAA,0DAAAmI,QAAA,IAAAC,OAAA,MAAAC,KAAA,KAAAC,MAAA,YAAAH,QAAA,qCAAAjD,QAAA,IAAAqD,UAAA,IAAAnJ,OAAA,IAAAoJ,SAAA,IAAAC,YAAA,KAAAC,YAAA,KAAAC,UAAA,KAAAC,UAAA,KAAAC,YAAA,KAAAC,UAAA,KAAAC,eAAA,yCAAAR,UAAA,mBAAAC,SAAA,oCAAApJ,OAAA,IAAA4J,UAAA,+CAAAhG,WAAA,IAAAxD,KAAA,sBAAAJ,OAAA,8BAAAY,OAAA,KAAAiJ,SAAA,mDAAAC,QAAA,iBAAAC,aAAA,sBAAAC,YAAA,KAAAC,kBAAA,qDAAAnK,QAAA,IAAAU,MAAA,IAAA0J,OAAA,IAAAC,UAAA,IAAAC,OAAA,IAAAhK,KAAA,MAAAb,SAAA,MAAAC,cAAA,uBAAA6K,yBAAA,mCAAAC,uBAAA,iCAAAC,UAAA,MAAAC,aAAA,IAAAC,UAAA,IAAAC,eAAA,sBAAAC,iBAAA,wBAAA3C,KAAA,MAAA4C,YAAA,MAAA3B,KAAA,KAAA4B,gBAAA,qDAAAjH,WAAA,MAAAkH,iBAAA,0BAAA1K,KAAA,+BAAA8E,QAAA,IAAArB,SAAA,IAAAkH,gBAAA,uBAAAC,aAAA,oBAAApH,WAAA,IAAAqH,gBAAA,UAAAnM"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as n,c as t,f as o,h as e,a as s}from"./p-4592810d.js";import{c as i}from"./p-fbb226aa.js";import{c as r}from"./p-c87b4d11.js";import"./p-86133aa5.js";const d="*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.dso-manual-input-button {\n cursor: text;\n}\n\n.dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n outline-offset: 2px;\n}\n.dso-tertiary:active {\n outline: 0;\n}\n.dso-tertiary[disabled] {\n color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n color: #173521;\n}\n.dso-tertiary.dso-align {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\n}\n.dso-tertiary.dso-truncate {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dso-tertiary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n margin-left: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n margin-left: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n vertical-align: middle;\n}\n\n.dso-input-number:not(.form-group) {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n}\n.dso-input-number label {\n width: 100%;\n}\n.dso-input-number .dso-input-step-counter {\n align-self: center;\n background-color: transparent;\n border: 0;\n display: inline-block;\n height: 1.5rem;\n text-align: center;\n width: 1.5rem;\n}\n.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {\n outline: 0;\n}\n.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.dso-input-number .dso-input-step-counter[type=number] {\n -moz-appearance: textfield;\n}\n\n.dso-button-group {\n display: flex;\n flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n background-color: #fff;\n border-color: #e5e5e5;\n color: #666;\n pointer-events: none;\n}\n.dso-button-group > * {\n border-radius: 0;\n}\n.dso-button-group > *:first-child {\n border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n border-left-style: none !important;\n}\n.dso-button-group > *:last-child {\n border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n background-color: #fff;\n border-color: #ccc;\n color: #191919;\n border-style: solid;\n border-width: 1px;\n flex-wrap: nowrap;\n padding: 0 16px;\n}\n@media screen and (max-width: 767px) {\n .dso-button-group > .dso-input-number {\n justify-content: center;\n }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n background-color: #fff;\n border-color: #ccc;\n color: #666;\n opacity: 1;\n}\n.dso-button-group .dso-list-button {\n padding-right: 15px;\n}\n\n.dso-selectable {\n position: relative;\n display: var(--dso-selectable-display, block);\n padding: 0 0 0 32px;\n}\n.dso-selectable label {\n font-weight: 400;\n line-height: 24px;\n margin: 0;\n}\n.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,\n.dso-selectable input[type=radio][disabled] + label::before,\n.dso-selectable input[type=radio][disabled]:active + label::before,\n.dso-selectable input[type=radio][disabled]:focus + label::before {\n background-color: #fff;\n box-shadow: 0 0 0 2px #e5e5e5;\n}\n.dso-selectable input[type=checkbox],\n.dso-selectable input[type=radio] {\n height: 24px;\n left: 0;\n margin: 0;\n opacity: 0;\n position: absolute;\n top: 0;\n width: 24px;\n z-index: 100;\n zoom: 1;\n}\n@media (prefers-contrast: more) {\n .dso-selectable input[type=checkbox],\n .dso-selectable input[type=radio] {\n opacity: 1;\n }\n}\n.dso-selectable input[type=checkbox]:not([disabled]),\n.dso-selectable input[type=radio]:not([disabled]) {\n cursor: pointer;\n}\n.dso-selectable input[type=checkbox] + label,\n.dso-selectable input[type=radio] + label {\n display: inline;\n font-style: normal;\n padding-left: 0;\n}\n.dso-selectable input[type=checkbox] + label::before,\n.dso-selectable input[type=radio] + label::before {\n background: #fff;\n border: 0;\n box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);\n content: \"\";\n height: 20px;\n left: 2px;\n position: absolute;\n top: 2px;\n width: 20px;\n}\n.dso-selectable input[type=checkbox]:focus,\n.dso-selectable input[type=radio]:focus {\n outline: 0;\n}\n.dso-selectable input[type=checkbox]:focus + label::before,\n.dso-selectable input[type=radio]:focus + label::before {\n box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);\n height: 18px;\n left: 3px;\n top: 3px;\n width: 18px;\n}\n.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,\n.dso-selectable input[type=radio]:active + label::before,\n.dso-selectable input[type=radio].active + label::before {\n background-color: #ebf3e6;\n box-shadow: 0 0 0 1px #275937;\n height: 22px;\n left: 1px;\n top: 1px;\n width: 22px;\n}\n.dso-selectable input[type=checkbox] + label::before {\n border-radius: 4px;\n}\n.dso-selectable input[type=checkbox] + label::after {\n background: transparent;\n content: \"\";\n left: 6px;\n opacity: 0;\n position: absolute;\n top: 6px;\n zoom: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {\n opacity: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after {\n border: solid;\n border-color: var(--dso-selectable-color, #39870c);\n border-top-color: transparent;\n border-width: 0 0 3px 3px;\n height: 8px;\n transform: rotate(-45deg);\n width: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n background-color: var(--dso-selectable-color, #39870c);\n height: 12px;\n width: 12px;\n}\n.dso-selectable input[type=radio] + label::before {\n border-radius: 50%;\n}\n.dso-selectable input[type=radio] + label::after {\n background-color: transparent;\n border-radius: 50%;\n content: \"\";\n height: 12px;\n left: 6px;\n opacity: 0;\n position: absolute;\n top: 6px;\n width: 12px;\n zoom: 1;\n}\n.dso-selectable input[type=radio]:checked + label::after {\n background-color: var(--dso-selectable-color, #39870c);\n opacity: 1;\n}\n.dso-selectable label {\n font-weight: 700;\n}\n\n.dso-list-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #ccc;\n color: #191919;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n font-weight: 600;\n padding: 15px 47px 15px 15px;\n position: relative;\n text-align: left;\n white-space: normal;\n width: 100%;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n outline-offset: 2px;\n}\n.dso-list-button:active {\n outline: 0;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n background-color: #fff;\n border-color: #ccc;\n color: #666;\n opacity: 1;\n}\n.dso-list-button.dso-selected {\n border-color: #39870c;\n border-width: 1px;\n box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n .dso-list-button.dso-selected.dso-single-count {\n border-right: 0;\n box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n }\n}\n.dso-list-button > span {\n display: block;\n}\n.dso-list-button .dso-sublabel {\n font-weight: 400;\n width: 100%;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di,\n.dso-list-button .dso-count {\n height: 24px;\n position: absolute;\n right: 15px;\n top: 15px;\n width: 24px;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di {\n color: #39870c;\n page-break-before: always;\n}\n.dso-list-button .dso-count {\n font-weight: 700;\n}\n@media screen and (max-width: 767px) {\n .dso-list-button.dso-selected.dso-single-count::after {\n width: 0;\n }\n}\n.dso-list-button .dso-sublabel {\n padding-left: 32px;\n}\n\n.dso-list-button + .dso-list-button,\n.dso-list-button + .dso-button-group,\n.dso-button-group + .dso-list-button,\n.dso-button-group + .dso-button-group {\n margin-top: 4px;\n}\n\n.dso-input-wrapper {\n position: relative;\n}\n.dso-input-wrapper .form-control {\n width: 9ch;\n}\n\n.form-control {\n display: block;\n width: 100%;\n height: 40px;\n padding: 6px 14px;\n font-size: 1rem;\n line-height: 1.5;\n color: #191919;\n background-color: #fff;\n background-image: none;\n border: 1px solid #275937;\n border-radius: 4px;\n transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.form-control::-moz-placeholder {\n color: #666;\n opacity: 1;\n}\n.form-control:-ms-input-placeholder {\n color: #666;\n}\n.form-control::-webkit-input-placeholder {\n color: #666;\n}\n.form-control::-ms-expand {\n background-color: transparent;\n border: 0;\n}\n.form-control:focus {\n border-color: #275937;\n outline: 0;\n box-shadow: inset 0 0 0 1px #275937;\n}\n.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\n background-color: #fff;\n opacity: 1;\n}\n.form-control[disabled], fieldset[disabled] .form-control {\n cursor: default;\n}\n.form-control[disabled] {\n border-color: #e5e5e5;\n color: #999;\n}\n.form-control[readonly] {\n border-width: 1px;\n}\n.form-control[type=text] {\n line-height: 40px;\n}\n.form-control[size] {\n width: auto;\n}\n\n.dso-manual-input-button[type=button] {\n background-color: transparent;\n border: 0;\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n}\n\n.hidden {\n display: none !important;\n}";const a=class{constructor(o){n(this,o);this.dsoCountChange=t(this,"dsoCountChange",7);this.dsoSelectedChange=t(this,"dsoSelectedChange",7);this.manualInputWrapperElement=undefined;this.manualCount=undefined;this.label=undefined;this.sublabel=undefined;this.count=undefined;this.min=undefined;this.max=undefined;this.checked=false;this.disabled=false;this.subcontentPrefix=undefined;this.manual=true}get subcontentSlot(){return this.host.querySelector("[slot='subcontent']")}watchManualCallback(){if(!this.manual&&this.manualCount){this.stopManualCountInput()}}connectedCallback(){this.mutationObserver=new MutationObserver((()=>o(this.host)));this.mutationObserver.observe(this.host,{characterData:true,childList:true,subtree:true,attributes:true})}componentDidRender(){var n,t;if(this.manualCount!==undefined&&this.manualInputWrapperElement&&!this.trap){this.trap=i(this.manualInputWrapperElement,{escapeDeactivates:true,setReturnFocus:false,clickOutsideDeactivates:n=>{this.setCount(n);return true},onDeactivate:()=>this.stopManualCountInput(),onPostDeactivate:()=>{var n;return(n=this.manualInputButtonElement)===null||n===void 0?void 0:n.focus()}}).activate()}else if(this.manualCount===undefined&&this.trap){(n=this.trap)===null||n===void 0?void 0:n.deactivate();delete this.trap}(t=this.subcontentSlot)===null||t===void 0?void 0:t.setAttribute("aria-hidden","true")}disconnectedCallback(){var n,t;(n=this.trap)===null||n===void 0?void 0:n.deactivate();(t=this.mutationObserver)===null||t===void 0?void 0:t.disconnect();delete this.mutationObserver}handleOnChange({target:n}){if(n instanceof HTMLInputElement){this.manualCount=n.valueAsNumber}}stepValue(n,t){if(typeof this.count==="number"){const o=t==="increment"?this.count+1:this.count-1;if(!this.isNewCountValid(o)){return}this.dsoCountChange.emit({originalEvent:n,count:o})}}setCount(n){n.preventDefault();if(typeof this.manualCount==="number"&&this.isNewCountValid(this.manualCount)){this.dsoCountChange.emit({originalEvent:n,count:this.manualCount});this.stopManualCountInput()}}handleSelectClick(n){n.preventDefault();if(this.count!==undefined){this.dsoCountChange.emit({originalEvent:n,count:this.count>0?0:1});return}this.dsoSelectedChange.emit({originalEvent:n,checked:!this.checked})}startManualCountInput(){this.manualCount=this.count}stopManualCountInput(){this.manualCount=undefined}isNewCountValid(n){return!(this.min!==undefined&&this.max!==undefined&&(n<Number(this.min)||n>Number(this.max)))}render(){const n=this.manualCount===undefined;const t=this.checked||this.count!==undefined&&this.count>0;return e("div",{class:r(["dso-button-group",{"dso-disabled":this.disabled}])},e("div",{class:r(["dso-list-button",{"dso-selected":t,"dso-single-count":this.count===1}]),onClick:n=>this.handleSelectClick(n)},e("div",{class:"dso-selectable"},e("input",{id:"dso-list-button-checkbox",type:"checkbox",value:"list-button",name:"naam","aria-describedby":[this.sublabel&&"sublabel",this.subcontentSlot&&"description"].filter((n=>!!n)).join(" ")||null,checked:t,disabled:this.disabled}),e("label",{htmlFor:"dso-list-button-checkbox"},this.label),this.subcontentSlot&&e("div",{class:"sr-only",id:"description"},this.subcontentPrefix&&this.subcontentPrefix+":",e("div",{innerHTML:this.subcontentSlot.innerHTML}))),this.sublabel&&e("span",{class:"dso-sublabel",id:"sublabel"},this.sublabel),e("slot",{name:"subcontent"})),this.count!==undefined&&this.count>0&&e("div",{class:"dso-input-number"},this.manualCount===undefined&&this.count>1&&e("button",{type:"button",class:"dso-tertiary",disabled:this.count===Number(this.min)||this.disabled,onClick:n=>this.stepValue(n,"decrement")},e("dso-icon",{icon:"minus-circle"}),e("span",{class:"sr-only"},"Aantal verlagen")),e("div",{class:"dso-input-wrapper"},this.manualCount===undefined&&this.count>1&&e("input",{class:"dso-input-step-counter",type:"number",tabIndex:-1,"aria-label":"Aantal",value:this.count,readOnly:true}),e("form",{onSubmit:n=>this.setCount(n)},e("div",{ref:n=>this.manualInputWrapperElement=n},e("input",{class:r("form-control",{hidden:n}),type:"number","aria-label":"Aantal",value:this.manualCount,min:this.min,max:this.max,onInput:n=>this.handleOnChange(n)})),this.manual&&e("button",{class:r("dso-manual-input-button",{"sr-only":!n}),type:!n?"submit":"button",disabled:this.disabled,onClick:()=>n&&this.startManualCountInput()},n?e("span",{class:"sr-only"},"Handmatig aantal invullen"):e("span",{class:"sr-only"},"Zet waarde")))),n&&e("button",{type:"button",class:"dso-tertiary",disabled:this.count===Number(this.max)||this.disabled,onClick:n=>this.stepValue(n,"increment")},e("dso-icon",{icon:"plus-circle"}),e("span",{class:"sr-only"},"Aantal verhogen"))))}get host(){return s(this)}static get watchers(){return{manual:["watchManualCallback"]}}};a.style=d;export{a as dso_list_button};
|
|
2
|
+
//# sourceMappingURL=p-638ad5e5.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["listButtonCss","ListButton","subcontentSlot","this","host","querySelector","watchManualCallback","manual","manualCount","stopManualCountInput","connectedCallback","mutationObserver","MutationObserver","forceUpdate","observe","characterData","childList","subtree","attributes","componentDidRender","undefined","manualInputWrapperElement","trap","createFocusTrap","escapeDeactivates","setReturnFocus","clickOutsideDeactivates","e","setCount","onDeactivate","onPostDeactivate","_a","manualInputButtonElement","focus","activate","deactivate","_b","setAttribute","disconnectedCallback","disconnect","handleOnChange","target","HTMLInputElement","valueAsNumber","stepValue","direction","count","newValue","isNewCountValid","dsoCountChange","emit","originalEvent","preventDefault","handleSelectClick","dsoSelectedChange","checked","startManualCountInput","min","max","Number","render","showButtonInputs","selected","h","class","clsx","disabled","onClick","id","type","value","name","sublabel","filter","s","join","htmlFor","label","subcontentPrefix","innerHTML","icon","tabIndex","readOnly","onSubmit","ref","element","hidden","onInput"],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/input-number\";\r\n@use \"~dso-toolkit/src/components/list-button\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-manual-input-button {\r\n cursor: text;\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n @include input-number.root();\r\n}\r\n\r\n.dso-button-group {\r\n @include list-button.button-group(\".dso-input-number\", \".dso-list-button\");\r\n}\r\n\r\n.dso-selectable {\r\n @include selectable.root(\"dso-info\");\r\n\r\n label {\r\n font-weight: 700;\r\n }\r\n}\r\n\r\n.dso-list-button {\r\n @include button.base($modifiers: false);\r\n @include list-button.root();\r\n\r\n .dso-sublabel {\r\n padding-left: selectable.$size + units.$u1;\r\n }\r\n}\r\n\r\n.dso-list-button,\r\n.dso-button-group {\r\n + .dso-list-button,\r\n + .dso-button-group {\r\n @include list-button.sibling();\r\n }\r\n}\r\n\r\n.dso-input-wrapper {\r\n position: relative;\r\n\r\n .form-control {\r\n width: 9ch;\r\n }\r\n}\r\n\r\n.form-control {\r\n @include form-control.root();\r\n}\r\n\r\n.dso-manual-input-button[type=\"button\"] {\r\n background-color: transparent;\r\n border: 0;\r\n bottom: 0;\r\n left: 0;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n}\r\n\r\n.hidden {\r\n display: none !important;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n h,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n State,\r\n Watch,\r\n forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoListButtonElement;\r\n\r\n private trap?: FocusTrap;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private get subcontentSlot() {\r\n return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n }\r\n\r\n @State()\r\n private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n @State()\r\n manualCount?: number;\r\n\r\n /**\r\n * The label of the List Button.\r\n */\r\n @Prop()\r\n label?: string;\r\n\r\n /**\r\n * The sublabel of the List Button.\r\n */\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /**\r\n * When defined the count can show on the List Button.\r\n */\r\n @Prop()\r\n count?: number;\r\n\r\n /**\r\n * The minimum value.\r\n */\r\n @Prop()\r\n min?: string | number;\r\n\r\n /**\r\n * The maximum value.\r\n */\r\n @Prop()\r\n max?: string | number;\r\n\r\n /**\r\n * Whether the List Button is checked.\r\n */\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /**\r\n * Whether the List Button is disabled.\r\n */\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /**\r\n * Prefix to subcontent for the purpose of screenreading.\r\n */\r\n @Prop()\r\n subcontentPrefix?: string;\r\n\r\n /**\r\n * Allow user to directly input a value.\r\n *\r\n * Set to `false` to force users to use plus/minus buttons.\r\n */\r\n @Prop()\r\n manual = true;\r\n\r\n /**\r\n * Emitted when the user changes the count.\r\n */\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /**\r\n * Emitted when the user activates the List Button itself.\r\n *\r\n * Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n @Watch(\"manual\")\r\n watchManualCallback() {\r\n if (!this.manual && this.manualCount) {\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n escapeDeactivates: true,\r\n setReturnFocus: false,\r\n\r\n clickOutsideDeactivates: (e) => {\r\n this.setCount(e);\r\n\r\n return true;\r\n },\r\n onDeactivate: () => this.stopManualCountInput(),\r\n onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n }).activate();\r\n } else if (this.manualCount === undefined && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n\r\n this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.trap?.deactivate();\r\n\r\n this.mutationObserver?.disconnect();\r\n delete this.mutationObserver;\r\n }\r\n\r\n private handleOnChange({ target }: Event): void {\r\n if (target instanceof HTMLInputElement) {\r\n this.manualCount = target.valueAsNumber;\r\n }\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (!this.isNewCountValid(newValue)) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private setCount(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.manualCount,\r\n });\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private startManualCountInput(): void {\r\n this.manualCount = this.count;\r\n }\r\n\r\n private stopManualCountInput(): void {\r\n this.manualCount = undefined;\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n return !(\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) || newValue > Number(this.max))\r\n );\r\n }\r\n\r\n render() {\r\n const showButtonInputs = this.manualCount === undefined;\r\n\r\n const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n aria-describedby={\r\n [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") || null\r\n }\r\n checked={selected}\r\n disabled={this.disabled}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n {this.subcontentSlot && (\r\n <div class=\"sr-only\" id=\"description\">\r\n {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n </div>\r\n )}\r\n </div>\r\n {this.sublabel && (\r\n <span class=\"dso-sublabel\" id=\"sublabel\">\r\n {this.sublabel}\r\n </span>\r\n )}\r\n <slot name=\"subcontent\" />\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.min) || this.disabled}\r\n onClick={(e) => this.stepValue(e, \"decrement\")}\r\n >\r\n <dso-icon icon=\"minus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verlagen</span>\r\n </button>\r\n )}\r\n\r\n <div class=\"dso-input-wrapper\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <input\r\n class=\"dso-input-step-counter\"\r\n type=\"number\"\r\n tabIndex={-1}\r\n aria-label=\"Aantal\"\r\n value={this.count}\r\n readOnly\r\n />\r\n )}\r\n\r\n <form onSubmit={(e) => this.setCount(e)}>\r\n <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n <input\r\n class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n type=\"number\"\r\n aria-label=\"Aantal\"\r\n value={this.manualCount}\r\n min={this.min}\r\n max={this.max}\r\n onInput={(e) => this.handleOnChange(e)}\r\n />\r\n </div>\r\n\r\n {this.manual && (\r\n <button\r\n class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n type={!showButtonInputs ? \"submit\" : \"button\"}\r\n disabled={this.disabled}\r\n onClick={() => showButtonInputs && this.startManualCountInput()}\r\n >\r\n {showButtonInputs ? (\r\n <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n ) : (\r\n <span class=\"sr-only\">Zet waarde</span>\r\n )}\r\n </button>\r\n )}\r\n </form>\r\n </div>\r\n\r\n {showButtonInputs && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.max) || this.disabled}\r\n onClick={(e) => this.stepValue(e, \"increment\")}\r\n >\r\n <dso-icon icon=\"plus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verhogen</span>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as o,c as d,h as s,a}from"./p-4592810d.js";import{v as i}from"./p-14616bce.js";const l="@keyframes slideInFromTop{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}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}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:1s ease-out 0s 1 slideInFromTop}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>.dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>.dso-body img{height:auto;max-width:100%}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{height:auto;max-width:100%}.dso-modal .dso-body:focus-visible{outline:none}.dso-modal .dso-footer{min-block-size:80px;padding:16px 32px;text-align:end}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding:8px 16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding:16px 24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding:8px 32px}}.dso-close dso-icon{color:#39870c}";const e=class{constructor(s){o(this,s);this.dsoClose=d(this,"dsoClose",7);this.ariaId=i();this.hasFooter=undefined;this.fullscreen=undefined;this.modalTitle=undefined;this.role="dialog";this.showCloseButton=true}componentWillLoad(){this.hasFooter=this.host.querySelector("[slot='footer']")!==null}componentDidLoad(){var o;(o=this.htmlDialogElement)===null||o===void 0?void 0:o.showModal()
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as o,c as d,h as s,a}from"./p-4592810d.js";import{v as i}from"./p-14616bce.js";const l="@keyframes slideInFromTop{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}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}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:1s ease-out 0s 1 slideInFromTop}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>.dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>.dso-body img{height:auto;max-width:100%}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{height:auto;max-width:100%}.dso-modal .dso-body:focus-visible{outline:none}.dso-modal .dso-footer{min-block-size:80px;padding:16px 32px;text-align:end}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding:8px 16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding:16px 24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding:8px 32px}}.dso-close dso-icon{color:#39870c}";const e=class{constructor(s){o(this,s);this.dsoClose=d(this,"dsoClose",7);this.ariaId=i();this.hasFooter=undefined;this.fullscreen=undefined;this.modalTitle=undefined;this.role="dialog";this.showCloseButton=true}componentWillLoad(){this.hasFooter=this.host.querySelector("[slot='footer']")!==null}componentDidLoad(){var o;if((o=this.htmlDialogElement)===null||o===void 0?void 0:o.isConnected){this.htmlDialogElement.showModal()}document.body.classList.add("dso-modal-open")}disconnectedCallback(){var o;document.body.classList.remove("dso-modal-open");(o=this.htmlDialogElement)===null||o===void 0?void 0:o.close()}render(){var o;return s("dialog",{class:"dso-modal",role:(o=this.role)!==null&&o!==void 0?o:undefined,"aria-modal":"true","aria-labelledby":this.ariaId,ref:o=>this.htmlDialogElement=o,onCancel:o=>{o.preventDefault();this.dsoClose.emit({originalEvent:o})}},s("div",{class:"dso-dialog",role:"document"},this.modalTitle?s("div",{class:"dso-header"},s("h2",{id:this.ariaId},this.modalTitle),this.showCloseButton&&s("button",{type:"button",class:"dso-close",onClick:o=>this.dsoClose.emit({originalEvent:o})},s("dso-icon",{icon:"times"}),s("span",{class:"sr-only"},"Sluiten"))):s("span",{class:"sr-only",id:this.ariaId},"Dialoog"),s("dso-scrollable",null,s("div",{class:"dso-body",tabIndex:0},s("slot",{name:"body"}))),this.hasFooter&&s("div",{class:"dso-footer"},s("slot",{name:"footer"}))))}get host(){return a(this)}};e.style=l;export{e as dso_modal};
|
|
2
|
+
//# sourceMappingURL=p-b36ab83a.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["modalCss","Modal","v4","componentWillLoad","this","hasFooter","host","querySelector","componentDidLoad","_a","htmlDialogElement","isConnected","showModal","document","body","classList","add","disconnectedCallback","remove","close","render","h","class","role","undefined","ariaId","ref","element","onCancel","e","preventDefault","dsoClose","emit","originalEvent","modalTitle","id","showCloseButton","type","onClick","icon","tabIndex","name"],"sources":["src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n// fullscreen option\r\n:host([fullscreen]) dialog {\r\n @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n :host dialog {\r\n @include modal.fullscreen();\r\n }\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n dso-icon {\r\n color: modal.$close-icon-color;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-modal\",\r\n styleUrl: \"modal.scss\",\r\n shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n private htmlDialogElement?: HTMLDialogElement;\r\n\r\n @Element()\r\n host!: HTMLDsoModalElement;\r\n\r\n @State()\r\n ariaId = v4();\r\n\r\n @State()\r\n hasFooter?: boolean;\r\n\r\n /**\r\n * when set the modal will be shown in fullscreen.\r\n */\r\n @Prop({ reflect: true })\r\n fullscreen?: boolean;\r\n\r\n /**\r\n * The title of the Modal.\r\n */\r\n @Prop()\r\n modalTitle?: string;\r\n\r\n /**\r\n * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n */\r\n @Prop()\r\n role: string | null = \"dialog\";\r\n\r\n /**\r\n * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n *\r\n * Needs `modalTitle` to be set.\r\n */\r\n @Prop()\r\n showCloseButton = true;\r\n\r\n /**\r\n * Emitted when the user wants to close the Modal.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n componentWillLoad(): void {\r\n this.hasFooter = this.host.querySelector(\"[slot='footer']\") !== null;\r\n }\r\n\r\n componentDidLoad(): void {\r\n if (this.htmlDialogElement?.isConnected) {\r\n this.htmlDialogElement.showModal();\r\n }\r\n\r\n document.body.classList.add(\"dso-modal-open\");\r\n }\r\n\r\n disconnectedCallback(): void {\r\n document.body.classList.remove(\"dso-modal-open\");\r\n this.htmlDialogElement?.close();\r\n }\r\n\r\n render() {\r\n return (\r\n <dialog\r\n class=\"dso-modal\"\r\n role={this.role ?? undefined}\r\n aria-modal=\"true\"\r\n aria-labelledby={this.ariaId}\r\n ref={(element) => (this.htmlDialogElement = element)}\r\n onCancel={(e) => {\r\n e.preventDefault();\r\n\r\n this.dsoClose.emit({ originalEvent: e });\r\n }}\r\n >\r\n <div class=\"dso-dialog\" role=\"document\">\r\n {this.modalTitle ? (\r\n <div class=\"dso-header\">\r\n <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n {this.showCloseButton && (\r\n <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n )}\r\n </div>\r\n ) : (\r\n <span class=\"sr-only\" id={this.ariaId}>\r\n Dialoog\r\n </span>\r\n )}\r\n\r\n <dso-scrollable>\r\n <div class=\"dso-body\" tabIndex={0}>\r\n <slot name=\"body\" />\r\n </div>\r\n </dso-scrollable>\r\n\r\n {this.hasFooter && (\r\n <div class=\"dso-footer\">\r\n <slot name=\"footer\" />\r\n </div>\r\n )}\r\n </div>\r\n </dialog>\r\n );\r\n }\r\n}\r\n"],"mappings":"wFAAA,MAAMA,EAAW,+3L,MCUJC,EAAK,M,wEAOPC,I,uFAqBa,S,qBAQJ,I,CAQlB,iBAAAC,GACEC,KAAKC,UAAYD,KAAKE,KAAKC,cAAc,qBAAuB,I,CAGlE,gBAAAC,G,MACE,IAAIC,EAAAL,KAAKM,qBAAiB,MAAAD,SAAA,SAAAA,EAAEE,YAAa,CACvCP,KAAKM,kBAAkBE,W,CAGzBC,SAASC,KAAKC,UAAUC,IAAI,iB,CAG9B,oBAAAC,G,MACEJ,SAASC,KAAKC,UAAUG,OAAO,mBAC/BT,EAAAL,KAAKM,qBAAiB,MAAAD,SAAA,SAAAA,EAAEU,O,CAG1B,MAAAC,G,MACE,OACEC,EAAA,UACEC,MAAM,YACNC,MAAMd,EAAAL,KAAKmB,QAAI,MAAAd,SAAA,EAAAA,EAAIe,UAAS,aACjB,OAAM,kBACApB,KAAKqB,OACtBC,IAAMC,GAAavB,KAAKM,kBAAoBiB,EAC5CC,SAAWC,IACTA,EAAEC,iBAEF1B,KAAK2B,SAASC,KAAK,CAAEC,cAAeJ,GAAI,GAG1CR,EAAA,OAAKC,MAAM,aAAaC,KAAK,YAC1BnB,KAAK8B,WACJb,EAAA,OAAKC,MAAM,cACTD,EAAA,MAAIc,GAAI/B,KAAKqB,QAASrB,KAAK8B,YAC1B9B,KAAKgC,iBACJf,EAAA,UAAQgB,KAAK,SAASf,MAAM,YAAYgB,QAAUT,GAAMzB,KAAK2B,SAASC,KAAK,CAAEC,cAAeJ,KAC1FR,EAAA,YAAUkB,KAAK,UACflB,EAAA,QAAMC,MAAM,WAAS,aAK3BD,EAAA,QAAMC,MAAM,UAAUa,GAAI/B,KAAKqB,QAAM,WAKvCJ,EAAA,sBACEA,EAAA,OAAKC,MAAM,WAAWkB,SAAU,GAC9BnB,EAAA,QAAMoB,KAAK,WAIdrC,KAAKC,WACJgB,EAAA,OAAKC,MAAM,cACTD,EAAA,QAAMoB,KAAK,a"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as t,h as i,a as s}from"./p-4592810d.js";function o(e){if(!e){return}const t=e.split("-");if(t.length===3&&typeof t[0]==="string"&&typeof t[1]==="string"&&typeof t[2]==="string"){const[e,i,s]=t;const o=e.padStart(2,"0");const d=i.padStart(2,"0");const n=s.padStart(4,"0");return[n,d,o].join("-")}return e}function d(e){if(!e){return""}const t=e.getDate().toString(10).padStart(2,"0");const i=(e.getMonth()+1).toString(10).padStart(2,"0");const s=e.getFullYear().toString(10).padStart(4,"0");return[t,i,s].join("-")}const n=".sc-dso-date-picker-h{display:block}[invalid].sc-dso-date-picker-h:not([invalid=false]) .dso-date__input.sc-dso-date-picker{border-color:#ce3f51}.dso-date__input.sc-dso-date-picker{display:block;width:100%;height:40px;padding:6px 14px;font-size:1rem;line-height:1.5;color:#191919;background-color:#fff;background-image:none;border:1px solid #275937;border-radius:4px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s}.dso-date__input.sc-dso-date-picker::-moz-placeholder{color:#666;opacity:1}.dso-date__input.sc-dso-date-picker:-ms-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-webkit-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-ms-expand{background-color:transparent;border:0}.dso-date__input.sc-dso-date-picker:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled].sc-dso-date-picker,.dso-date__input[readonly].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{background-color:#fff;opacity:1}.dso-date__input[disabled].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{cursor:default}.dso-date__input[disabled].sc-dso-date-picker{border-color:#e5e5e5;color:#999}.dso-date__input[readonly].sc-dso-date-picker{border-width:1px}.dso-date__input[type=text].sc-dso-date-picker{line-height:40px}.dso-date__input[size].sc-dso-date-picker{width:auto}.dso-date__input.sc-dso-date-picker::-webkit-calendar-picker-indicator{position:relative;inset-inline-end:-8px;font-size:1.75rem;filter:invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%)}";const a=class{constructor(i){e(this,i);this.dsoDateChange=t(this,"dsoDateChange",7);this.dsoBlur=t(this,"dsoBlur",7);this.dsoKeyUp=t(this,"dsoKeyUp",7);this.dsoKeyDown=t(this,"dsoKeyDown",7);this.dsoFocus=t(this,"dsoFocus",7);this.handleBlur=e=>{e.stopPropagation();const{target:t}=e;if(!(t instanceof HTMLInputElement)){return}const{validity:i}=t;const{value:s,valueAsDate:o}=this.dateValues(t);const d=this.validityToError(i);const n={component:"dso-date-picker",originalEvent:e,validity:i,value:s,valueAsDate:o,error:d};this.dsoBlur.emit(n)};this.handleFocus=e=>{e.stopPropagation();this.dsoFocus.emit({originalEvent:e,component:"dso-date-picker"})};this.handleKeyUp=e=>{e.stopPropagation();this.dsoKeyUp.emit({component:"dso-date-picker",originalEvent:e})};this.handleKeyDown=e=>{e.stopPropagation();this.dsoKeyDown.emit({component:"dso-date-picker",originalEvent:e})};this.handleInputChange=e=>{const t=e.target;if(!(t instanceof HTMLInputElement)){return}const{validity:i}=t;const{value:s,valueAsDate:o}=this.dateValues(t);const d=this.validityToError(i);const n={component:"dso-date-picker",originalEvent:e,validity:i,value:s,valueAsDate:o,error:d};this.dsoDateChange.emit(n)};this.name="dso-date";this.identifier=undefined;this.disabled=false;this.required=false;this.invalid=undefined;this.describedBy=undefined;this.dsoAutofocus=false;this.value="";this.min=undefined;this.max=undefined}dateValues(e){const{valueAsDate:t,validity:i}=e;return{value:d(t),valueAsDate:!i.rangeOverflow&&!i.rangeUnderflow&&t||undefined}}validityToError(e){if(e.valueMissing){return"required"}if(e.rangeUnderflow){return"min-range"}if(e.rangeOverflow){return"max-range"}if(!e.valid){return"invalid"}return undefined}render(){var e;return i("input",{type:"date",id:this.identifier,class:"dso-date__input",value:o(this.value),name:this.name,min:o(this.min),max:o(this.max),disabled:this.disabled||undefined,required:this.required||undefined,"aria-autocomplete":"none","aria-invalid":(e=this.invalid)===null||e===void 0?void 0:e.toString(),"aria-describedby":this.describedBy,autoComplete:"off",autofocus:this.dsoAutofocus||undefined,onBlur:this.handleBlur,onFocus:this.handleFocus,onKeyUp:this.handleKeyUp,onKeyDown:this.handleKeyDown,onChange:this.handleInputChange})}get element(){return s(this)}};a.style=n;export{a as dso_date_picker};
|
|
2
|
+
//# sourceMappingURL=p-f6d1d215.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["parseToValueFormat","value","matches","split","length","d","m","y","dd","padStart","mm","yyyy","join","parseToDutchFormat","date","getDate","toString","getMonth","getFullYear","datePickerCss","DsoDatePicker","this","handleBlur","e","stopPropagation","target","HTMLInputElement","validity","valueAsDate","dateValues","error","validityToError","event","component","originalEvent","dsoBlur","emit","handleFocus","dsoFocus","handleKeyUp","dsoKeyUp","handleKeyDown","dsoKeyDown","handleInputChange","dsoDateChange","rangeOverflow","rangeUnderflow","undefined","valueMissing","valid","render","h","type","id","identifier","class","name","min","max","disabled","required","_a","invalid","describedBy","autoComplete","autofocus","dsoAutofocus","onBlur","onFocus","onKeyUp","onKeyDown","onChange"],"sources":["src/components/date-picker/date-utils.ts","src/components/date-picker/date-picker.scss?tag=dso-date-picker&encapsulation=scoped","src/components/date-picker/date-picker.tsx"],"sourcesContent":["/**\r\n * dd-mm-yyyy to yyyy-mm-dd\r\n */\r\nexport function parseToValueFormat(value: string | undefined): string | undefined {\r\n if (!value) {\r\n return;\r\n }\r\n\r\n const matches = value.split(\"-\");\r\n\r\n if (\r\n matches.length === 3 &&\r\n typeof matches[0] === \"string\" &&\r\n typeof matches[1] === \"string\" &&\r\n typeof matches[2] === \"string\"\r\n ) {\r\n const [d, m, y] = matches;\r\n\r\n const dd = d.padStart(2, \"0\");\r\n const mm = m.padStart(2, \"0\");\r\n const yyyy = y.padStart(4, \"0\");\r\n\r\n return [yyyy, mm, dd].join(\"-\");\r\n }\r\n\r\n return value;\r\n}\r\n\r\n/**\r\n * yyyy-mm-dd to dd-mm-yyyy\r\n */\r\nexport function parseToDutchFormat(date: Date | null): string {\r\n if (!date) {\r\n return \"\";\r\n }\r\n\r\n const dd = date.getDate().toString(10).padStart(2, \"0\");\r\n const mm = (date.getMonth() + 1).toString(10).padStart(2, \"0\");\r\n const yyyy = date.getFullYear().toString(10).padStart(4, \"0\");\r\n\r\n return [dd, mm, yyyy].join(\"-\");\r\n}\r\n","@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@use \"date-picker.variables\" as core-date-picker-variables;\r\n\r\n:host {\r\n display: block;\r\n\r\n &[invalid]:not([invalid=\"false\"]) {\r\n .dso-date__input {\r\n border-color: colors.$danger-color;\r\n }\r\n }\r\n}\r\n\r\n.dso-date__input {\r\n @include form-control.root();\r\n\r\n &::-webkit-calendar-picker-indicator {\r\n position: relative;\r\n inset-inline-end: -8px;\r\n\r\n font-size: 1.75rem;\r\n\r\n filter: invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%);\r\n }\r\n}\r\n","import { Component, ComponentInterface, Prop, Element, h, Event, EventEmitter } from \"@stencil/core\";\r\n\r\nimport {\r\n DatePickerBlurEvent,\r\n DatePickerChangeEvent,\r\n DatePickerError,\r\n DatePickerFocusEvent,\r\n DatePickerKeyboardEvent,\r\n} from \"./date-picker.interfaces\";\r\nimport { parseToValueFormat, parseToDutchFormat } from \"./date-utils\";\r\n\r\n@Component({\r\n tag: \"dso-date-picker\",\r\n styleUrl: \"date-picker.scss\",\r\n shadow: false,\r\n scoped: true,\r\n})\r\nexport class DsoDatePicker implements ComponentInterface {\r\n /**\r\n * Reference to host HTML element.\r\n */\r\n @Element()\r\n element!: HTMLDsoDatePickerElement;\r\n\r\n /**\r\n * Name of the date picker input.\r\n */\r\n @Prop()\r\n name = \"dso-date\";\r\n\r\n /**\r\n * Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.\r\n */\r\n @Prop()\r\n identifier: string | undefined;\r\n\r\n /**\r\n * Makes the date picker input component disabled. This prevents users from being able to\r\n * interact with the input, and conveys its inactive state to assistive technologies.\r\n */\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /**\r\n * Should the input be marked as required?\r\n */\r\n @Prop({ reflect: true })\r\n required = false;\r\n\r\n /**\r\n * Is input invalid?\r\n */\r\n @Prop({ reflect: true })\r\n invalid?: boolean;\r\n\r\n /**\r\n * ID of element that describes the input element\r\n */\r\n @Prop()\r\n describedBy?: string;\r\n\r\n /**\r\n * Should the input be focused on load?\r\n */\r\n @Prop()\r\n dsoAutofocus = false;\r\n\r\n /**\r\n * Date value. Must be in Dutch date format: DD-MM-YYYY.\r\n */\r\n @Prop({ reflect: true })\r\n value = \"\";\r\n\r\n /**\r\n * Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n * This setting can be used alone or together with the max property.\r\n */\r\n @Prop()\r\n min: string | undefined;\r\n\r\n /**\r\n * Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n * This setting can be used alone or together with the min property.\r\n */\r\n @Prop()\r\n max: string | undefined;\r\n\r\n /**\r\n * Events section.\r\n */\r\n\r\n /**\r\n * Event emitted when a date is selected.\r\n */\r\n @Event()\r\n dsoDateChange!: EventEmitter<DatePickerChangeEvent>;\r\n\r\n /**\r\n * Event emitted the date picker input is blurred.\r\n */\r\n @Event()\r\n dsoBlur!: EventEmitter<DatePickerBlurEvent>;\r\n\r\n /**\r\n * Event emitted on key up in the date picker input.\r\n */\r\n @Event()\r\n dsoKeyUp!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n /**\r\n * Event emitted on key down in the date picker input.\r\n */\r\n @Event()\r\n dsoKeyDown!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n /**\r\n * Event emitted the date picker input is focused.\r\n */\r\n @Event()\r\n dsoFocus!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n private handleBlur = (e: FocusEvent) => {\r\n e.stopPropagation();\r\n\r\n const { target } = e;\r\n\r\n if (!(target instanceof HTMLInputElement)) {\r\n return;\r\n }\r\n\r\n const { validity } = target;\r\n const { value, valueAsDate } = this.dateValues(target);\r\n const error = this.validityToError(validity);\r\n\r\n const event: DatePickerBlurEvent = {\r\n component: \"dso-date-picker\",\r\n originalEvent: e,\r\n validity,\r\n value,\r\n valueAsDate,\r\n error,\r\n };\r\n\r\n this.dsoBlur.emit(event);\r\n };\r\n\r\n private handleFocus = (event: FocusEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoFocus.emit({\r\n originalEvent: event,\r\n component: \"dso-date-picker\",\r\n });\r\n };\r\n\r\n private handleKeyUp = (event: KeyboardEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoKeyUp.emit({\r\n component: \"dso-date-picker\",\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoKeyDown.emit({\r\n component: \"dso-date-picker\",\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n private handleInputChange = (e: Event) => {\r\n const target = e.target;\r\n\r\n if (!(target instanceof HTMLInputElement)) {\r\n return;\r\n }\r\n\r\n const { validity } = target;\r\n const { value, valueAsDate } = this.dateValues(target);\r\n const error = this.validityToError(validity);\r\n\r\n const event: DatePickerChangeEvent = {\r\n component: \"dso-date-picker\",\r\n originalEvent: e,\r\n validity,\r\n value,\r\n valueAsDate,\r\n error,\r\n };\r\n\r\n this.dsoDateChange.emit(event);\r\n };\r\n\r\n private dateValues(target: HTMLInputElement): { value: string; valueAsDate: Date | undefined } {\r\n const { valueAsDate, validity } = target;\r\n\r\n return {\r\n value: parseToDutchFormat(valueAsDate),\r\n valueAsDate: (!validity.rangeOverflow && !validity.rangeUnderflow && valueAsDate) || undefined,\r\n };\r\n }\r\n\r\n private validityToError(validity: ValidityState): DatePickerError | undefined {\r\n if (validity.valueMissing) {\r\n return \"required\";\r\n }\r\n\r\n if (validity.rangeUnderflow) {\r\n return \"min-range\";\r\n }\r\n\r\n if (validity.rangeOverflow) {\r\n return \"max-range\";\r\n }\r\n\r\n if (!validity.valid) {\r\n return \"invalid\";\r\n }\r\n\r\n return undefined;\r\n }\r\n\r\n render() {\r\n return (\r\n <input\r\n type=\"date\"\r\n id={this.identifier}\r\n class=\"dso-date__input\"\r\n value={parseToValueFormat(this.value)}\r\n name={this.name}\r\n min={parseToValueFormat(this.min)}\r\n max={parseToValueFormat(this.max)}\r\n disabled={this.disabled || undefined}\r\n required={this.required || undefined}\r\n aria-autocomplete=\"none\"\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={this.describedBy}\r\n autoComplete=\"off\"\r\n autofocus={this.dsoAutofocus || undefined}\r\n onBlur={this.handleBlur}\r\n onFocus={this.handleFocus}\r\n onKeyUp={this.handleKeyUp}\r\n onKeyDown={this.handleKeyDown}\r\n onChange={this.handleInputChange}\r\n />\r\n );\r\n }\r\n}\r\n"],"mappings":"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"}
|