npm - @dso-toolkit/core - Versions diffs - 67.3.2 → 68.0.1 - Mend

@dso-toolkit/core 67.3.2 → 68.0.1

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 (338) hide show

package/dist/components/dso-banner.js CHANGED Viewed

@@ -21,9 +21,9 @@ const Banner = /*@__PURE__*/ proxyCustomElement(class Banner extends HTMLElement
         this.noIcon = true;
     }
     render() {
-        return (h("section", { key: 'a5cb823753eda49087b357498f5b92e3a042d46d', class: clsx("dso-banner", `alert-${this.status}`, {
+        return (h("section", { key: 'e602ccf0a4698947a33eb970f810d97c4ff91115', class: clsx("dso-banner", `alert-${this.status}`, {
                 "dso-compact": this.compact,
-            }), role: "alert" }, h("slot", { key: '9c76ee38f37a2f5d1c246d21bcfb40f801882de4' })));
+            }), role: "alert" }, h("slot", { key: '793bd790405237b555e40717f074d2a8aae6d668' })));
     }
     static get style() { return DsoBannerStyle0; }
 }, [1, "dso-banner", {

package/dist/components/dso-card-container.js CHANGED Viewed

@@ -14,7 +14,7 @@ const CardContainer = /*@__PURE__*/ proxyCustomElement(class CardContainer exten
         this.mode = "list";
     }
     render() {
-        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '32d6c14a02ed4aa3a12a4a987b099ba7f786ab26', class: "dso-card-list" }, h("slot", { key: 'f9e8072d7f3dffbcf4e47b19bccc50377dfc8b90' }))), this.mode === "grid" && (h("div", { key: 'b0f534dc19d2c781eab8b13a01d222ee263a53e8', class: "dso-card-grid" }, h("slot", { key: '347c56580c98cd25a2241f7fc7ed36f868005378' })))));
+        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: 'bf7634d7b41380064060cde31c7971dcdde44382', class: "dso-card-list" }, h("slot", { key: 'c575533d409ea152c434b449e98e5f27fd6790b4' }))), this.mode === "grid" && (h("div", { key: 'ada71af5db7d9dc2ba564b521b60fa36e6e37303', class: "dso-card-grid" }, h("slot", { key: '8c1083ff2f2699bbf2652199e3a40b3690c7ab45' })))));
     }
     static get style() { return DsoCardContainerStyle0; }
 }, [1, "dso-card-container", {

package/dist/components/dso-card.js CHANGED Viewed

@@ -35,8 +35,8 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
     }
     render() {
         const isSelectable = this.selectableSlottedElement !== null;
-        return (h(Host, { key: '10c83534a51247b21f0cd43788b5401bb3b7cfe4', "is-selectable": isSelectable }, h("div", { key: '1777c1843f484ca91631c8a177af1e596515313d', class: "dso-card-container" }, h("div", { key: 'da813c4a48eceb0a2032717c92f06b710241ed70', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: '5c9332821517bd1a472b2ecd1ab2614adee16927', name: "selectable" })), h("div", { key: '701a3a2dc0d013bfa1f50eddcb4cf8759c7f4241', class: "dso-card-heading" }, (this.mode === "extern" && (h("a", { key: '760d6e6a0ab5acc994ed46a50a792db3c6647b6a', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'd7c1eb29fc027e72c33efc97aa43d82d8a852b64', name: "heading" }), h("dso-icon", { key: '47bb43f25b70e3389f0f021cfd184d21b5ce4c25', icon: "external-link" }), h("span", { key: '7ca3f4c4974342f115a608729e2df6bcf24a88df', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
-            (this.mode === "download" && (h("a", { key: '4ae333ab348d7d8c3a4bf1dae8ac9dd923a226e0', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '0d6308ffb5d5151865ca5080834d68742cc4e90a', name: "heading" }), h("dso-icon", { key: '51317cdfc3378774e61950e9e344df659727d003', icon: "download" })))) || (h("a", { key: 'cbf7cfe050923e32a0b4322cf73a98450defa97f', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '99a1e24503833f13756b0d6e8433d314865f1fe8', name: "heading" }), h("dso-icon", { key: '5425cb2e9285b8252de9ee13dd08b51e834d89d3', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && h("slot", { key: 'ce04ab4923fd97fbbea799d4937d0a2f73c781a3', name: "interactions" })), h("div", { key: '232a855da9fead8f448bbea8729231688387f4a7', class: "dso-card-content" }, h("slot", { key: '73fd2ccecbd49456b44c42c737f4aa75922910eb', name: "content" })))));
+        return (h(Host, { key: 'ae559eef542b45634fe3e60859befae34b6758f3', "is-selectable": isSelectable }, h("div", { key: 'dbdcd6202dd90afe6163746980568b1da93a1f6b', class: "dso-card-container" }, h("div", { key: 'a2d327a172087119f00e7ad915c376510c812301', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: 'e8362179580065599e3289f415b7713ce5fa314b', name: "selectable" })), h("div", { key: 'ef113d547acb93eb7ddb7d764d6068e0f6961e6c', class: "dso-card-heading" }, (this.mode === "extern" && (h("a", { key: 'c96225236d6860f3a49bec5699ff8dc1b38b28d6', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'a47b5fb10f0439e2c13f522ff8a14d62dabe8989', name: "heading" }), h("dso-icon", { key: '51186c704c9075ebc38a4dd0e3074d0ddf9f2d56', icon: "external-link" }), h("span", { key: '1273130ce694c0a4ae4247420ba07e69d00fa643', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
+            (this.mode === "download" && (h("a", { key: '8b210a4f08569ec47fe39922d7cd9a5e7eacfe51', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '530f82e059ab739fb981cfa5ab71924ad2c0ccc6', name: "heading" }), h("dso-icon", { key: 'ce5c62061feeda349651c41cdb548b6e4acb941c', icon: "download" })))) || (h("a", { key: 'cd96767ed626d0a2b96fa866d7676c080f8285e1', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'e044d0aff126c3c20827fa1a096b9452266e223f', name: "heading" }), h("dso-icon", { key: '4ea9e29a4b91016bed380b01f2811abc2102a4bb', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && h("slot", { key: '5eb35ed45a897e399a924cd3fa1fd0f73fe08077', name: "interactions" })), h("div", { key: 'b316000aed0849ed15352958be227bc65efe6f48', class: "dso-card-content" }, h("slot", { key: '8c8c02740df6f4a19f4375f61a2dc8a706a74162', name: "content" })))));
     }
     get host() { return this; }
     static get style() { return DsoCardStyle0; }

package/dist/components/dso-date-picker-legacy.js CHANGED Viewed

@@ -715,14 +715,14 @@ const DsoDatePickerLegacy$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePick
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: '21048228f8ece85acafa575b65effd49c8eb06fd' }, h("div", { key: '2e8c37e0bd890e5426e18b34c293d59e0dc28fd9', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: '4b5498556f0ecb2959301c6274fa1ba8beeb56ba', class: "dso-date__input-wrapper" }, h("input", { key: 'e4a9c11617188151109278dca34392a7a6fd7acf', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: '59d003f5d3e0692fa692f10d2a6ea74c9d03bc73', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: '35499b0c092f6b64507ef47a8d453e3a9dcab0df', class: "dso-date__toggle-icon" }, h("dso-icon", { key: 'd479c33bec38d9c79aad1dbf135a8656da2bf54d', icon: "calendar" })), h("span", { key: '5868bdd17a5c2f5bfc05c7a662dd19be605f90a2', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: '987d9d6cbad6763ecf3e8c3b1dc6cd7d60a372c0' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: 'bc69058909195de2555bda78e5849d4377e552b8', class: {
+        return (h(Host, { key: 'dbff80962fbcf53e172ecb16a5c1fc590ee10f9e' }, h("div", { key: 'fc473ab4394f82381f59dc20618e13666c7ebff3', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: '9177311d07f6edd7ae15671ddb2948c5b006fcda', class: "dso-date__input-wrapper" }, h("input", { key: '0ece934024a2d46ef451300ae68f4a00747cd7ab', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: '1438410646c1b4629249715b2914cb1b3a684ecc', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: 'ca51e1bb2afd30cdd51dca12f4fe2b0805669195', class: "dso-date__toggle-icon" }, h("dso-icon", { key: '77052c690e40173df63af10b4c053a7c63728a76', icon: "calendar" })), h("span", { key: 'c2c9d9471c025c78c68eacad4f36cb51ab3af8cf', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: 'fbed504c7781943494dd29c1273506b85eaac748' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: '92eab019bb2f737a01ca2da34828d7ae159aa896', class: {
                 "dso-date__dialog": true,
                 "is-left": this.direction === "left",
                 "is-active": this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: '710d763d3b6fe8df45baddcfe3fa64b7f618f20b', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: 'f5825ef31295efa446836948e0af0fcc4ee36ab8', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '83fb9c2a5a7121ddafec462c54d06b0ca4e7721b', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: 'bfbbd91d21a62d54d04b231f49d2ec125b011bb8', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: 'a7a8dd097438f089517dedd43b7aea18dced74cd', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: 'a68b9956250b7884f4138d7b8e9ff9fac1ad8824', icon: "times" }), h("span", { key: '76f352ec95530ae49a75e81093d57f5ec6c0fa3b', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: '3406397370206832afd1dc7036ea25b930f72efa', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '2bd8c6328596ce2587452fc2dc3715b05c754d28' }, h("h2", { key: '8b9c739b4535ad8e0ce8403e615fa587e6d8aadb', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: 'ce7cefb6892d05290f5524d02901cc1e8812b40b', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '28c13137c007701fbe0a3231eab38c9fb7d33e44', class: "dso-date__select" }, h("select", { key: 'b6d9ec18b2951b69b07315222bd943fa81ca7790', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
+            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: 'ace692348e0a214707f3c29e3249f9021c68cc93', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: '263fbad51c855936b9d8a952257f7ab3a8f21077', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '62718328450bcbe0b174d6770b251dfd4750c661', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: 'fa35628b5c5be08b38fc7773c463993bd1b8ca41', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: '01eaa0ae57b2bd59a0cbf3b92f0db867ee6bf71c', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: 'ea41b086cfd2d68c562233630dc85e893db3e923', icon: "times" }), h("span", { key: '35e78553c5075a878761685fa18d307f24d1a6c9', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: 'affb385e33dd6befb239780b629d0652e6150c34', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '3c2df62772391537ad93297e0da77aefcfab0c03' }, h("h2", { key: '3e08c1803d05c3d5fd85802426347705f1e36380', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: '2f0fe33fd34113b0575c934f9db19b270aa4ffab', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'f82717940e66399d7387aef565d254e007d99089', class: "dso-date__select" }, h("select", { key: '3e48aea34fa212bd4f09523a59c2cf7a4e6081c0', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
             const index = this.localization.monthNames.indexOf(month);
             return (h("option", { key: month, value: index, selected: index === focusedMonth }, month));
-        })), h("div", { key: 'b90d2b48cfe943b91bfae7f6e0002c59e28c471b', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'e5b72a3f93ed11b68ea21a84d302072956c78d67' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '80be2680bd6f72d1c501ddbbacf6b9f4b15d9488', icon: "chevron-down" }))), h("label", { key: 'cd80f19fa89fb2f8715e28d6480d2fc9047d1296', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: 'a50afb24985b062fb92a649d7bc42b3d87598dd2', class: "dso-date__select" }, h("select", { key: '90902c118e070b881d157e9f6c62352086da0c7a', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '4f2eb767b984cfe734d8cadd9398af6cc36487d8', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'c6942320ed7fb30b89b397de2db6d45edb49812f' }, this.focusedDay.getFullYear()), h("dso-icon", { key: '47f33877c1bf98dffac4786a93fa04904354e52c', icon: "chevron-down" })))), h("div", { key: 'c4755a4ad89a3be55666ed5d107c93f314774241', class: "dso-date__nav" }, h("button", { key: '64ae003276cf0086c824f0b108ad076eeb6a090e', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: '24bb4171871179fb898b40f5b30d7188d4365cce', icon: "chevron-left" }), h("span", { key: '1f25eee813d9732235b382e513d851e1e47a5b1b', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: 'a1f01fd959e030d8c6bff6f0c7d47aa5ccae9fe3', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '03b4b21054ed24422283cde0ea3de83a547c3537', icon: "chevron-right" }), h("span", { key: 'd9706fd79cb7fd362a9853d6f9ba0556095fa3de', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: '710479d8e9823855ad515bf3b0d2cb6f8a0cc914', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
+        })), h("div", { key: '6610d72573b2034919ac06b150b28fe71675523f', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'd9c715eb6d487fb74b6fa2cf10eaeccb1934f874' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '38999f203ada3723a6489698afc1d64918558b47', icon: "chevron-down" }))), h("label", { key: '8f2b45ddf6a74e4e5e25c655a6ff874ef5bccb15', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '960cc822d81754db8d771100e081aefd3cb26f42', class: "dso-date__select" }, h("select", { key: '71e3c4db15a6c144a9c5f9362c66044c95d79080', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'b32fc0fccaccdc69a7598fe12557192571bab6df', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'd611b1a260e7a05c63e8738801b1d0c30bef9c54' }, this.focusedDay.getFullYear()), h("dso-icon", { key: '0e0efb2816f3bbf02bc797b9251a3055c59bfc98', icon: "chevron-down" })))), h("div", { key: '830953e91f5a02c32859a5563898fd4ff15d1ee1', class: "dso-date__nav" }, h("button", { key: '485e09c768b3f32c97308bf7e2a49e21ad4be43f', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: '7a1b9ecc90f5045d4e115e48357d9c4db88d3b31', icon: "chevron-left" }), h("span", { key: '994605650a68db3e13e336228c1483f822cc36d1', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '5b20176af21e7d2aef98ff8c6ee3271eab227c74', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: 'f8e371518b59d7c0a607c41f784f7d38732025e9', icon: "chevron-right" }), h("span", { key: '02edf66bbca97cac53c55bdbd72730c129b512e2', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: '8e8e7845317318eb372bb5fc08536b452ddc2422', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
     }
     get element() { return this; }
     static get style() { return DsoDatePickerLegacyStyle0; }

package/dist/components/dso-date-picker.js CHANGED Viewed

@@ -149,7 +149,7 @@ const DsoDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePicker ext
     }
     render() {
         var _a;
-        return (h("input", { key: '396b62306362c143d28c80cae648f11b59886c22', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
+        return (h("input", { key: '383a80a337db8578d6b858ee01031b34a1a407ce', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
     }
     get element() { return this; }
     static get style() { return DsoDatePickerStyle0; }

package/dist/components/dso-document-card.js CHANGED Viewed

@@ -31,7 +31,7 @@ const DocumentCard = /*@__PURE__*/ proxyCustomElement(class DocumentCard extends
         return this.host.querySelector("[slot='meta']");
     }
     render() {
-        return (h("div", { key: 'da5f35bfb4340de8123393e31d955f5e232ac1da', class: "dso-document-card-container" }, h("div", { key: 'ebb1766cc91cddff11952de180ae5c4f5e974300', class: "dso-document-card-heading" }, h("a", { key: '44c19ab92d9adce26bf92b71cc763e7f1b55df9a', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'd528a084a56638ec201e4494559cc5c414a22fc6', name: "heading" }), h("dso-icon", { key: 'ec5fce61c68a57ca116f8e7a836fc7cdf2fed653', icon: "chevron-right" })), this.metaSlottedElement !== null && h("slot", { key: 'ed4e4d9029de18af9cfcb34e4bb3da413b38dd84', name: "meta" })), h("div", { key: '0850812c5838eec5dcae5dbe0615a15984e3cefb', class: "dso-document-card-type" }, h("slot", { key: 'e6ad51fac2e3f166dbbd51dee7931cc1b4d74c4f', name: "type" })), h("div", { key: '1c77dc25e082ad3e82299ff991793d92713a0574', class: "dso-document-card-status" }, h("slot", { key: 'ee43d829ce2ac1457cedba9f0c4c0dbaeece098c', name: "status" }))));
+        return (h("div", { key: '78cf18921aeb132bad2b132898e1ee1bef891419', class: "dso-document-card-container" }, h("div", { key: '5043d441e5392c27fb2cefe10a93a0dcd80bea34', class: "dso-document-card-heading" }, h("a", { key: 'fdfc22b565beefdfc823757e79ca544732184689', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '6bda6acbae5b837c69b1257582c5cc00cc9cd70e', name: "heading" }), h("dso-icon", { key: '06ad26aabd164d9b396e8881e402a1dddb7e9170', icon: "chevron-right" })), this.metaSlottedElement !== null && h("slot", { key: '230e5d40f3e9d8a43c215adfabe7a5db86bcbcb8', name: "meta" })), h("div", { key: '29fc7954ad95f27bc997bd2030819e93b2653e3f', class: "dso-document-card-type" }, h("slot", { key: '8814202fe4397298db250712308dca8dbfbebd71', name: "type" })), h("div", { key: '00aa9f3ab7730b44d37c6337951462a27eb60f83', class: "dso-document-card-status" }, h("slot", { key: '838fcf1bc32e8166dd3d5be2119a8d976820a43a', name: "status" }))));
     }
     get host() { return this; }
     static get style() { return DsoDocumentCardStyle0; }

package/dist/components/dso-helpcenter-panel.js CHANGED Viewed

@@ -87,10 +87,10 @@ const HelpcenterPanel = /*@__PURE__*/ proxyCustomElement(class HelpcenterPanel e
         }
     }
     render() {
-        return (h(Fragment, null, h("button", { key: 'e1d37d4e3ebaf06b7a9c2d0aaed9298502d9754e', type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-haspopup": "dialog", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.openButtonElement = element) }, h("dso-icon", { key: 'ba6afadc90c7f5f141416ce5d9930705e11e1e6d', icon: "help" }), h("span", { key: 'a7ac2634e19c2399d930cf65d71b922de37764b9' }, this.label)), h("div", { key: '752eef938f8b873229c972aa7cf2c384abb44527', id: "dso-panel-wrapper", class: `wrapper ${this.visibility}`, "aria-label": "helpcentrum", role: "dialog", ref: (element) => (this.panelWrapperElement = element) }, h("div", { key: '303a49bd479cf7df430fcbb109bcd71bacbb4997', class: "dimscreen", onClick: this.closeClick }), h("div", { key: '888e1c17800a263743d485ceae498019cb48e5d6', class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe ? (h("iframe", { src: this.iframeUrl, tabindex: "0", onLoad: () => {
+        return (h(Fragment, null, h("button", { key: 'b5f8533a2572c7efc255d4d612a2a27343a91be9', type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-haspopup": "dialog", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.openButtonElement = element) }, h("dso-icon", { key: 'd17d6e98ea289542eff68c89de547f69d71f7cb2', icon: "help" }), h("span", { key: 'a2071796a2aca97a5fcbe03dd3aef6dc70df0824' }, this.label)), h("div", { key: 'c835af3f9cc5f3963d7a5c8625f70343490f85c7', id: "dso-panel-wrapper", class: `wrapper ${this.visibility}`, "aria-label": "helpcentrum", role: "dialog", ref: (element) => (this.panelWrapperElement = element) }, h("div", { key: '41be7b955f1c6496d82907bc979627899810b703', class: "dimscreen", onClick: this.closeClick }), h("div", { key: '876215691a2fcc81506a43de60a1ad1cd7ccb0f2', class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe ? (h("iframe", { src: this.iframeUrl, tabindex: "0", onLoad: () => {
                 this.createTrap();
                 this.iframeLoaded = true;
-            } })) : (h("div", null))), h("button", { key: '845463ff6598b4465b5dfd70f2df1c58a2fcf9bf', type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.closeButtonElement = element) }, h("dso-icon", { key: '4275abd1d65644a8ec6e8dff7d8d8a7faaa708e5', icon: "times" }), h("span", { key: '2b3d764a46b5a4a02862b9f1523bd9b055879581', class: "sr-only" }, "sluiten")))));
+            } })) : (h("div", null))), h("button", { key: '48c27af1f624c19ab77b49c334d79cc0678c6f51', type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.closeButtonElement = element) }, h("dso-icon", { key: '729cfe3cd11a39f114476e99d0ef0c7c556f2084', icon: "times" }), h("span", { key: '86561334d6cdebe257f51b75cd5bd64473d99680', class: "sr-only" }, "sluiten")))));
     }
     static get watchers() { return {
         "url": ["watchUrl"],

package/dist/components/dso-highlight-box.js CHANGED Viewed

@@ -12,7 +12,7 @@ const HighlightBox = /*@__PURE__*/ proxyCustomElement(class HighlightBox extends
     render() {
         var _a;
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '25d12143159d00c5e9b4e63f29fac2574add29c4', "has-counter": hasCounter }, hasCounter && h("div", { key: '22f247b99977aee14d66ee8b9bf90da3438fcf18', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: '2d08d1ea5381f056d3bf24d483ec1c0d223df4b8', name: "icon" })), h("slot", { key: '6a9a6a522dd16cb01471eeab3ebe156f82e57686' })));
+        return (h(Host, { key: '17d04a7fe164e8a8a941b9a462be8dd6a25d1113', "has-counter": hasCounter }, hasCounter && h("div", { key: 'a7583dd1d70daa05120f1b03f946e9e9d761f8ac', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: '36034a32c83c60bc42eed0fa9f8052fc6e8528ff', name: "icon" })), h("slot", { key: '13d6b6b268194b07042bdae7c7b3d84b6d723b49' })));
     }
     get element() { return this; }
     static get style() { return DsoHighlightBoxStyle0; }

package/dist/components/dso-input-range.js CHANGED Viewed

@@ -18,13 +18,13 @@ const InputRange = /*@__PURE__*/ proxyCustomElement(class InputRange extends HTM
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: 'bafd8f561096b1c122444e422218bae57805bc4a', id: "description", hidden: true }, this.description)), h("span", { key: '2cd87a76024596c12da99f52de025a34535cc137', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '096fd4d114eb459c331b0d9f684a807537a9f85e', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: '1c66736a5fb56cb8c9a00e6ceba390ffc53b5c92', id: "description", hidden: true }, this.description)), h("span", { key: '8fd5b0b94b34a7fa6dc6d12e27c46118f8ed645c', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '033f60fd111ad80d48385ab984acc6441ffb10e3', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: '158967493692699e1bf8314354b66eeddbf61d38', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: '35499cf191b4237e41c68da386a2c8c8cdcef87b', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
     }
     get host() { return this; }
     static get style() { return DsoInputRangeStyle0; }

package/dist/components/dso-legend-item.js CHANGED Viewed

@@ -35,10 +35,10 @@ const LegendItem = /*@__PURE__*/ proxyCustomElement(class LegendItem extends HTM
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasBody = this.bodySlottedElement !== null;
         const isSelectable = this.selectableSlottedElement !== null;
-        return (h(Host, { key: 'f3ed2e3af15bc7afaefe3e7dc1867e5d009343a9', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '426bdfbe6aee907c9999a3deb7651fffbafee29b', class: clsx("legend-item", {
+        return (h(Host, { key: 'a07a2fef3cf116bba6330caf00d182b2c2c400ee', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '3227f9fdb524d79a8313f4f8298be81e7385037f', class: clsx("legend-item", {
                 "legend-item-symbol": hasSymbol,
                 "legend-item-selectable": isSelectable,
-            }) }, h("div", { key: '4745ac64124b02f4744d7d8b1c1b58e6d6b8cb7c', hidden: !hasSymbol }, h("slot", { key: '16557ca73d29fe764a5d830036e5e4b38adc5c15', name: "symbol" })), h("div", { key: '50545fc88deb5d382a473b4e379a16a178de041d' }, h("slot", { key: '9b0d7272f4d3fa3aad9041ebd08641bce90eded8' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '489ada2ea0a5c9119929a96a53a03753543c79f7', position: "bottom" }, this.disabledMessage)), this.removable && (h("button", { key: '16853ececc9b1281edca10fd0713eaa561f75d81', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, h("span", { key: 'b8ec91d205b0e46c2ac67cc3c55c8aad0719d874', class: "sr-only" }, "Legenda item verwijderen"), h("dso-icon", { key: '4768c9bf633e54e6ad4b391a4c7cce38029ebe4f', icon: "trash" }))), hasBody && !this.disabled && (h("button", { key: 'dca39e77e8506bf21c008c0ea7cc3c615d0037eb', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, h("span", { key: 'a79baa28a2f466d2accba74b9440cd4cb0afdf7e', class: "sr-only" }, "Legenda item aanpassen"), h("dso-icon", { key: '80bd62ff175e0913bcbed1031be74a9f41cdfbdf', icon: this.showBody ? "times" : "more" })))), h("div", { key: 'c2aa88a49822109a0d4e8c110e0467b29d1fe764', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, h("slot", { key: '4cd3703e27f8d3b847aad0f59783a6a65363c60b', name: "body" }))));
+            }) }, h("div", { key: 'b0c546d0a12cec131b2c1440feb0a88297254445', hidden: !hasSymbol }, h("slot", { key: 'be8b8136bf464b49d9268e0ed0c65cd6b790a729', name: "symbol" })), h("div", { key: 'ea40635452492f936ecff0a979d209705b4b0489' }, h("slot", { key: 'd63908576e0f2eda225b4807d934174190bcc51a' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '37e2bb0cc28823a28ac3db56d286146ac079dab0', position: "bottom" }, this.disabledMessage)), this.removable && (h("button", { key: 'fd17f5863ce36b874d3ae9506a8c525317d00296', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, h("span", { key: 'fb34dfc41ab3afa5685884d8517a20e0c91d3edf', class: "sr-only" }, "Legenda item verwijderen"), h("dso-icon", { key: 'd5c6e19b1c51b08b3a646981ce55a167a7b3837a', icon: "trash" }))), hasBody && !this.disabled && (h("button", { key: 'de0efb730d2d840f54ade0b623f28e1e3b82235c', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, h("span", { key: 'd2419f3ff0b34e25b05673b838d8fd8481c6f659', class: "sr-only" }, "Legenda item aanpassen"), h("dso-icon", { key: 'f2a9076efe838692dd045f683986ae4594fff73a', icon: this.showBody ? "times" : "more" })))), h("div", { key: '2c2eeeba001cc10b708d38c2d25236f7650e0f06', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, h("slot", { key: 'dbfab04e8c2daffb9dfb5d4a80f182edc7c5625e', name: "body" }))));
     }
     get host() { return this; }
     static get style() { return DsoLegendItemStyle0; }

package/dist/components/dso-list-button.js CHANGED Viewed

@@ -1,9 +1,8 @@
-import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h } from '@stencil/core/internal/client';
-import { c as createFocusTrap } from './focus-trap.esm.js';
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Fragment } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.js';
 import { d as defineCustomElement$2 } from './icon.js';
-const listButtonCss = "*,\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-manual-input-button {\n  cursor: text;\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-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  align-self: center;\n  background-color: transparent;\n  border: 0;\n  display: inline-block;\n  block-size: 1.5rem;\n  text-align: center;\n  inline-size: 1.5rem;\n}\n.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {\n  outline: 0;\n}\n.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.dso-input-number .dso-input-step-counter[type=number] {\n  -moz-appearance: textfield;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n}\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}\n\n.dso-input-wrapper {\n  position: relative;\n}\n.dso-input-wrapper .form-control {\n  inline-size: 9ch;\n}\n\n.form-control {\n  display: block;\n  inline-size: 100%;\n  block-size: 40px;\n  padding-block: 6px;\n  padding-inline: 14px;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: #191919;\n  background-color: #fff;\n  background-image: none;\n  border: 1px solid #275937;\n  border-radius: 4px;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.form-control::-moz-placeholder {\n  color: #666;\n  opacity: 1;\n}\n.form-control:-ms-input-placeholder {\n  color: #666;\n}\n.form-control::-webkit-input-placeholder {\n  color: #666;\n}\n.form-control::-ms-expand {\n  background-color: transparent;\n  border: 0;\n}\n.form-control:focus {\n  border-color: #275937;\n  outline: 0;\n  box-shadow: inset 0 0 0 1px #275937;\n}\n.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\n  background-color: #fff;\n  opacity: 1;\n}\n.form-control[disabled], fieldset[disabled] .form-control {\n  cursor: default;\n}\n.form-control[disabled] {\n  border-color: #e5e5e5;\n  color: #999;\n}\n.form-control[readonly] {\n  border-width: 1px;\n}\n.form-control[type=text] {\n  line-height: 40px;\n}\n.form-control[size] {\n  inline-size: auto;\n}\n\n.dso-manual-input-button[type=button] {\n  background-color: transparent;\n  border: 0;\n  position: absolute;\n  inset: 0;\n}\n\n.hidden {\n  display: none !important;\n}";
+const listButtonCss = "*,\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 DsoListButtonStyle0 = listButtonCss;
 const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends HTMLElement {
@@ -21,21 +20,10 @@ const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends HTM
          * Whether the List Button is disabled.
          */
         this.disabled = false;
-        /**
-         * Allow user to directly input a value.
-         *
-         * Set to `false` to force users to use plus/minus buttons.
-         */
-        this.manual = true;
     }
     get subcontentSlot() {
         return this.host.querySelector("[slot='subcontent']");
     }
-    watchManualCallback() {
-        if (!this.manual && this.manualCount) {
-            this.stopManualCountInput();
-        }
-    }
     connectedCallback() {
         this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
         this.mutationObserver.observe(this.host, {
@@ -46,36 +34,14 @@ const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends HTM
         });
     }
     componentDidRender() {
-        var _a, _b;
-        if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {
-            this.trap = createFocusTrap(this.manualInputWrapperElement, {
-                escapeDeactivates: true,
-                setReturnFocus: false,
-                clickOutsideDeactivates: (e) => {
-                    this.setCount(e);
-                    return true;
-                },
-                onDeactivate: () => this.stopManualCountInput(),
-                onPostDeactivate: () => { var _a; return (_a = this.manualInputButtonElement) === null || _a === void 0 ? void 0 : _a.focus(); },
-            }).activate();
-        }
-        else if (this.manualCount === undefined && this.trap) {
-            (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
-            delete this.trap;
-        }
-        (_b = this.subcontentSlot) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-hidden", "true");
+        var _a;
+        (_a = this.subcontentSlot) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-hidden", "true");
     }
     disconnectedCallback() {
-        var _a, _b;
-        (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
-        (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         delete this.mutationObserver;
     }
-    handleOnChange({ target }) {
-        if (target instanceof HTMLInputElement) {
-            this.manualCount = target.valueAsNumber;
-        }
-    }
     stepValue(e, direction) {
         if (typeof this.count === "number") {
             const newValue = direction === "increment" ? this.count + 1 : this.count - 1;
@@ -88,16 +54,6 @@ const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends HTM
             });
         }
     }
-    setCount(e) {
-        e.preventDefault();
-        if (typeof this.manualCount === "number" && this.isNewCountValid(this.manualCount)) {
-            this.dsoCountChange.emit({
-                originalEvent: e,
-                count: this.manualCount,
-            });
-            this.stopManualCountInput();
-        }
-    }
     handleSelectClick(e) {
         e.preventDefault();
         if (this.count !== undefined) {
@@ -112,26 +68,16 @@ const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends HTM
             checked: !this.checked,
         });
     }
-    startManualCountInput() {
-        this.manualCount = this.count;
-    }
-    stopManualCountInput() {
-        this.manualCount = undefined;
-    }
     isNewCountValid(newValue) {
         return !(this.min !== undefined &&
             this.max !== undefined &&
             (newValue < Number(this.min) || newValue > Number(this.max)));
     }
     render() {
-        const showButtonInputs = this.manualCount === undefined;
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: 'e7bf049a644612d767b69bd7b8f9a7a2a3415aee', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'ea3f55d4606d1b5d918e87f85dd41fb88359129b', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { key: 'b380324080a4b14237d0ba9c577cb94ac86e3537', class: "dso-selectable" }, h("input", { key: '28a63c6a3f6c2db3ff0ec6a496ecb3d47fe259da', id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), h("label", { key: '9d504627106c1a20a8e163366ba5d2609acb0d34', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (h("div", { key: 'ed2ba786c38106c3ff4b3d6087627fe22a318ff6', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", h("div", { key: '6e7c6a7846ab52e6af57844def31d11de17c5883', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (h("span", { key: '791c2945ae74a09a4dcce87e8e5a50bb8ae5370c', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), h("slot", { key: '73ab87343afd7b01762c9207f9f9871606a8e7a5', name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { key: '44b882307beab09c69b324374af82c03d4dc3ceb', class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (h("button", { key: '403a0f1f8897191e9a32c6567ae4e094a89418ca', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: 'f7e054b48d58184d8403a30839d6b5042ef95076', icon: "minus-circle" }), h("span", { key: 'dbc39db429a1a134d4bd6b092034bc26bba2b008', class: "sr-only" }, "Aantal verlagen"))), h("div", { key: 'b68d42b10d5066d00ccd30bc1710fca145801c29', class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (h("input", { key: 'f26110be0cd8171ec879108ce8c0630cd18e797d', class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), h("form", { key: 'db761f994cc9e8f681e85e618fce6cfab5087083', onSubmit: (e) => this.setCount(e) }, h("div", { key: '724b28bf6a1ddc86e44c6d1f1ae0bb7ede612937', ref: (element) => (this.manualInputWrapperElement = element) }, h("input", { key: '0bd8409e0ecb7fce7c65ac479145bfdf61601e59', class: clsx("form-control", { hidden: showButtonInputs }), type: "number", "aria-label": "Aantal", value: this.manualCount, min: this.min, max: this.max, onInput: (e) => this.handleOnChange(e) })), this.manual && (h("button", { key: '1c72996a4eb4a280c0dfc46748c4ce075a11453b', class: clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (h("span", { class: "sr-only" }, "Zet waarde")))))), showButtonInputs && (h("button", { key: '69cdc0b55ca1c4bbd87d9869374d00777bb39916', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: '968533a4f8a8a0a322309f98f49814faf4df98be', icon: "plus-circle" }), h("span", { key: 'b2bf82b374c5244b0574a44215f06a2b4f988ab2', class: "sr-only" }, "Aantal verhogen")))))));
+        return (h("div", { key: 'fb60f4411ca26dcbb16cec36a03833b2aceeafc7', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '0e1fefb37dbeea9e88b62af8212a87cbd6d31987', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { key: '025b84a7d7449b45262bcbeadc0afaecc740836f', class: "dso-selectable" }, h("input", { key: 'f92201d21b11956a864bb947faa8aa83cc5fa957', id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), h("label", { key: 'b0252f42352ec337a06eb5d1ba14385681b0798e', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (h("div", { key: 'b0edfb917d4ef95f28bc0343c976b027001fdc3a', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", h("div", { key: 'f58587317319494ded637f7e2d672b8553326964', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (h("span", { key: 'a1f03051f2795fcb720104e68360633f5089530a', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), h("slot", { key: 'a9d021a5c5187322c48874bbf6041c6388db892a', name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { key: '0e1d39294b2642ab180c12995c7e0f8651bb9674', class: "dso-input-number" }, this.count > 1 && (h(Fragment, null, h("button", { key: '3d37f6ffcdab938a0f6cd72b5d4e0aceffca0a3e', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: 'bcc8bf4b3d1cf609ab555507dfcb79072cfa7d37', icon: "minus-circle" }), h("span", { key: '0911c67ec9dcced5753bb78292c908994d1bd120', class: "sr-only" }, "Aantal verlagen")), h("span", { key: '941601e969493b50c9ab9f531cd94b40083e3311', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("button", { key: '12cc6c00e9a6afe7a28ba813cf6c58624a2151ec', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: '11c41be904dcdebb9bc07aec287e086111ff8aba', icon: "plus-circle" }), h("span", { key: '4be205c67c39e3320a9b92bc1469ed8af9a1d7ce', class: "sr-only" }, "Aantal verhogen"))))));
     }
     get host() { return this; }
-    static get watchers() { return {
-        "manual": ["watchManualCallback"]
-    }; }
     static get style() { return DsoListButtonStyle0; }
 }, [1, "dso-list-button", {
         "label": [1],
@@ -141,12 +87,7 @@ const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends HTM
         "max": [8],
         "checked": [516],
         "disabled": [516],
-        "subcontentPrefix": [1, "subcontent-prefix"],
-        "manual": [4],
-        "manualInputWrapperElement": [32],
-        "manualCount": [32]
-    }, undefined, {
-        "manual": ["watchManualCallback"]
+        "subcontentPrefix": [1, "subcontent-prefix"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/dso-list-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-list-button.js","mappings":"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","names":[],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/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-manual-input-button {\r\n cursor: text;\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n // 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 align-self: center;\r\n background-color: transparent;\r\n border: 0;\r\n display: inline-block;\r\n block-size: units.$ru3;\r\n text-align: center;\r\n inline-size: units.$ru3;\r\n\r\n &:focus,\r\n &:active {\r\n outline: 0;\r\n }\r\n\r\n // Chrome, Safari, Edge, Opera\r\n &::-webkit-outer-spin-button,\r\n &::-webkit-inner-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n }\r\n\r\n // Firefox\r\n &[type=\"number\"] {\r\n -moz-appearance: textfield;\r\n }\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\r\n.dso-list-button,\r\n.dso-button-group {\r\n + .dso-list-button,\r\n + .dso-button-group {\r\n margin-block-start: list-button-variables.$margin-gap;\r\n }\r\n}\r\n\r\n.dso-input-wrapper {\r\n position: relative;\r\n\r\n .form-control {\r\n inline-size: 9ch;\r\n }\r\n}\r\n\r\n.form-control {\r\n @include form-control.root();\r\n}\r\n\r\n.dso-manual-input-button[type=\"button\"] {\r\n background-color: transparent;\r\n border: 0;\r\n position: absolute;\r\n inset: 0;\r\n}\r\n\r\n.hidden {\r\n display: none !important;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n h,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n State,\r\n Watch,\r\n forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoListButtonElement;\r\n\r\n private trap?: FocusTrap;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private get subcontentSlot() {\r\n return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n }\r\n\r\n @State()\r\n private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n @State()\r\n manualCount?: number;\r\n\r\n /\r\n The label of the List Button.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The sublabel of the List Button.\r\n /\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /\r\n When defined the count can show on the List Button.\r\n /\r\n @Prop()\r\n count?: number;\r\n\r\n /\r\n The minimum value.\r\n /\r\n @Prop()\r\n min?: string \| number;\r\n\r\n /\r\n The maximum value.\r\n /\r\n @Prop()\r\n max?: string \| number;\r\n\r\n /\r\n Whether the List Button is checked.\r\n /\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /\r\n Whether the List Button is disabled.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Prefix to subcontent for the purpose of screenreading.\r\n /\r\n @Prop()\r\n subcontentPrefix?: string;\r\n\r\n /\r\n Allow user to directly input a value.\r\n \r\n Set to `false` to force users to use plus/minus buttons.\r\n /\r\n @Prop()\r\n manual = true;\r\n\r\n /\r\n Emitted when the user changes the count.\r\n /\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /\r\n Emitted when the user activates the List Button itself.\r\n \r\n Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n @Watch(\"manual\")\r\n watchManualCallback() {\r\n if (!this.manual && this.manualCount) {\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n escapeDeactivates: true,\r\n setReturnFocus: false,\r\n\r\n clickOutsideDeactivates: (e) => {\r\n this.setCount(e);\r\n\r\n return true;\r\n },\r\n onDeactivate: () => this.stopManualCountInput(),\r\n onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n }).activate();\r\n } else if (this.manualCount === undefined && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n\r\n this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.trap?.deactivate();\r\n\r\n this.mutationObserver?.disconnect();\r\n delete this.mutationObserver;\r\n }\r\n\r\n private handleOnChange({ target }: Event): void {\r\n if (target instanceof HTMLInputElement) {\r\n this.manualCount = target.valueAsNumber;\r\n }\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" \| \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (!this.isNewCountValid(newValue)) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private setCount(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.manualCount,\r\n });\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private startManualCountInput(): void {\r\n this.manualCount = this.count;\r\n }\r\n\r\n private stopManualCountInput(): void {\r\n this.manualCount = undefined;\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n return !(\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) \|\| newValue > Number(this.max))\r\n );\r\n }\r\n\r\n render() {\r\n const showButtonInputs = this.manualCount === undefined;\r\n\r\n const selected = this.checked \|\| (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n aria-describedby={\r\n [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") \|\| null\r\n }\r\n checked={selected}\r\n disabled={this.disabled}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n {this.subcontentSlot && (\r\n <div class=\"sr-only\" id=\"description\">\r\n {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n </div>\r\n )}\r\n </div>\r\n {this.sublabel && (\r\n <span class=\"dso-sublabel\" id=\"sublabel\">\r\n {this.sublabel}\r\n </span>\r\n )}\r\n <slot name=\"subcontent\" />\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.min) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"decrement\")}\r\n >\r\n <dso-icon icon=\"minus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verlagen</span>\r\n </button>\r\n )}\r\n\r\n <div class=\"dso-input-wrapper\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <input\r\n class=\"dso-input-step-counter\"\r\n type=\"number\"\r\n tabIndex={-1}\r\n aria-label=\"Aantal\"\r\n value={this.count}\r\n readOnly\r\n />\r\n )}\r\n\r\n <form onSubmit={(e) => this.setCount(e)}>\r\n <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n <input\r\n class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n type=\"number\"\r\n aria-label=\"Aantal\"\r\n value={this.manualCount}\r\n min={this.min}\r\n max={this.max}\r\n onInput={(e) => this.handleOnChange(e)}\r\n />\r\n </div>\r\n\r\n {this.manual && (\r\n <button\r\n class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n type={!showButtonInputs ? \"submit\" : \"button\"}\r\n disabled={this.disabled}\r\n onClick={() => showButtonInputs && this.startManualCountInput()}\r\n >\r\n {showButtonInputs ? (\r\n <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n ) : (\r\n <span class=\"sr-only\">Zet waarde</span>\r\n )}\r\n </button>\r\n )}\r\n </form>\r\n </div>\r\n\r\n {showButtonInputs && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.max) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"increment\")}\r\n >\r\n <dso-icon icon=\"plus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verhogen</span>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-list-button.js","mappings":"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","names":[],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/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\r\n.dso-list-button,\r\n.dso-button-group {\r\n + .dso-list-button,\r\n + .dso-button-group {\r\n margin-block-start: list-button-variables.$margin-gap;\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"],"version":3}

package/dist/components/dso-logo.js CHANGED Viewed

@@ -32,7 +32,7 @@ const Logo = /*@__PURE__*/ proxyCustomElement(class Logo extends HTMLElement {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo$1, { name: this.name }))) : (h(DsoLogo$1, { name: this.name })), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '2ffb6bb6b26e9b0969b20283f7ea19487454b533', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: 'd3262e24609510f462852166bae0bb05cd471560', class: "logo-ribbon" }, this.ribbon)));
     }
     static get style() { return DsoLogoStyle0; }
 }, [1, "dso-logo", {

package/dist/components/dso-map-base-layers.js CHANGED Viewed

@@ -51,7 +51,7 @@ const MapBaseLayers = /*@__PURE__*/ proxyCustomElement(class MapBaseLayers exten
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '4844cb7dc1f22b46db47516b2482c67673eb70f7', class: "form-group dso-radios" }, h("legend", { key: 'b0acfbdfe97f083ed88bfdc12a3e5da85f71e7c7', class: "sr-only" }, "Achtergrond"), h("div", { key: '6cf325954514f6279761f99ade9f6297fd0f2931', class: "dso-label-container" }, h("span", { key: '924198ae3890df319ce186a44b44d59640b21d1e', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'fc609656c7c56a80d192ad7f68048a63b238777c', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: '31f28b8aac3b85899716c3d73739b8b048cce5c2', class: "form-group dso-radios" }, h("legend", { key: '079f815943c707a94f8d2b969d3c34df168434b6', class: "sr-only" }, "Achtergrond"), h("div", { key: '7a1d09b517fb8194a6b99ca732b6f7c1a42b2030', class: "dso-label-container" }, h("span", { key: 'b9308d0b67acbf8eeb31d61ada07ef78f6e76dbf', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'bd1f76d18a167732fe91f11e32c912aca525047f', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     get host() { return this; }
     static get style() { return DsoMapBaseLayersStyle0; }

package/dist/components/dso-map-controls.js CHANGED Viewed

@@ -90,7 +90,7 @@ const MapControls = /*@__PURE__*/ proxyCustomElement(class MapControls extends H
         });
     }
     render() {
-        return (h(Fragment, null, h("button", { key: '29335393712a1781f9dff4ba7b3e02a69919b91f', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'a1a70b77c019e0874cf2e973e3f0ea66cc9a2c14', icon: "layers" }), h("span", { key: '5194ddccaf7dfe2ab781fe7231eac9c0a9041e6b' }, this.text("layersButton"))), h("div", { key: '1cfb45e5f21c97cb02095a40c049c4e326fff674', class: "zoom-buttons" }, h("button", { key: 'c0cc9b3b3daa68d740ffed946f5afbb22b1d74e0', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'd6303dd24115cea4d24fc045d369ff97e0873413' }, this.text("zoomIn")), h("dso-icon", { key: '653e2a1d4a806c91e740c59cd73fd230facb582e', icon: "plus" })), h("button", { key: '0c4ca76537cf0a456fbc376d2b989f9bae62bb19', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: 'a79e3f32a8f72d14cafb062e713bd65d95998c28' }, this.text("zoomOut")), h("dso-icon", { key: '782888d0e2c39ffeccf953cd50e945b35e221e3f', icon: "minus" }))), h("section", { key: 'd981313fdc4ab36ab28a874fbb19a95549b64cb8', hidden: this.hideContent }, h("header", { key: '79533f6432d77975c9b303dc3e6fcf787963c985' }, h("h2", { key: '40514da2dbdd1c80ff91608747390c635f82d9b0' }, this.text("title")), h("button", { key: 'dc94d69f20a5ec73f7b952361ab6849bb57d53f6', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '6e280bc6fa50c89ecf48c24fb43f2f4834558140' }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: 'f5dfc01ef1468620ef9b3c2b464f9b1a5093eef6', icon: "times" }))), h("dso-scrollable", { key: '589b88feaadd4a620f8c97443d20dc6a2698627f' }, h("div", { key: '8017cc835034f60d81e9384cf5ee004843e933e4', class: "content" }, h("slot", { key: '25338f564df6e616ad5f66deea19bfe472ac1cb1' }))))));
+        return (h(Fragment, null, h("button", { key: 'e437cc9487051507ca3eb919aa97f0a4ab39475b', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'd5821df785e62d1409e4fc88eba137250b7a2386', icon: "layers" }), h("span", { key: '96bcffa0c6c978155f2679c908409540180ca83e' }, this.text("layersButton"))), h("div", { key: '0b72c5e148abb8a33f7ad2a04d411a35d7a80501', class: "zoom-buttons" }, h("button", { key: 'a5d342fd781905fcaa82f8b0c1aff8d226335e00', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '7a185d40e20a36490aa9fe7576875d07a05935c6' }, this.text("zoomIn")), h("dso-icon", { key: 'a19dd361cc779e2ba986303dd6a00f0307a65364', icon: "plus" })), h("button", { key: '045e648c8cd05195ca9fffd916fe8d4b6371e70c', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '9ed34442104b5f9bcd66027ce5997df96bb48ec1' }, this.text("zoomOut")), h("dso-icon", { key: '71501aaaf3e47ab79bf8e9e85178a17dd1ac744d', icon: "minus" }))), h("section", { key: 'c832b1de0ee23f32ab668c5ac068b0c1d115d74c', hidden: this.hideContent }, h("header", { key: '258cd2a6b969191e6a8e81d3490457cac852a59d' }, h("h2", { key: '25e7359b457f5496650a7d0ac0a99eb6dab24331' }, this.text("title")), h("button", { key: 'f7834b66d780ee2521693c5e47eae06d83ee1803', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'b1724abe463205df408cfd899d6325e3e64ccab5' }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '66065df2ca031efb57fca03952e9c04e062cc4be', icon: "times" }))), h("dso-scrollable", { key: '19f6a224463b30376bff99b083ce25b44b59df28' }, h("div", { key: '84f926f37038e17164a84f939e9f142184738443', class: "content" }, h("slot", { key: 'efd1449530ad4f2707129a7f1b01875856bcf427' }))))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/dso-map-overlays.js CHANGED Viewed

@@ -52,7 +52,7 @@ const MapOverlays = /*@__PURE__*/ proxyCustomElement(class MapOverlays extends H
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '9892fc514d3605c8532105d7ab3dc7a20841838b', class: "form-group dso-checkboxes" }, h("legend", { key: '8fd65bf3a7592e1f89b3133ddcdaa0650e8df2bd', class: "sr-only" }, "Kaartlagen"), h("div", { key: '4d42c4b39c33e5c5b2e510a0cccec6703e36ee28', class: "dso-label-container" }, h("span", { key: 'eccf54c31ae3def04c5af3d43b2d094581b7b311', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'f1a0fa892a2e0b7301c57098930fe87218c209bc', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: 'c3b999bcfd600744f885128418dcb69aa9a18133', class: "form-group dso-checkboxes" }, h("legend", { key: 'bf13c49ba66ed5a8f0c8ca8ce3b2f4e41de64032', class: "sr-only" }, "Kaartlagen"), h("div", { key: '639e81cdc4f91ee53da11c8aede39fd5c85fc6e7', class: "dso-label-container" }, h("span", { key: '94172cf1232312e5d39e09f99390119f189109ce', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'bb520e45e6a9c58c5bf7013fdbcf5ed39a635d45', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     get host() { return this; }
     static get style() { return DsoMapOverlaysStyle0; }