npm - @dso-toolkit/core - Versions diffs - 54.3.0 → 55.0.0 - Mend

@dso-toolkit/core 54.3.0 → 55.0.0

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

Files changed (271) hide show

package/dist/collection/components/scrollable/scrollable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scrollable.js","sourceRoot":"","sources":["../../../src/components/scrollable/scrollable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1F,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,QAAQ,MAAM,UAAU,CAAC;AAIhC,MAAM,cAAc,GAAG,IAAI,cAAc,CACvC,QAAQ,CACN,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,WAAC,OAAA,MAAA,6CAA6C,CAAC,KAAK,CAAC,0CAAE,eAAe,EAAE,CAAA,EAAA,CAAC,EAChH,EAAE,CACH,CACF,CAAC;AAEF,SAAS,6CAA6C,CAAC,EACrD,MAAM,GACc;EACpB,IAAI,MAAM,CAAC,UAAU,YAAY,UAAU,IAAI,wBAAwB,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;IAC/F,OAAO,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC;GAC/B;EAED,IAAI,MAAM,CAAC,aAAa,IAAI,wBAAwB,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE;IAC1E,OAAO,MAAM,CAAC,aAAa,CAAC;GAC7B;EAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,wBAAwB,CAAC,OAAgB;EAChD,OAAO,OAAO,CAAC,OAAO,KAAK,gBAAgB,CAAC;AAC9C,CAAC;AAOD,MAAM,OAAO,UAAU;;IACrB,wFAAwF;IAChF,qBAAgB,GAAG,IAAI,gBAAgB,CAAC,CAAC,OAAO,EAAE,EAAE,CAC1D,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;;MAC7B,MAAM,OAAO,GAAG,MAAA,MAAM,CAAC,aAAa,0CAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;MAChE,IAAI,OAAO,KAAK,IAAI,CAAC,IAAI,EAAE;QACzB,OAAO;OACR;MAED,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC,CAAC,CACH,CAAC;~~0BAc~~+B,UAAU;;EAE3C;;KAEG;EAEH,KAAK,CAAC,eAAe;IACnB,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAChD,IAAI,IAAI,CAAC,cAAc,KAAK,cAAc,EAAE;MAC1C,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;MAErC,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK,IAAI,IAAI,CAAC,cAAc,KAAK,QAAQ,EAAE;QACrE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;OAC5D;KACF;EACH,CAAC;EAED,IAAY,eAAe;IACzB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EACxC,CAAC;EAEO,iBAAiB;IACvB,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;MAC5B,OAAO,UAAU,CAAC;KACnB;IAED,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,kBAAkB,CAAC;IAE1E,IAAI,YAAY,IAAI,YAAY,EAAE;MAChC,OAAO,UAAU,CAAC;KACnB;IAED,IAAI,SAAS,KAAK,CAAC,EAAE;MACnB,OAAO,KAAK,CAAC;KACd;IAED,IAAI,YAAY,GAAG,SAAS,GAAG,YAAY,GAAG,CAAC,EAAE;MAC/C,OAAO,QAAQ,CAAC;KACjB;IAED,IAAI,SAAS,GAAG,CAAC,EAAE;MACjB,OAAO,QAAQ,CAAC;KACjB;IAED,OAAO,UAAU,CAAC;EACpB,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;MACvC,aAAa,EAAE,IAAI;MACnB,UAAU,EAAE,KAAK;MACjB,SAAS,EAAE,KAAK;MAChB,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;IAEH,IAAI,IAAI,CAAC,kBAAkB,YAAY,cAAc,EAAE;MACrD,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACjD;IAED,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;EAC7E,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,kBAAkB,YAAY,cAAc,EAAE;MACrD,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACnD;IAED,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;IAEnC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;EAC/E,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,sBAAsB;~~MAC/B~~,WACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC,EAC3C,KAAK,EAAE,IAAI,CAAC,sBAAsB,EAAE;UAClC,CAAC,cAAc,IAAI,CAAC,cAAc,EAAE,CAAC,EAAE,IAAI,CAAC,cAAc,KAAK,UAAU;SAC1E,CAAC,EACF,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE;QAEtC,eAAa,CACT,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce(\r\n (entries) => entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n 50\r\n )\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement \| undefined {\r\n if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n return target.parentNode.host;\r\n }\r\n\r\n if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n return target.parentElement;\r\n }\r\n\r\n return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n tag: \"dso-scrollable\",\r\n styleUrl: \"scrollable.scss\",\r\n shadow: true,\r\n})\r\nexport class Scrollable {\r\n // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n private mutationObserver = new MutationObserver((entries) =>\r\n entries.forEach(({ target }) => {\r\n const element = target.parentElement?.closest(\"dso-scrollable\");\r\n if (element !== this.host) {\r\n return;\r\n }\r\n\r\n this._setScrollState();\r\n })\r\n );\r\n\r\n private scrollContainerDiv?: HTMLDivElement;\r\n\r\n @Element()\r\n host!: HTMLDsoScrollableElement;\r\n\r\n /*\r\n Event emitted when the scrollbar has reached top or bottom.\r\n /\r\n @Event()\r\n dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n @State()\r\n scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _setScrollState() {\r\n const scrollPosition = this.getScrollPosition();\r\n if (this.scrollPosition !== scrollPosition) {\r\n this.scrollPosition = scrollPosition;\r\n\r\n if (this.scrollPosition === \"top\" \|\| this.scrollPosition === \"bottom\") {\r\n this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n }\r\n }\r\n }\r\n\r\n private get slottedElements() {\r\n return Array.from(this.host.children);\r\n }\r\n\r\n private getScrollPosition(): ScrollPosition {\r\n if (!this.scrollContainerDiv) {\r\n return \"noScroll\";\r\n }\r\n\r\n const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n if (scrollHeight <= clientHeight) {\r\n return \"noScroll\";\r\n }\r\n\r\n if (scrollTop === 0) {\r\n return \"top\";\r\n }\r\n\r\n if (scrollHeight - scrollTop - clientHeight < 1) {\r\n return \"bottom\";\r\n }\r\n\r\n if (scrollTop > 0) {\r\n return \"middle\";\r\n }\r\n\r\n return \"noScroll\";\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n attributes: false,\r\n childList: false,\r\n subtree: true,\r\n });\r\n\r\n if (this.~~scrollContainerDiv~~ instanceof HTMLDivElement) {\r\n resizeObserver.observe(this.~~scrollContainerDiv~~);\r\n }\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n }\r\n\r\n disconnectedCallback(): void {\r\n if (this.~~scrollContainerDiv~~ instanceof HTMLDivElement) {\r\n resizeObserver.unobserve(this.~~scrollContainerDiv~~);\r\n }\r\n\r\n this.mutationObserver.disconnect();\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"dso-shadow-container\">\r\n <div\r\n ref={(el) => (this.scrollContainerDiv = el)}\r\n class={clsx(\"dso-scroll-container\", {\r\n [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n })}\r\n onScroll={() => this._setScrollState()}\r\n >\r\n <slot></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"scrollable.js","sourceRoot":"","sources":["../../../src/components/scrollable/scrollable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce(\r\n (entries) => entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n 50\r\n )\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement \| undefined {\r\n if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n return target.parentNode.host;\r\n }\r\n\r\n if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n return target.parentElement;\r\n }\r\n\r\n return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n tag: \"dso-scrollable\",\r\n styleUrl: \"scrollable.scss\",\r\n shadow: true,\r\n})\r\nexport class Scrollable {\r\n // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n private mutationObserver = new MutationObserver((entries) =>\r\n entries.forEach(({ target }) => {\r\n const element = target.parentElement?.closest(\"dso-scrollable\");\r\n if (element !== this.host) {\r\n return;\r\n }\r\n\r\n this._setScrollState();\r\n })\r\n );\r\n\r\n private scrollContainerDiv?: HTMLDivElement;\r\n\r\n private shadowContainerDiv?: HTMLDivElement;\r\n\r\n @Element()\r\n host!: HTMLDsoScrollableElement;\r\n\r\n /*\r\n Event emitted when the scrollbar has reached top or bottom.\r\n /\r\n @Event()\r\n dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n @State()\r\n scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _setScrollState() {\r\n const scrollPosition = this.getScrollPosition();\r\n if (this.scrollPosition !== scrollPosition) {\r\n this.scrollPosition = scrollPosition;\r\n\r\n if (this.scrollPosition === \"top\" \|\| this.scrollPosition === \"bottom\") {\r\n this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n }\r\n }\r\n }\r\n\r\n private get slottedElements() {\r\n return Array.from(this.host.children);\r\n }\r\n\r\n private getScrollPosition(): ScrollPosition {\r\n if (!this.scrollContainerDiv) {\r\n return \"noScroll\";\r\n }\r\n\r\n const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n if (scrollHeight <= clientHeight) {\r\n return \"noScroll\";\r\n }\r\n\r\n if (scrollTop === 0) {\r\n return \"top\";\r\n }\r\n\r\n if (scrollHeight - scrollTop - clientHeight < 1) {\r\n return \"bottom\";\r\n }\r\n\r\n if (scrollTop > 0) {\r\n return \"middle\";\r\n }\r\n\r\n return \"noScroll\";\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n attributes: false,\r\n childList: false,\r\n subtree: true,\r\n });\r\n\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.observe(this.shadowContainerDiv);\r\n }\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n }\r\n\r\n disconnectedCallback(): void {\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.unobserve(this.shadowContainerDiv);\r\n }\r\n\r\n this.mutationObserver.disconnect();\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n }\r\n\r\n render() {\r\n return (\r\n <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n <div\r\n ref={(el) => (this.scrollContainerDiv = el)}\r\n class={clsx(\"dso-scroll-container\", {\r\n [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n })}\r\n onScroll={() => this._setScrollState()}\r\n >\r\n <slot></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/selectable/selectable.css CHANGED Viewed

@@ -165,7 +165,7 @@
   min-height: 24px;
   padding-inline: 32px;
 }
