npm - @dso-toolkit/core - Versions diffs - 68.3.0 → 68.5.0 - Mend

@dso-toolkit/core 68.3.0 → 68.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (290) hide show

package/dist/components/slide-toggle.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { v as v4 } from './v4.js';
-const slideToggleCss = "button.dso-slider{border:0;padding:0}button.dso-slider:focus-visible{outline:2px solid #323232;outline-offset:1px}button.dso-slider svg rect{fill:#999;transition:fill 0.25s}button.dso-slider svg circle{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:translateX(10px);fill:#fff}button.dso-slider[aria-checked=true] svg rect{fill:#275937}button.dso-slider[aria-checked=true] svg circle{transform:translateX(30px);fill:#fff}button.dso-slider[disabled] svg rect{fill:#ccc}button.dso-slider[disabled] svg circle{fill:#e5e5e5}button.dso-slider[disabled][aria-checked=true] svg rect{fill:#a8bcaf}button.dso-slider[disabled][aria-checked=true] svg circle{fill:#e5e5e5}.dso-slider{border-radius:24px;display:inline-flex}.dso-slider:hover{cursor:pointer}";
+const slideToggleCss = ".sc-dso-slide-toggle-h{display:inline-block;padding-block-start:2px}button.dso-slider.sc-dso-slide-toggle{border:0;padding:0}button.dso-slider.sc-dso-slide-toggle:focus-visible{outline:2px solid #323232;outline-offset:1px}button.dso-slider.sc-dso-slide-toggle svg.sc-dso-slide-toggle rect.sc-dso-slide-toggle{fill:#999;transition:fill 0.25s}button.dso-slider.sc-dso-slide-toggle svg.sc-dso-slide-toggle circle.sc-dso-slide-toggle{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:translateX(10px);fill:#fff}button.dso-slider[aria-checked=true].sc-dso-slide-toggle svg.sc-dso-slide-toggle rect.sc-dso-slide-toggle{fill:#275937}button.dso-slider[aria-checked=true].sc-dso-slide-toggle svg.sc-dso-slide-toggle circle.sc-dso-slide-toggle{transform:translateX(30px);fill:#fff}button.dso-slider[disabled].sc-dso-slide-toggle svg.sc-dso-slide-toggle rect.sc-dso-slide-toggle{fill:#ccc}button.dso-slider[disabled].sc-dso-slide-toggle svg.sc-dso-slide-toggle circle.sc-dso-slide-toggle{fill:#e5e5e5}button.dso-slider[disabled][aria-checked=true].sc-dso-slide-toggle svg.sc-dso-slide-toggle rect.sc-dso-slide-toggle{fill:#a8bcaf}button.dso-slider[disabled][aria-checked=true].sc-dso-slide-toggle svg.sc-dso-slide-toggle circle.sc-dso-slide-toggle{fill:#e5e5e5}.dso-slider.sc-dso-slide-toggle{border-radius:24px;display:inline-flex}.dso-slider.sc-dso-slide-toggle:hover{cursor:pointer}";
 const DsoSlideToggleStyle0 = slideToggleCss;
 const SlideToggle = /*@__PURE__*/ proxyCustomElement(class SlideToggle extends HTMLElement {
@@ -32,11 +32,11 @@ const SlideToggle = /*@__PURE__*/ proxyCustomElement(class SlideToggle extends H
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, null, h("button", Object.assign({ key: 'b4e792d5b5da7e55ee691680e1d7670d5ad140f0', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: '97d26db6d04bb136b61ea6c91851160803bd441c', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '4b824930909c33ac240f0bf18f417177436ce04d', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '42c9afdc4cb9a46bb0fc1d41956aa17dc0b209eb', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: 'f648a22fdb75d53435745fb7a0d02a44320bad0b', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '5333ebcc702e130794200ce5dd7efee0b4f7b735', htmlFor: this.identifier }, h("slot", { key: '332653663797842e97924145c9b7d461d86f826f' })))));
+        return (h(Fragment, null, h("button", Object.assign({ key: '47ab037e365eb57922b02241e841b8eb848836a3', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: '8e985e4789f4b6194dfc8f2e1f8e2b4a996c0c65', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '6d185794241cd22e19b884a0ca8e64b2078d1679', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '1b4d88a1b241c8f380bd5aaa0fd185937387597f', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '9f559b1daed390bb7b623ca8a7954fe1d724578b', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '14e3fae9ea95616076688c7a43b212e5bc84a33f', htmlFor: this.identifier }, h("slot", { key: '9e0c9eaad8deeaa0956ab5314d28363a39c3fbf4' })))));
     }
     get host() { return this; }
     static get style() { return DsoSlideToggleStyle0; }
