npm - @dso-toolkit/core - Versions diffs - 62.25.0 → 62.27.0 - Mend

@dso-toolkit/core 62.25.0 → 62.27.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 (574) hide show

package/dist/components/dso-mark-bar.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon.js';
-const markBarCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block;background-color:#fff}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar{display:flex;flex-grow:1}.dso-mark-bar .dso-mark-bar-input{display:flex;position:relative;width:100%}.dso-mark-bar .dso-mark-bar-input input{background-color:transparent;background-image:none;border:1px solid #275937;border-radius:4px;border-width:1px;box-shadow:none;display:block;font-size:1rem;height:2.5rem;line-height:2.5rem;padding-inline:2.5rem;padding-block:6px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;width:100%;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}.dso-mark-bar .dso-mark-bar-input input:focus{border-color:#275937;box-shadow:inset 0 0 0 1px #275937;outline:0}.dso-mark-bar .dso-mark-bar-input input::-ms-clear{display:none}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label{width:2.5rem;padding-inline-end:8px}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label .label-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar .dso-mark-bar-input label{bottom:8px;height:2.5rem;left:0;right:40px;padding-block:8px;padding-inline-start:8px;cursor:text;position:absolute;top:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.dso-mark-bar .dso-mark-bar-input label dso-icon{color:#39870c;cursor:default;margin:-8px;padding:8px;width:2.5rem;height:2.5rem}.dso-mark-bar .dso-mark-bar-input label .label-text{margin-left:8px;color:#666}.dso-mark-bar .dso-mark-bar-input button{background-color:transparent;border:0;box-shadow:none;color:#39870c;font-size:0;height:2.5rem;padding:8px;position:absolute;right:0;text-align:center;top:0;width:2.5rem}.dso-button-container{position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0;padding-inline:8px;border:1px solid #275937;border-inline-start:0;border-start-end-radius:4px;border-end-end-radius:4px}.dso-button-container button{appearance:none;padding:0;border:0;background-color:transparent;color:#39870c}.dso-button-container button:disabled{color:#ccc}.dso-button-container .divider{position:absolute;inset-inline-start:0;inset-block-start:8px;inset-block-end:8px;inline-size:1px;background-color:#ccc}";
+const markBarCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block;background-color:#fff}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar{display:flex;flex-grow:1}.dso-mark-bar .dso-mark-bar-input{display:flex;position:relative;inline-size:100%}.dso-mark-bar .dso-mark-bar-input input{background-color:transparent;background-image:none;border:1px solid #275937;border-radius:4px;border-width:1px;box-shadow:none;display:block;font-size:1rem;block-size:2.5rem;line-height:2.5rem;padding-inline:2.5rem;padding-block:6px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;inline-size:100%;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}.dso-mark-bar .dso-mark-bar-input input:focus{border-color:#275937;box-shadow:inset 0 0 0 1px #275937;outline:0}.dso-mark-bar .dso-mark-bar-input input::-ms-clear{display:none}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label{inline-size:2.5rem;padding-inline-end:8px}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label .label-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar .dso-mark-bar-input label{inset-block-end:8px;block-size:2.5rem;inset-inline-start:0;inset-inline-end:40px;padding-block:8px;padding-inline-start:8px;cursor:text;position:absolute;inset-block-start:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.dso-mark-bar .dso-mark-bar-input label dso-icon{color:#39870c;cursor:default;margin:-8px;padding:8px;inline-size:2.5rem;block-size:2.5rem}.dso-mark-bar .dso-mark-bar-input label .label-text{margin-inline-start:8px;color:#666}.dso-mark-bar .dso-mark-bar-input button{background-color:transparent;border:0;box-shadow:none;color:#39870c;font-size:0;block-size:2.5rem;padding:8px;position:absolute;inset-inline-end:0;text-align:center;inset-block-start:0;inline-size:2.5rem}.dso-button-container{position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0;padding-inline:8px;border:1px solid #275937;border-inline-start:0;border-start-end-radius:4px;border-end-end-radius:4px}.dso-button-container button{appearance:none;padding:0;border:0;background-color:transparent;color:#39870c}.dso-button-container button:disabled{color:#ccc}.dso-button-container .divider{position:absolute;inset-inline-start:0;inset-block-start:8px;inset-block-end:8px;inline-size:1px;background-color:#ccc}";
 const DsoMarkBarStyle0 = markBarCss;
 const MarkBar = /*@__PURE__*/ proxyCustomElement(class MarkBar extends HTMLElement {
@@ -54,7 +54,7 @@ const MarkBar = /*@__PURE__*/ proxyCustomElement(class MarkBar extends HTMLEleme
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '86eb7b642e9767352fbc75a1daba29afcf55ce03', class: "dso-mark-bar" }, h("div", { key: '09ae8802d957d6b211c29bf63862a31c1aa73226', class: "dso-mark-bar-input" }, h("input", { key: 'aad7ce3b0fc2885f83a09763be64d83adbaf565a', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'a734d54fdde110aeb8c8cc4f01c1a0cf01c414ac', htmlFor: "search-input" }, h("dso-icon", { key: '3b608e3b58be2c1523481711906ccd6930ec3fb7', class: "dso-search-icon", icon: "search" }), h("span", { key: 'e2f2ef89c4444c90688947010f01c551a4604b2c', class: "label-text" }, this.label)), h("button", { key: '6d5ecdef20b596f3ce1c7a7a0240c11bc4f474c7', type: "button", onClick: this.handleClear }, h("dso-icon", { key: 'e28f8ff586da9c44be6dce7ebe60f0c2ab06068e', icon: "times" }), h("span", { key: 'b84ebcfa78721dfed4f195d4a684c66e2e1aca48', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: 'ee0f15d11fc4997a51771eb13cbd75da919530ef', class: "dso-button-container" }, h("span", { key: 'c8bd69aa13ce337b8845d60bf38dee4c04cce547', class: "divider" }), h("button", { key: 'f235b21d3d068fbcef70b4d92d636ac2ffa0da39', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '587848082507cd57cd90e4c0f81be53d8e4df0b6', icon: "chevron-up", class: "hydrated" }), h("span", { key: '3f8e9c78ddc70fedc638528bfb0000b9ce4f91c9', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: '88e285a9a36594ddfc782539fd66f566496526ed' }, current, "/", totalCount), h("button", { key: '732c37e44fb2eb9989754d606776c15d95b328c4', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '72032a6914db0c1cdf967e02e470649f61056219', icon: "chevron-down", class: "hydrated" }), h("span", { key: '13cf1a7f9931e5bff22dbec53cfbf9464d8a5c72', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (h("div", { key: '82ef9a84a6953576bfebac49e0f4c7c676ec8e5e', class: "dso-mark-bar" }, h("div", { key: '7d0f787a6817767ed9ff8001eab1ef26d9a46656', class: "dso-mark-bar-input" }, h("input", { key: 'af06bc6f6003fdd707a9442f9846d2d94045a670', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '061c17078705fd38c537e66a29b1b5af5bc9f0b8', htmlFor: "search-input" }, h("dso-icon", { key: '246ba69b0230946be0e4c1e3479acee36aca0872', class: "dso-search-icon", icon: "search" }), h("span", { key: '9f673502ec096039f4a24a0a37f7ce513ac08c6b', class: "label-text" }, this.label)), h("button", { key: '4df19c63c32f1b785364e75865a2eb06c0456440', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '306b9291d5b803d215915368f625422092949b8c', icon: "times" }), h("span", { key: 'e0a4c7efc36bde841f25240fd613759aca5504d8', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '1549e84d397fe3c627d4d6920610b8071de36fb5', class: "dso-button-container" }, h("span", { key: '19cee7a0161cc9b7433390d45284cf53b634370f', class: "divider" }), h("button", { key: '57dc2293455a12ed0085ef7b69e6e49a6c10ad53', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '9926d9bfc9bd5540379dafcb2088f4f8956c988d', icon: "chevron-up", class: "hydrated" }), h("span", { key: '5439ef32cbfcce57b175840f6ad2ef414f22d638', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: 'eff38a856dd1ad510a002c751bee2f64c8531fea' }, current, "/", totalCount), h("button", { key: '5400da71fe4feed73f533023a689ed0610ac2f70', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '42123769427ee96c0259278532abe3e397e674f2', icon: "chevron-down", class: "hydrated" }), h("span", { key: '8c2d19ab4cce1faddaa70d2812ea11ea6a49a6af', class: "sr-only" }, "Volgend zoekresultaat")))));
     }
     static get style() { return DsoMarkBarStyle0; }
 }, [1, "dso-mark-bar", {

package/dist/components/dso-mark-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-mark-bar.js","mappings":"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","names":[],"sources":["src/components/mark-bar/mark-bar.scss?tag=dso-mark-bar&encapsulation=shadow","src/components/mark-bar/mark-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n background-color: colors.$wit;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n$height: units.$ru5;\r\n$focus-border-width: 1px;\r\n\r\n.dso-mark-bar {\r\n display: flex;\r\n flex-grow: 1;\r\n\r\n .dso-mark-bar-input {\r\n display: flex;\r\n position: relative;\r\n width: 100%;\r\n\r\n input {\r\n background-color: transparent;\r\n background-image: none;\r\n border: 1px solid form-control.$focus-border-color;\r\n border-radius: 4px;\r\n border-width: 1px;\r\n box-shadow: none;\r\n display: block;\r\n font-size: typography.$root-font-size-base;\r\n height: $height;\r\n line-height: $height;\r\n padding-inline: $height;\r\n padding-block: 6px;\r\n transition:\r\n border-color ease-in-out 0.15s,\r\n box-shadow ease-in-out 0.15s;\r\n width: 100%;\r\n border-start-end-radius: 0;\r\n border-end-end-radius: 0;\r\n border-inline-end: 0;\r\n\r\n &:focus {\r\n border-color: form-control.$focus-border-color;\r\n box-shadow: inset 0 0 0 form-control.$focus-border-width form-control.$focus-border-color;\r\n outline: 0;\r\n }\r\n\r\n &::-ms-clear {\r\n display: none;\r\n }\r\n\r\n &:not(:placeholder-shown) + label {\r\n width: $height;\r\n padding-inline-end: units.$u1;\r\n\r\n .label-text {\r\n @include utilities.sr-only();\r\n }\r\n }\r\n }\r\n\r\n label {\r\n bottom: units.$u1;\r\n height: $height;\r\n left: 0;\r\n right: units.$u5;\r\n padding-block: units.$u1;\r\n padding-inline-start: units.$u1;\r\n cursor: text;\r\n position: absolute;\r\n top: 0;\r\n overflow: hidden;\r\n /* stylelint-disable declaration-property-value-disallowed-list -- The following properties are needed to emulate the browser native placeholder attribute behavior /\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n / stylelint-enable-next-line declaration-property-value-disallowed-list /\r\n\r\n dso-icon {\r\n color: colors.$grasgroen;\r\n cursor: default;\r\n margin: -8px;\r\n padding: 8px;\r\n width: $height;\r\n height: $height;\r\n }\r\n\r\n .label-text {\r\n margin-left: units.$u1;\r\n color: colors.$grijs-60;\r\n }\r\n }\r\n\r\n button {\r\n background-color: transparent;\r\n border: 0;\r\n box-shadow: none;\r\n color: colors.$grasgroen;\r\n font-size: 0;\r\n height: $height;\r\n padding: units.$u1;\r\n position: absolute;\r\n right: 0;\r\n text-align: center;\r\n top: 0;\r\n width: $height;\r\n }\r\n }\r\n}\r\n\r\n.dso-button-container {\r\n position: relative;\r\n\r\n display: flex;\r\n align-items: center;\r\n gap: units.$u1;\r\n flex-shrink: 0;\r\n\r\n padding-inline: units.$u1;\r\n\r\n border: 1px solid colors.$bosgroen;\r\n border-inline-start: 0;\r\n border-start-end-radius: scaffolding.$border-radius-base;\r\n border-end-end-radius: scaffolding.$border-radius-base;\r\n\r\n button {\r\n appearance: none;\r\n padding: 0;\r\n border: 0;\r\n background-color: transparent;\r\n color: colors.$grasgroen;\r\n\r\n &:disabled {\r\n color: colors.$grijs-20;\r\n }\r\n }\r\n\r\n .divider {\r\n position: absolute;\r\n inset-inline-start: 0;\r\n inset-block-start: units.$u1;\r\n inset-block-end: units.$u1;\r\n\r\n inline-size: 1px;\r\n\r\n background-color: colors.$grijs-20;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Prop, Event, EventEmitter, Method } from \"@stencil/core\";\r\nimport {\r\n MarkBarInputEvent,\r\n MarkBarClearEvent,\r\n MarkBarPaginationEvent,\r\n MarkBarFocusOptions,\r\n} from \"./mark-bar.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-mark-bar\",\r\n styleUrl: \"./mark-bar.scss\",\r\n shadow: true,\r\n})\r\nexport class MarkBar implements ComponentInterface {\r\n /\r\n The current search value.\r\n /\r\n @Prop()\r\n value?: string;\r\n\r\n /\r\n The label for the input field.\r\n /\r\n @Prop()\r\n label = \"Zoeken in document\";\r\n\r\n /\r\n The current (one-based) highlighted search item.\r\n /\r\n @Prop()\r\n current?: number;\r\n\r\n /\r\n Total number of search results.\r\n /\r\n @Prop()\r\n totalCount?: number;\r\n\r\n /\r\n Focuses the input field.\r\n /\r\n @Method()\r\n async dsoFocus(options: MarkBarFocusOptions = {}) {\r\n this.inputElement?.focus();\r\n\r\n if (options.select) {\r\n this.inputElement?.select();\r\n }\r\n }\r\n\r\n /\r\n Emitted each time the user types in the search field.\r\n /\r\n @Event({ bubbles: false })\r\n dsoInput!: EventEmitter<MarkBarInputEvent>;\r\n\r\n /\r\n Emitted when user activates \"next search result\" button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoNext!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n /\r\n Emitted when user activates \"previous search result\" button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoPrevious!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n /\r\n Emitted when user activates \"clear search result\" button.\r\n */\r\n @Event({ bubbles: false })\r\n dsoClear!: EventEmitter<MarkBarClearEvent>;\r\n\r\n private inputElement?: HTMLInputElement;\r\n\r\n private handleInput = (e: Event) => {\r\n if (!(e.target instanceof HTMLInputElement)) {\r\n return;\r\n }\r\n\r\n this.dsoInput.emit({\r\n originalEvent: e,\r\n value: e.target.value,\r\n });\r\n };\r\n\r\n private handleNext = (e: MouseEvent \| KeyboardEvent) => {\r\n this.dsoNext.emit({ originalEvent: e });\r\n };\r\n\r\n private handlePrevious = (e: MouseEvent) => {\r\n this.dsoPrevious.emit({ originalEvent: e });\r\n };\r\n\r\n private handleClear = (e: MouseEvent) => {\r\n this.dsoClear.emit({ originalEvent: e });\r\n };\r\n\r\n private handleKeyDown = (e: KeyboardEvent) => {\r\n if (e.key === \"Enter\") {\r\n this.handleNext(e);\r\n }\r\n };\r\n\r\n render() {\r\n const current = this.current \|\| 0;\r\n const totalCount = this.totalCount \|\| 0;\r\n\r\n return (\r\n <div class=\"dso-mark-bar\">\r\n <div class=\"dso-mark-bar-input\">\r\n <input\r\n type=\"text\"\r\n id=\"search-input\"\r\n value={this.value}\r\n onInput={this.handleInput}\r\n onKeyDown={this.handleKeyDown}\r\n placeholder=\" \"\r\n ref={(element) => (this.inputElement = element)}\r\n />\r\n <label htmlFor=\"search-input\">\r\n <dso-icon class=\"dso-search-icon\" icon=\"search\"></dso-icon>\r\n <span class=\"label-text\">{this.label}</span>\r\n </label>\r\n <button type=\"button\" onClick={this.handleClear}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Zoekopdracht legen</span>\r\n </button>\r\n </div>\r\n <div class=\"dso-button-container\">\r\n <span class=\"divider\" />\r\n <button type=\"button\" onClick={this.handlePrevious} disabled={current <= 1}>\r\n <dso-icon icon=\"chevron-up\" class=\"hydrated\"></dso-icon>\r\n <span class=\"sr-only\">Vorig zoekresultaat</span>\r\n </button>\r\n <span>\r\n {current}/{totalCount}\r\n </span>\r\n <button type=\"button\" onClick={this.handleNext} disabled={current >= totalCount}>\r\n <dso-icon icon=\"chevron-down\" class=\"hydrated\"></dso-icon>\r\n <span class=\"sr-only\">Volgend zoekresultaat</span>\r\n </button>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-mark-bar.js","mappings":"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","names":[],"sources":["src/components/mark-bar/mark-bar.scss?tag=dso-mark-bar&encapsulation=shadow","src/components/mark-bar/mark-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n background-color: colors.$wit;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n$block-size: units.$ru5;\r\n$focus-border-width: 1px;\r\n\r\n.dso-mark-bar {\r\n display: flex;\r\n flex-grow: 1;\r\n\r\n .dso-mark-bar-input {\r\n display: flex;\r\n position: relative;\r\n inline-size: 100%;\r\n\r\n input {\r\n background-color: transparent;\r\n background-image: none;\r\n border: 1px solid form-control.$focus-border-color;\r\n border-radius: 4px;\r\n border-width: 1px;\r\n box-shadow: none;\r\n display: block;\r\n font-size: typography.$root-font-size-base;\r\n block-size: $block-size;\r\n line-height: $block-size;\r\n padding-inline: $block-size;\r\n padding-block: 6px;\r\n transition:\r\n border-color ease-in-out 0.15s,\r\n box-shadow ease-in-out 0.15s;\r\n inline-size: 100%;\r\n border-start-end-radius: 0;\r\n border-end-end-radius: 0;\r\n border-inline-end: 0;\r\n\r\n &:focus {\r\n border-color: form-control.$focus-border-color;\r\n box-shadow: inset 0 0 0 form-control.$focus-border-width form-control.$focus-border-color;\r\n outline: 0;\r\n }\r\n\r\n &::-ms-clear {\r\n display: none;\r\n }\r\n\r\n &:not(:placeholder-shown) + label {\r\n inline-size: $block-size;\r\n padding-inline-end: units.$u1;\r\n\r\n .label-text {\r\n @include utilities.sr-only();\r\n }\r\n }\r\n }\r\n\r\n label {\r\n inset-block-end: units.$u1;\r\n block-size: $block-size;\r\n inset-inline-start: 0;\r\n inset-inline-end: units.$u5;\r\n padding-block: units.$u1;\r\n padding-inline-start: units.$u1;\r\n cursor: text;\r\n position: absolute;\r\n inset-block-start: 0;\r\n overflow: hidden;\r\n /* stylelint-disable declaration-property-value-disallowed-list -- The following properties are needed to emulate the browser native placeholder attribute behavior /\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n / stylelint-enable-next-line declaration-property-value-disallowed-list /\r\n\r\n dso-icon {\r\n color: colors.$grasgroen;\r\n cursor: default;\r\n margin: -8px;\r\n padding: 8px;\r\n inline-size: $block-size;\r\n block-size: $block-size;\r\n }\r\n\r\n .label-text {\r\n margin-inline-start: units.$u1;\r\n color: colors.$grijs-60;\r\n }\r\n }\r\n\r\n button {\r\n background-color: transparent;\r\n border: 0;\r\n box-shadow: none;\r\n color: colors.$grasgroen;\r\n font-size: 0;\r\n block-size: $block-size;\r\n padding: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0;\r\n text-align: center;\r\n inset-block-start: 0;\r\n inline-size: $block-size;\r\n }\r\n }\r\n}\r\n\r\n.dso-button-container {\r\n position: relative;\r\n\r\n display: flex;\r\n align-items: center;\r\n gap: units.$u1;\r\n flex-shrink: 0;\r\n\r\n padding-inline: units.$u1;\r\n\r\n border: 1px solid colors.$bosgroen;\r\n border-inline-start: 0;\r\n border-start-end-radius: scaffolding.$border-radius-base;\r\n border-end-end-radius: scaffolding.$border-radius-base;\r\n\r\n button {\r\n appearance: none;\r\n padding: 0;\r\n border: 0;\r\n background-color: transparent;\r\n color: colors.$grasgroen;\r\n\r\n &:disabled {\r\n color: colors.$grijs-20;\r\n }\r\n }\r\n\r\n .divider {\r\n position: absolute;\r\n inset-inline-start: 0;\r\n inset-block-start: units.$u1;\r\n inset-block-end: units.$u1;\r\n\r\n inline-size: 1px;\r\n\r\n background-color: colors.$grijs-20;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Prop, Event, EventEmitter, Method } from \"@stencil/core\";\r\nimport {\r\n MarkBarInputEvent,\r\n MarkBarClearEvent,\r\n MarkBarPaginationEvent,\r\n MarkBarFocusOptions,\r\n} from \"./mark-bar.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-mark-bar\",\r\n styleUrl: \"./mark-bar.scss\",\r\n shadow: true,\r\n})\r\nexport class MarkBar implements ComponentInterface {\r\n /\r\n The current search value.\r\n /\r\n @Prop()\r\n value?: string;\r\n\r\n /\r\n The label for the input field.\r\n /\r\n @Prop()\r\n label = \"Zoeken in document\";\r\n\r\n /\r\n The current (one-based) highlighted search item.\r\n /\r\n @Prop()\r\n current?: number;\r\n\r\n /\r\n Total number of search results.\r\n /\r\n @Prop()\r\n totalCount?: number;\r\n\r\n /\r\n Focuses the input field.\r\n /\r\n @Method()\r\n async dsoFocus(options: MarkBarFocusOptions = {}) {\r\n this.inputElement?.focus();\r\n\r\n if (options.select) {\r\n this.inputElement?.select();\r\n }\r\n }\r\n\r\n /\r\n Emitted each time the user types in the search field.\r\n /\r\n @Event({ bubbles: false })\r\n dsoInput!: EventEmitter<MarkBarInputEvent>;\r\n\r\n /\r\n Emitted when user activates \"next search result\" button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoNext!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n /\r\n Emitted when user activates \"previous search result\" button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoPrevious!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n /\r\n Emitted when user activates \"clear search result\" button.\r\n */\r\n @Event({ bubbles: false })\r\n dsoClear!: EventEmitter<MarkBarClearEvent>;\r\n\r\n private inputElement?: HTMLInputElement;\r\n\r\n private handleInput = (e: Event) => {\r\n if (!(e.target instanceof HTMLInputElement)) {\r\n return;\r\n }\r\n\r\n this.dsoInput.emit({\r\n originalEvent: e,\r\n value: e.target.value,\r\n });\r\n };\r\n\r\n private handleNext = (e: MouseEvent \| KeyboardEvent) => {\r\n this.dsoNext.emit({ originalEvent: e });\r\n };\r\n\r\n private handlePrevious = (e: MouseEvent) => {\r\n this.dsoPrevious.emit({ originalEvent: e });\r\n };\r\n\r\n private handleClear = (e: MouseEvent) => {\r\n this.dsoClear.emit({ originalEvent: e });\r\n };\r\n\r\n private handleKeyDown = (e: KeyboardEvent) => {\r\n if (e.key === \"Enter\") {\r\n this.handleNext(e);\r\n }\r\n };\r\n\r\n render() {\r\n const current = this.current \|\| 0;\r\n const totalCount = this.totalCount \|\| 0;\r\n\r\n return (\r\n <div class=\"dso-mark-bar\">\r\n <div class=\"dso-mark-bar-input\">\r\n <input\r\n type=\"text\"\r\n id=\"search-input\"\r\n value={this.value}\r\n onInput={this.handleInput}\r\n onKeyDown={this.handleKeyDown}\r\n placeholder=\" \"\r\n ref={(element) => (this.inputElement = element)}\r\n />\r\n <label htmlFor=\"search-input\">\r\n <dso-icon class=\"dso-search-icon\" icon=\"search\"></dso-icon>\r\n <span class=\"label-text\">{this.label}</span>\r\n </label>\r\n <button type=\"button\" onClick={this.handleClear}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Zoekopdracht legen</span>\r\n </button>\r\n </div>\r\n <div class=\"dso-button-container\">\r\n <span class=\"divider\" />\r\n <button type=\"button\" onClick={this.handlePrevious} disabled={current <= 1}>\r\n <dso-icon icon=\"chevron-up\" class=\"hydrated\"></dso-icon>\r\n <span class=\"sr-only\">Vorig zoekresultaat</span>\r\n </button>\r\n <span>\r\n {current}/{totalCount}\r\n </span>\r\n <button type=\"button\" onClick={this.handleNext} disabled={current >= totalCount}>\r\n <dso-icon icon=\"chevron-down\" class=\"hydrated\"></dso-icon>\r\n <span class=\"sr-only\">Volgend zoekresultaat</span>\r\n </button>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}

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

@@ -4,7 +4,7 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './scrollable.js';
 import { v as v4 } from './v4.js';
-const modalCss = "@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>.dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>.dso-body img{height:auto;max-width:100%}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{height:auto;max-width:100%}.dso-modal .dso-body:focus-visible{outline:none}.dso-modal .dso-footer{min-block-size:80px;padding:16px 32px;text-align:end}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding:8px 16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding:16px 24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding:8px 32px}}.dso-close dso-icon{color:#39870c}";
+const modalCss = "@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>.dso-body p{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>.dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>.dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{block-size:auto;max-inline-size:100%}.dso-modal .dso-body:focus-visible{outline:none}.dso-modal .dso-footer{min-block-size:80px;padding-block:16px;padding-inline:32px;text-align:end}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding-block:8px;padding-inline:16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding-block:16px;padding-inline:24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding-block:8px;padding-inline:32px}}.dso-close dso-icon{color:#39870c}";
 const DsoModalStyle0 = modalCss;
 const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
@@ -43,10 +43,10 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
     }
     render() {
         var _a;
-        return (h("dialog", { key: '105a90e070e128bc42e652e71e2d65d7075c3b22', class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
+        return (h("dialog", { key: '9d9172de470f4cd41bcc9120284796f61eb2e108', class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
                 e.preventDefault();
                 this.dsoClose.emit({ originalEvent: e });
-            } }, h("div", { key: '62928005e012b28a4bb3292577d338a19564d900', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("dso-scrollable", { key: 'a3b8ca827f4f810111748c8afce16376a2855ea2' }, h("div", { key: 'e1b8da8b7f989fb9218225717b42a442ccdbba68', class: "dso-body", tabIndex: 0 }, h("slot", { key: '75d7237cd6361428ee1a8fde43297105c13a5a70', name: "body" }))), this.hasFooter && (h("div", { key: 'ccba551213f760dc116181a15c5d14ccc4e69b55', class: "dso-footer" }, h("slot", { key: '723581c8230a74655480866e0cb319c0e3f40215', name: "footer" }))))));
+            } }, h("div", { key: '8b55f0d93087079ae9553ed923f8a91d6263f106', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("dso-scrollable", { key: '67237cd6b47ad31bb1c3b9ef0ff7ed857a2dab3e' }, h("div", { key: '9fab8506d664740d1e8201339064d12cae1513bf', class: "dso-body", tabIndex: 0 }, h("slot", { key: '36f25fee6e2ef67c5263c5b71d14207a566e835c', name: "body" }))), this.hasFooter && (h("div", { key: '279afafbbd24f6c285f7d85b755a4ec41ecd43d1', class: "dso-footer" }, h("slot", { key: '0a894d9bb649768c53f99bd4569df9dc0db0aef3', name: "footer" }))))));
     }
     get host() { return this; }
     static get style() { return DsoModalStyle0; }

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

	@@ -1 +1 @@
1	- {"file":"dso-modal.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,~~23LAA23L~~,CAAC;~~AAC74L~~,uBAAe,QAAQ;;MCUV,KAAK;;;;;;sBAOP,EAAE,EAAE;;;oBAmBS,QAAQ;2BAUiB,SAAS;+BAQtC,IAAI;;IAUtB,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC5D;IAED,gBAAgB;;QACd,IAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,EAAE;YACvC,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;YACzC,IAAI,aAAa,YAAY,WAAW,EAAE;gBACxC,IAAI,CAAC,kBAAkB,GAAG,aAAa,CAAC;aACzC;YAED,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC;SACpC;KACF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;QAEhC,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE;YAC9B,OAAO;SACR;QAED,OAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,IAAI,CAAC,kBAAkB,CAAC,0CAAE,KAAK,EAAE,CAAC;KACxD;IAED,MAAM;;QACJ,QACE,+DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,SAAS,gBACjB,MAAM,qBACA,IAAI,CAAC,MAAM,EAC5B,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC;gBACV,CAAC,CAAC,cAAc,EAAE,CAAC;gBAEnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;aAC1C,IAED,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,IACpC,IAAI,CAAC,UAAU,IACd,WAAK,KAAK,EAAC,YAAY,IACrB,UAAI,EAAE,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,UAAU,CAAM,EAC1C,IAAI,CAAC,eAAe,KACnB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,IAC9F,gBAAU,IAAI,EAAC,OAAO,GAAY,EAClC,YAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACG,KAEN,YAAM,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,cAE9B,CACR,EAED,yEACE,4DAAK,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,IAC/B,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACS,EAEhB,IAAI,CAAC,SAAS,KACb,4DAAK,KAAK,EAAC,YAAY,IACrB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,CACC,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n// fullscreen option\r\n:host([fullscreen]) dialog {\r\n @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n :host dialog {\r\n @include modal.fullscreen();\r\n }\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n dso-icon {\r\n color: modal.$close-icon-color;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n tag: \"dso-modal\",\r\n styleUrl: \"modal.scss\",\r\n shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n private htmlDialogElement?: HTMLDialogElement;\r\n\r\n @Element()\r\n host!: HTMLDsoModalElement;\r\n\r\n @State()\r\n ariaId = v4();\r\n\r\n /*\r\n when set the modal will be shown in fullscreen.\r\n /\r\n @Prop({ reflect: true })\r\n fullscreen?: boolean;\r\n\r\n /\r\n The title of the Modal.\r\n /\r\n @Prop()\r\n modalTitle?: string;\r\n\r\n /\r\n the role for the modal `dialog` \| `alert` \| `alertdialog`.\r\n /\r\n @Prop()\r\n // eslint-disable-next-line @stencil-community/reserved-member-names\r\n role: string \| null = \"dialog\";\r\n\r\n /\r\n The element to return focus to after the modal is closed.\r\n \r\n * `undefined` will return focus to the previously focused element (default).\r\n * * `false` will not return focus to any element.\r\n * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n /\r\n @Prop()\r\n returnFocus: false \| HTMLElement \| undefined = undefined;\r\n\r\n /\r\n when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n \r\n Needs `modalTitle` to be set.\r\n /\r\n @Prop()\r\n showCloseButton = true;\r\n\r\n private returnFocusElement: HTMLElement \| undefined;\r\n\r\n /\r\n Emitted when the user wants to close the Modal.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n get hasFooter() {\r\n return this.host.querySelector(\"[slot='footer']\") !== null;\r\n }\r\n\r\n componentDidLoad(): void {\r\n if (this.htmlDialogElement?.isConnected) {\r\n const activeElement = getActiveElement();\r\n if (activeElement instanceof HTMLElement) {\r\n this.returnFocusElement = activeElement;\r\n }\r\n\r\n this.htmlDialogElement.showModal();\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.htmlDialogElement?.close();\r\n\r\n if (this.returnFocus === false) {\r\n return;\r\n }\r\n\r\n (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n }\r\n\r\n render() {\r\n return (\r\n <dialog\r\n class=\"dso-modal\"\r\n role={this.role ?? undefined}\r\n aria-modal=\"true\"\r\n aria-labelledby={this.ariaId}\r\n ref={(element) => (this.htmlDialogElement = element)}\r\n onCancel={(e) => {\r\n e.preventDefault();\r\n\r\n this.dsoClose.emit({ originalEvent: e });\r\n }}\r\n >\r\n <div class=\"dso-dialog\" role=\"document\">\r\n {this.modalTitle ? (\r\n <div class=\"dso-header\">\r\n <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n {this.showCloseButton && (\r\n <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n )}\r\n </div>\r\n ) : (\r\n <span class=\"sr-only\" id={this.ariaId}>\r\n Dialoog\r\n </span>\r\n )}\r\n\r\n <dso-scrollable>\r\n <div class=\"dso-body\" tabIndex={0}>\r\n <slot name=\"body\" />\r\n </div>\r\n </dso-scrollable>\r\n\r\n {this.hasFooter && (\r\n <div class=\"dso-footer\">\r\n <slot name=\"footer\" />\r\n </div>\r\n )}\r\n </div>\r\n </dialog>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-modal.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,mnMAAmnM,CAAC;AACroM,uBAAe,QAAQ;;MCUV,KAAK;;;;;;sBAOP,EAAE,EAAE;;;oBAmBS,QAAQ;2BAUiB,SAAS;+BAQtC,IAAI;;IAUtB,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC5D;IAED,gBAAgB;;QACd,IAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,EAAE;YACvC,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;YACzC,IAAI,aAAa,YAAY,WAAW,EAAE;gBACxC,IAAI,CAAC,kBAAkB,GAAG,aAAa,CAAC;aACzC;YAED,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC;SACpC;KACF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;QAEhC,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE;YAC9B,OAAO;SACR;QAED,OAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,IAAI,CAAC,kBAAkB,CAAC,0CAAE,KAAK,EAAE,CAAC;KACxD;IAED,MAAM;;QACJ,QACE,+DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,SAAS,gBACjB,MAAM,qBACA,IAAI,CAAC,MAAM,EAC5B,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC;gBACV,CAAC,CAAC,cAAc,EAAE,CAAC;gBAEnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;aAC1C,IAED,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,IACpC,IAAI,CAAC,UAAU,IACd,WAAK,KAAK,EAAC,YAAY,IACrB,UAAI,EAAE,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,UAAU,CAAM,EAC1C,IAAI,CAAC,eAAe,KACnB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,IAC9F,gBAAU,IAAI,EAAC,OAAO,GAAY,EAClC,YAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACG,KAEN,YAAM,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,cAE9B,CACR,EAED,yEACE,4DAAK,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,IAC/B,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACS,EAEhB,IAAI,CAAC,SAAS,KACb,4DAAK,KAAK,EAAC,YAAY,IACrB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,CACC,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n// fullscreen option\r\n:host([fullscreen]) dialog {\r\n @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n :host dialog {\r\n @include modal.fullscreen();\r\n }\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n dso-icon {\r\n color: modal.$close-icon-color;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n tag: \"dso-modal\",\r\n styleUrl: \"modal.scss\",\r\n shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n private htmlDialogElement?: HTMLDialogElement;\r\n\r\n @Element()\r\n host!: HTMLDsoModalElement;\r\n\r\n @State()\r\n ariaId = v4();\r\n\r\n /*\r\n when set the modal will be shown in fullscreen.\r\n /\r\n @Prop({ reflect: true })\r\n fullscreen?: boolean;\r\n\r\n /\r\n The title of the Modal.\r\n /\r\n @Prop()\r\n modalTitle?: string;\r\n\r\n /\r\n the role for the modal `dialog` \| `alert` \| `alertdialog`.\r\n /\r\n @Prop()\r\n // eslint-disable-next-line @stencil-community/reserved-member-names\r\n role: string \| null = \"dialog\";\r\n\r\n /\r\n The element to return focus to after the modal is closed.\r\n \r\n * `undefined` will return focus to the previously focused element (default).\r\n * * `false` will not return focus to any element.\r\n * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n /\r\n @Prop()\r\n returnFocus: false \| HTMLElement \| undefined = undefined;\r\n\r\n /\r\n when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n \r\n Needs `modalTitle` to be set.\r\n /\r\n @Prop()\r\n showCloseButton = true;\r\n\r\n private returnFocusElement: HTMLElement \| undefined;\r\n\r\n /\r\n Emitted when the user wants to close the Modal.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n get hasFooter() {\r\n return this.host.querySelector(\"[slot='footer']\") !== null;\r\n }\r\n\r\n componentDidLoad(): void {\r\n if (this.htmlDialogElement?.isConnected) {\r\n const activeElement = getActiveElement();\r\n if (activeElement instanceof HTMLElement) {\r\n this.returnFocusElement = activeElement;\r\n }\r\n\r\n this.htmlDialogElement.showModal();\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.htmlDialogElement?.close();\r\n\r\n if (this.returnFocus === false) {\r\n return;\r\n }\r\n\r\n (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n }\r\n\r\n render() {\r\n return (\r\n <dialog\r\n class=\"dso-modal\"\r\n role={this.role ?? undefined}\r\n aria-modal=\"true\"\r\n aria-labelledby={this.ariaId}\r\n ref={(element) => (this.htmlDialogElement = element)}\r\n onCancel={(e) => {\r\n e.preventDefault();\r\n\r\n this.dsoClose.emit({ originalEvent: e });\r\n }}\r\n >\r\n <div class=\"dso-dialog\" role=\"document\">\r\n {this.modalTitle ? (\r\n <div class=\"dso-header\">\r\n <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n {this.showCloseButton && (\r\n <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n )}\r\n </div>\r\n ) : (\r\n <span class=\"sr-only\" id={this.ariaId}>\r\n Dialoog\r\n </span>\r\n )}\r\n\r\n <dso-scrollable>\r\n <div class=\"dso-body\" tabIndex={0}>\r\n <slot name=\"body\" />\r\n </div>\r\n </dso-scrollable>\r\n\r\n {this.hasFooter && (\r\n <div class=\"dso-footer\">\r\n <slot name=\"footer\" />\r\n </div>\r\n )}\r\n </div>\r\n </dialog>\r\n );\r\n }\r\n}\r\n"],"version":3}

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

@@ -3,7 +3,7 @@ import { i as isModifiedEvent } from './is-modified-event.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './responsive-element.js';
-const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{padding-inline-start:initial;text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:2rem;justify-content:center;position:relative;min-inline-size:2rem;padding:2px}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:1rem}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:\"\";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}";
+const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{padding-inline-start:initial;text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;block-size:2rem;justify-content:center;position:relative;min-inline-size:2rem;padding:2px;padding-block:2px;padding-inline:2px}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:1rem}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-block-end-color:#39870c}.pagination>li a::after{border-block-end:3px solid transparent;inset-block-end:0;content:\"\";display:inline-block;inset-inline-start:0;position:absolute;inline-size:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-inline-start:8px}.dso-page-hidden{visibility:hidden}";
 const DsoPaginationStyle0 = paginationCss;
 const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTMLElement {

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

	@@ -1 +1 @@
1	- {"file":"dso-pagination.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=dso-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/pagination\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.pagination {\r\n @include pagination.root();\r\n}\r\n\r\n.dso-page-hidden {\r\n visibility: hidden;\r\n}\r\n","import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Listen,\r\n Prop,\r\n State,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\r\nimport { PaginationSelectPageEvent } from \"./pagination.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-pagination\",\r\n styleUrl: \"pagination.scss\",\r\n shadow: true,\r\n})\r\nexport class Pagination implements ComponentInterface {\r\n private sizePositionsMap: Record<ResponsiveElementSize, number> = {\r\n small: 7,\r\n medium: 9,\r\n large: 11,\r\n };\r\n\r\n private responsiveElement?: HTMLDsoResponsiveElementElement;\r\n\r\n @Element()\r\n host!: HTMLDsoPaginationElement;\r\n\r\n @State()\r\n availablePositions?: number;\r\n /*\r\n Total pages\r\n /\r\n @Prop()\r\n totalPages?: number;\r\n\r\n /\r\n Current page\r\n /\r\n @Prop()\r\n currentPage?: number;\r\n\r\n /\r\n This function is called to format the href\r\n /\r\n @Prop()\r\n formatHref: (page: number) => string = (page) => \"#\" + page;\r\n\r\n /\r\n Emitted on page select\r\n /\r\n @Event()\r\n dsoSelectPage!: EventEmitter<PaginationSelectPageEvent>;\r\n\r\n /\r\n Listens to the dsoSizeChange event on Responsive Element\r\n */\r\n @Listen(\"dsoSizeChange\")\r\n sizeChangeHandler(event: CustomEvent<ResponsiveElementSize>) {\r\n this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);\r\n }\r\n\r\n private clickHandler(e: MouseEvent, page: number) {\r\n this.dsoSelectPage.emit({\r\n originalEvent: e,\r\n page,\r\n isModifiedEvent: isModifiedEvent(e),\r\n });\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.responsiveElement\r\n ?.getSize()\r\n .then(\r\n (size: ResponsiveElementSize) =>\r\n (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])),\r\n );\r\n }\r\n\r\n render() {\r\n if (!this.totalPages) {\r\n return null;\r\n }\r\n\r\n if (this.availablePositions === undefined) {\r\n return <dso-responsive-element ref={(element) => (this.responsiveElement = element)}></dso-responsive-element>;\r\n }\r\n\r\n const availablePositions = this.availablePositions;\r\n\r\n const currentPage = this.currentPage ?? 0;\r\n\r\n const pages: number[] = this.getPages(currentPage, this.availablePositions, this.totalPages);\r\n\r\n return (\r\n <dso-responsive-element ref={(element) => (this.responsiveElement = element)}>\r\n <ul class=\"pagination\">\r\n <li class={currentPage <= 1 \|\| currentPage > this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n <a\r\n href={this.formatHref(pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n aria-label=\"Vorige\"\r\n onClick={(e) => currentPage && this.clickHandler(e, pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n >\r\n <dso-icon icon=\"chevron-left\"></dso-icon>\r\n </a>\r\n </li>\r\n {pages.map((page) => (\r\n <>\r\n {this.showEllipsisBeforeLast(pages, page, availablePositions) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n\r\n <li key={page} class={currentPage === page ? \"active\" : undefined}>\r\n {currentPage === page ? (\r\n <span aria-current=\"page\">{page}</span>\r\n ) : (\r\n <a href={this.formatHref(page)} onClick={(e) => this.clickHandler(e, page)}>\r\n {page}\r\n </a>\r\n )}\r\n </li>\r\n\r\n {this.showEllipsisAfterFirst(pages, page, availablePositions) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n </>\r\n ))}\r\n <li class={currentPage < 1 \|\| currentPage >= this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n <a\r\n href={this.formatHref(pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)}\r\n aria-label=\"Volgende\"\r\n onClick={(e) =>\r\n currentPage &&\r\n this.totalPages &&\r\n this.clickHandler(e, pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)\r\n }\r\n >\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n </li>\r\n </ul>\r\n </dso-responsive-element>\r\n );\r\n }\r\n\r\n private getAvailablePositions(sizePositions: number) {\r\n if (sizePositions % 2 === 0) {\r\n // Even aantal posities zorgt voor een scheve pagination\r\n return sizePositions - 1;\r\n }\r\n if (sizePositions <= 3) {\r\n // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.\r\n return 3;\r\n }\r\n\r\n return sizePositions;\r\n }\r\n\r\n private getPages(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n if (totalPages + 2 <= availablePositions) {\r\n // + 2 voor de vorige en volgende knop\r\n return Array.from({ length: totalPages }, (_value, i) => i + 1);\r\n }\r\n\r\n if (availablePositions === 3) {\r\n return [currentPage];\r\n }\r\n\r\n if (availablePositions === 5) {\r\n return [1, currentPage, totalPages];\r\n }\r\n\r\n return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];\r\n }\r\n\r\n private getPageRange(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n const range: number[] = [];\r\n\r\n const positionRange = Math.floor(availablePositions / 2);\r\n\r\n if (currentPage <= positionRange) {\r\n for (let i = 2; i <= availablePositions - 4; i++) {\r\n range.push(i);\r\n }\r\n }\r\n\r\n if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {\r\n if (positionRange === 1) {\r\n if (currentPage > totalPages - 2) {\r\n range.push(totalPages - 2);\r\n }\r\n\r\n range.push(currentPage);\r\n\r\n if (currentPage < 3) {\r\n range.push(3);\r\n }\r\n }\r\n\r\n if (positionRange > 1) {\r\n const pagesBeforeOrAfter = positionRange - 3;\r\n\r\n for (\r\n let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange);\r\n i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange);\r\n i++\r\n ) {\r\n if (i > 2 && i < totalPages - 1) {\r\n range.push(i);\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (currentPage > totalPages - positionRange) {\r\n for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {\r\n range.push(i);\r\n }\r\n }\r\n\r\n return range.filter((v, i, a) => a.indexOf(v) === i);\r\n }\r\n\r\n private showEllipsisAfterFirst(pages: number[], page: number, availablePositions: number): boolean {\r\n const totalPages = pages[pages.length - 1];\r\n if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n return (\r\n pages.indexOf(page) === 0 &&\r\n totalPages > availablePositions - 2 &&\r\n !pages.some((p) => p === 2) &&\r\n availablePositions >= 7\r\n );\r\n }\r\n\r\n private showEllipsisBeforeLast(pages: number[], page: number, availablePositions: number): boolean {\r\n const totalPages = pages[pages.length - 1];\r\n if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n return (\r\n pages.indexOf(page) === pages.length - 1 &&\r\n totalPages > availablePositions - 2 &&\r\n !pages.some((p) => p === totalPages - 1) &&\r\n availablePositions >= 7\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-pagination.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=dso-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/pagination\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.pagination {\r\n @include pagination.root();\r\n}\r\n\r\n.dso-page-hidden {\r\n visibility: hidden;\r\n}\r\n","import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Listen,\r\n Prop,\r\n State,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\r\nimport { PaginationSelectPageEvent } from \"./pagination.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-pagination\",\r\n styleUrl: \"pagination.scss\",\r\n shadow: true,\r\n})\r\nexport class Pagination implements ComponentInterface {\r\n private sizePositionsMap: Record<ResponsiveElementSize, number> = {\r\n small: 7,\r\n medium: 9,\r\n large: 11,\r\n };\r\n\r\n private responsiveElement?: HTMLDsoResponsiveElementElement;\r\n\r\n @Element()\r\n host!: HTMLDsoPaginationElement;\r\n\r\n @State()\r\n availablePositions?: number;\r\n /*\r\n Total pages\r\n /\r\n @Prop()\r\n totalPages?: number;\r\n\r\n /\r\n Current page\r\n /\r\n @Prop()\r\n currentPage?: number;\r\n\r\n /\r\n This function is called to format the href\r\n /\r\n @Prop()\r\n formatHref: (page: number) => string = (page) => \"#\" + page;\r\n\r\n /\r\n Emitted on page select\r\n /\r\n @Event()\r\n dsoSelectPage!: EventEmitter<PaginationSelectPageEvent>;\r\n\r\n /\r\n Listens to the dsoSizeChange event on Responsive Element\r\n */\r\n @Listen(\"dsoSizeChange\")\r\n sizeChangeHandler(event: CustomEvent<ResponsiveElementSize>) {\r\n this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);\r\n }\r\n\r\n private clickHandler(e: MouseEvent, page: number) {\r\n this.dsoSelectPage.emit({\r\n originalEvent: e,\r\n page,\r\n isModifiedEvent: isModifiedEvent(e),\r\n });\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.responsiveElement\r\n ?.getSize()\r\n .then(\r\n (size: ResponsiveElementSize) =>\r\n (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])),\r\n );\r\n }\r\n\r\n render() {\r\n if (!this.totalPages) {\r\n return null;\r\n }\r\n\r\n if (this.availablePositions === undefined) {\r\n return <dso-responsive-element ref={(element) => (this.responsiveElement = element)}></dso-responsive-element>;\r\n }\r\n\r\n const availablePositions = this.availablePositions;\r\n\r\n const currentPage = this.currentPage ?? 0;\r\n\r\n const pages: number[] = this.getPages(currentPage, this.availablePositions, this.totalPages);\r\n\r\n return (\r\n <dso-responsive-element ref={(element) => (this.responsiveElement = element)}>\r\n <ul class=\"pagination\">\r\n <li class={currentPage <= 1 \|\| currentPage > this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n <a\r\n href={this.formatHref(pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n aria-label=\"Vorige\"\r\n onClick={(e) => currentPage && this.clickHandler(e, pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n >\r\n <dso-icon icon=\"chevron-left\"></dso-icon>\r\n </a>\r\n </li>\r\n {pages.map((page) => (\r\n <>\r\n {this.showEllipsisBeforeLast(pages, page, availablePositions) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n\r\n <li key={page} class={currentPage === page ? \"active\" : undefined}>\r\n {currentPage === page ? (\r\n <span aria-current=\"page\">{page}</span>\r\n ) : (\r\n <a href={this.formatHref(page)} onClick={(e) => this.clickHandler(e, page)}>\r\n {page}\r\n </a>\r\n )}\r\n </li>\r\n\r\n {this.showEllipsisAfterFirst(pages, page, availablePositions) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n </>\r\n ))}\r\n <li class={currentPage < 1 \|\| currentPage >= this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n <a\r\n href={this.formatHref(pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)}\r\n aria-label=\"Volgende\"\r\n onClick={(e) =>\r\n currentPage &&\r\n this.totalPages &&\r\n this.clickHandler(e, pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)\r\n }\r\n >\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n </li>\r\n </ul>\r\n </dso-responsive-element>\r\n );\r\n }\r\n\r\n private getAvailablePositions(sizePositions: number) {\r\n if (sizePositions % 2 === 0) {\r\n // Even aantal posities zorgt voor een scheve pagination\r\n return sizePositions - 1;\r\n }\r\n if (sizePositions <= 3) {\r\n // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.\r\n return 3;\r\n }\r\n\r\n return sizePositions;\r\n }\r\n\r\n private getPages(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n if (totalPages + 2 <= availablePositions) {\r\n // + 2 voor de vorige en volgende knop\r\n return Array.from({ length: totalPages }, (_value, i) => i + 1);\r\n }\r\n\r\n if (availablePositions === 3) {\r\n return [currentPage];\r\n }\r\n\r\n if (availablePositions === 5) {\r\n return [1, currentPage, totalPages];\r\n }\r\n\r\n return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];\r\n }\r\n\r\n private getPageRange(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n const range: number[] = [];\r\n\r\n const positionRange = Math.floor(availablePositions / 2);\r\n\r\n if (currentPage <= positionRange) {\r\n for (let i = 2; i <= availablePositions - 4; i++) {\r\n range.push(i);\r\n }\r\n }\r\n\r\n if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {\r\n if (positionRange === 1) {\r\n if (currentPage > totalPages - 2) {\r\n range.push(totalPages - 2);\r\n }\r\n\r\n range.push(currentPage);\r\n\r\n if (currentPage < 3) {\r\n range.push(3);\r\n }\r\n }\r\n\r\n if (positionRange > 1) {\r\n const pagesBeforeOrAfter = positionRange - 3;\r\n\r\n for (\r\n let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange);\r\n i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange);\r\n i++\r\n ) {\r\n if (i > 2 && i < totalPages - 1) {\r\n range.push(i);\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (currentPage > totalPages - positionRange) {\r\n for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {\r\n range.push(i);\r\n }\r\n }\r\n\r\n return range.filter((v, i, a) => a.indexOf(v) === i);\r\n }\r\n\r\n private showEllipsisAfterFirst(pages: number[], page: number, availablePositions: number): boolean {\r\n const totalPages = pages[pages.length - 1];\r\n if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n return (\r\n pages.indexOf(page) === 0 &&\r\n totalPages > availablePositions - 2 &&\r\n !pages.some((p) => p === 2) &&\r\n availablePositions >= 7\r\n );\r\n }\r\n\r\n private showEllipsisBeforeLast(pages: number[], page: number, availablePositions: number): boolean {\r\n const totalPages = pages[pages.length - 1];\r\n if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n return (\r\n pages.indexOf(page) === pages.length - 1 &&\r\n totalPages > availablePositions - 2 &&\r\n !pages.some((p) => p === totalPages - 1) &&\r\n availablePositions >= 7\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-progress-bar.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-const progressBarCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.progress{margin-bottom:8px}.progress .progress-bar{background-color:#fff;border:1px solid #39870c;display:block;height:16px}.progress .progress-bar>span{background-color:#39870c;float:left;height:100%;width:0%}.progress .progress-bar+span{font-size:14px;margin-top:8px}";
+const progressBarCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.progress{margin-block-end:8px}.progress .progress-bar{background-color:#fff;border:1px solid #39870c;display:block;block-size:16px}.progress .progress-bar>span{background-color:#39870c;float:inline-start;block-size:100%;inline-size:0%}.progress .progress-bar+span{font-size:14px;margin-block-start:8px}";
 const DsoProgressBarStyle0 = progressBarCss;
 const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends HTMLElement {
@@ -15,7 +15,7 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
     render() {
         const progressNumber = Math.round(this.progress);
         const progressPercentage = `${progressNumber}%`;
-        return (h("div", { key: 'ff4d4c40756266cb3148ad99654ed7cc4583f317', class: "progress" }, h("span", { key: 'e22b0de3d25d8db1108adbe270efe535eaf63691', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '7071ce188554ec8c59f43dd14d1106801abdecb0', style: { width: `${progressPercentage}` } })), h("span", { key: 'e0cc46668cd3ef7de11cce700a7b8d90080f136e', id: "progress-bar-label" }, h("slot", { key: '2e118c2588641d6cd350a1fe9bc59a965770a183' }))));
+        return (h("div", { key: 'b70503b86aa8f08212cdabe7693122b094a87d2a', class: "progress" }, h("span", { key: '81742338f1de203a4e2b89953732210f69f1802b', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '2262bff936ace8e5f3c0b27911d72a6e02706066', style: { width: `${progressPercentage}` } })), h("span", { key: '7522d45e08e703015704712c39b7b372741c2d7e', id: "progress-bar-label" }, h("slot", { key: '6f9e22ddbcad5ff63354ad751dfcf01e0afc4c04' }))));
     }
     static get style() { return DsoProgressBarStyle0; }
 }, [1, "dso-progress-bar", {

package/dist/components/dso-progress-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-progress-bar.js","mappings":";;AAAA,MAAM,cAAc,GAAG,~~ocAAoc,~~CAAC;~~AAC5d~~,6BAAe,cAAc;;MCMhB,WAAW;;;;;;mBAWhB,CAAC;mBAMD,GAAG;;IAET,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACjD,MAAM,kBAAkB,GAAG,GAAG,cAAc,GAAG,CAAC;QAEhD,QACE,4DAAK,KAAK,EAAC,UAAU,IACnB,6DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,qBACF,oBAAoB,mBACrB,cAAc,mBACd,IAAI,CAAC,GAAG,mBACR,IAAI,CAAC,GAAG,IAEvB,6DAAM,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,kBAAkB,EAAE,EAAE,GAAS,CACnD,EACP,6DAAM,EAAE,EAAC,oBAAoB,IAC3B,8DAAa,CACR,CACH,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/progress-bar/progress-bar.scss?tag=dso-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-bar\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.progress {\r\n @include progress-bar.root();\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-progress-bar\",\r\n styleUrl: \"progress-bar.scss\",\r\n shadow: true,\r\n})\r\nexport class ProgressBar {\r\n /*\r\n The current progress. Should be between `min` and `max`.\r\n /\r\n @Prop()\r\n progress!: number;\r\n\r\n /\r\n From where progress is made.\r\n /\r\n @Prop()\r\n min = 0;\r\n\r\n /\r\n When the operation completes.\r\n */\r\n @Prop()\r\n max = 100;\r\n\r\n render() {\r\n const progressNumber = Math.round(this.progress);\r\n const progressPercentage = `${progressNumber}%`;\r\n\r\n return (\r\n <div class=\"progress\">\r\n <span\r\n class=\"progress-bar\"\r\n role=\"progressbar\"\r\n aria-labelledby=\"progress-bar-label\"\r\n aria-valuenow={progressNumber}\r\n aria-valuemin={this.min}\r\n aria-valuemax={this.max}\r\n >\r\n <span style={{ width: `${progressPercentage}` }}></span>\r\n </span>\r\n <span id=\"progress-bar-label\">\r\n <slot></slot>\r\n </span>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-progress-bar.js","mappings":";;AAAA,MAAM,cAAc,GAAG,+eAA+e,CAAC;AACvgB,6BAAe,cAAc;;MCMhB,WAAW;;;;;;mBAWhB,CAAC;mBAMD,GAAG;;IAET,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACjD,MAAM,kBAAkB,GAAG,GAAG,cAAc,GAAG,CAAC;QAEhD,QACE,4DAAK,KAAK,EAAC,UAAU,IACnB,6DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,qBACF,oBAAoB,mBACrB,cAAc,mBACd,IAAI,CAAC,GAAG,mBACR,IAAI,CAAC,GAAG,IAEvB,6DAAM,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,kBAAkB,EAAE,EAAE,GAAS,CACnD,EACP,6DAAM,EAAE,EAAC,oBAAoB,IAC3B,8DAAa,CACR,CACH,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/progress-bar/progress-bar.scss?tag=dso-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-bar\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.progress {\r\n @include progress-bar.root();\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-progress-bar\",\r\n styleUrl: \"progress-bar.scss\",\r\n shadow: true,\r\n})\r\nexport class ProgressBar {\r\n /*\r\n The current progress. Should be between `min` and `max`.\r\n /\r\n @Prop()\r\n progress!: number;\r\n\r\n /\r\n From where progress is made.\r\n /\r\n @Prop()\r\n min = 0;\r\n\r\n /\r\n When the operation completes.\r\n */\r\n @Prop()\r\n max = 100;\r\n\r\n render() {\r\n const progressNumber = Math.round(this.progress);\r\n const progressPercentage = `${progressNumber}%`;\r\n\r\n return (\r\n <div class=\"progress\">\r\n <span\r\n class=\"progress-bar\"\r\n role=\"progressbar\"\r\n aria-labelledby=\"progress-bar-label\"\r\n aria-valuenow={progressNumber}\r\n aria-valuemin={this.min}\r\n aria-valuemax={this.max}\r\n >\r\n <span style={{ width: `${progressPercentage}` }}></span>\r\n </span>\r\n <span id=\"progress-bar-label\">\r\n <slot></slot>\r\n </span>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-tree-view.js CHANGED Viewed

@@ -15,7 +15,7 @@ const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize, }) => {
         item.open && (h(Fragment, null, item.hasItems && !item.items && item.loading ? (h("dso-progress-indicator", { size: "small", label: "Resultaten laden: een moment geduld alstublieft." })) : (h("ul", { role: "group" }, (_d = item.items) === null || _d === void 0 ? void 0 : _d.map((childItem, childIndex, org) => (h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: childIndex, level: level + 1, setSize: org.length })))))))));
 };
-const treeViewCss = ":host ul{list-style-type:none;padding-inline-start:32px;position:relative}:host li{position:relative}:host ul[role=tree]{padding-left:0}:host ul[role=group]::before{border-left:1px solid #275937;content:\"\";height:8px;left:44px;position:absolute;top:0;width:0}:host li:not(.has-child)::before{border-top:1px solid #275937;content:\"\";height:0;left:12px;position:absolute;top:20px;width:16px}:host li:not(.has-child)::after{border-left:1px solid #275937;content:\"\";height:100%;left:12px;position:absolute;top:8px;width:0}:host li:not(.has-child):last-child::after{height:20px;top:0}:host li.has-child::before{border-top:1px solid #275937;content:\"\";height:0;left:24px;position:absolute;top:20px;width:4px}:host li.has-child:not(:last-child)::after{border-left:1px solid #275937;content:\"\";height:calc(100% - 24px);left:12px;position:absolute;top:32px;width:0}:host li.has-child.is-expanded:last-child::after{border-left:1px solid #275937;content:\"\";height:calc(100% - 32px);left:12px;position:absolute;top:32px;width:0}:host .tree-branch-control{color:#39870c;display:inline-block;font-size:16px;margin:8px 8px 8px 0;vertical-align:top}:host .tree-branch-control>div{cursor:pointer}:host .tree-content{cursor:pointer;display:inline-block;margin:8px 0;max-width:calc(100% - 40px)}:host .tree-content a{color:#191919;text-decoration:underline}:host .tree-content a:hover,:host .tree-content a:focus{color:#191919;text-decoration:none}:host .tree-content a:active{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content.active{color:#8b4a6a;font-style:italic;font-weight:700;text-decoration:underline}:host .tree-content.active:hover,:host .tree-content.active:focus{text-decoration:none}:host .tree-content.active a{color:#8b4a6a}:host .tree-content.active a:hover,:host .tree-content.active a:focus{text-decoration:none}:host .tree-content dso-icon{color:#39870c;font-size:0.75em;margin-left:0.5em;vertical-align:text-bottom}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
+const treeViewCss = ":host ul{list-style-type:none;padding-inline-start:32px;position:relative}:host li{position:relative}:host ul[role=tree]{padding-inline-start:0}:host ul[role=group]::before{border-inline-start:1px solid #275937;content:\"\";block-size:8px;inset-inline-start:44px;position:absolute;inset-block-start:0;inline-size:0}:host li:not(.has-child)::before{border-block-start:1px solid #275937;content:\"\";block-size:0;inset-inline-start:12px;position:absolute;inset-block-start:20px;inline-size:16px}:host li:not(.has-child)::after{border-inline-start:1px solid #275937;content:\"\";block-size:100%;inset-inline-start:12px;position:absolute;inset-block-start:8px;inline-size:0}:host li:not(.has-child):last-child::after{block-size:20px;inset-block-start:0}:host li.has-child::before{border-block-start:1px solid #275937;content:\"\";block-size:0;inset-inline-start:24px;position:absolute;inset-block-start:20px;inline-size:4px}:host li.has-child:not(:last-child)::after{border-inline-start:1px solid #275937;content:\"\";block-size:calc(100% - 24px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host li.has-child.is-expanded:last-child::after{border-inline-start:1px solid #275937;content:\"\";block-size:calc(100% - 32px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host .tree-branch-control{color:#39870c;display:inline-block;font-size:16px;margin-block:8px;margin-inline:0 8px;vertical-align:top}:host .tree-branch-control>div{cursor:pointer}:host .tree-content{cursor:pointer;display:inline-block;margin-block:8px;margin-inline:0;max-inline-size:calc(100% - 40px)}:host .tree-content a{color:#191919;text-decoration:underline}:host .tree-content a:hover,:host .tree-content a:focus{color:#191919;text-decoration:none}:host .tree-content a:active{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content.active{color:#8b4a6a;font-style:italic;font-weight:700;text-decoration:underline}:host .tree-content.active:hover,:host .tree-content.active:focus{text-decoration:none}:host .tree-content.active a{color:#8b4a6a}:host .tree-content.active a:hover,:host .tree-content.active a:focus{text-decoration:none}:host .tree-content dso-icon{color:#39870c;font-size:0.75em;margin-inline-start:0.5em;vertical-align:text-bottom}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 const DsoTreeViewStyle0 = treeViewCss;
 const TreeView = /*@__PURE__*/ proxyCustomElement(class TreeView extends HTMLElement {
@@ -199,7 +199,7 @@ const TreeView = /*@__PURE__*/ proxyCustomElement(class TreeView extends HTMLEle
     }
     render() {
         var _a;
-        return (h("div", { key: 'e4651d8f9c3a185c7ded70b677c83178be7181e8', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '062945ce97ff42458de8636b954c3ff70aab5202', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
+        return (h("div", { key: 'b07d628f7741b4961596210003548094ede749b5', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '2ab63613e5b55b09aad1c84678c18c00bc7883ff', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
     }
     static get style() { return DsoTreeViewStyle0; }
 }, [1, "dso-tree-view", {

package/dist/components/dso-tree-view.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-tree-view.js","mappings":"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","names":[],"sources":["src/components/tree-view/tree-item.tsx","src/components/tree-view/tree-view.scss?tag=dso-tree-view&encapsulation=shadow","src/components/tree-view/tree-view.tsx"],"sourcesContent":["import { h, FunctionalComponent, Fragment } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { TreeViewItem, TreeViewItemIcon } from \"./tree-view.interfaces\";\r\n\r\nimport { TreeView } from \"./tree-view\";\r\n\r\ninterface TreeViewItemProps {\r\n owner: TreeView;\r\n ancestors: TreeViewItem[];\r\n item: TreeViewItem;\r\n index: number;\r\n level: number;\r\n setSize: number;\r\n}\r\n\r\nexport const DsoTreeItem: FunctionalComponent<TreeViewItemProps> = ({\r\n owner,\r\n ancestors,\r\n item,\r\n index,\r\n level,\r\n setSize,\r\n}) => (\r\n <li\r\n key={item.id}\r\n class={clsx(\"tree-item\", { \"has-child\": item.hasItems, \"is-expanded\": !!item.open && !!item.items?.length })}\r\n role=\"none\"\r\n >\r\n <div class=\"tree-branch-control\">\r\n {item.hasItems ? (\r\n <div onClick={(e) => owner.itemClick(e, ancestors, item)}>\r\n <dso-icon icon={item.open ? \"minus-square\" : \"plus-square\"}></dso-icon>\r\n </div>\r\n ) : (\r\n <dso-icon></dso-icon>\r\n )}\r\n </div>\r\n <p\r\n class={clsx(\"tree-content\", { active: item.active }, { selected: item.selected })}\r\n tabindex={level === 1 && index === 0 ? 0 : -1}\r\n role=\"treeitem\"\r\n aria-expanded={item.hasItems ? \"\" + (!!item.open && !!item.items?.length) : undefined}\r\n aria-current={item.active ? \"true\" : undefined}\r\n aria-level={level}\r\n aria-setsize={setSize}\r\n aria-posinset={index + 1}\r\n aria-busy={item.loading ? \"true\" : undefined}\r\n data-item-id={item.id}\r\n onClick={(e) => owner.itemClick(e, ancestors, item)}\r\n >\r\n {item.selected && <span class=\"sr-only\">Resultaat: </span>}\r\n {item.href ? (\r\n <a href={item.href} tabindex=\"-1\">\r\n {item.label}\r\n </a>\r\n ) : (\r\n <span>{item.label}</span>\r\n )}\r\n {item.icons?.map((icon: TreeViewItemIcon) => <dso-icon icon={icon.icon} title={icon.label}></dso-icon>)}\r\n </p>\r\n {item.open && (\r\n <>\r\n {item.hasItems && !item.items && item.loading ? (\r\n <dso-progress-indicator size=\"small\" label=\"Resultaten laden: een moment geduld alstublieft.\" />\r\n ) : (\r\n <ul role=\"group\">\r\n {item.items?.map((childItem: TreeViewItem, childIndex: number, org: TreeViewItem[]) => (\r\n <DsoTreeItem\r\n owner={owner}\r\n ancestors={[...ancestors, item]}\r\n item={childItem}\r\n index={childIndex}\r\n level={level + 1}\r\n setSize={org.length}\r\n ></DsoTreeItem>\r\n ))}\r\n </ul>\r\n )}\r\n </>\r\n )}\r\n </li>\r\n);\r\n","@use \"sass:math\";\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n\r\n@use \"tree-view.mixins\" as core-tree-view-mixins;\r\n@use \"tree-view.variables\" as core-tree-view-variables;\r\n\r\n:host {\r\n ul {\r\n list-style-type: none;\r\n padding-inline-start: core-tree-view-variables.$indent;\r\n position: relative;\r\n }\r\n\r\n li {\r\n position: relative;\r\n }\r\n\r\n ul[role=\"tree\"] {\r\n padding-left: 0;\r\n }\r\n\r\n // connects branch or leaf to parent\r\n ul[role=\"group\"]::before {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$indent + core-tree-view-variables.$hcenter,\r\n 0,\r\n core-tree-view-variables.$vspace\r\n );\r\n }\r\n\r\n li:not(.has-child) {\r\n // horizontal connector for a leaf\r\n &::before {\r\n @include core-tree-view-mixins.horizontal-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vcenter,\r\n core-tree-view-variables.$hspace + 0.5 * core-tree-view-variables.$icon-size - 4px\r\n );\r\n }\r\n\r\n // vertical connector for a leaf\r\n &::after {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vspace,\r\n 100%\r\n );\r\n }\r\n\r\n // vertical connector for the last leaf\r\n &:last-child::after {\r\n height: core-tree-view-variables.$vcenter;\r\n top: 0;\r\n }\r\n }\r\n\r\n li.has-child {\r\n // horizontal connector for a branch\r\n &::before {\r\n @include core-tree-view-mixins.horizontal-line(\r\n core-tree-view-variables.$icon-size,\r\n core-tree-view-variables.$vcenter,\r\n core-tree-view-variables.$hspace - 4px\r\n );\r\n }\r\n\r\n // vertical connector for a branch (not last)\r\n &:not(:last-child)::after {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n calc(100% - core-tree-view-variables.$icon-size)\r\n );\r\n }\r\n\r\n // vertical line after a expanded branch (creating dead ends)\r\n &.is-expanded:last-child::after {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n calc(100% - (core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size))\r\n );\r\n }\r\n }\r\n\r\n .tree-branch-control {\r\n color: colors.$grasgroen;\r\n display: inline-block;\r\n font-size: math.div(2 * core-tree-view-variables.$icon-size, 3);\r\n margin: core-tree-view-variables.$vspace core-tree-view-variables.$hspace core-tree-view-variables.$vspace 0;\r\n vertical-align: top;\r\n\r\n > div {\r\n cursor: pointer;\r\n }\r\n }\r\n\r\n .tree-content {\r\n cursor: pointer;\r\n display: inline-block;\r\n margin: core-tree-view-variables.$vspace 0;\r\n max-width: calc(100% - (core-tree-view-variables.$indent + core-tree-view-variables.$hspace));\r\n\r\n a {\r\n color: scaffolding.$text-color;\r\n text-decoration: underline;\r\n\r\n &:hover,\r\n &:focus {\r\n color: scaffolding.$text-color;\r\n text-decoration: none;\r\n }\r\n\r\n &:active {\r\n text-decoration: none;\r\n }\r\n }\r\n\r\n &.selected {\r\n color: scaffolding.$text-color;\r\n font-weight: 700;\r\n text-decoration: underline;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n }\r\n }\r\n\r\n &.active {\r\n color: colors.$mauve;\r\n font-style: italic;\r\n font-weight: 700;\r\n\r\n text-decoration: underline;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n }\r\n\r\n a {\r\n color: colors.$mauve;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n }\r\n }\r\n }\r\n\r\n dso-icon {\r\n color: colors.$grasgroen;\r\n font-size: 0.75em;\r\n margin-left: 0.5em;\r\n vertical-align: text-bottom;\r\n }\r\n }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { h, Component, ComponentInterface, Event, EventEmitter, Prop, Method } from \"@stencil/core\";\r\n\r\nimport { TreeViewPointerEvent, TreeViewItem } from \"./tree-view.interfaces\";\r\nimport { DsoTreeItem } from \"./tree-item\";\r\n\r\n@Component({\r\n tag: \"dso-tree-view\",\r\n styleUrl: \"./tree-view.scss\",\r\n shadow: true,\r\n})\r\nexport class TreeView implements ComponentInterface {\r\n private tree?: HTMLElement;\r\n\r\n /*\r\n The collection of TreeViewItems\r\n /\r\n @Prop()\r\n collection!: TreeViewItem[];\r\n\r\n /\r\n Emitted when a tree view item is opened.\r\n * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n * root to the item that is emitting the open event. The consumer of the event is responsible for updating\r\n * the TreeView's collection (usually set the open state on the last TreeViewItem in path).\r\n /\r\n @Event()\r\n dsoOpenItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n /\r\n Emitted when a tree view item is closed.\r\n * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n * root to the item that is emitting the close event. The consumer of the event is responsible for updating\r\n * the TreeView's collection (usually set the closed state on the last TreeViewItem in path).\r\n /\r\n @Event()\r\n dsoCloseItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n /\r\n Emitted when a tree view item is clicked.\r\n * The `detail` property of the `CustomEvent` will contain an object with:\r\n * `path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event.\r\n * `originalEvent` = the original click event.\r\n * The consumer of the event is responsible for updating the TreeView's collection (usually set the active\r\n * state on the last TreeViewItem in path and clear all other active item states).\r\n /\r\n @Event()\r\n dsoClickItem!: EventEmitter<TreeViewPointerEvent>;\r\n\r\n /\r\n Set focus on the last item in the specified path.\r\n * The consumer is responsible for providing a TreeView collection where the last item is visible.\r\n * @async\r\n * @returns Whether the item was found.\r\n */\r\n @Method()\r\n async focusItem(path: TreeViewItem[]): Promise<boolean> {\r\n const tree = this.tree;\r\n\r\n if (!tree \|\| path.length === 0) {\r\n return false;\r\n }\r\n\r\n const itemToFocus = path[path.length - 1];\r\n if (!itemToFocus) {\r\n throw new Error(\"No itemToFocus found\");\r\n }\r\n\r\n const elementToFocus = (Array.from(tree.querySelectorAll(\"p\") ?? []) as HTMLElement[])\r\n .filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0)\r\n .find((item) => item.dataset[\"itemId\"] === itemToFocus.id);\r\n\r\n if (!elementToFocus) {\r\n return false;\r\n }\r\n\r\n TreeView.setFocus(tree, elementToFocus);\r\n\r\n return true;\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.defaultPrevented) {\r\n return;\r\n }\r\n\r\n const isIndexLetter = (str: string) => str.length === 1 && str.match(/\\S/);\r\n\r\n const tree = event\r\n .composedPath()\r\n .find((item) => (item instanceof HTMLElement ? item.className === \"dso-tree\" : false));\r\n\r\n if (!(event.target instanceof HTMLParagraphElement) \|\| !(tree instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"ArrowDown\":\r\n TreeView.moveFocus(tree, event.target, \"next\");\r\n break;\r\n case \"ArrowUp\":\r\n TreeView.moveFocus(tree, event.target, \"previous\");\r\n break;\r\n case \"ArrowRight\":\r\n TreeView.expandItemOrFocusChild(tree, event.target);\r\n break;\r\n case \"ArrowLeft\":\r\n TreeView.collapseItemOrFocusParent(tree, event.target);\r\n break;\r\n case \"End\":\r\n TreeView.moveFocus(tree, event.target, \"last\");\r\n break;\r\n case \"Home\":\r\n TreeView.moveFocus(tree, event.target, \"first\");\r\n break;\r\n case \"Enter\":\r\n case \" \":\r\n event.target.click();\r\n break;\r\n default:\r\n if (isIndexLetter(event.key)) {\r\n if (TreeView.setFocusByFirstCharacter(tree, event.target, event.key, event.shiftKey)) {\r\n break;\r\n }\r\n }\r\n\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n };\r\n\r\n // eslint-disable-next-line @stencil-community/own-props-must-be-private -- Omdat this als TreeView instance aan Functionele Components wordt gegeven\r\n itemClick = (event: MouseEvent, ancestors: TreeViewItem[], item: TreeViewItem) => {\r\n if (!(event.target instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n const contentElement = event.target.closest(\".tree-content\");\r\n\r\n if (contentElement) {\r\n const tree = event\r\n .composedPath()\r\n .find((eventTarget) => (eventTarget instanceof HTMLElement ? eventTarget.className === \"dso-tree\" : false));\r\n if (!(contentElement instanceof HTMLParagraphElement) \|\| !(tree instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n TreeView.setFocus(tree, contentElement);\r\n this.dsoClickItem.emit({ path: [...ancestors, item], originalEvent: event });\r\n\r\n return;\r\n }\r\n\r\n if (item.open) {\r\n this.dsoCloseItem.emit([...ancestors, item]);\r\n } else {\r\n this.dsoOpenItem.emit([...ancestors, item]);\r\n }\r\n };\r\n\r\n private static setFocus(tree: HTMLElement, target: HTMLElement) {\r\n if (target) {\r\n (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[])\r\n .filter((item) => item.tabIndex === 0)\r\n .forEach((item) => (item.tabIndex = -1));\r\n\r\n target.tabIndex = 0;\r\n target.focus();\r\n }\r\n }\r\n\r\n private static moveFocus(tree: HTMLElement, el: HTMLElement, moveTo: \"first\" \| \"previous\" \| \"next\" \| \"last\"): void {\r\n const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n );\r\n\r\n let index = 0;\r\n switch (moveTo) {\r\n case \"first\":\r\n index = 0;\r\n break;\r\n case \"previous\":\r\n index = focusableItems.indexOf(el) - 1;\r\n break;\r\n case \"next\":\r\n index = focusableItems.indexOf(el) + 1;\r\n break;\r\n case \"last\":\r\n index = focusableItems.length - 1;\r\n break;\r\n }\r\n\r\n const focusableItem = focusableItems[index];\r\n if (!focusableItem) {\r\n throw new Error(\"No focusableItem found\");\r\n }\r\n\r\n TreeView.setFocus(tree, focusableItem);\r\n }\r\n\r\n private static expandItemOrFocusChild(tree: HTMLElement, target: HTMLElement): void {\r\n if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n TreeView.moveFocus(tree, target, \"next\");\r\n } else {\r\n const controlElement = target.previousElementSibling?.firstElementChild;\r\n if (controlElement instanceof HTMLElement) {\r\n controlElement.click();\r\n }\r\n }\r\n }\r\n\r\n private static collapseItemOrFocusParent(tree: HTMLElement, target: HTMLElement): void {\r\n if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n const controlElement = target.previousElementSibling?.firstElementChild;\r\n if (controlElement instanceof HTMLElement) {\r\n controlElement.click();\r\n }\r\n } else {\r\n const parentTarget = target?.parentElement?.parentElement?.previousElementSibling;\r\n if (parentTarget instanceof HTMLElement) {\r\n TreeView.setFocus(tree, parentTarget);\r\n }\r\n }\r\n }\r\n\r\n private static setFocusByFirstCharacter(\r\n tree: HTMLElement,\r\n el: HTMLElement,\r\n char: string,\r\n backwards: boolean,\r\n ): boolean {\r\n const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n );\r\n\r\n if (backwards) {\r\n focusableItems.reverse();\r\n }\r\n\r\n const current = focusableItems.indexOf(el);\r\n\r\n char = char.toLowerCase();\r\n let nextItem = focusableItems.find(\r\n (item, index) => index > current && item.textContent?.toLowerCase().startsWith(char),\r\n );\r\n if (!nextItem) {\r\n nextItem = focusableItems.find(\r\n (item, index) => index < current && item.textContent?.toLowerCase().startsWith(char),\r\n );\r\n }\r\n\r\n if (nextItem) {\r\n TreeView.setFocus(tree, nextItem);\r\n return true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n render() {\r\n return (\r\n <div\r\n id=\"tree\"\r\n class=\"dso-tree\"\r\n onKeyDown={(e) => this.keyDownListener(e)}\r\n ref={(element) => (this.tree = element)}\r\n >\r\n <ul role=\"tree\" aria-label=\"Objectenboom\">\r\n {this.collection?.map((item, index) => (\r\n <DsoTreeItem\r\n owner={this}\r\n ancestors={[]}\r\n item={item}\r\n index={index}\r\n level={1}\r\n setSize={this.collection.length}\r\n ></DsoTreeItem>\r\n ))}\r\n </ul>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-tree-view.js","mappings":"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","names":[],"sources":["src/components/tree-view/tree-item.tsx","src/components/tree-view/tree-view.scss?tag=dso-tree-view&encapsulation=shadow","src/components/tree-view/tree-view.tsx"],"sourcesContent":["import { h, FunctionalComponent, Fragment } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { TreeViewItem, TreeViewItemIcon } from \"./tree-view.interfaces\";\r\n\r\nimport { TreeView } from \"./tree-view\";\r\n\r\ninterface TreeViewItemProps {\r\n owner: TreeView;\r\n ancestors: TreeViewItem[];\r\n item: TreeViewItem;\r\n index: number;\r\n level: number;\r\n setSize: number;\r\n}\r\n\r\nexport const DsoTreeItem: FunctionalComponent<TreeViewItemProps> = ({\r\n owner,\r\n ancestors,\r\n item,\r\n index,\r\n level,\r\n setSize,\r\n}) => (\r\n <li\r\n key={item.id}\r\n class={clsx(\"tree-item\", { \"has-child\": item.hasItems, \"is-expanded\": !!item.open && !!item.items?.length })}\r\n role=\"none\"\r\n >\r\n <div class=\"tree-branch-control\">\r\n {item.hasItems ? (\r\n <div onClick={(e) => owner.itemClick(e, ancestors, item)}>\r\n <dso-icon icon={item.open ? \"minus-square\" : \"plus-square\"}></dso-icon>\r\n </div>\r\n ) : (\r\n <dso-icon></dso-icon>\r\n )}\r\n </div>\r\n <p\r\n class={clsx(\"tree-content\", { active: item.active }, { selected: item.selected })}\r\n tabindex={level === 1 && index === 0 ? 0 : -1}\r\n role=\"treeitem\"\r\n aria-expanded={item.hasItems ? \"\" + (!!item.open && !!item.items?.length) : undefined}\r\n aria-current={item.active ? \"true\" : undefined}\r\n aria-level={level}\r\n aria-setsize={setSize}\r\n aria-posinset={index + 1}\r\n aria-busy={item.loading ? \"true\" : undefined}\r\n data-item-id={item.id}\r\n onClick={(e) => owner.itemClick(e, ancestors, item)}\r\n >\r\n {item.selected && <span class=\"sr-only\">Resultaat: </span>}\r\n {item.href ? (\r\n <a href={item.href} tabindex=\"-1\">\r\n {item.label}\r\n </a>\r\n ) : (\r\n <span>{item.label}</span>\r\n )}\r\n {item.icons?.map((icon: TreeViewItemIcon) => <dso-icon icon={icon.icon} title={icon.label}></dso-icon>)}\r\n </p>\r\n {item.open && (\r\n <>\r\n {item.hasItems && !item.items && item.loading ? (\r\n <dso-progress-indicator size=\"small\" label=\"Resultaten laden: een moment geduld alstublieft.\" />\r\n ) : (\r\n <ul role=\"group\">\r\n {item.items?.map((childItem: TreeViewItem, childIndex: number, org: TreeViewItem[]) => (\r\n <DsoTreeItem\r\n owner={owner}\r\n ancestors={[...ancestors, item]}\r\n item={childItem}\r\n index={childIndex}\r\n level={level + 1}\r\n setSize={org.length}\r\n ></DsoTreeItem>\r\n ))}\r\n </ul>\r\n )}\r\n </>\r\n )}\r\n </li>\r\n);\r\n","@use \"sass:math\";\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n\r\n@use \"tree-view.mixins\" as core-tree-view-mixins;\r\n@use \"tree-view.variables\" as core-tree-view-variables;\r\n\r\n:host {\r\n ul {\r\n list-style-type: none;\r\n padding-inline-start: core-tree-view-variables.$indent;\r\n position: relative;\r\n }\r\n\r\n li {\r\n position: relative;\r\n }\r\n\r\n ul[role=\"tree\"] {\r\n padding-inline-start: 0;\r\n }\r\n\r\n // connects branch or leaf to parent\r\n ul[role=\"group\"]::before {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$indent + core-tree-view-variables.$hcenter,\r\n 0,\r\n core-tree-view-variables.$vspace\r\n );\r\n }\r\n\r\n li:not(.has-child) {\r\n // horizontal connector for a leaf\r\n &::before {\r\n @include core-tree-view-mixins.horizontal-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vcenter,\r\n core-tree-view-variables.$hspace + 0.5 * core-tree-view-variables.$icon-size - 4px\r\n );\r\n }\r\n\r\n // vertical connector for a leaf\r\n &::after {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vspace,\r\n 100%\r\n );\r\n }\r\n\r\n // vertical connector for the last leaf\r\n &:last-child::after {\r\n block-size: core-tree-view-variables.$vcenter;\r\n inset-block-start: 0;\r\n }\r\n }\r\n\r\n li.has-child {\r\n // horizontal connector for a branch\r\n &::before {\r\n @include core-tree-view-mixins.horizontal-line(\r\n core-tree-view-variables.$icon-size,\r\n core-tree-view-variables.$vcenter,\r\n core-tree-view-variables.$hspace - 4px\r\n );\r\n }\r\n\r\n // vertical connector for a branch (not last)\r\n &:not(:last-child)::after {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n calc(100% - core-tree-view-variables.$icon-size)\r\n );\r\n }\r\n\r\n // vertical line after a expanded branch (creating dead ends)\r\n &.is-expanded:last-child::after {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n calc(100% - (core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size))\r\n );\r\n }\r\n }\r\n\r\n .tree-branch-control {\r\n color: colors.$grasgroen;\r\n display: inline-block;\r\n font-size: math.div(2 * core-tree-view-variables.$icon-size, 3);\r\n margin-block: core-tree-view-variables.$vspace;\r\n margin-inline: 0 core-tree-view-variables.$hspace;\r\n vertical-align: top;\r\n\r\n > div {\r\n cursor: pointer;\r\n }\r\n }\r\n\r\n .tree-content {\r\n cursor: pointer;\r\n display: inline-block;\r\n margin-block: core-tree-view-variables.$vspace;\r\n margin-inline: 0;\r\n max-inline-size: calc(100% - (core-tree-view-variables.$indent + core-tree-view-variables.$hspace));\r\n\r\n a {\r\n color: scaffolding.$text-color;\r\n text-decoration: underline;\r\n\r\n &:hover,\r\n &:focus {\r\n color: scaffolding.$text-color;\r\n text-decoration: none;\r\n }\r\n\r\n &:active {\r\n text-decoration: none;\r\n }\r\n }\r\n\r\n &.selected {\r\n color: scaffolding.$text-color;\r\n font-weight: 700;\r\n text-decoration: underline;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n }\r\n }\r\n\r\n &.active {\r\n color: colors.$mauve;\r\n font-style: italic;\r\n font-weight: 700;\r\n\r\n text-decoration: underline;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n }\r\n\r\n a {\r\n color: colors.$mauve;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n }\r\n }\r\n }\r\n\r\n dso-icon {\r\n color: colors.$grasgroen;\r\n font-size: 0.75em;\r\n margin-inline-start: 0.5em;\r\n vertical-align: text-bottom;\r\n }\r\n }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { h, Component, ComponentInterface, Event, EventEmitter, Prop, Method } from \"@stencil/core\";\r\n\r\nimport { TreeViewPointerEvent, TreeViewItem } from \"./tree-view.interfaces\";\r\nimport { DsoTreeItem } from \"./tree-item\";\r\n\r\n@Component({\r\n tag: \"dso-tree-view\",\r\n styleUrl: \"./tree-view.scss\",\r\n shadow: true,\r\n})\r\nexport class TreeView implements ComponentInterface {\r\n private tree?: HTMLElement;\r\n\r\n /*\r\n The collection of TreeViewItems\r\n /\r\n @Prop()\r\n collection!: TreeViewItem[];\r\n\r\n /\r\n Emitted when a tree view item is opened.\r\n * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n * root to the item that is emitting the open event. The consumer of the event is responsible for updating\r\n * the TreeView's collection (usually set the open state on the last TreeViewItem in path).\r\n /\r\n @Event()\r\n dsoOpenItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n /\r\n Emitted when a tree view item is closed.\r\n * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n * root to the item that is emitting the close event. The consumer of the event is responsible for updating\r\n * the TreeView's collection (usually set the closed state on the last TreeViewItem in path).\r\n /\r\n @Event()\r\n dsoCloseItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n /\r\n Emitted when a tree view item is clicked.\r\n * The `detail` property of the `CustomEvent` will contain an object with:\r\n * `path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event.\r\n * `originalEvent` = the original click event.\r\n * The consumer of the event is responsible for updating the TreeView's collection (usually set the active\r\n * state on the last TreeViewItem in path and clear all other active item states).\r\n /\r\n @Event()\r\n dsoClickItem!: EventEmitter<TreeViewPointerEvent>;\r\n\r\n /\r\n Set focus on the last item in the specified path.\r\n * The consumer is responsible for providing a TreeView collection where the last item is visible.\r\n * @async\r\n * @returns Whether the item was found.\r\n */\r\n @Method()\r\n async focusItem(path: TreeViewItem[]): Promise<boolean> {\r\n const tree = this.tree;\r\n\r\n if (!tree \|\| path.length === 0) {\r\n return false;\r\n }\r\n\r\n const itemToFocus = path[path.length - 1];\r\n if (!itemToFocus) {\r\n throw new Error(\"No itemToFocus found\");\r\n }\r\n\r\n const elementToFocus = (Array.from(tree.querySelectorAll(\"p\") ?? []) as HTMLElement[])\r\n .filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0)\r\n .find((item) => item.dataset[\"itemId\"] === itemToFocus.id);\r\n\r\n if (!elementToFocus) {\r\n return false;\r\n }\r\n\r\n TreeView.setFocus(tree, elementToFocus);\r\n\r\n return true;\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.defaultPrevented) {\r\n return;\r\n }\r\n\r\n const isIndexLetter = (str: string) => str.length === 1 && str.match(/\\S/);\r\n\r\n const tree = event\r\n .composedPath()\r\n .find((item) => (item instanceof HTMLElement ? item.className === \"dso-tree\" : false));\r\n\r\n if (!(event.target instanceof HTMLParagraphElement) \|\| !(tree instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"ArrowDown\":\r\n TreeView.moveFocus(tree, event.target, \"next\");\r\n break;\r\n case \"ArrowUp\":\r\n TreeView.moveFocus(tree, event.target, \"previous\");\r\n break;\r\n case \"ArrowRight\":\r\n TreeView.expandItemOrFocusChild(tree, event.target);\r\n break;\r\n case \"ArrowLeft\":\r\n TreeView.collapseItemOrFocusParent(tree, event.target);\r\n break;\r\n case \"End\":\r\n TreeView.moveFocus(tree, event.target, \"last\");\r\n break;\r\n case \"Home\":\r\n TreeView.moveFocus(tree, event.target, \"first\");\r\n break;\r\n case \"Enter\":\r\n case \" \":\r\n event.target.click();\r\n break;\r\n default:\r\n if (isIndexLetter(event.key)) {\r\n if (TreeView.setFocusByFirstCharacter(tree, event.target, event.key, event.shiftKey)) {\r\n break;\r\n }\r\n }\r\n\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n };\r\n\r\n // eslint-disable-next-line @stencil-community/own-props-must-be-private -- Omdat this als TreeView instance aan Functionele Components wordt gegeven\r\n itemClick = (event: MouseEvent, ancestors: TreeViewItem[], item: TreeViewItem) => {\r\n if (!(event.target instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n const contentElement = event.target.closest(\".tree-content\");\r\n\r\n if (contentElement) {\r\n const tree = event\r\n .composedPath()\r\n .find((eventTarget) => (eventTarget instanceof HTMLElement ? eventTarget.className === \"dso-tree\" : false));\r\n if (!(contentElement instanceof HTMLParagraphElement) \|\| !(tree instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n TreeView.setFocus(tree, contentElement);\r\n this.dsoClickItem.emit({ path: [...ancestors, item], originalEvent: event });\r\n\r\n return;\r\n }\r\n\r\n if (item.open) {\r\n this.dsoCloseItem.emit([...ancestors, item]);\r\n } else {\r\n this.dsoOpenItem.emit([...ancestors, item]);\r\n }\r\n };\r\n\r\n private static setFocus(tree: HTMLElement, target: HTMLElement) {\r\n if (target) {\r\n (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[])\r\n .filter((item) => item.tabIndex === 0)\r\n .forEach((item) => (item.tabIndex = -1));\r\n\r\n target.tabIndex = 0;\r\n target.focus();\r\n }\r\n }\r\n\r\n private static moveFocus(tree: HTMLElement, el: HTMLElement, moveTo: \"first\" \| \"previous\" \| \"next\" \| \"last\"): void {\r\n const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n );\r\n\r\n let index = 0;\r\n switch (moveTo) {\r\n case \"first\":\r\n index = 0;\r\n break;\r\n case \"previous\":\r\n index = focusableItems.indexOf(el) - 1;\r\n break;\r\n case \"next\":\r\n index = focusableItems.indexOf(el) + 1;\r\n break;\r\n case \"last\":\r\n index = focusableItems.length - 1;\r\n break;\r\n }\r\n\r\n const focusableItem = focusableItems[index];\r\n if (!focusableItem) {\r\n throw new Error(\"No focusableItem found\");\r\n }\r\n\r\n TreeView.setFocus(tree, focusableItem);\r\n }\r\n\r\n private static expandItemOrFocusChild(tree: HTMLElement, target: HTMLElement): void {\r\n if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n TreeView.moveFocus(tree, target, \"next\");\r\n } else {\r\n const controlElement = target.previousElementSibling?.firstElementChild;\r\n if (controlElement instanceof HTMLElement) {\r\n controlElement.click();\r\n }\r\n }\r\n }\r\n\r\n private static collapseItemOrFocusParent(tree: HTMLElement, target: HTMLElement): void {\r\n if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n const controlElement = target.previousElementSibling?.firstElementChild;\r\n if (controlElement instanceof HTMLElement) {\r\n controlElement.click();\r\n }\r\n } else {\r\n const parentTarget = target?.parentElement?.parentElement?.previousElementSibling;\r\n if (parentTarget instanceof HTMLElement) {\r\n TreeView.setFocus(tree, parentTarget);\r\n }\r\n }\r\n }\r\n\r\n private static setFocusByFirstCharacter(\r\n tree: HTMLElement,\r\n el: HTMLElement,\r\n char: string,\r\n backwards: boolean,\r\n ): boolean {\r\n const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n );\r\n\r\n if (backwards) {\r\n focusableItems.reverse();\r\n }\r\n\r\n const current = focusableItems.indexOf(el);\r\n\r\n char = char.toLowerCase();\r\n let nextItem = focusableItems.find(\r\n (item, index) => index > current && item.textContent?.toLowerCase().startsWith(char),\r\n );\r\n if (!nextItem) {\r\n nextItem = focusableItems.find(\r\n (item, index) => index < current && item.textContent?.toLowerCase().startsWith(char),\r\n );\r\n }\r\n\r\n if (nextItem) {\r\n TreeView.setFocus(tree, nextItem);\r\n return true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n render() {\r\n return (\r\n <div\r\n id=\"tree\"\r\n class=\"dso-tree\"\r\n onKeyDown={(e) => this.keyDownListener(e)}\r\n ref={(element) => (this.tree = element)}\r\n >\r\n <ul role=\"tree\" aria-label=\"Objectenboom\">\r\n {this.collection?.map((item, index) => (\r\n <DsoTreeItem\r\n owner={this}\r\n ancestors={[]}\r\n item={item}\r\n index={index}\r\n level={1}\r\n setSize={this.collection.length}\r\n ></DsoTreeItem>\r\n ))}\r\n </ul>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}