-.dso-selectable-container .dso-selectable-input-wrapper:focus-within {
+.dso-selectable-container .dso-selectable-input-wrapper:focus-within.dso-keyboard-focus {
   border-radius: 2px;
   outline-offset: 3px;
   outline: 3px solid #008ccc;

package/dist/collection/components/selectable/selectable.js CHANGED Viewed

@@ -17,6 +17,7 @@ export class Selectable {
     this.indeterminate = undefined;
     this.infoFixed = undefined;
     this.infoActive = false;
+    this.keyboardFocus = false;
   }
   /**
    * Method to toggle the Info. Is set to `active` when passed.
@@ -49,7 +50,7 @@ export class Selectable {
   render() {
     var _a;
     const hasInfo = !!this.host.querySelector('[slot="info"]');
-    return (h(Fragment, null, h("div", { class: clsx("dso-selectable-container", { "has-info-button": hasInfo }) }, h("div", { class: "dso-selectable-input-wrapper" }, h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: (e) => this.dsoChange.emit(e), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null))), hasInfo && (h(Fragment, null, !this.infoFixed && (h("dso-info-button", { active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))))), hasInfo && (h("dso-info", { id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", null, h("slot", { name: "info" }))))));
+    return (h(Fragment, null, h("div", { class: clsx("dso-selectable-container", { "has-info-button": hasInfo }) }, h("div", { class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: (e) => this.dsoChange.emit(e), onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null))), hasInfo && (h(Fragment, null, !this.infoFixed && (h("dso-info-button", { active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))))), hasInfo && (h("dso-info", { id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", null, h("slot", { name: "info" }))))));
   }
   getIdentifier() {
     var _a;
@@ -277,7 +278,8 @@ export class Selectable {
   }
   static get states() {
     return {
-      "infoActive": {}
+      "infoActive": {},
+      "keyboardFocus": {}
     };
   }
   static get events() {

package/dist/collection/components/selectable/selectable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"selectable.js","sourceRoot":"","sources":["../../../src/components/selectable/selectable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,CAAC,EACD,SAAS,EACT,IAAI,EACJ,KAAK,EAEL,QAAQ,EACR,OAAO,EACP,KAAK,EACL,WAAW,EACX,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAQjE,MAAM,OAAO,UAAU;;~~IAuGb~~,uBAAkB,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;;;;;;;;;;;;;~~sBAflD~~,KAAK;;~~EAElB~~;;;;;KAKG;EAEH,KAAK,CAAC,UAAU,CAAC,MAAgB;IAC/B,IAAI,CAAC,UAAU,GAAG,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,CAAC,IAAI,CAAC,UAAU,CAAC;EAC/C,CAAC;EAQD,gBAAgB;;IACd,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;IAEpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;MACvC,SAAS,EAAE,IAAI;KAChB,CAAC,CAAC;IAEH,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;EACtC,CAAC;EAGD,gBAAgB;IACd,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,YAAY,gBAAgB,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;MACzE,OAAO;KACR;IAED,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;EAClD,CAAC;EAED,MAAM;;IACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAE3D,OAAO,CACL,EAAC,QAAQ;MACP,WAAK,KAAK,EAAE,IAAI,CAAC,0BAA0B,EAAE,EAAE,iBAAiB,EAAE,OAAO,EAAE,CAAC;QAC1E,WAAK,KAAK,~~EAAC~~,8BAA8B;~~UACvC~~,aACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,aAAa,EAAE,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,MAAA,IAAI,CAAC,OAAO,0CAAE,QAAQ,EAAE,sBACpB,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,qBAC3D,IAAI,CAAC,YAAY,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EACvC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,GAC9B;UACD,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACpB,aAAO,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE;YAClC,eAAa,CACP,CACT,CAAC,CAAC,CAAC,CACF,gBAAe,CAChB,CACG;QACL,OAAO,IAAI,CACV,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,SAAS,IAAI,CAClB,uBACE,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GACtC,CACpB,CACQ,CACZ,CACG;MACL,OAAO,IAAI,CACV,gBACE,EAAE,EAAE,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAC9D,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAE3C;UACE,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACG,CACZ,CACQ,CACZ,CAAC;EACJ,CAAC;EAEO,aAAa;;IACnB,OAAO,MAAA,IAAI,CAAC,UAAU,mCAAI,IAAI,CAAC,kBAAkB,CAAC;EACpD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\r\n h,\r\n Component,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Element,\r\n State,\r\n forceUpdate,\r\n Watch,\r\n Method,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-selectable\",\r\n styleUrl: \"selectable.scss\",\r\n scoped: true,\r\n})\r\nexport class Selectable {\r\n /*\r\n Type of Selectable.\r\n \r\n `checkbox`: Multiple options\r\n * `radio`: Single option.\r\n /\r\n @Prop()\r\n type!: \"checkbox\" \| \"radio\";\r\n\r\n /\r\n To set `<input id>` attribute for external references.\r\n /\r\n @Prop()\r\n identifier?: string;\r\n\r\n /\r\n Name of the Selectable. Can be used to group Selectables.\r\n /\r\n @Prop()\r\n name?: string;\r\n\r\n /\r\n The value of the Selectable.\r\n /\r\n @Prop()\r\n value!: string;\r\n\r\n /\r\n Set to true of the current value is not valid.\r\n /\r\n @Prop()\r\n invalid?: boolean;\r\n\r\n /\r\n To link this control to an element that describes it.\r\n /\r\n @Prop()\r\n describedById?: string;\r\n\r\n /\r\n To link this control to an element that labels it.\r\n /\r\n @Prop()\r\n labelledById?: string;\r\n\r\n /\r\n To disable the Selectable.\r\n /\r\n @Prop()\r\n disabled?: boolean;\r\n\r\n /\r\n To mark the Selectable as required.\r\n /\r\n @Prop()\r\n required?: boolean;\r\n\r\n /\r\n Mark the Selectable as checked\r\n /\r\n @Prop()\r\n checked?: boolean;\r\n\r\n /\r\n An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n \r\n Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n /\r\n @Prop()\r\n indeterminate?: boolean;\r\n\r\n /\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop()\r\n infoFixed?: boolean;\r\n\r\n /\r\n Emitted when the user checks or unchecks the Selectable.\r\n /\r\n @Event()\r\n dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoSelectableElement;\r\n\r\n @State()\r\n infoActive = false;\r\n\r\n /\r\n Method to toggle the Info. Is set to `active` when passed.\r\n \r\n If `active` is not passed, Info is toggled to opposite value.\r\n * @param active\r\n */\r\n @Method()\r\n async toggleInfo(active?: boolean) {\r\n this.infoActive = active ?? !this.infoActive;\r\n }\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n private input: HTMLInputElement \| undefined;\r\n\r\n componentDidLoad() {\r\n this.mutationObserver?.disconnect();\r\n\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n this.mutationObserver.observe(this.host, {\r\n childList: true,\r\n });\r\n\r\n this.setIndeterminate();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n @Watch(\"indeterminate\")\r\n setIndeterminate() {\r\n if (!(this.input instanceof HTMLInputElement) \|\| this.type !== \"checkbox\") {\r\n return;\r\n }\r\n\r\n this.input.indeterminate = !!this.indeterminate;\r\n }\r\n\r\n render() {\r\n const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n return (\r\n <Fragment>\r\n <div class={clsx(\"dso-selectable-container\", { \"has-info-button\": hasInfo })}>\r\n <div class=\"dso-selectable-input-wrapper\">\r\n <input\r\n type={this.type}\r\n id={this.getIdentifier()}\r\n value={this.value}\r\n name={this.name}\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n aria-labelledBy={this.labelledById}\r\n disabled={this.disabled}\r\n required={this.required}\r\n checked={this.checked}\r\n onChange={(e) => this.dsoChange.emit(e)}\r\n ref={(el) => (this.input = el)}\r\n />\r\n {!this.labelledById ? (\r\n <label htmlFor={this.getIdentifier()}>\r\n <slot></slot>\r\n </label>\r\n ) : (\r\n <label></label>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <Fragment>\r\n {!this.infoFixed && (\r\n <dso-info-button\r\n active={this.infoActive}\r\n onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n ></dso-info-button>\r\n )}\r\n </Fragment>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <dso-info\r\n id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n fixed={this.infoFixed}\r\n active={this.infoActive}\r\n onDsoClose={() => (this.infoActive = false)}\r\n >\r\n <div>\r\n <slot name=\"info\"></slot>\r\n </div>\r\n </dso-info>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n\r\n private getIdentifier(): string {\r\n return this.identifier ?? this.fallbackIdentifier;\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"selectable.js","sourceRoot":"","sources":["../../../src/components/selectable/selectable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,CAAC,EACD,SAAS,EACT,IAAI,EACJ,KAAK,EAEL,QAAQ,EACR,OAAO,EACP,KAAK,EACL,WAAW,EACX,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAQjE,MAAM,OAAO,UAAU;;IA0Gb,uBAAkB,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;;;;;;;;;;;;;sBAlBlD,KAAK;yBAGF,KAAK;;EAErB;;;;;KAKG;EAEH,KAAK,CAAC,UAAU,CAAC,MAAgB;IAC/B,IAAI,CAAC,UAAU,GAAG,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,CAAC,IAAI,CAAC,UAAU,CAAC;EAC/C,CAAC;EAQD,gBAAgB;;IACd,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;IAEpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;MACvC,SAAS,EAAE,IAAI;KAChB,CAAC,CAAC;IAEH,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;EACtC,CAAC;EAGD,gBAAgB;IACd,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,YAAY,gBAAgB,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;MACzE,OAAO;KACR;IAED,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;EAClD,CAAC;EAED,MAAM;;IACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAE3D,OAAO,CACL,EAAC,QAAQ;MACP,WAAK,KAAK,EAAE,IAAI,CAAC,0BAA0B,EAAE,EAAE,iBAAiB,EAAE,OAAO,EAAE,CAAC;QAC1E,WAAK,KAAK,EAAE,IAAI,CAAC,8BAA8B,EAAE,EAAE,oBAAoB,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC;UAC5F,aACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,aAAa,EAAE,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,MAAA,IAAI,CAAC,OAAO,0CAAE,QAAQ,EAAE,sBACpB,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,qBAC3D,IAAI,CAAC,YAAY,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EACvC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,EAC1C,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,EAC1C,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,GAC9B;UACD,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACpB,aAAO,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE;YAClC,eAAa,CACP,CACT,CAAC,CAAC,CAAC,CACF,gBAAe,CAChB,CACG;QACL,OAAO,IAAI,CACV,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,SAAS,IAAI,CAClB,uBACE,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GACtC,CACpB,CACQ,CACZ,CACG;MACL,OAAO,IAAI,CACV,gBACE,EAAE,EAAE,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAC9D,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAE3C;UACE,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACG,CACZ,CACQ,CACZ,CAAC;EACJ,CAAC;EAEO,aAAa;;IACnB,OAAO,MAAA,IAAI,CAAC,UAAU,mCAAI,IAAI,CAAC,kBAAkB,CAAC;EACpD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\r\n h,\r\n Component,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Element,\r\n State,\r\n forceUpdate,\r\n Watch,\r\n Method,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-selectable\",\r\n styleUrl: \"selectable.scss\",\r\n scoped: true,\r\n})\r\nexport class Selectable {\r\n /*\r\n Type of Selectable.\r\n \r\n `checkbox`: Multiple options\r\n * `radio`: Single option.\r\n /\r\n @Prop()\r\n type!: \"checkbox\" \| \"radio\";\r\n\r\n /\r\n To set `<input id>` attribute for external references.\r\n /\r\n @Prop()\r\n identifier?: string;\r\n\r\n /\r\n Name of the Selectable. Can be used to group Selectables.\r\n /\r\n @Prop()\r\n name?: string;\r\n\r\n /\r\n The value of the Selectable.\r\n /\r\n @Prop()\r\n value!: string;\r\n\r\n /\r\n Set to true of the current value is not valid.\r\n /\r\n @Prop()\r\n invalid?: boolean;\r\n\r\n /\r\n To link this control to an element that describes it.\r\n /\r\n @Prop()\r\n describedById?: string;\r\n\r\n /\r\n To link this control to an element that labels it.\r\n /\r\n @Prop()\r\n labelledById?: string;\r\n\r\n /\r\n To disable the Selectable.\r\n /\r\n @Prop()\r\n disabled?: boolean;\r\n\r\n /\r\n To mark the Selectable as required.\r\n /\r\n @Prop()\r\n required?: boolean;\r\n\r\n /\r\n Mark the Selectable as checked\r\n /\r\n @Prop()\r\n checked?: boolean;\r\n\r\n /\r\n An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n \r\n Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n /\r\n @Prop()\r\n indeterminate?: boolean;\r\n\r\n /\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop()\r\n infoFixed?: boolean;\r\n\r\n /\r\n Emitted when the user checks or unchecks the Selectable.\r\n /\r\n @Event()\r\n dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoSelectableElement;\r\n\r\n @State()\r\n infoActive = false;\r\n\r\n @State()\r\n keyboardFocus = false;\r\n\r\n /\r\n Method to toggle the Info. Is set to `active` when passed.\r\n \r\n If `active` is not passed, Info is toggled to opposite value.\r\n * @param active\r\n */\r\n @Method()\r\n async toggleInfo(active?: boolean) {\r\n this.infoActive = active ?? !this.infoActive;\r\n }\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n private input: HTMLInputElement \| undefined;\r\n\r\n componentDidLoad() {\r\n this.mutationObserver?.disconnect();\r\n\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n this.mutationObserver.observe(this.host, {\r\n childList: true,\r\n });\r\n\r\n this.setIndeterminate();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n @Watch(\"indeterminate\")\r\n setIndeterminate() {\r\n if (!(this.input instanceof HTMLInputElement) \|\| this.type !== \"checkbox\") {\r\n return;\r\n }\r\n\r\n this.input.indeterminate = !!this.indeterminate;\r\n }\r\n\r\n render() {\r\n const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n return (\r\n <Fragment>\r\n <div class={clsx(\"dso-selectable-container\", { \"has-info-button\": hasInfo })}>\r\n <div class={clsx(\"dso-selectable-input-wrapper\", { \"dso-keyboard-focus\": this.keyboardFocus })}>\r\n <input\r\n type={this.type}\r\n id={this.getIdentifier()}\r\n value={this.value}\r\n name={this.name}\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n aria-labelledBy={this.labelledById}\r\n disabled={this.disabled}\r\n required={this.required}\r\n checked={this.checked}\r\n onChange={(e) => this.dsoChange.emit(e)}\r\n onBlur={() => (this.keyboardFocus = false)}\r\n onKeyUp={() => (this.keyboardFocus = true)}\r\n ref={(el) => (this.input = el)}\r\n />\r\n {!this.labelledById ? (\r\n <label htmlFor={this.getIdentifier()}>\r\n <slot></slot>\r\n </label>\r\n ) : (\r\n <label></label>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <Fragment>\r\n {!this.infoFixed && (\r\n <dso-info-button\r\n active={this.infoActive}\r\n onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n ></dso-info-button>\r\n )}\r\n </Fragment>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <dso-info\r\n id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n fixed={this.infoFixed}\r\n active={this.infoActive}\r\n onDsoClose={() => (this.infoActive = false)}\r\n >\r\n <div>\r\n <slot name=\"info\"></slot>\r\n </div>\r\n </dso-info>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n\r\n private getIdentifier(): string {\r\n return this.identifier ?? this.fallbackIdentifier;\r\n }\r\n}\r\n"]}

package/dist/collection/components/table/table.css CHANGED Viewed

@@ -38,13 +38,13 @@
 }
 :host .dso-modal .dso-dialog {
   animation: 1s ease-out 0s 1 slideInFromTop;
-  margin-top: 15vh;
+  background-color: #fff;
+  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
   margin-left: auto;
   margin-right: auto;
+  margin-top: clamp(40px, 15vh, 15vh);
   max-width: 640px;
   opacity: 1;
-  background-color: #fff;
-  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
 }
 :host .dso-modal .dso-header {
   border-bottom: 1px solid #ccc;
@@ -67,41 +67,74 @@
   top: 16px;
   width: 32px;
 }
-:host .dso-modal .dso-body {
+:host .dso-modal > .dso-dialog > .dso-body {
   height: calc(100% - 96px - 1.5rem);
   max-height: calc(70vh - 144px - 1.5em);
   min-height: 1.5rem;
   overflow-x: auto;
   padding: 32px;
 }
-:host .dso-modal .dso-body p {
+:host .dso-modal > .dso-dialog > .dso-body p {
+  margin: 0 0 16px;
+}
+:host .dso-modal > .dso-dialog > .dso-body ul,
+:host .dso-modal > .dso-dialog > .dso-body ol {
+  margin-bottom: 16px;
+}
+:host .dso-modal > .dso-dialog > .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
+:host .dso-modal > .dso-dialog > .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
+  padding-inline-start: 24px;
+}
+:host .dso-modal > .dso-dialog > .dso-body pre {
+  margin: 0 0 16px;
+}
+:host .dso-modal > .dso-dialog > .dso-body blockquote {
+  padding: 16px 24px;
+}
+:host .dso-modal > .dso-dialog > .dso-body dso-highlight-box,
+:host .dso-modal > .dso-dialog > .dso-body .dso-highlight-box {
+  margin-bottom: 24px;
+}
+:host .dso-modal > .dso-dialog > .dso-body img {
+  height: auto;
+  max-width: 100%;
+}
+:host .dso-modal > .dso-dialog > dso-scrollable {
+  height: calc(100% - 96px - 1.5rem);
+  max-height: calc(70vh - 144px - 1.5em);
+  min-height: 6.5rem;
+}
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body {
+  padding: 32px;
+}
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body p {
   margin: 0 0 16px;
 }
-:host .dso-modal .dso-body ul,
-:host .dso-modal .dso-body ol {
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul,
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol {
   margin-bottom: 16px;
 }
-:host .dso-modal .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
-:host .dso-modal .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
   padding-inline-start: 24px;
 }
-:host .dso-modal .dso-body pre {
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body pre {
   margin: 0 0 16px;
 }
-:host .dso-modal .dso-body blockquote {
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body blockquote {
   padding: 16px 24px;
 }
-:host .dso-modal .dso-body dso-highlight-box,
-:host .dso-modal .dso-body .dso-highlight-box {
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body dso-highlight-box,
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body .dso-highlight-box {
   margin-bottom: 24px;
 }
-:host .dso-modal .dso-body img {
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body img {
   height: auto;
   max-width: 100%;
 }
 :host .dso-modal .dso-footer {
   min-height: 80px;
-  padding: 0 32px 32px;
+  padding: 16px 32px;
   text-align: right;
 }
 @media screen and (max-width: 767px) {
@@ -150,6 +183,27 @@
     float: none;
   }
 }
+@media screen and (max-height: 380px) {
+  :host .dso-modal .dso-dialog {
+    margin-bottom: 8px;
+    margin-top: 8px;
+    min-height: 216px;
+  }
+  :host .dso-modal .dso-header {
+    padding: 8px 16px;
+  }
+  :host .dso-modal .dso-header .dso-close {
+    top: 8px;
+  }
+  :host .dso-modal .dso-body {
+    padding: 16px 24px;
+  }
+  :host .dso-modal .dso-footer {
+    min-height: auto;
+    overflow: auto;
+    padding: 8px 32px;
+  }
+}
 .dso-modal .dso-dialog.dso-table-dialog {
   margin-top: 1rem;

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

@@ -5,7 +5,7 @@ import { i as isModifiedEvent } from './is-modified-event.js';
 import { d as defineCustomElement$3 } from './dropdown-menu.js';
 import { d as defineCustomElement$2 } from './icon.js';
-const headerCss = ".sc-dso-header-h{display:block}.dso-header.sc-dso-header{border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}@media screen and (min-width: 768px){.dso-header.sc-dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down.sc-dso-header{flex-wrap:nowrap}}.dso-header.sc-dso-header .dso-nav.sc-dso-header{border:0}.logo-container.sc-dso-header{display:flex;flex-wrap:wrap;gap:0 24px;padding-bottom:16px;padding-top:16px}.login.sc-dso-header .dso-tertiary.sc-dso-header,.logout.sc-dso-header .dso-tertiary.sc-dso-header{cursor:pointer;font-family:Asap, sans-serif;font-weight:600;vertical-align:text-bottom}.profile.sc-dso-header a.sc-dso-header,.logout.sc-dso-header a.sc-dso-header,.login.sc-dso-header a.sc-dso-header{text-decoration:none;color:#39870c;font-weight:600}.profile.sc-dso-header a.sc-dso-header:hover,.profile.sc-dso-header a.sc-dso-header:focus,.logout.sc-dso-header a.sc-dso-header:hover,.logout.sc-dso-header a.sc-dso-header:focus,.login.sc-dso-header a.sc-dso-header:hover,.login.sc-dso-header a.sc-dso-header:focus{text-decoration:none}.profile.sc-dso-header a.sc-dso-header:active,.logout.sc-dso-header a.sc-dso-header:active,.login.sc-dso-header a.sc-dso-header:active{text-decoration:underline}.dso-header-session.sc-dso-header{display:flex;margin-left:auto}.dso-header-session.sc-dso-header .profile.sc-dso-header a.sc-dso-header{margin-left:8px}.dso-header-session.sc-dso-header .profile.sc-dso-header+.logout.sc-dso-header{border-left:3px solid #ccc;margin-left:16px;padding-left:16px}.dso-navbar.sc-dso-header{flex-basis:100%}.dso-navbar.sc-dso-header .dso-dropdown-options.sc-dso-header{border-top:1px solid #ccc}dso-dropdown-menu.sc-dso-header button.sc-dso-header{align-items:flex-end;background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;padding-right:32px}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{border:0;border-radius:0}@media screen and (min-width: 768px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:375px}}@media screen and (max-width: 767px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:100%}}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header{color:#275937;font-size:1.25rem;padding:16px;white-space:pre-wrap}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:focus{color:#fff}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.dso-active.sc-dso-header a.sc-dso-header{font-weight:600}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header+li.sc-dso-header{border-top:1px solid #ccc}.dropdown.sc-dso-header{margin-left:auto}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{position:static}@media screen and (max-width: 767px){.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{margin-top:28px}}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{right:0;top:100%}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{color:#39870c;font-size:16px;font-weight:600;line-height:normal;position:relative}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:50%;transform:translateY(-50%)}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.sc-dso-header{align-items:end;column-gap:32px;display:flex;list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.dso-nav.sc-dso-header>li.sc-dso-header{margin-bottom:4px}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header{display:block}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:visited{color:#275937}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header{margin-bottom:0}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header>a.sc-dso-header{border-bottom:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main.sc-dso-header{display:flex !important}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header{text-decoration:none;font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;white-space:nowrap}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:active{text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{left:-1rem !important;top:3px !important}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;align-items:center;color:#275937;padding-right:32px}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:auto;transform:none}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header{margin-left:auto}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header dso-icon.sc-dso-header{height:1em;margin-right:8px;position:relative;top:-2px;width:1.2em}";
+const headerCss = ".sc-dso-header-h{display:block}.dso-header.sc-dso-header{border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}@media screen and (min-width: 768px){.dso-header.sc-dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down.sc-dso-header{flex-wrap:nowrap}}.dso-header.sc-dso-header .dso-nav.sc-dso-header{border:0}.logo-container.sc-dso-header{display:flex;flex-wrap:wrap;gap:0 24px;padding-bottom:16px;padding-top:16px}.login.sc-dso-header .dso-tertiary.sc-dso-header,.logout.sc-dso-header .dso-tertiary.sc-dso-header{cursor:pointer;font-family:Asap, sans-serif;font-weight:600;vertical-align:text-bottom}.profile.sc-dso-header a.sc-dso-header,.logout.sc-dso-header a.sc-dso-header,.login.sc-dso-header a.sc-dso-header{text-decoration:none;color:#39870c;font-weight:600}.profile.sc-dso-header a.sc-dso-header:hover,.profile.sc-dso-header a.sc-dso-header:focus,.logout.sc-dso-header a.sc-dso-header:hover,.logout.sc-dso-header a.sc-dso-header:focus,.login.sc-dso-header a.sc-dso-header:hover,.login.sc-dso-header a.sc-dso-header:focus{text-decoration:none}.profile.sc-dso-header a.sc-dso-header:active,.logout.sc-dso-header a.sc-dso-header:active,.login.sc-dso-header a.sc-dso-header:active{text-decoration:underline}.profile.sc-dso-header a.sc-dso-header:focus,.logout.sc-dso-header a.sc-dso-header:focus,.login.sc-dso-header a.sc-dso-header:focus{color:#fff}.dso-header-session.sc-dso-header{display:flex;margin-left:auto}.dso-header-session.sc-dso-header .profile.sc-dso-header a.sc-dso-header{margin-left:8px}.dso-header-session.sc-dso-header .profile.sc-dso-header+.logout.sc-dso-header{border-left:3px solid #ccc;margin-left:16px;padding-left:16px}.dso-navbar.sc-dso-header{flex-basis:100%}.dso-navbar.sc-dso-header .dso-dropdown-options.sc-dso-header{border-top:1px solid #ccc}dso-dropdown-menu.sc-dso-header button.sc-dso-header{align-items:flex-end;background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;padding-right:32px}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{border:0;border-radius:0}@media screen and (min-width: 768px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:375px}}@media screen and (max-width: 767px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:100%}}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.sc-dso-header{color:#275937;font-size:1.25rem;padding:16px;white-space:pre-wrap}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:focus,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.sc-dso-header:focus{color:#fff}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:hover,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.sc-dso-header:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.dso-active.sc-dso-header a.sc-dso-header{font-weight:600}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header+li.sc-dso-header{border-top:1px solid #ccc}.dropdown.sc-dso-header{margin-left:auto}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{position:static}@media screen and (max-width: 767px){.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{margin-top:28px}}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{right:0;top:100%}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{color:#39870c;font-size:16px;font-weight:600;line-height:normal;position:relative}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:50%;transform:translateY(-50%)}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.sc-dso-header{align-items:end;column-gap:32px;display:flex;list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.dso-nav.sc-dso-header>li.sc-dso-header{margin-bottom:4px}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header{display:block}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:visited{color:#275937}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header{margin-bottom:0}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header>a.sc-dso-header{border-bottom:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main.sc-dso-header{display:flex !important}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header{text-decoration:none;font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;white-space:nowrap}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:active{text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{left:-1rem !important;top:3px !important}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;align-items:center;color:#275937;padding-right:32px}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:auto;transform:none}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header{margin-left:auto}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header dso-icon.sc-dso-header{height:1em;margin-right:8px;position:relative;top:-2px;width:1.2em}";
 const minDesktopViewportWidth = 992;
 const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement {
@@ -14,6 +14,9 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
     this.__registerHost();
     this.dsoHeaderClick = createEvent(this, "dsoHeaderClick", 7);
     this.onWindowResize = debounce_1(() => {
+      var _a, _b;
+      (_a = this.dropdownElement) === null || _a === void 0 ? void 0 : _a.removeAttribute("open");
+      (_b = this.dropdownElement) === null || _b === void 0 ? void 0 : _b.removeAttribute("tabindex");
       this.setDropDownMenu();
       this.setOverflowMenu();
       if (this.showDropDown) {

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

	@@ -1 +1 @@
1	- {"file":"dso-header.js","mappings":"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","names":["debounce"],"sources":["./src/components/header/header.scss?tag=dso-header&encapsulation=scoped","./src/components/header/header.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"header.variables\" as core-header-variables;\r\n\r\n@mixin nav-item-border($color) {\r\n border-bottom: 4px solid $color;\r\n}\r\n\r\n@mixin nav-item-main {\r\n font-size: 1.25em;\r\n line-height: 1;\r\n margin-top: units.$u1;\r\n padding: units.$u2 0;\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.dso-header {\r\n border-bottom: 1px solid colors.$grijs-20;\r\n display: flex;\r\n flex-wrap: wrap;\r\n position: relative;\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n align-items: center;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {\r\n &.use-drop-down {\r\n flex-wrap: nowrap;\r\n }\r\n }\r\n\r\n .dso-nav {\r\n border: 0;\r\n }\r\n}\r\n\r\n.logo-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0 units.$u3;\r\n padding-bottom: units.$u2;\r\n padding-top: units.$u2;\r\n}\r\n\r\n.login,\r\n.logout {\r\n .dso-tertiary {\r\n cursor: pointer;\r\n font-family: typography.$font-family-base;\r\n font-weight: 600;\r\n vertical-align: text-bottom;\r\n }\r\n}\r\n\r\n.profile,\r\n.logout,\r\n.login {\r\n a {\r\n @include anchor.clean();\r\n\r\n color: colors.$grasgroen;\r\n font-weight: 600;\r\n }\r\n}\r\n\r\n.dso-header-session {\r\n display: flex;\r\n margin-left: auto;\r\n\r\n .profile {\r\n a {\r\n margin-left: units.$u1;\r\n }\r\n\r\n + .logout {\r\n border-left: 3px solid colors.$grijs-20;\r\n margin-left: units.$u2;\r\n padding-left: units.$u2;\r\n }\r\n }\r\n}\r\n\r\n.dso-navbar {\r\n flex-basis: 100%;\r\n\r\n .dso-dropdown-options {\r\n border-top: 1px solid colors.$grijs-20;\r\n }\r\n}\r\n\r\ndso-dropdown-menu {\r\n button {\r\n align-items: flex-end;\r\n background-color: transparent;\r\n border: 0;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n padding-right: units.$u4;\r\n }\r\n\r\n .dso-dropdown-options {\r\n border: 0;\r\n border-radius: 0;\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n width: 375px;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n width: 100%;\r\n }\r\n\r\n ul li {\r\n a {\r\n color: colors.$bosgroen;\r\n font-size: 1.25rem;\r\n padding: units.$u2;\r\n white-space: pre-wrap;\r\n\r\n &:focus {\r\n color: colors.$wit;\r\n }\r\n\r\n &:hover {\r\n background-color: colors.$wit;\r\n color: colors.$bosgroen;\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n &.dso-active {\r\n a {\r\n font-weight: 600;\r\n }\r\n }\r\n\r\n + li {\r\n border-top: 1px solid colors.$grijs-20;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dropdown {\r\n margin-left: auto;\r\n\r\n dso-dropdown-menu {\r\n position: static;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n margin-top: units.$u1 * 3.5;\r\n }\r\n\r\n .dso-dropdown-options {\r\n right: 0;\r\n top: 100%;\r\n }\r\n\r\n button {\r\n color: colors.$grasgroen;\r\n font-size: typography.$font-size-base;\r\n font-weight: 600;\r\n line-height: normal;\r\n position: relative;\r\n\r\n &::after {\r\n margin-left: units.$u1;\r\n position: absolute;\r\n right: 0px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n }\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-nav {\r\n align-items: end;\r\n column-gap: units.$u4;\r\n display: flex;\r\n list-style: none;\r\n margin-bottom: 0;\r\n margin-top: 0;\r\n padding-left: 0;\r\n\r\n > li {\r\n margin-bottom: 4px;\r\n\r\n > a {\r\n display: block;\r\n\r\n &,\r\n &:hover,\r\n &:focus,\r\n &:visited {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n &.dso-active,\r\n &.is-active {\r\n margin-bottom: 0;\r\n\r\n > a {\r\n @include nav-item-border(core-header-variables.$navigation-selected-color);\r\n\r\n font-weight: bold;\r\n }\r\n }\r\n }\r\n\r\n &.dso-nav-main {\r\n display: flex !important;\r\n\r\n > li {\r\n > a {\r\n @include anchor.reverse();\r\n @include nav-item-main();\r\n\r\n // stylelint-disable-next-line declaration-property-value-disallowed-list -- no wrapping wanted because of icon\r\n white-space: nowrap;\r\n }\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n left: units.$ru2 * -1 !important;\r\n top: 3px !important;\r\n }\r\n\r\n button {\r\n @include nav-item-main();\r\n\r\n align-items: center;\r\n color: colors.$bosgroen;\r\n padding-right: units.$u4;\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n\r\n &::after {\r\n margin-left: units.$u1;\r\n position: absolute;\r\n right: 0px;\r\n top: auto;\r\n transform: none;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .menu-user-home {\r\n margin-left: auto;\r\n\r\n dso-icon {\r\n height: 1em;\r\n margin-right: units.$u1;\r\n position: relative;\r\n top: -2px;\r\n width: 1.2em;\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, h, Prop, State, Watch } from \"@stencil/core\";\r\n\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HeaderMenuItem, HeaderNavigationType, HeaderEvent } from \"./header.interfaces\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\n@Component({\r\n tag: \"dso-header\",\r\n styleUrl: \"header.scss\",\r\n scoped: true,\r\n})\r\nexport class Header {\r\n private clickHandler(\r\n e: MouseEvent,\r\n type: HeaderNavigationType,\r\n options?: { menuItem?: HeaderMenuItem; url?: string }\r\n ) {\r\n this.dsoHeaderClick.emit({\r\n originalEvent: e,\r\n isModifiedEvent: isModifiedEvent(e),\r\n type,\r\n menuItem: options?.menuItem,\r\n url: options?.url ?? options?.menuItem?.url,\r\n });\r\n }\r\n\r\n private dropdownElement?: HTMLElement;\r\n\r\n @Element()\r\n host!: HTMLDsoHeaderElement;\r\n\r\n /*\r\n The main menu items.\r\n /\r\n @Prop()\r\n mainMenu?: HeaderMenuItem[] = [];\r\n\r\n /\r\n Either have the dropdown menu appear automatically or always.\r\n /\r\n @Prop()\r\n useDropDownMenu: \"always\" \| \"auto\" = \"auto\";\r\n\r\n /\r\n Used to show the login/logout option. 'none' renders nothing.\r\n /\r\n @Prop()\r\n authStatus: \"none\" \| \"loggedIn\" \| \"loggedOut\" = \"none\";\r\n\r\n /\r\n When the `authStatus` is `loggedOut` a loginUrl can be provided, the login button will render as an anchor.\r\n /\r\n @Prop()\r\n loginUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"logout\".\r\n /\r\n @Prop()\r\n logoutUrl?: string;\r\n\r\n /\r\n The name to show when the user is logged in.\r\n /\r\n @Prop()\r\n userProfileName?: string;\r\n\r\n /\r\n The URL to open when the user activates the profile url.\r\n /\r\n @Prop()\r\n userProfileUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeUrl?: string;\r\n\r\n /\r\n Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeActive?: boolean;\r\n\r\n @State()\r\n showDropDown?: boolean;\r\n\r\n @State()\r\n hasSubLogo = false;\r\n\r\n @State()\r\n overflowMenuItems = 0;\r\n\r\n @State()\r\n dropdownOptionsOffset = 0;\r\n\r\n /\r\n Emitted when something in the header is selected.\r\n \r\n `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n /\r\n @Event()\r\n dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n @Watch(\"useDropDownMenu\")\r\n setShowDropDown(value: \"always\" \| \"auto\") {\r\n if (value === \"auto\") {\r\n this.setDropDownMenu();\r\n\r\n return;\r\n }\r\n\r\n this.showDropDown = value === \"always\";\r\n }\r\n\r\n private wrapper: HTMLDivElement \| undefined;\r\n\r\n private nav: HTMLUListElement \| undefined;\r\n\r\n componentWillLoad() {\r\n this.hasSubLogo = this.host.querySelector(\"[slot = 'sub-logo']\") !== null;\r\n }\r\n\r\n private shrinkMenuToFit() {\r\n if (!this.wrapper \|\| !this.nav) {\r\n return;\r\n }\r\n\r\n if (this.wrapper.clientWidth >= this.nav.clientWidth) {\r\n return;\r\n }\r\n\r\n if (this.mainMenu && this.overflowMenuItems >= this.mainMenu.length) {\r\n return;\r\n }\r\n\r\n this.overflowMenuItems++;\r\n }\r\n\r\n componentDidRender() {\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n\r\n return;\r\n }\r\n\r\n window.setTimeout(() => this.shrinkMenuToFit(), 0);\r\n }\r\n\r\n componentDidLoad() {\r\n this.setShowDropDown(this.useDropDownMenu);\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }\r\n\r\n private setOverflowMenu() {\r\n if (this.showDropDown) {\r\n return;\r\n }\r\n\r\n if (this.overflowMenuItems !== 0) {\r\n this.overflowMenuItems = 0;\r\n return;\r\n }\r\n\r\n this.shrinkMenuToFit();\r\n }\r\n\r\n private setDropDownMenu() {\r\n if (this.useDropDownMenu !== \"auto\") {\r\n return;\r\n }\r\n\r\n this.showDropDown = window.innerWidth < minDesktopViewportWidth;\r\n }\r\n\r\n private calculateDropdownOptionsOffset() {\r\n if (!this.dropdownElement) {\r\n return 0;\r\n }\r\n\r\n return (\r\n this.host.clientHeight -\r\n (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n );\r\n }\r\n\r\n private onWindowResize = debounce(() => {\r\n this.setDropDownMenu();\r\n this.setOverflowMenu();\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }, 100);\r\n\r\n connectedCallback() {\r\n window.addEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n disconnectedCallback() {\r\n window.removeEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n private MenuItem = (item: HeaderMenuItem) => {\r\n return (\r\n <li class={item.active ? \"dso-active\" : undefined}>\r\n <a\r\n href={item.url}\r\n aria-current={item.active ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem: item })}\r\n >\r\n {item.label}\r\n </a>\r\n </li>\r\n );\r\n };\r\n\r\n render() {\r\n // Prevent 'flickering' when useDropDownMenu = 'always'\r\n if (this.showDropDown === undefined) {\r\n return;\r\n }\r\n\r\n return (\r\n <>\r\n <div\r\n class={clsx(\"dso-header\", {\r\n [\"use-drop-down\"]: this.showDropDown,\r\n [\"has-sub-logo\"]: this.hasSubLogo,\r\n })}\r\n ref={(element) => (this.wrapper = element)}\r\n >\r\n <div class=\"logo-container\">\r\n <div class=\"logo\">\r\n <slot name=\"logo\" />\r\n </div>\r\n <div class=\"sub-logo\">\r\n <slot name=\"sub-logo\" />\r\n </div>\r\n </div>\r\n {this.showDropDown &&\r\n this.mainMenu &&\r\n (this.mainMenu.length > 0 \|\| this.userHomeUrl \|\| this.authStatus !== \"none\") && (\r\n <div class=\"dropdown\">\r\n <dso-dropdown-menu\r\n dropdown-align=\"right\"\r\n strategy=\"absolute\"\r\n dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n ref={(element) => (this.dropdownElement = element)}\r\n >\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>Menu</span>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu.map(this.MenuItem)}\r\n {this.userHomeUrl && (\r\n <li>\r\n <a\r\n href={this.userHomeUrl}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n Mijn Omgevingsloket\r\n </a>\r\n </li>\r\n )}\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <li>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n <span class=\"profile-label\"> - Mijn profiel</span>\r\n </a>\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <li>\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n Inloggen\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n Inloggen\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <li>\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n Uitloggen\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n Uitloggen\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </div>\r\n )}\r\n {!this.showDropDown && (\r\n <>\r\n <div class=\"dso-header-session\">\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <div class=\"profile\">\r\n <span class=\"profile-label\">Welkom:</span>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n </a>\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <div class=\"login\">\r\n {this.loginUrl ? (\r\n <a href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\r\n Inloggen\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n Inloggen\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <div class=\"logout\">\r\n {this.logoutUrl ? (\r\n <a href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\r\n Uitloggen\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n Uitloggen\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {((this.mainMenu && this.mainMenu.length > 0) \|\| this.userHomeUrl) && (\r\n <nav class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-main\" ref={(element) => (this.nav = element)}>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)\r\n .map(this.MenuItem)}\r\n {this.overflowMenuItems > 0 && (\r\n <li>\r\n <dso-dropdown-menu dropdown-align=\"left\">\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>Meer</span>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter(\r\n (_, index) =>\r\n this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems\r\n )\r\n .map(this.MenuItem)}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </li>\r\n )}\r\n {this.userHomeUrl && (\r\n <li class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}>\r\n <a\r\n href={this.userHomeUrl}\r\n aria-current={this.userHomeActive ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n <dso-icon icon=\"user-line\"></dso-icon>\r\n Mijn Omgevingsloket\r\n </a>\r\n </li>\r\n )}\r\n </ul>\r\n </nav>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-header.js","mappings":"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","names":["debounce"],"sources":["./src/components/header/header.scss?tag=dso-header&encapsulation=scoped","./src/components/header/header.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"header.variables\" as core-header-variables;\r\n\r\n@mixin nav-item-border($color) {\r\n border-bottom: 4px solid $color;\r\n}\r\n\r\n@mixin nav-item-main {\r\n font-size: 1.25em;\r\n line-height: 1;\r\n margin-top: units.$u1;\r\n padding: units.$u2 0;\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.dso-header {\r\n border-bottom: 1px solid colors.$grijs-20;\r\n display: flex;\r\n flex-wrap: wrap;\r\n position: relative;\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n align-items: center;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {\r\n &.use-drop-down {\r\n flex-wrap: nowrap;\r\n }\r\n }\r\n\r\n .dso-nav {\r\n border: 0;\r\n }\r\n}\r\n\r\n.logo-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0 units.$u3;\r\n padding-bottom: units.$u2;\r\n padding-top: units.$u2;\r\n}\r\n\r\n.login,\r\n.logout {\r\n .dso-tertiary {\r\n cursor: pointer;\r\n font-family: typography.$font-family-base;\r\n font-weight: 600;\r\n vertical-align: text-bottom;\r\n }\r\n}\r\n\r\n.profile,\r\n.logout,\r\n.login {\r\n a {\r\n @include anchor.clean();\r\n\r\n color: colors.$grasgroen;\r\n font-weight: 600;\r\n\r\n &:focus {\r\n color: colors.$wit;\r\n }\r\n }\r\n}\r\n\r\n.dso-header-session {\r\n display: flex;\r\n margin-left: auto;\r\n\r\n .profile {\r\n a {\r\n margin-left: units.$u1;\r\n }\r\n\r\n + .logout {\r\n border-left: 3px solid colors.$grijs-20;\r\n margin-left: units.$u2;\r\n padding-left: units.$u2;\r\n }\r\n }\r\n}\r\n\r\n.dso-navbar {\r\n flex-basis: 100%;\r\n\r\n .dso-dropdown-options {\r\n border-top: 1px solid colors.$grijs-20;\r\n }\r\n}\r\n\r\ndso-dropdown-menu {\r\n button {\r\n align-items: flex-end;\r\n background-color: transparent;\r\n border: 0;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n padding-right: units.$u4;\r\n }\r\n\r\n .dso-dropdown-options {\r\n border: 0;\r\n border-radius: 0;\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n width: 375px;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n width: 100%;\r\n }\r\n\r\n ul li {\r\n a,\r\n button {\r\n color: colors.$bosgroen;\r\n font-size: 1.25rem;\r\n padding: units.$u2;\r\n white-space: pre-wrap;\r\n\r\n &:focus {\r\n color: colors.$wit;\r\n }\r\n\r\n &:hover {\r\n background-color: colors.$wit;\r\n color: colors.$bosgroen;\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n &.dso-active {\r\n a {\r\n font-weight: 600;\r\n }\r\n }\r\n\r\n + li {\r\n border-top: 1px solid colors.$grijs-20;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dropdown {\r\n margin-left: auto;\r\n\r\n dso-dropdown-menu {\r\n position: static;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n margin-top: units.$u1 * 3.5;\r\n }\r\n\r\n .dso-dropdown-options {\r\n right: 0;\r\n top: 100%;\r\n }\r\n\r\n button {\r\n color: colors.$grasgroen;\r\n font-size: typography.$font-size-base;\r\n font-weight: 600;\r\n line-height: normal;\r\n position: relative;\r\n\r\n &::after {\r\n margin-left: units.$u1;\r\n position: absolute;\r\n right: 0px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n }\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-nav {\r\n align-items: end;\r\n column-gap: units.$u4;\r\n display: flex;\r\n list-style: none;\r\n margin-bottom: 0;\r\n margin-top: 0;\r\n padding-left: 0;\r\n\r\n > li {\r\n margin-bottom: 4px;\r\n\r\n > a {\r\n display: block;\r\n\r\n &,\r\n &:hover,\r\n &:focus,\r\n &:visited {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n &.dso-active,\r\n &.is-active {\r\n margin-bottom: 0;\r\n\r\n > a {\r\n @include nav-item-border(core-header-variables.$navigation-selected-color);\r\n\r\n font-weight: bold;\r\n }\r\n }\r\n }\r\n\r\n &.dso-nav-main {\r\n display: flex !important;\r\n\r\n > li {\r\n > a {\r\n @include anchor.reverse();\r\n @include nav-item-main();\r\n\r\n // stylelint-disable-next-line declaration-property-value-disallowed-list -- no wrapping wanted because of icon\r\n white-space: nowrap;\r\n }\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n left: units.$ru2 * -1 !important;\r\n top: 3px !important;\r\n }\r\n\r\n button {\r\n @include nav-item-main();\r\n\r\n align-items: center;\r\n color: colors.$bosgroen;\r\n padding-right: units.$u4;\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n\r\n &::after {\r\n margin-left: units.$u1;\r\n position: absolute;\r\n right: 0px;\r\n top: auto;\r\n transform: none;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .menu-user-home {\r\n margin-left: auto;\r\n\r\n dso-icon {\r\n height: 1em;\r\n margin-right: units.$u1;\r\n position: relative;\r\n top: -2px;\r\n width: 1.2em;\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, h, Prop, State, Watch } from \"@stencil/core\";\r\n\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HeaderMenuItem, HeaderNavigationType, HeaderEvent } from \"./header.interfaces\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\n@Component({\r\n tag: \"dso-header\",\r\n styleUrl: \"header.scss\",\r\n scoped: true,\r\n})\r\nexport class Header {\r\n private clickHandler(\r\n e: MouseEvent,\r\n type: HeaderNavigationType,\r\n options?: { menuItem?: HeaderMenuItem; url?: string }\r\n ) {\r\n this.dsoHeaderClick.emit({\r\n originalEvent: e,\r\n isModifiedEvent: isModifiedEvent(e),\r\n type,\r\n menuItem: options?.menuItem,\r\n url: options?.url ?? options?.menuItem?.url,\r\n });\r\n }\r\n\r\n private dropdownElement?: HTMLElement;\r\n\r\n @Element()\r\n host!: HTMLDsoHeaderElement;\r\n\r\n /*\r\n The main menu items.\r\n /\r\n @Prop()\r\n mainMenu?: HeaderMenuItem[] = [];\r\n\r\n /\r\n Either have the dropdown menu appear automatically or always.\r\n /\r\n @Prop()\r\n useDropDownMenu: \"always\" \| \"auto\" = \"auto\";\r\n\r\n /\r\n Used to show the login/logout option. 'none' renders nothing.\r\n /\r\n @Prop()\r\n authStatus: \"none\" \| \"loggedIn\" \| \"loggedOut\" = \"none\";\r\n\r\n /\r\n When the `authStatus` is `loggedOut` a loginUrl can be provided, the login button will render as an anchor.\r\n /\r\n @Prop()\r\n loginUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"logout\".\r\n /\r\n @Prop()\r\n logoutUrl?: string;\r\n\r\n /\r\n The name to show when the user is logged in.\r\n /\r\n @Prop()\r\n userProfileName?: string;\r\n\r\n /\r\n The URL to open when the user activates the profile url.\r\n /\r\n @Prop()\r\n userProfileUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeUrl?: string;\r\n\r\n /\r\n Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeActive?: boolean;\r\n\r\n @State()\r\n showDropDown?: boolean;\r\n\r\n @State()\r\n hasSubLogo = false;\r\n\r\n @State()\r\n overflowMenuItems = 0;\r\n\r\n @State()\r\n dropdownOptionsOffset = 0;\r\n\r\n /\r\n Emitted when something in the header is selected.\r\n \r\n `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n /\r\n @Event()\r\n dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n @Watch(\"useDropDownMenu\")\r\n setShowDropDown(value: \"always\" \| \"auto\") {\r\n if (value === \"auto\") {\r\n this.setDropDownMenu();\r\n\r\n return;\r\n }\r\n\r\n this.showDropDown = value === \"always\";\r\n }\r\n\r\n private wrapper: HTMLDivElement \| undefined;\r\n\r\n private nav: HTMLUListElement \| undefined;\r\n\r\n componentWillLoad() {\r\n this.hasSubLogo = this.host.querySelector(\"[slot = 'sub-logo']\") !== null;\r\n }\r\n\r\n private shrinkMenuToFit() {\r\n if (!this.wrapper \|\| !this.nav) {\r\n return;\r\n }\r\n\r\n if (this.wrapper.clientWidth >= this.nav.clientWidth) {\r\n return;\r\n }\r\n\r\n if (this.mainMenu && this.overflowMenuItems >= this.mainMenu.length) {\r\n return;\r\n }\r\n\r\n this.overflowMenuItems++;\r\n }\r\n\r\n componentDidRender() {\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n\r\n return;\r\n }\r\n\r\n window.setTimeout(() => this.shrinkMenuToFit(), 0);\r\n }\r\n\r\n componentDidLoad() {\r\n this.setShowDropDown(this.useDropDownMenu);\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }\r\n\r\n private setOverflowMenu() {\r\n if (this.showDropDown) {\r\n return;\r\n }\r\n\r\n if (this.overflowMenuItems !== 0) {\r\n this.overflowMenuItems = 0;\r\n return;\r\n }\r\n\r\n this.shrinkMenuToFit();\r\n }\r\n\r\n private setDropDownMenu() {\r\n if (this.useDropDownMenu !== \"auto\") {\r\n return;\r\n }\r\n\r\n this.showDropDown = window.innerWidth < minDesktopViewportWidth;\r\n }\r\n\r\n private calculateDropdownOptionsOffset() {\r\n if (!this.dropdownElement) {\r\n return 0;\r\n }\r\n\r\n return (\r\n this.host.clientHeight -\r\n (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n );\r\n }\r\n\r\n private onWindowResize = debounce(() => {\r\n this.dropdownElement?.removeAttribute(\"open\");\r\n this.dropdownElement?.removeAttribute(\"tabindex\");\r\n\r\n this.setDropDownMenu();\r\n this.setOverflowMenu();\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }, 100);\r\n\r\n connectedCallback() {\r\n window.addEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n disconnectedCallback() {\r\n window.removeEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n private MenuItem = (item: HeaderMenuItem) => {\r\n return (\r\n <li class={item.active ? \"dso-active\" : undefined}>\r\n <a\r\n href={item.url}\r\n aria-current={item.active ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem: item })}\r\n >\r\n {item.label}\r\n </a>\r\n </li>\r\n );\r\n };\r\n\r\n render() {\r\n // Prevent 'flickering' when useDropDownMenu = 'always'\r\n if (this.showDropDown === undefined) {\r\n return;\r\n }\r\n\r\n return (\r\n <>\r\n <div\r\n class={clsx(\"dso-header\", {\r\n [\"use-drop-down\"]: this.showDropDown,\r\n [\"has-sub-logo\"]: this.hasSubLogo,\r\n })}\r\n ref={(element) => (this.wrapper = element)}\r\n >\r\n <div class=\"logo-container\">\r\n <div class=\"logo\">\r\n <slot name=\"logo\" />\r\n </div>\r\n <div class=\"sub-logo\">\r\n <slot name=\"sub-logo\" />\r\n </div>\r\n </div>\r\n {this.showDropDown &&\r\n this.mainMenu &&\r\n (this.mainMenu.length > 0 \|\| this.userHomeUrl \|\| this.authStatus !== \"none\") && (\r\n <div class=\"dropdown\">\r\n <dso-dropdown-menu\r\n dropdown-align=\"right\"\r\n strategy=\"absolute\"\r\n dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n ref={(element) => (this.dropdownElement = element)}\r\n >\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>Menu</span>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu.map(this.MenuItem)}\r\n {this.userHomeUrl && (\r\n <li>\r\n <a\r\n href={this.userHomeUrl}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n Mijn Omgevingsloket\r\n </a>\r\n </li>\r\n )}\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <li>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n <span class=\"profile-label\"> - Mijn profiel</span>\r\n </a>\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <li>\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n Inloggen\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n Inloggen\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <li>\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n Uitloggen\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n Uitloggen\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </div>\r\n )}\r\n {!this.showDropDown && (\r\n <>\r\n <div class=\"dso-header-session\">\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <div class=\"profile\">\r\n <span class=\"profile-label\">Welkom:</span>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n </a>\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <div class=\"login\">\r\n {this.loginUrl ? (\r\n <a href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\r\n Inloggen\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n Inloggen\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <div class=\"logout\">\r\n {this.logoutUrl ? (\r\n <a href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\r\n Uitloggen\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n Uitloggen\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {((this.mainMenu && this.mainMenu.length > 0) \|\| this.userHomeUrl) && (\r\n <nav class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-main\" ref={(element) => (this.nav = element)}>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)\r\n .map(this.MenuItem)}\r\n {this.overflowMenuItems > 0 && (\r\n <li>\r\n <dso-dropdown-menu dropdown-align=\"left\">\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>Meer</span>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter(\r\n (_, index) =>\r\n this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems\r\n )\r\n .map(this.MenuItem)}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </li>\r\n )}\r\n {this.userHomeUrl && (\r\n <li class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}>\r\n <a\r\n href={this.userHomeUrl}\r\n aria-current={this.userHomeActive ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n <dso-icon icon=\"user-line\"></dso-icon>\r\n Mijn Omgevingsloket\r\n </a>\r\n </li>\r\n )}\r\n </ul>\r\n </nav>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}

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

@@ -3,7 +3,7 @@ import { c as createFocusTrap } from './focus-trap.esm.js';
 import { c as clsx } from './clsx.m.js';
 import { d as defineCustomElement$2 } from './icon.js';
-const listButtonCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-manual-input-button {\n  cursor: text;\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.dso-tertiary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.dso-input-number:not(.form-group) {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.dso-input-number label {\n  width: 100%;\n}\n.dso-input-number .dso-input-step-counter {\n  align-self: center;\n  background-color: transparent;\n  border: 0;\n  display: inline-block;\n  height: 1.5rem;\n  text-align: center;\n  width: 1.5rem;\n}\n.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {\n  outline: 0;\n}\n.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.dso-input-number .dso-input-step-counter[type=number] {\n  -moz-appearance: textfield;\n}\n\n.dso-btn-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-btn-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n  pointer-events: none;\n}\n.dso-btn-group > * {\n  border-radius: 0;\n}\n.dso-btn-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-btn-group > *:not(:first-child) {\n  border-left-style: none !important;\n}\n.dso-btn-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-btn-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-btn-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding: 0 16px;\n}\n@media screen and (max-width: 767px) {\n  .dso-btn-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-btn-group > *:hover + .dso-input-number,\n.dso-btn-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-btn-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n@media screen and (max-width: 767px) {\n  .dso-btn-group > *.dso-selected + .dso-input-number {\n    box-shadow: inset 0 -1px 0 0 #39870c, inset 0 0 0 0 #39870c, inset -1px 0 0 0 #39870c, inset 1px 0 0 0 #39870c;\n  }\n}\n@media screen and (min-width: 768px) {\n  .dso-btn-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}\n.dso-btn-group > *:active + .dso-input-number, .dso-btn-group > *:active + .dso-input-number:hover,\n.dso-btn-group > *.active + .dso-input-number,\n.dso-btn-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-btn-group > *.disabled + .dso-input-number, .dso-btn-group > *.disabled + .dso-input-number:hover,\n.dso-btn-group > *[disabled] + .dso-input-number,\n.dso-btn-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-btn-group .dso-list-button {\n  padding-right: 15px;\n}\n@media screen and (max-width: 767px) {\n  .dso-btn-group {\n    flex-direction: column;\n  }\n  .dso-btn-group > *:first-child {\n    border-radius: 4px 4px 0 0;\n  }\n  .dso-btn-group > *:not(:first-child) {\n    border-left-style: solid !important;\n    border-top-style: none !important;\n  }\n  .dso-btn-group > *:last-child {\n    border-radius: 0 0 4px 4px;\n  }\n  .dso-btn-group > *:only-child {\n    border-radius: 4px;\n  }\n}\n\n.dso-selectable {\n  position: relative;\n  padding: 0 0 0 32px;\n}\n.dso-selectable .dso-selectable-options {\n  list-style: none;\n  margin-top: 8px;\n  padding-left: 0;\n}\n.dso-selectable .dso-selectable-options li + li {\n  margin-top: 8px;\n}\n.dso-selectable label {\n  font-weight: 400;\n  line-height: 24px;\n  margin: 0;\n}\n.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,\n.dso-selectable input[type=radio][disabled] + label::before,\n.dso-selectable input[type=radio][disabled]:active + label::before,\n.dso-selectable input[type=radio][disabled]:focus + label::before {\n  background-color: #fff;\n  box-shadow: 0 0 0 2px #e5e5e5;\n}\n.dso-selectable input[type=checkbox],\n.dso-selectable input[type=radio] {\n  height: 24px;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  width: 24px;\n  z-index: 100;\n  zoom: 1;\n}\n@media (prefers-contrast: more) {\n  .dso-selectable input[type=checkbox],\n  .dso-selectable input[type=radio] {\n    opacity: 1;\n  }\n}\n.dso-selectable input[type=checkbox]:not([disabled]),\n.dso-selectable input[type=radio]:not([disabled]) {\n  cursor: pointer;\n}\n.dso-selectable input[type=checkbox] + label,\n.dso-selectable input[type=radio] + label {\n  display: inline;\n  font-style: normal;\n  padding-left: 0;\n}\n.dso-selectable input[type=checkbox] + label::before,\n.dso-selectable input[type=radio] + label::before {\n  background: #fff;\n  border: 0;\n  box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);\n  content: \"\";\n  height: 20px;\n  left: 2px;\n  position: absolute;\n  top: 2px;\n  width: 20px;\n}\n.dso-selectable input[type=checkbox]:focus,\n.dso-selectable input[type=radio]:focus {\n  outline: 0;\n}\n.dso-selectable input[type=checkbox]:focus + label::before,\n.dso-selectable input[type=radio]:focus + label::before {\n  box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);\n  height: 18px;\n  left: 3px;\n  top: 3px;\n  width: 18px;\n}\n.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,\n.dso-selectable input[type=radio]:active + label::before,\n.dso-selectable input[type=radio].active + label::before {\n  background-color: #ebf3e6;\n  box-shadow: 0 0 0 1px #275937;\n  height: 22px;\n  left: 1px;\n  top: 1px;\n  width: 22px;\n}\n.dso-selectable input[type=checkbox] + label::before {\n  border-radius: 4px;\n}\n.dso-selectable input[type=checkbox] + label::after {\n  background: transparent;\n  content: \"\";\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  zoom: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {\n  opacity: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after {\n  border: solid;\n  border-color: var(--dso-selectable-color, #39870c);\n  border-top-color: transparent;\n  border-width: 0 0 3px 3px;\n  height: 8px;\n  transform: rotate(-45deg);\n  width: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  height: 12px;\n  width: 12px;\n}\n.dso-selectable input[type=radio] + label::before {\n  border-radius: 50%;\n}\n.dso-selectable input[type=radio] + label::after {\n  background-color: transparent;\n  border-radius: 50%;\n  content: \"\";\n  height: 12px;\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  width: 12px;\n  zoom: 1;\n}\n.dso-selectable input[type=radio]:checked + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  opacity: 1;\n}\n.dso-selectable > dso-info {\n  float: none;\n  margin: 8px 16px 0 0;\n  width: 100%;\n}\n.dso-selectable label {\n  font-weight: 700;\n}\n\n.dso-list-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding: 15px 47px 15px 15px;\n  position: relative;\n  text-align: left;\n  white-space: normal;\n  width: 100%;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n.dso-list-button.dso-selected.dso-single-count {\n  border-right: 0;\n  box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel {\n  font-weight: 400;\n  width: 100%;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di,\n.dso-list-button .dso-count {\n  height: 24px;\n  position: absolute;\n  right: 15px;\n  top: 15px;\n  width: 24px;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di {\n  color: #39870c;\n  page-break-before: always;\n}\n.dso-list-button .dso-count {\n  font-weight: 700;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    width: 0;\n  }\n}\n.dso-list-button .dso-sublabel {\n  padding-left: 32px;\n}\n\n.dso-list-button + .dso-list-button,\n.dso-list-button + .dso-btn-group,\n.dso-btn-group + .dso-list-button,\n.dso-btn-group + .dso-btn-group {\n  margin-top: 4px;\n}\n\n.dso-input-wrapper {\n  position: relative;\n}\n.dso-input-wrapper .form-control {\n  width: 9ch;\n}\n\n.form-control {\n  display: block;\n  width: 100%;\n  height: 40px;\n  padding: 6px 14px;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: #191919;\n  background-color: #fff;\n  background-image: none;\n  border: 1px solid #275937;\n  border-radius: 4px;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.form-control::-moz-placeholder {\n  color: #666;\n  opacity: 1;\n}\n.form-control:-ms-input-placeholder {\n  color: #666;\n}\n.form-control::-webkit-input-placeholder {\n  color: #666;\n}\n.form-control::-ms-expand {\n  background-color: transparent;\n  border: 0;\n}\n.form-control:focus {\n  border-color: #275937;\n  outline: 0;\n  box-shadow: inset 0 0 0 1px #275937;\n}\n.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\n  background-color: #fff;\n  opacity: 1;\n}\n.form-control[disabled], fieldset[disabled] .form-control {\n  cursor: default;\n}\n.form-control[disabled] {\n  border-color: #e5e5e5;\n  color: #999;\n}\n.form-control[readonly] {\n  border-width: 1px;\n}\n.form-control[type=text] {\n  line-height: 40px;\n}\n.form-control[size] {\n  width: auto;\n}\n\n.dso-manual-input-button[type=button] {\n  background-color: transparent;\n  border: 0;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hidden {\n  display: none !important;\n}";
+const 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  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-manual-input-button {\n  cursor: text;\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.dso-tertiary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.dso-input-number:not(.form-group) {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.dso-input-number label {\n  width: 100%;\n}\n.dso-input-number .dso-input-step-counter {\n  align-self: center;\n  background-color: transparent;\n  border: 0;\n  display: inline-block;\n  height: 1.5rem;\n  text-align: center;\n  width: 1.5rem;\n}\n.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {\n  outline: 0;\n}\n.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.dso-input-number .dso-input-step-counter[type=number] {\n  -moz-appearance: textfield;\n}\n\n.dso-btn-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-btn-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n  pointer-events: none;\n}\n.dso-btn-group > * {\n  border-radius: 0;\n}\n.dso-btn-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-btn-group > *:not(:first-child) {\n  border-left-style: none !important;\n}\n.dso-btn-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-btn-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-btn-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding: 0 16px;\n}\n@media screen and (max-width: 767px) {\n  .dso-btn-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-btn-group > *:hover + .dso-input-number,\n.dso-btn-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-btn-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-btn-group > *:active + .dso-input-number, .dso-btn-group > *:active + .dso-input-number:hover,\n.dso-btn-group > *.active + .dso-input-number,\n.dso-btn-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-btn-group > *.disabled + .dso-input-number, .dso-btn-group > *.disabled + .dso-input-number:hover,\n.dso-btn-group > *[disabled] + .dso-input-number,\n.dso-btn-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-btn-group .dso-list-button {\n  padding-right: 15px;\n}\n\n.dso-selectable {\n  position: relative;\n  padding: 0 0 0 32px;\n}\n.dso-selectable .dso-selectable-options {\n  list-style: none;\n  margin-top: 8px;\n  padding-left: 0;\n}\n.dso-selectable .dso-selectable-options li + li {\n  margin-top: 8px;\n}\n.dso-selectable label {\n  font-weight: 400;\n  line-height: 24px;\n  margin: 0;\n}\n.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,\n.dso-selectable input[type=radio][disabled] + label::before,\n.dso-selectable input[type=radio][disabled]:active + label::before,\n.dso-selectable input[type=radio][disabled]:focus + label::before {\n  background-color: #fff;\n  box-shadow: 0 0 0 2px #e5e5e5;\n}\n.dso-selectable input[type=checkbox],\n.dso-selectable input[type=radio] {\n  height: 24px;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  width: 24px;\n  z-index: 100;\n  zoom: 1;\n}\n@media (prefers-contrast: more) {\n  .dso-selectable input[type=checkbox],\n  .dso-selectable input[type=radio] {\n    opacity: 1;\n  }\n}\n.dso-selectable input[type=checkbox]:not([disabled]),\n.dso-selectable input[type=radio]:not([disabled]) {\n  cursor: pointer;\n}\n.dso-selectable input[type=checkbox] + label,\n.dso-selectable input[type=radio] + label {\n  display: inline;\n  font-style: normal;\n  padding-left: 0;\n}\n.dso-selectable input[type=checkbox] + label::before,\n.dso-selectable input[type=radio] + label::before {\n  background: #fff;\n  border: 0;\n  box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);\n  content: \"\";\n  height: 20px;\n  left: 2px;\n  position: absolute;\n  top: 2px;\n  width: 20px;\n}\n.dso-selectable input[type=checkbox]:focus,\n.dso-selectable input[type=radio]:focus {\n  outline: 0;\n}\n.dso-selectable input[type=checkbox]:focus + label::before,\n.dso-selectable input[type=radio]:focus + label::before {\n  box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);\n  height: 18px;\n  left: 3px;\n  top: 3px;\n  width: 18px;\n}\n.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,\n.dso-selectable input[type=radio]:active + label::before,\n.dso-selectable input[type=radio].active + label::before {\n  background-color: #ebf3e6;\n  box-shadow: 0 0 0 1px #275937;\n  height: 22px;\n  left: 1px;\n  top: 1px;\n  width: 22px;\n}\n.dso-selectable input[type=checkbox] + label::before {\n  border-radius: 4px;\n}\n.dso-selectable input[type=checkbox] + label::after {\n  background: transparent;\n  content: \"\";\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  zoom: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {\n  opacity: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after {\n  border: solid;\n  border-color: var(--dso-selectable-color, #39870c);\n  border-top-color: transparent;\n  border-width: 0 0 3px 3px;\n  height: 8px;\n  transform: rotate(-45deg);\n  width: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  height: 12px;\n  width: 12px;\n}\n.dso-selectable input[type=radio] + label::before {\n  border-radius: 50%;\n}\n.dso-selectable input[type=radio] + label::after {\n  background-color: transparent;\n  border-radius: 50%;\n  content: \"\";\n  height: 12px;\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  width: 12px;\n  zoom: 1;\n}\n.dso-selectable input[type=radio]:checked + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  opacity: 1;\n}\n.dso-selectable > dso-info {\n  float: none;\n  margin: 8px 16px 0 0;\n  width: 100%;\n}\n.dso-selectable label {\n  font-weight: 700;\n}\n\n.dso-list-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding: 15px 47px 15px 15px;\n  position: relative;\n  text-align: left;\n  white-space: normal;\n  width: 100%;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-right: 0;\n    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n  }\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel {\n  font-weight: 400;\n  width: 100%;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di,\n.dso-list-button .dso-count {\n  height: 24px;\n  position: absolute;\n  right: 15px;\n  top: 15px;\n  width: 24px;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di {\n  color: #39870c;\n  page-break-before: always;\n}\n.dso-list-button .dso-count {\n  font-weight: 700;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    width: 0;\n  }\n}\n.dso-list-button .dso-sublabel {\n  padding-left: 32px;\n}\n\n.dso-list-button + .dso-list-button,\n.dso-list-button + .dso-btn-group,\n.dso-btn-group + .dso-list-button,\n.dso-btn-group + .dso-btn-group {\n  margin-top: 4px;\n}\n\n.dso-input-wrapper {\n  position: relative;\n}\n.dso-input-wrapper .form-control {\n  width: 9ch;\n}\n\n.form-control {\n  display: block;\n  width: 100%;\n  height: 40px;\n  padding: 6px 14px;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: #191919;\n  background-color: #fff;\n  background-image: none;\n  border: 1px solid #275937;\n  border-radius: 4px;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.form-control::-moz-placeholder {\n  color: #666;\n  opacity: 1;\n}\n.form-control:-ms-input-placeholder {\n  color: #666;\n}\n.form-control::-webkit-input-placeholder {\n  color: #666;\n}\n.form-control::-ms-expand {\n  background-color: transparent;\n  border: 0;\n}\n.form-control:focus {\n  border-color: #275937;\n  outline: 0;\n  box-shadow: inset 0 0 0 1px #275937;\n}\n.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\n  background-color: #fff;\n  opacity: 1;\n}\n.form-control[disabled], fieldset[disabled] .form-control {\n  cursor: default;\n}\n.form-control[disabled] {\n  border-color: #e5e5e5;\n  color: #999;\n}\n.form-control[readonly] {\n  border-width: 1px;\n}\n.form-control[type=text] {\n  line-height: 40px;\n}\n.form-control[size] {\n  width: auto;\n}\n\n.dso-manual-input-button[type=button] {\n  background-color: transparent;\n  border: 0;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hidden {\n  display: none !important;\n}";
 const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends HTMLElement {
   constructor() {

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/units\";\r\n@use \"~dso-toolkit/src/components/input-number\";\r\n@use \"~dso-toolkit/src/components/list-button\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-manual-input-button {\r\n cursor: text;\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n @include input-number.root();\r\n}\r\n\r\n.dso-btn-group {\r\n @include list-button.button-group(\".dso-input-number\", \".dso-list-button\");\r\n}\r\n\r\n.dso-selectable {\r\n @include selectable.root(\"dso-info\");\r\n\r\n label {\r\n font-weight: 700;\r\n }\r\n}\r\n\r\n.dso-list-button {\r\n @include button.base($modifiers: false);\r\n @include list-button.root();\r\n\r\n .dso-sublabel {\r\n padding-left: selectable.$size + units.$u1;\r\n }\r\n}\r\n\r\n.dso-list-button,\r\n.dso-btn-group {\r\n + .dso-list-button,\r\n + .dso-btn-group {\r\n @include list-button.sibling();\r\n }\r\n}\r\n\r\n.dso-input-wrapper {\r\n position: relative;\r\n\r\n .form-control {\r\n width: 9ch;\r\n }\r\n}\r\n\r\n.form-control {\r\n @include form-control.root();\r\n}\r\n\r\n.dso-manual-input-button[type=\"button\"] {\r\n background-color: transparent;\r\n border: 0;\r\n bottom: 0;\r\n left: 0;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n}\r\n\r\n.hidden {\r\n display: none !important;\r\n}\r\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter, State, Watch } from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n private trap?: FocusTrap;\r\n\r\n @State()\r\n private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n @State()\r\n manualCount?: number;\r\n\r\n /*\r\n The label of the List Button.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The sublabel of the List Button.\r\n /\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /\r\n When defined the count can show on the List Button.\r\n /\r\n @Prop()\r\n count?: number;\r\n\r\n /\r\n The minimum value.\r\n /\r\n @Prop()\r\n min?: string \| number;\r\n\r\n /\r\n The maximum value.\r\n /\r\n @Prop()\r\n max?: string \| number;\r\n\r\n /\r\n Whether the List Button is checked.\r\n /\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /\r\n Whether the List Button is disabled.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Allow user to directly input a value.\r\n \r\n Set to `false` to force users to use plus/minus buttons.\r\n /\r\n @Prop()\r\n manual = true;\r\n\r\n /\r\n Emitted when the user changes the count.\r\n /\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /\r\n Emitted when the user activates the List Button itself.\r\n \r\n Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n @Watch(\"manual\")\r\n watchManualCallback() {\r\n if (!this.manual && this.manualCount) {\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n escapeDeactivates: true,\r\n setReturnFocus: false,\r\n\r\n clickOutsideDeactivates: (e) => {\r\n this.setCount(e);\r\n\r\n return true;\r\n },\r\n onDeactivate: () => this.stopManualCountInput(),\r\n onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n }).activate();\r\n } else if (this.manualCount === undefined && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.trap?.deactivate();\r\n }\r\n\r\n private handleOnChange({ target }: Event): void {\r\n if (target instanceof HTMLInputElement) {\r\n this.manualCount = target.valueAsNumber;\r\n }\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" \| \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (this.isNewCountValid(newValue) === false) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private setCount(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.manualCount,\r\n });\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private startManualCountInput(): void {\r\n this.manualCount = this.count;\r\n }\r\n\r\n private stopManualCountInput(): void {\r\n this.manualCount = undefined;\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n if (\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) \|\| newValue > Number(this.max))\r\n ) {\r\n return false;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n render() {\r\n const showButtonInputs = this.manualCount === undefined;\r\n\r\n const selected = this.checked \|\| (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-btn-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n checked={selected}\r\n disabled={this.disabled}\r\n aria-label={this.label}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n </div>\r\n {this.sublabel && <span class=\"dso-sublabel\">{this.sublabel}</span>}\r\n <slot name=\"subcontent\" />\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.min) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"decrement\")}\r\n >\r\n <dso-icon icon=\"minus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verlagen</span>\r\n </button>\r\n )}\r\n\r\n <div class=\"dso-input-wrapper\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <input\r\n class=\"dso-input-step-counter\"\r\n type=\"number\"\r\n tabIndex={-1}\r\n aria-label=\"Aantal\"\r\n value={this.count}\r\n readOnly\r\n />\r\n )}\r\n\r\n <form onSubmit={(e) => this.setCount(e)}>\r\n <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n <input\r\n class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n type=\"number\"\r\n aria-label=\"Aantal\"\r\n value={this.manualCount}\r\n min={this.min}\r\n max={this.max}\r\n onInput={(e) => this.handleOnChange(e)}\r\n />\r\n </div>\r\n\r\n {this.manual === true && (\r\n <button\r\n class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n type={!showButtonInputs ? \"submit\" : \"button\"}\r\n disabled={this.disabled}\r\n onClick={() => showButtonInputs && this.startManualCountInput()}\r\n >\r\n {showButtonInputs ? (\r\n <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n ) : (\r\n <span class=\"sr-only\">Zet waarde</span>\r\n )}\r\n </button>\r\n )}\r\n </form>\r\n </div>\r\n\r\n {showButtonInputs && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.max) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"increment\")}\r\n >\r\n <dso-icon icon=\"plus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verhogen</span>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-list-button.js","mappings":"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","names":[],"sources":["./src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","./src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/input-number\";\r\n@use \"~dso-toolkit/src/components/list-button\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-manual-input-button {\r\n cursor: text;\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n @include input-number.root();\r\n}\r\n\r\n.dso-btn-group {\r\n @include list-button.button-group(\".dso-input-number\", \".dso-list-button\");\r\n}\r\n\r\n.dso-selectable {\r\n @include selectable.root(\"dso-info\");\r\n\r\n label {\r\n font-weight: 700;\r\n }\r\n}\r\n\r\n.dso-list-button {\r\n @include button.base($modifiers: false);\r\n @include list-button.root();\r\n\r\n .dso-sublabel {\r\n padding-left: selectable.$size + units.$u1;\r\n }\r\n}\r\n\r\n.dso-list-button,\r\n.dso-btn-group {\r\n + .dso-list-button,\r\n + .dso-btn-group {\r\n @include list-button.sibling();\r\n }\r\n}\r\n\r\n.dso-input-wrapper {\r\n position: relative;\r\n\r\n .form-control {\r\n width: 9ch;\r\n }\r\n}\r\n\r\n.form-control {\r\n @include form-control.root();\r\n}\r\n\r\n.dso-manual-input-button[type=\"button\"] {\r\n background-color: transparent;\r\n border: 0;\r\n bottom: 0;\r\n left: 0;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n}\r\n\r\n.hidden {\r\n display: none !important;\r\n}\r\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter, State, Watch } from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n private trap?: FocusTrap;\r\n\r\n @State()\r\n private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n @State()\r\n manualCount?: number;\r\n\r\n /*\r\n The label of the List Button.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The sublabel of the List Button.\r\n /\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /\r\n When defined the count can show on the List Button.\r\n /\r\n @Prop()\r\n count?: number;\r\n\r\n /\r\n The minimum value.\r\n /\r\n @Prop()\r\n min?: string \| number;\r\n\r\n /\r\n The maximum value.\r\n /\r\n @Prop()\r\n max?: string \| number;\r\n\r\n /\r\n Whether the List Button is checked.\r\n /\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /\r\n Whether the List Button is disabled.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Allow user to directly input a value.\r\n \r\n Set to `false` to force users to use plus/minus buttons.\r\n /\r\n @Prop()\r\n manual = true;\r\n\r\n /\r\n Emitted when the user changes the count.\r\n /\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /\r\n Emitted when the user activates the List Button itself.\r\n \r\n Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n @Watch(\"manual\")\r\n watchManualCallback() {\r\n if (!this.manual && this.manualCount) {\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n escapeDeactivates: true,\r\n setReturnFocus: false,\r\n\r\n clickOutsideDeactivates: (e) => {\r\n this.setCount(e);\r\n\r\n return true;\r\n },\r\n onDeactivate: () => this.stopManualCountInput(),\r\n onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n }).activate();\r\n } else if (this.manualCount === undefined && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.trap?.deactivate();\r\n }\r\n\r\n private handleOnChange({ target }: Event): void {\r\n if (target instanceof HTMLInputElement) {\r\n this.manualCount = target.valueAsNumber;\r\n }\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" \| \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (this.isNewCountValid(newValue) === false) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private setCount(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.manualCount,\r\n });\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private startManualCountInput(): void {\r\n this.manualCount = this.count;\r\n }\r\n\r\n private stopManualCountInput(): void {\r\n this.manualCount = undefined;\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n if (\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) \|\| newValue > Number(this.max))\r\n ) {\r\n return false;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n render() {\r\n const showButtonInputs = this.manualCount === undefined;\r\n\r\n const selected = this.checked \|\| (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-btn-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n checked={selected}\r\n disabled={this.disabled}\r\n aria-label={this.label}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n </div>\r\n {this.sublabel && <span class=\"dso-sublabel\">{this.sublabel}</span>}\r\n <slot name=\"subcontent\" />\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.min) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"decrement\")}\r\n >\r\n <dso-icon icon=\"minus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verlagen</span>\r\n </button>\r\n )}\r\n\r\n <div class=\"dso-input-wrapper\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <input\r\n class=\"dso-input-step-counter\"\r\n type=\"number\"\r\n tabIndex={-1}\r\n aria-label=\"Aantal\"\r\n value={this.count}\r\n readOnly\r\n />\r\n )}\r\n\r\n <form onSubmit={(e) => this.setCount(e)}>\r\n <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n <input\r\n class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n type=\"number\"\r\n aria-label=\"Aantal\"\r\n value={this.manualCount}\r\n min={this.min}\r\n max={this.max}\r\n onInput={(e) => this.handleOnChange(e)}\r\n />\r\n </div>\r\n\r\n {this.manual === true && (\r\n <button\r\n class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n type={!showButtonInputs ? \"submit\" : \"button\"}\r\n disabled={this.disabled}\r\n onClick={() => showButtonInputs && this.startManualCountInput()}\r\n >\r\n {showButtonInputs ? (\r\n <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n ) : (\r\n <span class=\"sr-only\">Zet waarde</span>\r\n )}\r\n </button>\r\n )}\r\n </form>\r\n </div>\r\n\r\n {showButtonInputs && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.max) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"increment\")}\r\n >\r\n <dso-icon icon=\"plus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verhogen</span>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}