-}, [4, "dso-slide-toggle", {
+}, [6, "dso-slide-toggle", {
         "checked": [4],
         "disabled": [4],
         "accessibleLabel": [1, "accessible-label"],

package/dist/components/slide-toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"slide-toggle.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,~~4vBAA4vB~~,CAAC;~~AACpxB~~,6BAAe,cAAc;;~~MCQhB~~,WAAW;~~IALxB~~;;;;;;;~~QAaE~~,YAAO,GAAG,KAAK,CAAC;;;;QAMhB,aAAQ,GAAG,KAAK,CAAC;;;;QAqBjB,eAAU,GAAG,EAAE,EAAE,CAAC;KA+CnB;IAvCS,YAAY,CAAC,CAAQ;QAC3B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,aAAa,EAAE,CAAC;YAChB,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;SACvB,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;KAC9D;IAED,MAAM;QACJ,QACE,kBACE,6EACE,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,YAAY,kBACJ,EAAE,GAAG,IAAI,CAAC,OAAO,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,KAC/B,IAAI,CAAC,eAAe,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,IAClE,IAAI,CAAC,YAAY,GAAG,EAAE,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAEtE,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,IAChF,0DAAG,IAAI,EAAC,MAAM,eAAW,SAAS,IAChC,6DAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,EAAE,EAAC,IAAI,GAAG,EAC3D,+DAAQ,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CAC1C,CACA,CACC,EACR,IAAI,CAAC,eAAe,KACnB,8DAAO,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7B,8DAAQ,CACF,CACT,CACA,EACH;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\nbutton.dso-slider {\r\n border: 0;\r\n padding: 0;\r\n\r\n &:focus-visible {\r\n outline: 2px solid colors.$grijs-80;\r\n outline-offset: 1px;\r\n }\r\n\r\n svg {\r\n rect {\r\n fill: colors.$grijs-40;\r\n transition: fill 0.25s;\r\n }\r\n\r\n circle {\r\n @include utilities.transition(transform);\r\n\r\n transform: translateX(10px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen;\r\n }\r\n\r\n circle {\r\n transform: translateX(30px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[disabled] svg {\r\n rect {\r\n fill: colors.$grijs-20;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n\r\n &[disabled][aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen-40;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n}\r\n\r\n.dso-slider {\r\n border-radius: units.$u3;\r\n display: inline-flex;\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Event, ~~Fragment,~~ Prop, EventEmitter, Element, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-slide-toggle\",\r\n styleUrl: \"slide-toggle.scss\",\r\n shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n @Element()\r\n private host!: HTMLDsoSlideToggleElement;\r\n\r\n /*\r\n Set to true if Slide Toggle is checked.\r\n /\r\n @Prop()\r\n checked = false;\r\n\r\n /\r\n Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n /\r\n @Prop()\r\n disabled = false;\r\n\r\n /\r\n When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n /\r\n @Prop()\r\n accessibleLabel?: string;\r\n\r\n /\r\n Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n /\r\n @Prop()\r\n labelledbyId?: string;\r\n\r\n @State()\r\n hasVisibleLabel?: boolean;\r\n\r\n /\r\n Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n /\r\n @Prop()\r\n identifier = v4();\r\n\r\n /\r\n Emitted when user checks or unchecks the Slide Toggle.\r\n /\r\n @Event({ composed: false })\r\n dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n private handleSwitch(e: Event): void {\r\n this.dsoActiveChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n componentWillLoad(): void {\r\n this.hasVisibleLabel = this.host.querySelector(\"\") !== null;\r\n }\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n id={this.identifier}\r\n role=\"switch\"\r\n class=\"dso-slider\"\r\n aria-checked={\"\" + this.checked}\r\n disabled={this.disabled}\r\n onClick={(e) => this.handleSwitch(e)}\r\n {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n <g fill=\"none\" fill-rule=\"evenodd\">\r\n <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n </g>\r\n </svg>\r\n </button>\r\n {this.hasVisibleLabel && (\r\n <label htmlFor={this.identifier}>\r\n <slot />\r\n </label>\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"slide-toggle.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,g3CAAg3C,CAAC;AACx4C,6BAAe,cAAc;;MCShB,WAAW;IANxB;;;;;;;QAcE,YAAO,GAAG,KAAK,CAAC;;;;QAMhB,aAAQ,GAAG,KAAK,CAAC;;;;QAqBjB,eAAU,GAAG,EAAE,EAAE,CAAC;KA+CnB;IAvCS,YAAY,CAAC,CAAQ;QAC3B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,aAAa,EAAE,CAAC;YAChB,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;SACvB,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;KAC9D;IAED,MAAM;QACJ,QACE,kBACE,6EACE,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,YAAY,kBACJ,EAAE,GAAG,IAAI,CAAC,OAAO,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,KAC/B,IAAI,CAAC,eAAe,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,IAClE,IAAI,CAAC,YAAY,GAAG,EAAE,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAEtE,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,IAChF,0DAAG,IAAI,EAAC,MAAM,eAAW,SAAS,IAChC,6DAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,EAAE,EAAC,IAAI,GAAG,EAC3D,+DAAQ,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CAC1C,CACA,CACC,EACR,IAAI,CAAC,eAAe,KACnB,8DAAO,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7B,8DAAQ,CACF,CACT,CACA,EACH;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle&encapsulation=scoped","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n$slide-toggle-height: 20px;\r\n\r\n:host {\r\n display: inline-block;\r\n padding-block-start: (typography.$line-height-base * typography.$font-size-base - $slide-toggle-height) * 0.5;\r\n}\r\n\r\nbutton.dso-slider {\r\n border: 0;\r\n padding: 0;\r\n\r\n &:focus-visible {\r\n outline: 2px solid colors.$grijs-80;\r\n outline-offset: 1px;\r\n }\r\n\r\n svg {\r\n rect {\r\n fill: colors.$grijs-40;\r\n transition: fill 0.25s;\r\n }\r\n\r\n circle {\r\n @include utilities.transition(transform);\r\n\r\n transform: translateX(10px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen;\r\n }\r\n\r\n circle {\r\n transform: translateX(30px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[disabled] svg {\r\n rect {\r\n fill: colors.$grijs-20;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n\r\n &[disabled][aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen-40;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n}\r\n\r\n.dso-slider {\r\n border-radius: units.$u3;\r\n display: inline-flex;\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Event, Prop, EventEmitter, Element, State, Fragment } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-slide-toggle\",\r\n styleUrl: \"slide-toggle.scss\",\r\n scoped: true,\r\n shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n @Element()\r\n private host!: HTMLDsoSlideToggleElement;\r\n\r\n /*\r\n Set to true if Slide Toggle is checked.\r\n /\r\n @Prop()\r\n checked = false;\r\n\r\n /\r\n Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n /\r\n @Prop()\r\n disabled = false;\r\n\r\n /\r\n When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n /\r\n @Prop()\r\n accessibleLabel?: string;\r\n\r\n /\r\n Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n /\r\n @Prop()\r\n labelledbyId?: string;\r\n\r\n @State()\r\n hasVisibleLabel?: boolean;\r\n\r\n /\r\n Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n /\r\n @Prop()\r\n identifier = v4();\r\n\r\n /\r\n Emitted when user checks or unchecks the Slide Toggle.\r\n /\r\n @Event({ composed: false })\r\n dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n private handleSwitch(e: Event): void {\r\n this.dsoActiveChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n componentWillLoad(): void {\r\n this.hasVisibleLabel = this.host.querySelector(\"\") !== null;\r\n }\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n id={this.identifier}\r\n role=\"switch\"\r\n class=\"dso-slider\"\r\n aria-checked={\"\" + this.checked}\r\n disabled={this.disabled}\r\n onClick={(e) => this.handleSwitch(e)}\r\n {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n <g fill=\"none\" fill-rule=\"evenodd\">\r\n <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n </g>\r\n </svg>\r\n </button>\r\n {this.hasVisibleLabel && (\r\n <label htmlFor={this.identifier}>\r\n <slot />\r\n </label>\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/table.js CHANGED Viewed

@@ -43,7 +43,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends HTMLElement {
     render() {
         var _a, _b;
         const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
-        return (h(Host, { key: 'c2832a7a8fbf7221d15064ee4c7bb56d7b661cd2' }, this.modalActive && this.placeholderHeight && (h("div", { key: '9d14b2910f07abb13387e293d790045a32455b35', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '224ae9f6099a65a434331a7b474367b99553f693', class: "dso-modal-overlay" }), h("div", { key: '38aa3032ac4982d600147da57050456096b418a9', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '4bfc958b97f90948559d98649e651fe5fdb19701', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: '2a4fd6f51f39000c50f9d65e592d1b313f9b3867', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: '48d81bc181ed4c5401e31b825b456a34ce476f82', class: "dso-responsive-message" }, h("span", { key: '1be9558ee93f669e43f538d93eca0c17e52b8f23' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: 'e4bb42988a77996e5497d27ffcf9566b2453c52e', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: 'f097bc0aa7a6f915ab014e231a70b72628b68dba', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: '7e3e59f79db68d7580a1914acabd632f13674e94' }, "vergroten"), h("dso-icon", { key: '9fd46d9a187178a22850428353c049647f9d5efb', icon: "external-link" }))))), this.modalActive && (h("div", { key: '8611aa82f23537b9124721a8aae0b8f6306cf020', class: "dso-header" }, h("h2", { key: '9d3d1c3e71ef886af0c497ce915e0e90834b0233', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '65079ed9d1285c0edf9c2c02c672d0730db7ad99', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: 'c37f9e87a4e81750b8374135545c5ca162bfbafd', icon: "times" }), h("span", { key: 'd1000458d15eadfc4dcb9a47045966f0d5a31b0b', class: "sr-only" }, "Sluiten")))), h("div", { key: 'ec46a114de1d6f4b20536de22c892f3d6140631a', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '4b1aa7f1b106c4af05fe747484199bd5fe6a25ce' }))))));
+        return (h(Host, { key: '4a3e31c590ead4a74f0550073b1bbc148ae70f78' }, this.modalActive && this.placeholderHeight && (h("div", { key: '7620ca23d4f808ef8bec14678eedd55f97c3ae29', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '4eb447ab8afc2630f0e30be8311bd1105a85b83c', class: "dso-modal-overlay" }), h("div", { key: 'c1b585dde75ddc92c8922b049628dbcd8a100d34', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '88ad8719f80c3c4f65ab7e6879e4abad690298cb', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: '9613603a64d41db5ee116369202d4ba515b73d8f', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: '46257884cb6e02250b1afd4b26a3a0578cd48877', class: "dso-responsive-message" }, h("span", { key: '7a3c406ad5ec4f94f4d073ff9a53edb18c02f542' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: 'c336fe4775b023a440177806fa54e5625f529908', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: 'c8bf55ed14ce3118a6a241b5720d6f0324b7cedd', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: 'f4e0d52eb32d641dd3f90c29d6d0f67249e1c1bc' }, "vergroten"), h("dso-icon", { key: '22f45a465920a501450cb3f379fc01172bbf75f7', icon: "external-link" }))))), this.modalActive && (h("div", { key: '4fc87b95fe133e9719f9b79e0c8da9dd90ca5107', class: "dso-header" }, h("h2", { key: '005ce442e38893e10598314a207df249e65c98c2', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: 'd85326b032ac6a859f94b35ad05281c6b0dbdd2e', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: 'e31275c0fb68c4ba60cada741193ed992b31b8e4', icon: "times" }), h("span", { key: '96ba7a49baaa9d88963c92e7265bc3d4f2d5236f', class: "sr-only" }, "Sluiten")))), h("div", { key: '2c6aac7907786c603247f02b71df2ef85e63d2c6', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '11c944f3e16fc5481f0e29c68d0316df41bcd038' }))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;

package/dist/components/toggletip.js CHANGED Viewed

@@ -54,7 +54,7 @@ const Toggletip = /*@__PURE__*/ proxyCustomElement(class Toggletip extends HTMLE
         };
     }
     render() {
-        return (h(Fragment, null, h("dso-info-button", { key: 'b9f976371e5462835f246b59be2603e15e4aaffe', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '238ae287cec697f812f75e94a0b4bc33d210d35e', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '28efbfb2a2872551777ba04c2354d51a59e37612' }))));
+        return (h(Fragment, null, h("dso-info-button", { key: 'c6b7ee824a9ad3417f394467177fa3b07a59a710', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: 'a82167f713fc51dbafcad6758527ce7c36e28552', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '5f4548c244f97b6278b7642bb927d3133dab872c' }))));
     }
     get host() { return this; }
     static get style() { return DsoToggletipStyle0; }

package/dist/components/tooltip.js CHANGED Viewed

@@ -228,7 +228,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
         }
     }
     render() {
-        return (h(Host, { key: '7f2ebd625883a8e59230ec8a602f1c44c916937a', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '6bab482a2379cb4608a13bea079dd0b09f7b62f2', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: 'dde1f4e1862728b33a18ca6cb711b6443e7b284b', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'd100e8d4bd426a7af6f32151aa0f5a96d3dda00e', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '3b1e4e2cd77dc05caf6898d67a3065815a11a667' })))));
+        return (h(Host, { key: '0dae667b622fac9d6e45eead0e5ffd0b3c4fc64a', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '8b80667d0734bfd9ea91f698ddf31493f7c27e49', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '7124f75b7ba640b0a5e63a15917eddf0ade65853', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '962322da0404132b4b4ef4046ca70b1b25d11f1f', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '1fec252ad2f238dc8b8969bc4aa2d237b5aae943' })))));
     }
     activatePopper() {
         var _a;

package/dist/dso-toolkit/dso-toolkit.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,b as o}from"./p-abc59cdf.js";export{s as setNonce}from"./p-abc59cdf.js";import{g as a}from"./p-e1255160.js";var t=()=>{const o=import.meta.url;const a={};if(o!==""){a.resourcesUrl=new URL(".",o).href}return e(a)};t().then((async e=>{await a();return o(JSON.parse('[["p-d9cb06fc",[[1,"dso-icon",{"icon":[1]}]]],["p-8b5409ad",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"mode":[513],"response":[32],"document":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]},null,{"jsonFile":["jsonFileWatcher"],"openDefault":["openDefaultWatcher"]}]]],["p-fca1f5bd",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"wijzigactie":[1],"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"],"label":[1],"labelStatus":[1,"label-status"],"hover":[32],"focusHandle":[64]}]]],["p-4b70b133",[[1,"dso-annotation-activiteit",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1],"regelKwalificatie":[1,"regel-kwalificatie"],"locatieNoemers":[16],"regelKwalificatieVoorzetsel":[1,"regel-kwalificatie-voorzetsel"]}]]],["p-4747018b",[[1,"dso-annotation-gebiedsaanwijzing",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1]}]]],["p-d8c11809",[[1,"dso-annotation-omgevingsnormwaarde",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1],"toelichting":[1],"waardes":[16],"eenheid":[1]}]]],["p-10d0c70f",[[1,"dso-advanced-select",{"options":[16],"active":[16],"activeHint":[1,"active-hint"],"open":[32]},[[8,"keydown","keyDownListener"]]]]],["p-e19e851b",[[1,"dso-legend-item",{"disabled":[516],"disabledMessage":[1,"disabled-message"],"removable":[4],"showBody":[32]}]]],["p-80c945ed",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["p-fccb414d",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["p-3e401cf1",[[1,"dso-annotation-kaart",{"wijzigactie":[513],"naam":[1],"href":[513]}]]],["p-135bf595",[[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"],"mark":[16],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32],"listItemBlockSize":[32],"listboxContainerMaxBlockSize":[32]},[[4,"click","onDocumentClick"]],{"suggestions":["suggestionsWatcher"]}]]],["p-ad38ad02",[[1,"dso-project-item",{"label":[1]}]]],["p-fee1dd65",[[1,"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-faa6b9d5",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]},null,{"open":["watchOpen"]}]]],["p-1aefb8a6",[[1,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"dialogRole":[1,"dialog-role"],"returnFocus":[4,"return-focus"],"showCloseButton":[4,"show-close-button"],"ariaId":[32]}]]],["p-da7f089a",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-1f14320f",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["p-a52dcbb8",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["p-98037a08",[[1,"dso-card",{"href":[513],"mode":[513],"active":[516]}]]],["p-ba7b4c62",[[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-2a933ac2",[[1,"dso-document-card",{"href":[513],"active":[516]}]]],["p-ee7e35f5",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]],{"url":["watchUrl"],"isOpen":["watchIsOpen"]}]]],["p-b3deb707",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"subcontentPrefix":[1,"subcontent-prefix"]}]]],["p-35186e39",[[1,"dso-mark-bar",{"value":[1],"label":[1],"current":[2],"totalCount":[2,"total-count"],"dsoFocus":[64]}]]],["p-a341b666",[[1,"dso-plekinfo-card",{"wijzigactie":[513],"href":[513],"targetBlank":[4,"target-blank"],"active":[516]}]]],["p-e8064fba",[[1,"dso-skiplink",{"to":[513],"label":[513]}]]],["p-b51b2ca6",[[1,"dso-accordion",{"variant":[6145],"reverseAlign":[6148,"reverse-align"],"_getState":[64]}]]],["p-c2abc6c7",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["p-46a5a752",[[1,"dso-banner",{"status":[513],"compact":[4],"noIcon":[4,"no-icon"]}]]],["p-93dc3680",[[1,"dso-card-container",{"mode":[513]}]]],["p-7ca364e9",[[1,"dso-contact-information"]]],["p-bdd5651e",[[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-007802e5",[[1,"dso-highlight-box",{"yellow":[516],"border":[516],"white":[516],"dropShadow":[516,"drop-shadow"],"step":[514]}]]],["p-9dbebb2e",[[1,"dso-input-range",{"min":[2],"max":[2],"value":[2],"step":[2],"label":[1],"unit":[1],"description":[1]}]]],["p-3be76968",[[1,"dso-logo",{"name":[513],"logoUrl":[513,"logo-url"],"label":[513],"labelUrl":[513,"label-url"],"ribbon":[513]}]]],["p-8a3e9f50",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["p-ba49c0e5",[[1,"dso-tab",{"active":[516],"disabled":[516],"href":[1],"_dsoFocus":[64]}]]],["p-acfb9f16",[[1,"dso-tabs"]]],["p-df6c1f5f",[[1,"dso-viewer-grid",{"mode":[513],"filterpanelTitle":[513,"filterpanel-title"],"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-8cc798d5",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["p-3270708a",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["p-f1dc313d",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[1],"strategy":[1]},[[8,"click","onClick"],[8,"keydown","keyDownListener"]],{"placement":["watchPosition"],"dropdownAlign":["watchPosition"],"dropdownOptionsOffset":["watchOptionsOffset"],"strategy":["watchStrategy"]}]]],["p-fd989862",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["p-7e2c9463",[[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-7e0130d8",[[1,"dso-label",{"compact":[4],"removable":[516],"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-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-eb04878c",[[1,"dso-ozon-content",{"content":[1],"inline":[516],"mark":[16],"state":[32]},null,{"content":["contentWatcher"]}],[1,"dso-alert",{"status":[513],"roleAlert":[4,"role-alert"],"compact":[516],"closable":[4]}],[1,"dso-panel",{"closeButtonLabel":[1,"close-button-label"],"emphasized":[4]}],[1,"dso-image-overlay",{"wijzigactie":[1],"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]],[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}],[1,"dso-badge",{"status":[1]}]]],["p-a6df0d43",[[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":[516,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513],"annotationsWijzigactie":[513,"annotations-wijzigactie"],"mark":[16],"recursiveToggle":[8,"recursive-toggle"],"mode":[513],"href":[513]}],[1,"dso-annotation-locatie",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"locatieNoemer":[1,"locatie-noemer"]}]]],["p-a6c30fa5",[[1,"dso-attachments-counter",{"count":[2]}],[1,"dso-expandable",{"open":[516],"enableAnimation":[516,"enable-animation"],"minimumHeight":[2,"minimum-height"],"isClosed":[32]},[[0,"transitionstart","transitionstartHandler"],[0,"transitionend","transitionendHandler"]],{"open":["toggleOpen"]}]]],["p-7e626a87",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[516]}]]],["p-03e5e9e1",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["p-1ad6315b",[[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}],[1,"dso-renvooi",{"value":[1]}]]]]'),e)}));
+import{p as e,b as o}from"./p-abc59cdf.js";export{s as setNonce}from"./p-abc59cdf.js";import{g as a}from"./p-e1255160.js";var t=()=>{const o=import.meta.url;const a={};if(o!==""){a.resourcesUrl=new URL(".",o).href}return e(a)};t().then((async e=>{await a();return o(JSON.parse('[["p-99d7326e",[[1,"dso-icon",{"icon":[1]}]]],["p-60e40f8f",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"mode":[513],"response":[32],"document":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]},null,{"jsonFile":["jsonFileWatcher"],"openDefault":["openDefaultWatcher"]}]]],["p-631af6b1",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"wijzigactie":[1],"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"],"label":[1],"labelStatus":[1,"label-status"],"activatable":[516],"active":[516],"hover":[32],"focusHandle":[64]}]]],["p-4b70b133",[[1,"dso-annotation-activiteit",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1],"regelKwalificatie":[1,"regel-kwalificatie"],"locatieNoemers":[16],"regelKwalificatieVoorzetsel":[1,"regel-kwalificatie-voorzetsel"]}]]],["p-4747018b",[[1,"dso-annotation-gebiedsaanwijzing",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1]}]]],["p-d8c11809",[[1,"dso-annotation-omgevingsnormwaarde",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1],"toelichting":[1],"waardes":[16],"eenheid":[1]}]]],["p-10d0c70f",[[1,"dso-advanced-select",{"options":[16],"active":[16],"activeHint":[1,"active-hint"],"open":[32]},[[8,"keydown","keyDownListener"]]]]],["p-943ad4a8",[[1,"dso-legend-item",{"disabled":[516],"disabledMessage":[1,"disabled-message"],"removable":[4],"showBody":[32]}]]],["p-984d922e",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["p-55306107",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["p-3e401cf1",[[1,"dso-annotation-kaart",{"wijzigactie":[513],"naam":[1],"href":[513]}]]],["p-135bf595",[[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"],"mark":[16],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32],"listItemBlockSize":[32],"listboxContainerMaxBlockSize":[32]},[[4,"click","onDocumentClick"]],{"suggestions":["suggestionsWatcher"]}]]],["p-40d7c6bf",[[1,"dso-project-item",{"label":[1]}]]],["p-fee1dd65",[[1,"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-5ec31b61",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]},null,{"open":["watchOpen"]}]]],["p-8597633a",[[1,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"dialogRole":[1,"dialog-role"],"returnFocus":[4,"return-focus"],"showCloseButton":[4,"show-close-button"],"ariaId":[32]}]]],["p-da7f089a",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-898ad366",[[1,"dso-survey-rating"]]],["p-d3131297",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["p-a52dcbb8",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["p-98037a08",[[1,"dso-card",{"href":[513],"mode":[513],"active":[516]}]]],["p-ba7b4c62",[[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-2a933ac2",[[1,"dso-document-card",{"href":[513],"active":[516]}]]],["p-4bcf2efb",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]],{"url":["watchUrl"],"isOpen":["watchIsOpen"]}]]],["p-0499bdce",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"subcontentPrefix":[1,"subcontent-prefix"]}]]],["p-236e6d02",[[1,"dso-mark-bar",{"value":[1],"label":[1],"current":[2],"totalCount":[2,"total-count"],"dsoFocus":[64]}]]],["p-ed33d023",[[1,"dso-plekinfo-card",{"wijzigactie":[513],"href":[513],"targetBlank":[4,"target-blank"],"active":[516]}]]],["p-880d04c4",[[1,"dso-skiplink",{"to":[513],"label":[513]}]]],["p-b51b2ca6",[[1,"dso-accordion",{"variant":[6145],"reverseAlign":[6148,"reverse-align"],"_getState":[64]}]]],["p-c2abc6c7",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["p-46a5a752",[[1,"dso-banner",{"status":[513],"compact":[4],"noIcon":[4,"no-icon"]}]]],["p-93dc3680",[[1,"dso-card-container",{"mode":[513]}]]],["p-7ca364e9",[[1,"dso-contact-information"]]],["p-bdd5651e",[[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-9d176f6f",[[1,"dso-highlight-box",{"yellow":[516],"border":[516],"white":[516],"dropShadow":[516,"drop-shadow"],"step":[514]}]]],["p-b5c5ca39",[[1,"dso-input-range",{"min":[2],"max":[2],"value":[2],"step":[2],"label":[1],"unit":[1],"description":[1]}]]],["p-a496f58f",[[1,"dso-logo",{"name":[513],"logoUrl":[513,"logo-url"],"label":[513],"labelUrl":[513,"label-url"],"ribbon":[513]}]]],["p-b57af35d",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["p-ba49c0e5",[[1,"dso-tab",{"active":[516],"disabled":[516],"href":[1],"_dsoFocus":[64]}]]],["p-9331c2fc",[[1,"dso-tabs"]]],["p-11e367b3",[[1,"dso-viewer-grid",{"mode":[513],"filterpanelTitle":[513,"filterpanel-title"],"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-cf32927d",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["p-3033a7f3",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["p-1ec998ba",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[1],"strategy":[1]},[[8,"click","onClick"],[8,"keydown","keyDownListener"]],{"placement":["watchPosition"],"dropdownAlign":["watchPosition"],"dropdownOptionsOffset":["watchOptionsOffset"],"strategy":["watchStrategy"]}]]],["p-e9d15fae",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["p-0dcef2bb",[[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-e4f473e2",[[1,"dso-ozon-content",{"content":[1],"inline":[516],"addSpaceBeforeNode":[516,"add-space-before-node"],"mark":[16],"state":[32]},null,{"content":["contentWatcher"]}],[1,"dso-alert",{"status":[513],"roleAlert":[4,"role-alert"],"compact":[516],"closable":[4]}],[1,"dso-image-overlay",{"wijzigactie":[1],"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]],[1,"dso-panel",{"closeButtonLabel":[1,"close-button-label"],"emphasized":[4]}],[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}],[1,"dso-badge",{"status":[1]}]]],["p-1746cde9",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"kop":[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":[516,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513],"annotationsWijzigactie":[513,"annotations-wijzigactie"],"mark":[16],"recursiveToggle":[8,"recursive-toggle"],"mode":[513],"href":[513]}],[1,"dso-annotation-locatie",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"locatieNoemer":[1,"locatie-noemer"]}]]],["p-a6c30fa5",[[1,"dso-attachments-counter",{"count":[2]}],[1,"dso-expandable",{"open":[516],"enableAnimation":[516,"enable-animation"],"minimumHeight":[2,"minimum-height"],"isClosed":[32]},[[0,"transitionstart","transitionstartHandler"],[0,"transitionend","transitionendHandler"]],{"open":["toggleOpen"]}]]],["p-4e8fa5f6",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[516]}]]],["p-2aaad2dd",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["p-5cdbbba6",[[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-323455dc",[[1,"dso-renvooi",{"value":[1]}],[6,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}],[1,"dso-label",{"compact":[4],"removable":[516],"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"]}]]]]'),e)}));
 //# sourceMappingURL=dso-toolkit.esm.js.map

package/dist/dso-toolkit/dso-toolkit.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","JSON","parse"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/\n Stencil Client Patch Browser v4.25.1 \| MIT Licensed \| https://stenciljs.com\n /\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($\|\\\\?\|#)`).test(s.src) \|\| 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};\nvar 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 if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\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(async (options) => {\n await globalScripts();\n return bootstrapLazy([/!__STENCIL_LAZY_DATA__/], options);\n});\n"],"mappings":"0HAOA,IAAIA,EAAe,KAUjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACrBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACjD,CACE,OAAOC,EAAeJ,EAAK,EClB7BH,IAAeQ,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAcC,KAAAC,MAAA~~,+zUAAuCJ~~,EAAA","ignoreList":[]}
1	+ {"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","JSON","parse"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/\n Stencil Client Patch Browser v4.25.1 \| MIT Licensed \| https://stenciljs.com\n /\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($\|\\\\?\|#)`).test(s.src) \|\| 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};\nvar 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 if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\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(async (options) => {\n await globalScripts();\n return bootstrapLazy([/!__STENCIL_LAZY_DATA__/], options);\n});\n"],"mappings":"0HAOA,IAAIA,EAAe,KAUjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACrBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACjD,CACE,OAAOC,EAAeJ,EAAK,EClB7BH,IAAeQ,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAcC,KAAAC,MAAA,w8UAAuCJ,EAAA","ignoreList":[]}

package/dist/dso-toolkit/{p-b3deb707.entry.js → p-0499bdce.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as n,c as e,f as t,h as o,F as s,a as i}from"./p-abc59cdf.js";import{c as r}from"./p-8a1a6e56.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  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\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 {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\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-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-inline-size: 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  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 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  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n.dso-tertiary {\n  cursor: pointer;\n}\n\n.dso-input-number {\n  align-items: center;\n  display: flex;\n}\n.dso-input-number .dso-input-step-counter {\n  text-align: center;\n  inline-size: 1.5rem;\n  font-size: 14px;\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}\n.dso-button-group.dso-disabled > * {\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-inline-start-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  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\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: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\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 > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\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: #d7e7ce;\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  opacity: 1;\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}\n.dso-button-group .dso-list-button {\n  padding-inline-end: 15px;\n}\n\n.dso-selectable {\n  position: relative;\n  display: var(--dso-selectable-display, block);\n  padding-block: 0;\n  padding-inline: 32px 0;\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  block-size: 24px;\n  inset-inline-start: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 0;\n  inline-size: 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-inline-start: 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  block-size: 20px;\n  inset-inline-start: 2px;\n  position: absolute;\n  inset-block-start: 2px;\n  inline-size: 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  block-size: 18px;\n  inset-inline-start: 3px;\n  inset-block-start: 3px;\n  inline-size: 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  block-size: 22px;\n  inset-inline-start: 1px;\n  inset-block-start: 1px;\n  inline-size: 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  inset-inline-start: 6px;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 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-block-start-color: transparent;\n  border-width: 0 0 3px 3px;\n  block-size: 8px;\n  transform: rotate(-45deg);\n  inline-size: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  block-size: 12px;\n  inline-size: 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  block-size: 12px;\n  inset-inline-start: 6px;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 6px;\n  inline-size: 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-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding-block: 15px;\n  padding-inline: 15px 47px;\n  position: relative;\n  text-align: start;\n  white-space: normal;\n  inline-size: 100%;\n  cursor: pointer;\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 {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #d7e7ce;\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: #d7e7ce;\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}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\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-inline-end: 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 label {\n  cursor: inherit;\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel {\n  font-weight: 400;\n  inline-size: 100%;\n  padding-inline-start: 32px;\n}\n.dso-list-button dso-icon {\n  block-size: 24px;\n  color: #39870c;\n  inset-block-start: 15px;\n  inset-inline-end: 15px;\n  inline-size: 24px;\n  page-break-before: always;\n  position: absolute;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    inline-size: 0;\n  }\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-block-start: 4px;\n}";const a=d;const l=class{constructor(t){n(this,t);this.dsoCountChange=e(this,"dsoCountChange",7);this.dsoSelectedChange=e(this,"dsoSelectedChange",7);this.checked=false;this.disabled=false}get subcontentSlot(){return this.host.querySelector("[slot='subcontent']")}connectedCallback(){this.mutationObserver=new MutationObserver((()=>t(this.host)));this.mutationObserver.observe(this.host,{characterData:true,childList:true,subtree:true,attributes:true})}componentDidRender(){var n;(n=this.subcontentSlot)===null||n===void 0?void 0:n.setAttribute("aria-hidden","true")}disconnectedCallback(){var n;(n=this.mutationObserver)===null||n===void 0?void 0:n.disconnect();delete this.mutationObserver}stepValue(n,e){if(typeof this.count==="number"){const t=e==="increment"?this.count+1:this.count-1;if(!this.isNewCountValid(t)){return}this.dsoCountChange.emit({originalEvent:n,count:t})}}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})}isNewCountValid(n){return!(this.min!==undefined&&this.max!==undefined&&(n<Number(this.min)||n>Number(this.max)))}render(){const n=this.checked||this.count!==undefined&&this.count>0;return o("div",{key:"3dbe6ce505736156cb4f26cf43427b9d61066506",class:r(["dso-button-group",{"dso-disabled":this.disabled}])},o("div",{key:"c09a954d88ef103654aee9162221a434a34ac484",class:r(["dso-list-button",{"dso-selected":n,"dso-single-count":this.count===1}]),onClick:n=>this.handleSelectClick(n)},o("div",{key:"826d4bdc3d111b85e1f3ee130036bc0205db356a",class:"dso-selectable"},o("input",{key:"77ce9a1e4294fdb18c974b8430da46b9cabef54b",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:n,disabled:this.disabled}),o("label",{key:"ce8193a9a8e9ad45a2cdf403b2f3483813b3386d",htmlFor:"dso-list-button-checkbox"},this.label),this.subcontentSlot&&o("div",{key:"83ccf29cd00f52278be9b783e299b24c130bbd30",class:"sr-only",id:"description"},this.subcontentPrefix&&this.subcontentPrefix+":",o("div",{key:"e0c2d903ddbd5c7c5200392d72dce90605e2d18e",innerHTML:this.subcontentSlot.innerHTML}))),this.sublabel&&o("span",{key:"203e90fc70d1f70d275c3c2063c0727e9280aeb0",class:"dso-sublabel",id:"sublabel"},this.sublabel),o("slot",{key:"d352c29208c64b36c4ffcb02f7441a6be9001ebb",name:"subcontent"})),this.count!==undefined&&this.count>0&&o("div",{key:"8909ae8c1828d127a3df7ceaa8723abdae2da0f3",class:"dso-input-number"},this.count>1&&o(s,null,o("button",{key:"dbab575708e6f830ff65258cf8f441fe3277e7cb",type:"button",class:"dso-tertiary",disabled:this.count===Number(this.min)||this.disabled,onClick:n=>this.stepValue(n,"decrement")},o("dso-icon",{key:"a9e3be572e96e086f789f22024526c41a802d472",icon:"minus-circle"}),o("span",{key:"321ff58b05e185321b0998582711dca9cbd8ed15",class:"sr-only"},"Aantal verlagen")),o("span",{key:"18813f9c325b9378e18db1b1ee262f16a36472db",class:"dso-input-step-counter","aria-label":"Aantal","aria-live":"polite"},this.count)),o("button",{key:"6c4e9baab6d8c3c069a158e4e3a4a27c5c3498b7",type:"button",class:"dso-tertiary",disabled:this.count===Number(this.max)||this.disabled,onClick:n=>this.stepValue(n,"increment")},o("dso-icon",{key:"c18cee53508ce4bafc39ed625826ab130ae2bae8",icon:"plus-circle"}),o("span",{key:"ea8c4f811d2e0dc1c8c072c96611036ba0238213",class:"sr-only"},"Aantal verhogen"))))}get host(){return i(this)}};l.style=a;export{l as dso_list_button};
-//# sourceMappingURL=p-b3deb707.entry.js.map
+import{r as n,c as e,f as t,h as o,F as s,a as i}from"./p-abc59cdf.js";import{c as r}from"./p-8a1a6e56.js";const a="*,\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  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\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 {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\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-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-inline-size: 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  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 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  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n.dso-tertiary {\n  cursor: pointer;\n}\n\n.dso-input-number {\n  align-items: center;\n  display: flex;\n}\n.dso-input-number .dso-input-step-counter {\n  text-align: center;\n  inline-size: 1.5rem;\n  font-size: 14px;\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}\n.dso-button-group.dso-disabled > * {\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-inline-start-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  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\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: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\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 > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\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: #d7e7ce;\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  opacity: 1;\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}\n.dso-button-group .dso-list-button {\n  padding-inline-end: 15px;\n}\n\n.dso-selectable {\n  position: relative;\n  display: var(--dso-selectable-display, block);\n  padding-block: 0;\n  padding-inline: 32px 0;\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  block-size: 24px;\n  inset-inline-start: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 0;\n  inline-size: 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-inline-start: 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  block-size: 20px;\n  inset-inline-start: 2px;\n  position: absolute;\n  inset-block-start: 2px;\n  inline-size: 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  block-size: 18px;\n  inset-inline-start: 3px;\n  inset-block-start: 3px;\n  inline-size: 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  block-size: 22px;\n  inset-inline-start: 1px;\n  inset-block-start: 1px;\n  inline-size: 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  inset-inline-start: 6px;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 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-block-start-color: transparent;\n  border-width: 0 0 3px 3px;\n  block-size: 8px;\n  transform: rotate(-45deg);\n  inline-size: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  block-size: 12px;\n  inline-size: 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  block-size: 12px;\n  inset-inline-start: 6px;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 6px;\n  inline-size: 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-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding-block: 15px;\n  padding-inline: 15px 47px;\n  position: relative;\n  text-align: start;\n  white-space: normal;\n  inline-size: 100%;\n  cursor: pointer;\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 {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #d7e7ce;\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: #d7e7ce;\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}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\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-inline-end: 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 label {\n  cursor: inherit;\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel {\n  font-weight: 400;\n  inline-size: 100%;\n  padding-inline-start: 32px;\n}\n.dso-list-button dso-icon {\n  block-size: 24px;\n  color: #39870c;\n  inset-block-start: 15px;\n  inset-inline-end: 15px;\n  inline-size: 24px;\n  page-break-before: always;\n  position: absolute;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    inline-size: 0;\n  }\n}";const d=a;const l=class{constructor(t){n(this,t);this.dsoCountChange=e(this,"dsoCountChange",7);this.dsoSelectedChange=e(this,"dsoSelectedChange",7);this.checked=false;this.disabled=false}get subcontentSlot(){return this.host.querySelector("[slot='subcontent']")}connectedCallback(){this.mutationObserver=new MutationObserver((()=>t(this.host)));this.mutationObserver.observe(this.host,{characterData:true,childList:true,subtree:true,attributes:true})}componentDidRender(){var n;(n=this.subcontentSlot)===null||n===void 0?void 0:n.setAttribute("aria-hidden","true")}disconnectedCallback(){var n;(n=this.mutationObserver)===null||n===void 0?void 0:n.disconnect();delete this.mutationObserver}stepValue(n,e){if(typeof this.count==="number"){const t=e==="increment"?this.count+1:this.count-1;if(!this.isNewCountValid(t)){return}this.dsoCountChange.emit({originalEvent:n,count:t})}}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})}isNewCountValid(n){return!(this.min!==undefined&&this.max!==undefined&&(n<Number(this.min)||n>Number(this.max)))}render(){const n=this.checked||this.count!==undefined&&this.count>0;return o("div",{key:"401ac6af5e5fa9ab3334ace93225fc1aa19da751",class:r(["dso-button-group",{"dso-disabled":this.disabled}])},o("div",{key:"a88382af461ce5610e2603530dd59adf553ecf8f",class:r(["dso-list-button",{"dso-selected":n,"dso-single-count":this.count===1}]),onClick:n=>this.handleSelectClick(n)},o("div",{key:"879ec8c619218a57ae775b932c6b5c3def0753e0",class:"dso-selectable"},o("input",{key:"5f01db4dcb0bacb8a12b2b7fda95a30dfb3bd16c",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:n,disabled:this.disabled}),o("label",{key:"76949467bbe709006f31936c214e02b074e412a4",htmlFor:"dso-list-button-checkbox"},this.label),this.subcontentSlot&&o("div",{key:"7b6a84904a0d6e0fa484147ca24aebcd7dcacb48",class:"sr-only",id:"description"},this.subcontentPrefix&&this.subcontentPrefix+":",o("div",{key:"97d53155731427f752f872cad77ef5d8f327905a",innerHTML:this.subcontentSlot.innerHTML}))),this.sublabel&&o("span",{key:"80276ba8f7b7c301a95e0654cf8a2bfba5c2f51a",class:"dso-sublabel",id:"sublabel"},this.sublabel),o("slot",{key:"285b84d3fd88a0286dd639ee38a8f07f91d0a853",name:"subcontent"})),this.count!==undefined&&this.count>0&&o("div",{key:"1681f308f21df80b0e479b55ba363285cf6e3239",class:"dso-input-number"},this.count>1&&o(s,null,o("button",{key:"804ca34f83e05296a3a6ba1dfd2d6bc3e4ecea94",type:"button",class:"dso-tertiary",disabled:this.count===Number(this.min)||this.disabled,onClick:n=>this.stepValue(n,"decrement")},o("dso-icon",{key:"8e5f6aaa2edfd68f2f1c1f32569902167509f34d",icon:"minus-circle"}),o("span",{key:"e7b1fc8af2d84cd964bddaecb37bf73da8581c88",class:"sr-only"},"Aantal verlagen")),o("span",{key:"e476d0ca5b641a35d9dc99393190ac24857bc8c2",class:"dso-input-step-counter","aria-label":"Aantal","aria-live":"polite"},this.count)),o("button",{key:"13b156984fdaf80a4eca8fe88e6e1d16328f33a3",type:"button",class:"dso-tertiary",disabled:this.count===Number(this.max)||this.disabled,onClick:n=>this.stepValue(n,"increment")},o("dso-icon",{key:"efba86f60c1ff9032cd30e081e2b0aac17ee4c10",icon:"plus-circle"}),o("span",{key:"7e3b8897c398feb65a6b540135bca4401cb4e859",class:"sr-only"},"Aantal verhogen"))))}get host(){return i(this)}};l.style=d;export{l as dso_list_button};
+//# sourceMappingURL=p-0499bdce.entry.js.map

package/dist/dso-toolkit/p-0499bdce.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["listButtonCss","DsoListButtonStyle0","ListButton","constructor","hostRef","this","checked","disabled","subcontentSlot","host","querySelector","connectedCallback","mutationObserver","MutationObserver","forceUpdate","observe","characterData","childList","subtree","attributes","componentDidRender","_a","setAttribute","disconnectedCallback","disconnect","stepValue","e","direction","count","newValue","isNewCountValid","dsoCountChange","emit","originalEvent","handleSelectClick","preventDefault","undefined","dsoSelectedChange","min","max","Number","render","selected","h","key","class","clsx","onClick","id","type","value","name","sublabel","filter","s","join","htmlFor","label","subcontentPrefix","innerHTML","Fragment","icon"],"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/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\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@use \"list-button.variables\" as list-button-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin _state-styling($background-color: inherit, $border-color: inherit, $color: inherit) {\r\n & {\r\n background-color: $background-color;\r\n border-color: $border-color;\r\n color: $color;\r\n }\r\n}\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-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n cursor: pointer;\r\n }\r\n}\r\n\r\n.dso-input-number {\r\n align-items: center;\r\n display: flex;\r\n\r\n .dso-input-step-counter {\r\n text-align: center;\r\n inline-size: units.$ru3;\r\n font-size: list-button-variables.$font-size-count;\r\n }\r\n}\r\n\r\n.dso-button-group {\r\n display: flex;\r\n flex-direction: row;\r\n\r\n &.dso-disabled {\r\n > * {\r\n @include _state-styling(colors.$wit, colors.$grijs-10, colors.$grijs-60);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n pointer-events: none;\r\n }\r\n }\r\n }\r\n\r\n > * {\r\n border-radius: 0;\r\n\r\n &:first-child {\r\n border-radius: list-button-variables.$border-radius 0 0 list-button-variables.$border-radius;\r\n }\r\n\r\n &:not(:first-child) {\r\n border-inline-start-style: none !important;\r\n }\r\n\r\n &:last-child {\r\n border-radius: 0 list-button-variables.$border-radius list-button-variables.$border-radius 0;\r\n }\r\n\r\n &:only-child {\r\n border-radius: list-button-variables.$border-radius;\r\n }\r\n }\r\n\r\n > .dso-input-number {\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n border-style: solid;\r\n border-width: 1px;\r\n flex-wrap: nowrap;\r\n padding-block: 0;\r\n padding-inline: units.$u2;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n justify-content: center;\r\n }\r\n }\r\n\r\n > *:hover + .dso-input-number,\r\n > *:focus + .dso-input-number {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n\r\n > *.dso-selected + .dso-input-number {\r\n @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n\r\n box-shadow:\r\n inset 0 -1px 0 0 button.$secondary-border-color,\r\n inset 0 1px 0 0 button.$secondary-border-color,\r\n inset -1px 0 0 0 button.$secondary-border-color;\r\n }\r\n\r\n > *:active + .dso-input-number,\r\n > *.active + .dso-input-number {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n }\r\n\r\n > *.disabled + .dso-input-number,\r\n > *[disabled] + .dso-input-number {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .dso-list-button {\r\n padding-inline-end: #{units.$u2 - 1};\r\n }\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\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n border-radius: button.$border-radius;\r\n border-width: 1px;\r\n border-style: solid;\r\n font-weight: 600;\r\n padding-block: #{units.$u2 - 1};\r\n padding-inline: #{units.$u2 - 1} #{units.$u6 - 1};\r\n position: relative;\r\n text-align: start;\r\n white-space: normal;\r\n inline-size: 100%;\r\n cursor: pointer;\r\n\r\n &:hover,\r\n &:focus {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n\r\n &:active,\r\n &.active {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n }\r\n\r\n &.disabled,\r\n &[disabled] {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n\r\n &.dso-selected {\r\n border-color: colors.$grasgroen;\r\n border-width: 1px;\r\n box-shadow:\r\n inset 0px 0px 0px 1px colors.$grasgroen,\r\n inset -1px 0px 0px 0px colors.$grasgroen;\r\n\r\n &.dso-single-count {\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n border-inline-end: 0;\r\n box-shadow:\r\n colors.$grasgroen 0px 1px 0px 0px inset,\r\n colors.$grasgroen 1px 0px 0px 0px inset,\r\n colors.$grasgroen 0px -1px 0px 0px inset;\r\n }\r\n }\r\n }\r\n\r\n label {\r\n cursor: inherit;\r\n }\r\n\r\n > span {\r\n display: block;\r\n }\r\n\r\n .dso-sublabel {\r\n font-weight: 400;\r\n inline-size: 100%;\r\n padding-inline-start: selectable.$size + units.$u1;\r\n }\r\n\r\n dso-icon {\r\n block-size: units.$u3;\r\n color: colors.$grasgroen;\r\n inset-block-start: #{units.$u2 - 1};\r\n inset-inline-end: #{units.$u2 - 1};\r\n inline-size: units.$u3;\r\n page-break-before: always;\r\n position: absolute;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n &.dso-selected.dso-single-count {\r\n &::after {\r\n inline-size: 0;\r\n }\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Fragment,\r\n h,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\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 mutationObserver?: MutationObserver;\r\n\r\n private get subcontentSlot() {\r\n return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n }\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 * 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 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 this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n delete this.mutationObserver;\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 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 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 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.count > 1 && (\r\n <>\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 <span class=\"dso-input-step-counter\" aria-label=\"Aantal\" aria-live=\"polite\">\r\n {this.count}\r\n </span>\r\n </>\r\n )}\r\n\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 </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/p-0dcef2bb.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as i,H as e,a as o}from"./p-abc59cdf.js";import{d as n,h as r,c as a,b as s}from"./p-202d2cdf.js";import{c as l}from"./p-8a1a6e56.js";import{d}from"./p-16e112f1.js";var p={name:"maxSize",enabled:true,phase:"main",requiresIfExists:["offset","preventOverflow","flip"],fn:function t(i){var e=i.state,o=i.name,r=i.options;var a=n(e,r);var s=e.modifiersData.preventOverflow\|\|{x:0,y:0},l=s.x,d=s.y;var p=e.rects.popper,h=p.width,c=p.height;var f=e.placement.split("-"),b=f[0];var m=b==="left"?"left":"right";var u=b==="top"?"top":"bottom";e.modifiersData[o]={width:h-a[m]-l,height:c-a[u]-d}}};const h=":host(.hidden){visibility:hidden},::after,*::before{box-sizing:border-box}.tooltip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:break-word;word-spacing:normal;word-wrap:normal;white-space:normal;--link-color:#39870c;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:410}.tooltip.in{opacity:1}.tooltip.in .tooltip-inner{max-block-size:200vh;overflow:auto;visibility:visible;padding-block:8px;padding-inline:16px}.tooltip:not(.in) .tooltip-inner{max-block-size:0;overflow:hidden;visibility:hidden;transition:all 0s linear 0.15s}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:1rem;max-inline-size:640px;position:relative}.tooltip .tooltip-inner.dso-small{max-inline-size:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;block-size:0;inline-size:0}.tooltip[data-popper-placement=top]{margin-block-start:-3px;padding-block:6px;padding-inline:0}.tooltip[data-popper-placement=top] .tooltip-arrow{inset-block-end:0;border-block-start-color:#fff;border-width:6px;border-block-end-width:0;margin-inline-start:var(--tooltip-margin-inline-start, -3px)}.tooltip[data-popper-placement=right]{margin-inline-start:3px;padding-block:0;padding-inline:6px}.tooltip[data-popper-placement=right] .tooltip-arrow{inset-inline-start:0;border-inline-end-color:#fff;border-width:6px;border-inline-start-width:0;margin-block-start:var(--tooltip-margin-block-start, -3px)}.tooltip[data-popper-placement=bottom]{margin-block-start:3px;padding-block:6px;padding-inline:0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{inset-block-start:0;border-block-end-color:#fff;border-width:6px;border-block-start-width:0;margin-inline-start:var(--tooltip-margin-inline-start, -3px)}.tooltip[data-popper-placement=left]{margin-inline-start:-3px;margin-inline-end:var(--tooltip-margin-inline-end, unset);padding-block:0;padding-inline:6px}.tooltip[data-popper-placement=left] .tooltip-arrow{inset-inline-end:0;border-inline-start-color:#fff;border-width:6px;border-inline-end-width:0;margin-block-start:var(--tooltip-margin-block-start, -3px)}";const c=h;var f=undefined&&undefined.__classPrivateFieldGet\|\|function(t,i,e,o){if(e==="a"&&!o)throw new TypeError("Private accessor was defined without a getter");if(typeof i==="function"?t!==i\|\|!o:!i.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?o:e==="a"?o.call(t):o?o.value:i.get(t)};var b=undefined&&undefined.__classPrivateFieldSet\|\|function(t,i,e,o,n){if(o==="m")throw new TypeError("Private method is not writable");if(o==="a"&&!n)throw new TypeError("Private accessor was defined without a setter");if(typeof i==="function"?t!==i\|\|!n:!i.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return o==="a"?n.call(t,e):n?n.value=e:i.set(t,e),e};var m;const u=150;const v={name:"applyMaxSize",enabled:true,phase:s,requires:["maxSize"],fn({state:t}){let{width:i}=t.modifiersData.maxSize;if(i<160){i=160}t.styles.popper=Object.assign(Object.assign({},t.styles.popper),{maxWidth:`${i}px`})}};const w=class{constructor(i){t(this,i);this.descriptive=false;this.position="top";this.strategy="auto";this.noArrow=false;this.active=false;this.callbacks={activate:()=>this.active=true,deactivate:()=>{setTimeout((()=>{if(this.element.isConnected){this.active=false}}),2)}};this.onMouseLeave=()=>{var t;if(!this.element.matches(":hover")&&!((t=this.target)===null\|\|t===void 0?void 0:t.matches(":hover"))){this.callbacks.deactivate()}};this.hidden=true;this.keyDownListener=t=>{if(t.key==="Escape"){this.deactivate()}};this.deactivatePopper=d((()=>{var t;this.hidden=true;(t=this.popper)===null\|\|t===void 0?void 0:t.destroy();this.popper=undefined}),u);m.set(this,void 0)}async activate(){this.active=true}async deactivate(){this.active=false}watchPosition(){if(!this.popper){return}this.popper.setOptions({placement:this.position})}watchStrategy(){this.setStrategy()}setStrategy(){if(!this.popper){return}if(this.strategy==="absolute"\|\|this.strategy==="fixed"){this.popper.setOptions({strategy:this.strategy});return}let t=this.element;while(t&&t.parentNode!==document){t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentElement;if(t!==null&&r(t)){this.popper.setOptions({strategy:"fixed"});return}}this.popper.setOptions({strategy:"absolute"})}watchActive(){if(this.active){this.activatePopper();if(!this.stateless){setTimeout((()=>{var t;(t=this.popper)===null\|\|t===void 0?void 0:t.setOptions({modifiers:[{name:"eventListeners",enabled:true}]});document.addEventListener("keydown",this.keyDownListener)}))}}else{document.removeEventListener("keydown",this.keyDownListener);this.deactivatePopper()}}listenClick(t){t.stopPropagation()}componentDidLoad(){var t;const i=(t=this.element.shadowRoot)===null\|\|t===void 0?void 0:t.querySelector(".tooltip");if(!(i instanceof HTMLElement)){throw new Error("tooltip element is not instanceof HTMLElement")}if(!this.stateless&&this.target){this.target.addEventListener("mouseenter",this.callbacks.activate);[this.element,this.target].forEach((t=>t.addEventListener("mouseleave",this.onMouseLeave)));this.target.addEventListener("focus",this.callbacks.activate);this.target.addEventListener("blur",this.callbacks.deactivate)}}disconnectedCallback(){var t;(t=this.popper)===null\|\|t===void 0?void 0:t.destroy();if(!this.stateless&&this.target){this.target.removeEventListener("mouseenter",this.callbacks.activate);[this.element,this.target].forEach((t=>t.removeEventListener("mouseleave",this.onMouseLeave)));this.target.removeEventListener("focus",this.callbacks.activate);this.target.removeEventListener("blur",this.callbacks.deactivate)}this.target=undefined}componentDidRender(){var t;if(this.active){(t=this.popper)===null\|\|t===void 0?void 0:t.update()}}render(){return i(e,{key:"0dae667b622fac9d6e45eead0e5ffd0b3c4fc64a",class:{hidden:this.hidden},role:"tooltip",onClick:this.listenClick},i("div",{key:"8b80667d0734bfd9ea91f698ddf31493f7c27e49",class:l("tooltip",{in:this.active})},!this.noArrow&&i("div",{key:"7124f75b7ba640b0a5e63a15917eddf0ade65853","data-popper-arrow":true,class:"tooltip-arrow"}),i("div",{key:"962322da0404132b4b4ef4046ca70b1b25d11f1f","aria-hidden":!this.descriptive\|\|undefined,class:l("tooltip-inner",{"dso-small":this.small})},i("slot",{key:"1fec252ad2f238dc8b8969bc4aa2d237b5aae943"}))))}activatePopper(){var t;this.hidden=false;if(this.popper){return}const i=(t=this.element.shadowRoot)===null\|\|t===void 0?void 0:t.querySelector(".tooltip");if(this.target&&i instanceof HTMLElement){this.popper=a(this.target,i,{placement:this.position,modifiers:[p,v,{name:"eventListeners",enabled:false}]});this.setStrategy()}}get target(){var t;return(t=f(this,m,"f"))!==null&&t!==void 0?t:this.initializeTarget()}set target(t){b(this,m,t,"f")}initializeTarget(){const t=this.element.id;if(!t){console.warn("Unable to find reference tooltip has no [id] attribute.");return}const i=this.element.getRootNode();if(!(i instanceof Document\|\|i instanceof ShadowRoot)){console.warn(`rootNode is not instance of Document or ShadowRoot`);return}const e=i.querySelector(`[aria-describedBy="${t}`);if(!e){console.warn(`Unable to find reference with aria-describedby ${t}`);return}b(this,m,e,"f");return e}get element(){return o(this)}static get watchers(){return{position:["watchPosition"],strategy:["watchStrategy"],active:["watchActive"]}}};m=new WeakMap;w.style=c;export{w as dso_tooltip};
2	+ //# sourceMappingURL=p-0dcef2bb.entry.js.map

package/dist/dso-toolkit/p-0dcef2bb.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["maxSize","name","enabled","phase","requiresIfExists","fn","_ref","state","options","overflow","detectOverflow","_ref2","modifiersData","preventOverflow","x","y","_state$rects$popper","rects","popper","width","height","_state$placement$spli","placement","split","basePlacement","widthProp","heightProp","tooltipCss","DsoTooltipStyle0","transitionDuration","applyMaxSize","beforeWrite","requires","styles","Object","assign","maxWidth","Tooltip","constructor","hostRef","this","descriptive","position","strategy","noArrow","active","callbacks","activate","deactivate","setTimeout","element","isConnected","onMouseLeave","matches","_a","target","hidden","keyDownListener","event","key","deactivatePopper","debounce","destroy","undefined","_Tooltip_target","set","watchPosition","setOptions","watchStrategy","setStrategy","parentNode","document","ShadowRoot","host","parentElement","hasOverflow","watchActive","activatePopper","stateless","modifiers","addEventListener","removeEventListener","listenClick","e","stopPropagation","componentDidLoad","tooltip","shadowRoot","querySelector","HTMLElement","Error","forEach","disconnectedCallback","componentDidRender","update","render","h","Host","class","role","onClick","clsx","in","small","createPopper","__classPrivateFieldGet","initializeTarget","__classPrivateFieldSet","id","console","warn","rootNode","getRootNode","Document","reference"],"sources":["../../node_modules/popper-max-size-modifier/dist/popper-max-size-modifier.esm.js","src/components/tooltip/tooltip.scss?tag=dso-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { detectOverflow } from '@popperjs/core';\n\nvar maxSize = {\n name: 'maxSize',\n enabled: true,\n phase: 'main',\n requiresIfExists: ['offset', 'preventOverflow', 'flip'],\n fn: function fn(_ref) {\n var state = _ref.state,\n name = _ref.name,\n options = _ref.options;\n var overflow = detectOverflow(state, options);\n\n var _ref2 = state.modifiersData.preventOverflow || {\n x: 0,\n y: 0\n },\n x = _ref2.x,\n y = _ref2.y;\n\n var _state$rects$popper = state.rects.popper,\n width = _state$rects$popper.width,\n height = _state$rects$popper.height;\n\n var _state$placement$spli = state.placement.split('-'),\n basePlacement = _state$placement$spli[0];\n\n var widthProp = basePlacement === 'left' ? 'left' : 'right';\n var heightProp = basePlacement === 'top' ? 'top' : 'bottom';\n state.modifiersData[name] = {\n width: width - overflow[widthProp] - x,\n height: height - overflow[heightProp] - y\n };\n }\n};\n\nexport default maxSize;\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"tooltip.variables\" as tooltip-variables;\r\n\r\n:host(.hidden) {\r\n visibility: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.tooltip {\r\n font-family: typography.$font-family-base;\r\n // We deliberately do NOT reset font-size.\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: typography.$line-height-base;\r\n line-break: auto;\r\n text-align: start;\r\n text-decoration: none;\r\n text-shadow: none;\r\n text-transform: none;\r\n letter-spacing: normal;\r\n word-break: break-word;\r\n word-spacing: normal;\r\n word-wrap: normal;\r\n white-space: normal;\r\n\r\n --link-color: #{colors.$grasgroen};\r\n display: block;\r\n filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));\r\n font-size: typography.$font-size-small;\r\n opacity: 0;\r\n position: absolute;\r\n transition: opacity tooltip-variables.$transition-duration linear;\r\n z-index: zindex.$tooltip;\r\n\r\n &.in {\r\n opacity: tooltip-variables.$opacity;\r\n\r\n .tooltip-inner {\r\n max-block-size: 200vh; // an extreme max-block-size, just to be sure it always fits\r\n overflow: auto;\r\n visibility: visible;\r\n padding-block: tooltip-variables.$padding-block; // set padding-block here to hide the div when the .in class is not active\r\n padding-inline: tooltip-variables.$padding-inline; // set padding-inline here to hide the div when the .in class is not active\r\n }\r\n }\r\n\r\n &:not(.in) {\r\n .tooltip-inner {\r\n max-block-size: 0; // hide the element\r\n overflow: hidden;\r\n visibility: hidden;\r\n transition: all 0s linear tooltip-variables.$transition-duration; // delay all the properties with a 0s linear animation till the parent opacity animation time has passed\r\n }\r\n }\r\n\r\n .tooltip-inner {\r\n background-color: colors.$wit;\r\n border-radius: tooltip-variables.$border-radius;\r\n color: colors.$grijs-90;\r\n display: inline-block;\r\n font-size: typography.$root-font-size-base;\r\n max-inline-size: tooltip-variables.$max-inline-size;\r\n position: relative;\r\n\r\n &.dso-small {\r\n max-inline-size: tooltip-variables.$max-inline-size-small;\r\n }\r\n }\r\n\r\n .tooltip-arrow {\r\n border-color: transparent;\r\n border-style: solid;\r\n block-size: 0;\r\n inline-size: 0;\r\n }\r\n\r\n &[data-popper-placement=\"top\"] {\r\n margin-block-start: -3px;\r\n padding-block: tooltip-variables.$arrow-inline-size;\r\n padding-inline: 0;\r\n\r\n .tooltip-arrow {\r\n inset-block-end: 0;\r\n border-block-start-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-block-end-width: 0;\r\n margin-inline-start: var(--tooltip-margin-inline-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"right\"] {\r\n margin-inline-start: 3px;\r\n padding-block: 0;\r\n padding-inline: tooltip-variables.$arrow-inline-size;\r\n\r\n .tooltip-arrow {\r\n inset-inline-start: 0;\r\n border-inline-end-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-inline-start-width: 0;\r\n margin-block-start: var(--tooltip-margin-block-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"bottom\"] {\r\n margin-block-start: 3px;\r\n padding-block: tooltip-variables.$arrow-inline-size;\r\n padding-inline: 0;\r\n\r\n .tooltip-arrow {\r\n inset-block-start: 0;\r\n border-block-end-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-block-start-width: 0;\r\n margin-inline-start: var(--tooltip-margin-inline-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"left\"] {\r\n margin-inline-start: -3px;\r\n margin-inline-end: var(--tooltip-margin-inline-end, unset);\r\n padding-block: 0;\r\n padding-inline: tooltip-variables.$arrow-inline-size;\r\n\r\n .tooltip-arrow {\r\n inset-inline-end: 0;\r\n border-inline-start-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-inline-end-width: 0;\r\n margin-block-start: var(--tooltip-margin-block-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n}\r\n","import { beforeWrite, createPopper, Instance as PopperInstance, Placement, State as PopperState } from \"@popperjs/core\";\r\nimport maxSize from \"popper-max-size-modifier\";\r\nimport { h, Component, Element, Host, Method, Prop, State, Watch, ComponentInterface } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport debounce from \"debounce\";\r\n\r\n// Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin\r\nconst transitionDuration = 150;\r\n\r\nconst applyMaxSize = {\r\n name: \"applyMaxSize\",\r\n enabled: true,\r\n phase: beforeWrite,\r\n requires: [\"maxSize\"],\r\n fn({ state }: { state: PopperState }) {\r\n let { width } = state.modifiersData.maxSize;\r\n if (width < 160) {\r\n width = 160;\r\n }\r\n\r\n state.styles.popper = {\r\n ...state.styles.popper,\r\n maxWidth: `${width}px`,\r\n };\r\n },\r\n};\r\n\r\n@Component({\r\n tag: \"dso-tooltip\",\r\n styleUrl: \"tooltip.scss\",\r\n shadow: true,\r\n})\r\nexport class Tooltip implements ComponentInterface {\r\n /**\r\n * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.\r\n */\r\n @Prop({\r\n reflect: true,\r\n })\r\n descriptive = false;\r\n\r\n /**\r\n * Set position of tooltip relative to target\r\n */\r\n @Prop()\r\n position: Placement = \"top\";\r\n\r\n /**\r\n * Set position strategy of tooltip\r\n */\r\n @Prop()\r\n strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n /**\r\n * Set attribute `no-arrow` to hide the arrow\r\n */\r\n @Prop()\r\n noArrow = false;\r\n\r\n /**\r\n * Deactivates mouseover behaviour\r\n */\r\n @Prop()\r\n stateless?: boolean;\r\n\r\n /**\r\n * Defines if the tooltip has a smaller max-width\r\n */\r\n @Prop()\r\n small?: boolean;\r\n\r\n /**\r\n * Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods.\r\n */\r\n @Prop({ reflect: true, mutable: true })\r\n active = false;\r\n\r\n /**\r\n * Activate the tooltip (Sets the `active` attribute)\r\n */\r\n @Method()\r\n async activate(): Promise<void> {\r\n this.active = true;\r\n }\r\n\r\n /**\r\n * Deactivate the tooltip (Removes the `active` attribute)\r\n */\r\n @Method()\r\n async deactivate(): Promise<void> {\r\n this.active = false;\r\n }\r\n\r\n @Watch(\"position\")\r\n watchPosition() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n this.popper.setOptions({\r\n placement: this.position,\r\n });\r\n }\r\n\r\n @Watch(\"strategy\")\r\n watchStrategy() {\r\n this.setStrategy();\r\n }\r\n\r\n private setStrategy() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n this.popper.setOptions({\r\n strategy: this.strategy,\r\n });\r\n\r\n return;\r\n }\r\n\r\n let element: Element | null = this.element;\r\n while (element && element.parentNode !== document) {\r\n element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n if (element !== null && hasOverflow(element)) {\r\n this.popper.setOptions({\r\n strategy: \"fixed\",\r\n });\r\n\r\n return;\r\n }\r\n }\r\n\r\n this.popper.setOptions({\r\n strategy: \"absolute\",\r\n });\r\n }\r\n\r\n @Watch(\"active\")\r\n watchActive() {\r\n if (this.active) {\r\n this.activatePopper();\r\n\r\n if (!this.stateless) {\r\n setTimeout(() => {\r\n this.popper?.setOptions({\r\n modifiers: [{ name: \"eventListeners\", enabled: true }],\r\n });\r\n document.addEventListener(\"keydown\", this.keyDownListener);\r\n });\r\n }\r\n } else {\r\n document.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.deactivatePopper();\r\n }\r\n }\r\n\r\n @Element()\r\n private element!: HTMLDsoTooltipElement;\r\n\r\n private popper: PopperInstance | undefined;\r\n\r\n private callbacks: TooltipCallbacks = {\r\n activate: () => (this.active = true),\r\n deactivate: () => {\r\n // Zie https://github.com/dso-toolkit/dso-toolkit/issues/2997#issuecomment-2654330094 voor de aanleiding\r\n // van setTimeout() met 2ms.\r\n setTimeout(() => {\r\n if (this.element.isConnected) {\r\n this.active = false;\r\n }\r\n }, 2);\r\n },\r\n };\r\n\r\n private onMouseLeave = () => {\r\n if (!this.element.matches(\":hover\") && !this.target?.matches(\":hover\")) {\r\n this.callbacks.deactivate();\r\n }\r\n };\r\n\r\n @State()\r\n private hidden = true;\r\n\r\n private listenClick(e: MouseEvent) {\r\n e.stopPropagation();\r\n }\r\n\r\n componentDidLoad(): void {\r\n const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n if (!(tooltip instanceof HTMLElement)) {\r\n throw new Error(\"tooltip element is not instanceof HTMLElement\");\r\n }\r\n\r\n if (!this.stateless && this.target) {\r\n this.target.addEventListener(\"mouseenter\", this.callbacks.activate);\r\n [this.element, this.target].forEach((element) => element.addEventListener(\"mouseleave\", this.onMouseLeave));\r\n this.target.addEventListener(\"focus\", this.callbacks.activate);\r\n this.target.addEventListener(\"blur\", this.callbacks.deactivate);\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.popper?.destroy();\r\n\r\n if (!this.stateless && this.target) {\r\n this.target.removeEventListener(\"mouseenter\", this.callbacks.activate);\r\n [this.element, this.target].forEach((element) => element.removeEventListener(\"mouseleave\", this.onMouseLeave));\r\n this.target.removeEventListener(\"focus\", this.callbacks.activate);\r\n this.target.removeEventListener(\"blur\", this.callbacks.deactivate);\r\n }\r\n\r\n this.target = undefined;\r\n }\r\n\r\n componentDidRender() {\r\n if (this.active) {\r\n this.popper?.update();\r\n }\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.key === \"Escape\") {\r\n this.deactivate();\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <Host class={{ hidden: this.hidden }} role=\"tooltip\" onClick={this.listenClick}>\r\n <div class={clsx(\"tooltip\", { in: this.active })}>\r\n {!this.noArrow && <div data-popper-arrow class=\"tooltip-arrow\"></div>}\r\n <div aria-hidden={!this.descriptive || undefined} class={clsx(\"tooltip-inner\", { \"dso-small\": this.small })}>\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private deactivatePopper = debounce(() => {\r\n this.hidden = true;\r\n this.popper?.destroy();\r\n this.popper = undefined;\r\n }, transitionDuration);\r\n\r\n private activatePopper(): void {\r\n this.hidden = false;\r\n\r\n if (this.popper) {\r\n return;\r\n }\r\n\r\n const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n\r\n if (this.target && tooltip instanceof HTMLElement) {\r\n this.popper = createPopper(this.target, tooltip, {\r\n placement: this.position,\r\n modifiers: [maxSize, applyMaxSize, { name: \"eventListeners\", enabled: false }],\r\n });\r\n\r\n this.setStrategy();\r\n }\r\n }\r\n\r\n private get target(): HTMLElement | undefined {\r\n return this.#target ?? this.initializeTarget();\r\n }\r\n\r\n private set target(element: HTMLElement | undefined) {\r\n this.#target = element;\r\n }\r\n\r\n #target?: HTMLElement;\r\n\r\n private initializeTarget(): HTMLElement | undefined {\r\n const id = this.element.id;\r\n\r\n if (!id) {\r\n console.warn(\"Unable to find reference tooltip has no [id] attribute.\");\r\n\r\n return;\r\n }\r\n\r\n const rootNode = this.element.getRootNode();\r\n if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {\r\n console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n return;\r\n }\r\n\r\n const reference = rootNode.querySelector<HTMLElement>(`[aria-describedBy=\"${id}`);\r\n if (!reference) {\r\n console.warn(`Unable to find reference with aria-describedby ${id}`);\r\n\r\n return;\r\n }\r\n\r\n this.#target = reference;\r\n return reference;\r\n }\r\n}\r\n\r\ninterface TooltipCallbacks {\r\n activate: () => void;\r\n deactivate: () => void;\r\n}\r\n"],"mappings":"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","ignoreList":[]}