npm - @dso-toolkit/core - Versions diffs - 73.0.1 → 73.2.0 - Mend

@dso-toolkit/core 73.0.1 → 73.2.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 (821) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"list-button.js","sourceRoot":"","sources":["../../../../src/components/list-button/list-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Fragment,\r\n h,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoListButtonElement;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private get subcontentSlot() {\r\n return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n }\r\n\r\n /*\r\n The label of the List Button.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The sublabel of the List Button.\r\n /\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /\r\n When defined the count can show on the List Button.\r\n /\r\n @Prop()\r\n count?: number;\r\n\r\n /\r\n The minimum value.\r\n /\r\n @Prop()\r\n min?: string \| number;\r\n\r\n /\r\n The maximum value.\r\n /\r\n @Prop()\r\n max?: string \| number;\r\n\r\n /\r\n Whether the List Button is checked.\r\n /\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /\r\n Whether the List Button is disabled.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Prefix to subcontent for the purpose of screenreading.\r\n /\r\n @Prop()\r\n subcontentPrefix?: string;\r\n\r\n /\r\n Emitted when the user changes the count.\r\n /\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /\r\n Emitted when the user activates the List Button itself.\r\n \r\n Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n connectedCallback() {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n }\r\n\r\n componentDidRender(): void {\r\n if (!this.subcontentSlot?.hasAttribute(\"aria-hidden\")) {\r\n this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n delete this.mutationObserver;\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" \| \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (!this.isNewCountValid(newValue)) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n return !(\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) \|\| newValue > Number(this.max))\r\n );\r\n }\r\n\r\n render() {\r\n const selected = this.checked \|\| (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n aria-describedby={\r\n [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") \|\| null\r\n }\r\n checked={selected}\r\n disabled={this.disabled}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n {this.subcontentSlot && (\r\n <div class=\"sr-only\" id=\"description\">\r\n {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n </div>\r\n )}\r\n </div>\r\n {this.sublabel && (\r\n <span class=\"dso-sublabel\" id=\"sublabel\">\r\n {this.sublabel}\r\n </span>\r\n )}\r\n {this.subcontentSlot && (\r\n <div class=\"subcontent\">\r\n <slot name=\"subcontent\" />\r\n </div>\r\n )}\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.count > 1 && (\r\n <>\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.min) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"decrement\")}\r\n >\r\n <dso-icon icon=\"minus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verlagen</span>\r\n </button>\r\n <span class=\"dso-input-step-counter\" aria-label=\"Aantal\" aria-live=\"polite\">\r\n {this.count}\r\n </span>\r\n </>\r\n )}\r\n\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.max) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"increment\")}\r\n >\r\n <dso-icon icon=\"plus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verhogen</span>\r\n </button>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"list-button.js","sourceRoot":"","sources":["../../../../src/components/list-button/list-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Prop,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoListButtonElement;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private get subcontentSlot() {\r\n return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n }\r\n\r\n /*\r\n The label of the List Button.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The sublabel of the List Button.\r\n /\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /\r\n When defined the count can show on the List Button.\r\n /\r\n @Prop()\r\n count?: number;\r\n\r\n /\r\n The minimum value.\r\n /\r\n @Prop()\r\n min?: string \| number;\r\n\r\n /\r\n The maximum value.\r\n /\r\n @Prop()\r\n max?: string \| number;\r\n\r\n /\r\n Whether the List Button is checked.\r\n /\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /\r\n Whether the List Button is disabled.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Prefix to subcontent for the purpose of screenreading.\r\n /\r\n @Prop()\r\n subcontentPrefix?: string;\r\n\r\n /\r\n Emitted when the user changes the count.\r\n /\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /\r\n Emitted when the user activates the List Button itself.\r\n \r\n Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n connectedCallback() {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n }\r\n\r\n componentDidRender(): void {\r\n if (!this.subcontentSlot?.hasAttribute(\"aria-hidden\")) {\r\n this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n delete this.mutationObserver;\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" \| \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (!this.isNewCountValid(newValue)) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n return !(\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) \|\| newValue > Number(this.max))\r\n );\r\n }\r\n\r\n render() {\r\n const selected = this.checked \|\| (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n aria-describedby={\r\n [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") \|\| null\r\n }\r\n checked={selected}\r\n disabled={this.disabled}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n {this.subcontentSlot && (\r\n <div class=\"sr-only\" id=\"description\">\r\n {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n </div>\r\n )}\r\n </div>\r\n {this.sublabel && (\r\n <span class=\"dso-sublabel\" id=\"sublabel\">\r\n {this.sublabel}\r\n </span>\r\n )}\r\n {this.subcontentSlot && (\r\n <div class=\"subcontent\">\r\n <slot name=\"subcontent\" />\r\n </div>\r\n )}\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.count > 1 && (\r\n <>\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.min) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"decrement\")}\r\n >\r\n <dso-icon icon=\"minus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verlagen</span>\r\n </button>\r\n <span class=\"dso-input-step-counter\" aria-label=\"Aantal\" aria-live=\"polite\">\r\n {this.count}\r\n </span>\r\n </>\r\n )}\r\n\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.max) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"increment\")}\r\n >\r\n <dso-icon icon=\"plus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verhogen</span>\r\n </button>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -23,7 +23,7 @@ export class Logo {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, { name: this.name }))) : (h(DsoLogo, { name: this.name })), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '7979dd6758ffbeeb8b0f98b193d57b6f943d3cf1', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '54ea3fca79e32f2b8787bfd5e0e0d0b2176975ee', class: "logo-ribbon" }, this.ribbon)));
     }
     static get is() { return "dso-logo"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"logo.js","sourceRoot":"","sources":["../../../../src/components/logo/logo.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,QAAQ,~~EACR~~,IAAI,EACJ,CAAC,~~EACD~~,~~KAAK,GAGN,~~MAAM,eAAe,CAAC;~~AACvB~~,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;~~AAGhE~~,MAAM,OAAO,GAA0C,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACrC,OAAO,CACL;QACE,WAAK,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,aAAa;YACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,4CAA4C,GAAG;YACrE,YAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,0CAA0C,GAAG;YACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,uCAAuC,GAAG,CAC5D;QACN,WAAK,KAAK,EAAC,eAAe;YACxB,YAAM,KAAK,EAAC,yBAAyB,IAAE,YAAY,CAAC,CAAC,CAAC,CAAQ;YAC7D,YAAY,CAAC,MAAM,KAAK,CAAC,IAAI,YAAM,KAAK,EAAC,qBAAqB,IAAE,YAAY,CAAC,CAAC,CAAC,CAAQ,CACpF,CACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,OAAO,IAAI;IALjB;QAME;;;;;;WAMG;QAEH,SAAI,GAAG,iBAAiB,CAAC;QAuCjB,oBAAe,GAAG,CAAC,CAAa,EAAE,EAAE;YAC1C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,OAAQ,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACxG,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,CAAa,EAAE,EAAE;YAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,QAAS,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC1G,CAAC,CAAC;KAyBH;IAvBC,MAAM;QACJ,OAAO,CACL;YACG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,SAAG,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe;gBACnE,EAAC,OAAO,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAC1B,CACL,CAAC,CAAC,CAAC,CACF,EAAC,OAAO,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAC7B;YAEA,IAAI,CAAC,KAAK;gBACT,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChB,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC7C,CAAC,CAAC,CAAC,CACF,SAAG,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB;oBAC3E,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1C,CACL,CAAC;YACH,IAAI,CAAC,MAAM,IAAI,4DAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,MAAM,CAAO,CAC3D,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\r\n Component,\r\n ComponentInterface,\r\n ~~Fragment~~,\r\n ~~Prop~~,\r\n h,\r\n ~~Event~~,\r\n ~~EventEmitter~~,\r\n ~~FunctionalComponent~~,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { LogoClickEvent, LogoLabelClickEvent } from \"./logo.interfaces\";\r\n\r\nconst DsoLogo: FunctionalComponent<{ name: string }> = ({ name }) => {\r\n const splittedName = name.split(\"\|\");\r\n return (\r\n <>\r\n <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n </svg>\r\n <div class=\"logo-wordmark\">\r\n <span class=\"logo-wordmark-omgevings\">{splittedName[0]}</span>\r\n {splittedName.length === 2 && <span class=\"logo-wordmark-loket\">{splittedName[1]}</span>}\r\n </div>\r\n </>\r\n );\r\n};\r\n\r\n@Component({\r\n tag: \"dso-logo\",\r\n styleUrl: \"logo.scss\",\r\n shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n /*\r\n An alternative name for the logo wordmark Omgevingsloket. For instance `Environment\| Desk`. It should contains a\r\n * pipe-character: the left-hand side of the pipe will be shown in grasgroen, the right-hand side of the pipe will be\r\n * shown in bosgroen.\r\n * When omitted the logo wordmark will default to Omgevingsloket, with 'Omgevings' shown in grasgroen and 'loket' in\r\n * bosgroen.\r\n /\r\n @Prop({ reflect: true })\r\n name = \"Omgevings\|loket\";\r\n /\r\n The url the logo is pointing to.\r\n /\r\n @Prop({ reflect: true })\r\n logoUrl?: string;\r\n\r\n /\r\n The label clarifies the service within the Omgevingsloket, shown\r\n * as a subtitle (and on smaller screens as the main wordmark itself).\r\n /\r\n @Prop({ reflect: true })\r\n label?: string;\r\n\r\n /\r\n The url the label is pointing to.\r\n /\r\n @Prop({ reflect: true })\r\n labelUrl?: string;\r\n\r\n /\r\n The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n * Used to clarify the (non-production) server environment (\"int\", \"kta\", \"pfm\", \"pre\", or \"dmo\")\r\n /\r\n @Prop({ reflect: true })\r\n ribbon?: string;\r\n\r\n /\r\n Emitted when the logo is clicked (only when logoUrl is set).\r\n /\r\n @Event()\r\n dsoLogoClick!: EventEmitter<LogoClickEvent>;\r\n\r\n /\r\n Emitted when the label in the logo is clicked (only when labelUrl is set).\r\n */\r\n @Event()\r\n dsoLabelClick!: EventEmitter<LogoLabelClickEvent>;\r\n\r\n private handleLogoClick = (e: MouseEvent) => {\r\n this.dsoLogoClick.emit({ originalEvent: e, url: this.logoUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n };\r\n\r\n private handleLabelClick = (e: MouseEvent) => {\r\n this.dsoLabelClick.emit({ originalEvent: e, url: this.labelUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n {this.logoUrl ? (\r\n <a class=\"logo-url\" href={this.logoUrl} onClick={this.handleLogoClick}>\r\n <DsoLogo name={this.name} />\r\n </a>\r\n ) : (\r\n <DsoLogo name={this.name} />\r\n )}\r\n\r\n {this.label &&\r\n (!this.labelUrl ? (\r\n <span class=\"logo-label\">{this.label}</span>\r\n ) : (\r\n <a class=\"logo-label-url\" href={this.labelUrl} onClick={this.handleLabelClick}>\r\n <span class=\"logo-label\">{this.label}</span>\r\n </a>\r\n ))}\r\n {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n </>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"logo.js","sourceRoot":"","sources":["../../../../src/components/logo/logo.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,KAAK,EAEL,QAAQ,EAER,IAAI,EACJ,CAAC,GACF,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAIhE,MAAM,OAAO,GAA0C,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACrC,OAAO,CACL;QACE,WAAK,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,aAAa;YACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,4CAA4C,GAAG;YACrE,YAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,0CAA0C,GAAG;YACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,uCAAuC,GAAG,CAC5D;QACN,WAAK,KAAK,EAAC,eAAe;YACxB,YAAM,KAAK,EAAC,yBAAyB,IAAE,YAAY,CAAC,CAAC,CAAC,CAAQ;YAC7D,YAAY,CAAC,MAAM,KAAK,CAAC,IAAI,YAAM,KAAK,EAAC,qBAAqB,IAAE,YAAY,CAAC,CAAC,CAAC,CAAQ,CACpF,CACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,OAAO,IAAI;IALjB;QAME;;;;;;WAMG;QAEH,SAAI,GAAG,iBAAiB,CAAC;QAuCjB,oBAAe,GAAG,CAAC,CAAa,EAAE,EAAE;YAC1C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,OAAQ,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACxG,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,CAAa,EAAE,EAAE;YAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,QAAS,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC1G,CAAC,CAAC;KAyBH;IAvBC,MAAM;QACJ,OAAO,CACL;YACG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,SAAG,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe;gBACnE,EAAC,OAAO,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAC1B,CACL,CAAC,CAAC,CAAC,CACF,EAAC,OAAO,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAC7B;YAEA,IAAI,CAAC,KAAK;gBACT,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChB,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC7C,CAAC,CAAC,CAAC,CACF,SAAG,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB;oBAC3E,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1C,CACL,CAAC;YACH,IAAI,CAAC,MAAM,IAAI,4DAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,MAAM,CAAO,CAC3D,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\r\n Component,\r\n ComponentInterface,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n FunctionalComponent,\r\n Prop,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { LogoClickEvent, LogoLabelClickEvent } from \"./logo.interfaces\";\r\n\r\nconst DsoLogo: FunctionalComponent<{ name: string }> = ({ name }) => {\r\n const splittedName = name.split(\"\|\");\r\n return (\r\n <>\r\n <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n </svg>\r\n <div class=\"logo-wordmark\">\r\n <span class=\"logo-wordmark-omgevings\">{splittedName[0]}</span>\r\n {splittedName.length === 2 && <span class=\"logo-wordmark-loket\">{splittedName[1]}</span>}\r\n </div>\r\n </>\r\n );\r\n};\r\n\r\n@Component({\r\n tag: \"dso-logo\",\r\n styleUrl: \"logo.scss\",\r\n shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n /*\r\n An alternative name for the logo wordmark Omgevingsloket. For instance `Environment\| Desk`. It should contains a\r\n * pipe-character: the left-hand side of the pipe will be shown in grasgroen, the right-hand side of the pipe will be\r\n * shown in bosgroen.\r\n * When omitted the logo wordmark will default to Omgevingsloket, with 'Omgevings' shown in grasgroen and 'loket' in\r\n * bosgroen.\r\n /\r\n @Prop({ reflect: true })\r\n name = \"Omgevings\|loket\";\r\n /\r\n The url the logo is pointing to.\r\n /\r\n @Prop({ reflect: true })\r\n logoUrl?: string;\r\n\r\n /\r\n The label clarifies the service within the Omgevingsloket, shown\r\n * as a subtitle (and on smaller screens as the main wordmark itself).\r\n /\r\n @Prop({ reflect: true })\r\n label?: string;\r\n\r\n /\r\n The url the label is pointing to.\r\n /\r\n @Prop({ reflect: true })\r\n labelUrl?: string;\r\n\r\n /\r\n The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n * Used to clarify the (non-production) server environment (\"int\", \"kta\", \"pfm\", \"pre\", or \"dmo\")\r\n /\r\n @Prop({ reflect: true })\r\n ribbon?: string;\r\n\r\n /\r\n Emitted when the logo is clicked (only when logoUrl is set).\r\n /\r\n @Event()\r\n dsoLogoClick!: EventEmitter<LogoClickEvent>;\r\n\r\n /\r\n Emitted when the label in the logo is clicked (only when labelUrl is set).\r\n */\r\n @Event()\r\n dsoLabelClick!: EventEmitter<LogoLabelClickEvent>;\r\n\r\n private handleLogoClick = (e: MouseEvent) => {\r\n this.dsoLogoClick.emit({ originalEvent: e, url: this.logoUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n };\r\n\r\n private handleLabelClick = (e: MouseEvent) => {\r\n this.dsoLabelClick.emit({ originalEvent: e, url: this.labelUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n {this.logoUrl ? (\r\n <a class=\"logo-url\" href={this.logoUrl} onClick={this.handleLogoClick}>\r\n <DsoLogo name={this.name} />\r\n </a>\r\n ) : (\r\n <DsoLogo name={this.name} />\r\n )}\r\n\r\n {this.label &&\r\n (!this.labelUrl ? (\r\n <span class=\"logo-label\">{this.label}</span>\r\n ) : (\r\n <a class=\"logo-label-url\" href={this.labelUrl} onClick={this.handleLabelClick}>\r\n <span class=\"logo-label\">{this.label}</span>\r\n </a>\r\n ))}\r\n {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n </>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -27,7 +27,7 @@ export class MapBaseLayers {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'acd8cb9bd22f5021d89e656292650098afb58d3c', class: "form-group dso-radios" }, h("legend", { key: '3f6c5f5297323a9d0d1c5195df12b5e162ae3991', class: "sr-only" }, "Achtergrond"), h("div", { key: 'eea63f4a56b1d01fffaab78202718d667533948f', class: "dso-label-container" }, h("span", { key: 'c8aba96d494bea90da43c86c4cc28f0f2ae9f737', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'e6b5b3718321632fe2b9f794dec1dd74b2876620', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: '85f4a5b0520f18664c2c01c0a5b8907abd7ce07c', class: "form-group dso-radios" }, h("legend", { key: 'd53cbcc42cd945d8c9769298c4250d541ee55763', class: "sr-only" }, "Achtergrond"), h("div", { key: '59a456cab1c6786585399b4db7717d884025d9df', class: "dso-label-container" }, h("span", { key: 'a45a10ca3a86ad419488650205cedf1052060d59', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '011987a3dc616822b734f09e68b18f46b7310e2f', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     static get is() { return "dso-map-base-layers"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"map-base-layers.js","sourceRoot":"","sources":["../../../../src/components/map-base-layers/map-base-layers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,~~CAAC~~,EAAE,~~IAAI~~,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;~~AAGxC~~,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;~~AAOtD~~,MAAM,OAAO,aAAa;IAL1B;QAOU,mBAAc,GAA+C,EAAE,CAAC;QAWxE;;WAEG;QAEH,UAAK,GAAG,MAAM,EAAE,CAAC;QAYT,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;KA6CpD;IAjDS,sBAAsB,CAAC,SAAoB;QACjD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,CAAC;IAC/D,CAAC;IAID,kBAAkB;QAChB,IAAI,CAAC,UAAU;aACZ,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,eAAC,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,kBAAkB,0CAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;aACpG,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;;YACb,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;QAEL,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAAC;IAC5C,CAAC;IAED,MAAM;QACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,CACL,iEAAU,KAAK,EAAC,uBAAuB;YACrC,+DAAQ,KAAK,EAAC,SAAS,kBAAqB;YAC5C,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,6DAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,IAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CACnB,CACH;YACN,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAClC,sBACE,GAAG,EAAE,SAAS,CAAC,EAAE,EACjB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,SAAS,CAAC,IAAI,EACrB,OAAO,EAAE,SAAS,CAAC,OAAO,EAC1B,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC9D,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC;gBAExD,SAAS,CAAC,IAAI;gBACd,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,SAAG,IAAI,EAAC,MAAM,IAAE,SAAS,CAAC,IAAI,CAAK,CAAC,CAAC,CAAC,IAAI,CAC7C,CAClB,CAAC,CACE,CACG,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, h, ~~Prop~~ } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { ~~BaseLayer,~~ ~~BaseLayerChangeEvent~~ } from \"./map-base-layers.~~interfaces~~\";\r\nimport { ~~translations~~ } from \"./map-base-layers.~~i18n~~\";\r\n\r\n@Component({\r\n tag: \"dso-map-base-layers\",\r\n styleUrl: \"./map-base-layers.scss\",\r\n shadow: true,\r\n})\r\nexport class MapBaseLayers implements ComponentInterface {\r\n private previousBaselayers: BaseLayer[] \| undefined;\r\n private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n @Element()\r\n host!: HTMLDsoMapBaseLayersElement;\r\n\r\n /*\r\n Emitted when the user checks or unchecks a base layer.\r\n /\r\n @Event()\r\n dsoBaseLayerChange!: EventEmitter<BaseLayerChangeEvent>;\r\n\r\n /\r\n To group the overlays together. Generally the default value suffices.\r\n /\r\n @Prop()\r\n group = uuidv4();\r\n\r\n /\r\n The base layers.\r\n */\r\n @Prop()\r\n baseLayers!: BaseLayer[];\r\n\r\n private baseLayerChangeHandler(baseLayer: BaseLayer): void {\r\n this.dsoBaseLayerChange.emit({ activeBaseLayer: baseLayer });\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n componentDidRender() {\r\n this.baseLayers\r\n .filter((l) => !l.disabled && this.previousBaselayers?.find((p) => p.id === l.id)?.disabled === true)\r\n .forEach((o) => {\r\n this.selectableRefs[o.id]?.toggleInfo(false);\r\n });\r\n\r\n this.previousBaselayers = this.baseLayers;\r\n }\r\n\r\n render() {\r\n for (const ref in this.selectableRefs) {\r\n delete this.selectableRefs[ref];\r\n }\r\n\r\n return (\r\n <fieldset class=\"form-group dso-radios\">\r\n <legend class=\"sr-only\">Achtergrond</legend>\r\n <div class=\"dso-label-container\">\r\n <span class=\"control-label\" aria-hidden=\"true\">\r\n {this.text(\"background\")}\r\n </span>\r\n </div>\r\n <div class=\"dso-field-container\">\r\n {this.baseLayers.map((baseLayer) => (\r\n <dso-selectable\r\n key={baseLayer.id}\r\n type=\"radio\"\r\n value={baseLayer.name}\r\n checked={baseLayer.checked}\r\n disabled={baseLayer.disabled}\r\n name={this.group}\r\n ref={(ref) => ref && (this.selectableRefs[baseLayer.id] = ref)}\r\n onDsoChange={() => this.baseLayerChangeHandler(baseLayer)}\r\n >\r\n {baseLayer.name}\r\n {baseLayer.info ? <p slot=\"info\">{baseLayer.info}</p> : null}\r\n </dso-selectable>\r\n ))}\r\n </div>\r\n </fieldset>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"map-base-layers.js","sourceRoot":"","sources":["../../../../src/components/map-base-layers/map-base-layers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAQtD,MAAM,OAAO,aAAa;IAL1B;QAOU,mBAAc,GAA+C,EAAE,CAAC;QAWxE;;WAEG;QAEH,UAAK,GAAG,MAAM,EAAE,CAAC;QAYT,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;KA6CpD;IAjDS,sBAAsB,CAAC,SAAoB;QACjD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,CAAC;IAC/D,CAAC;IAID,kBAAkB;QAChB,IAAI,CAAC,UAAU;aACZ,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,eAAC,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,kBAAkB,0CAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;aACpG,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;;YACb,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;QAEL,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAAC;IAC5C,CAAC;IAED,MAAM;QACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,CACL,iEAAU,KAAK,EAAC,uBAAuB;YACrC,+DAAQ,KAAK,EAAC,SAAS,kBAAqB;YAC5C,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,6DAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,IAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CACnB,CACH;YACN,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAClC,sBACE,GAAG,EAAE,SAAS,CAAC,EAAE,EACjB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,SAAS,CAAC,IAAI,EACrB,OAAO,EAAE,SAAS,CAAC,OAAO,EAC1B,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC9D,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC;gBAExD,SAAS,CAAC,IAAI;gBACd,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,SAAG,IAAI,EAAC,MAAM,IAAE,SAAS,CAAC,IAAI,CAAK,CAAC,CAAC,CAAC,IAAI,CAC7C,CAClB,CAAC,CACE,CACG,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./map-base-layers.i18n\";\r\nimport { BaseLayer, BaseLayerChangeEvent } from \"./map-base-layers.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-map-base-layers\",\r\n styleUrl: \"./map-base-layers.scss\",\r\n shadow: true,\r\n})\r\nexport class MapBaseLayers implements ComponentInterface {\r\n private previousBaselayers: BaseLayer[] \| undefined;\r\n private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n @Element()\r\n host!: HTMLDsoMapBaseLayersElement;\r\n\r\n /*\r\n Emitted when the user checks or unchecks a base layer.\r\n /\r\n @Event()\r\n dsoBaseLayerChange!: EventEmitter<BaseLayerChangeEvent>;\r\n\r\n /\r\n To group the overlays together. Generally the default value suffices.\r\n /\r\n @Prop()\r\n group = uuidv4();\r\n\r\n /\r\n The base layers.\r\n */\r\n @Prop()\r\n baseLayers!: BaseLayer[];\r\n\r\n private baseLayerChangeHandler(baseLayer: BaseLayer): void {\r\n this.dsoBaseLayerChange.emit({ activeBaseLayer: baseLayer });\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n componentDidRender() {\r\n this.baseLayers\r\n .filter((l) => !l.disabled && this.previousBaselayers?.find((p) => p.id === l.id)?.disabled === true)\r\n .forEach((o) => {\r\n this.selectableRefs[o.id]?.toggleInfo(false);\r\n });\r\n\r\n this.previousBaselayers = this.baseLayers;\r\n }\r\n\r\n render() {\r\n for (const ref in this.selectableRefs) {\r\n delete this.selectableRefs[ref];\r\n }\r\n\r\n return (\r\n <fieldset class=\"form-group dso-radios\">\r\n <legend class=\"sr-only\">Achtergrond</legend>\r\n <div class=\"dso-label-container\">\r\n <span class=\"control-label\" aria-hidden=\"true\">\r\n {this.text(\"background\")}\r\n </span>\r\n </div>\r\n <div class=\"dso-field-container\">\r\n {this.baseLayers.map((baseLayer) => (\r\n <dso-selectable\r\n key={baseLayer.id}\r\n type=\"radio\"\r\n value={baseLayer.name}\r\n checked={baseLayer.checked}\r\n disabled={baseLayer.disabled}\r\n name={this.group}\r\n ref={(ref) => ref && (this.selectableRefs[baseLayer.id] = ref)}\r\n onDsoChange={() => this.baseLayerChangeHandler(baseLayer)}\r\n >\r\n {baseLayer.name}\r\n {baseLayer.info ? <p slot=\"info\">{baseLayer.info}</p> : null}\r\n </dso-selectable>\r\n ))}\r\n </div>\r\n </fieldset>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/map-controls/map-controls.css CHANGED Viewed

@@ -469,7 +469,14 @@ header h2 {
     margin-inline-end: 0;
   }
   .toggle-visibility-button span {
-    visibility: hidden;
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
   }
   .zoom-buttons {
     inset-block-start: 72px;

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

@@ -58,7 +58,7 @@ export class MapControls {
         });
     }
     render() {
-        return (h(Fragment, null, h("button", { key: 'b441858814604737198dee69f4846f6c9f9defa5', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '6413ca3c5e95bf73e2bb6dc9b0a084f7f571c6b5', icon: "layers" }), h("span", { key: '99b7a59c28ff5bde93899c033ab823c989681074' }, this.text("layersButton"))), h("div", { key: 'db99e4f86727a989f08d917e849117476988265e', class: "zoom-buttons" }, h("button", { key: '303e997c3ca4523bb043acd52704a91821707a4b', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'd16dbdcaa12c8b16d86d3c15dea1bab29876de2d' }, this.text("zoomIn")), h("dso-icon", { key: '294f98be996687998285a9e5f97746544126f8d4', icon: "plus" })), h("button", { key: '503b79c1ac721de7fe4afb8be473b8e8ef83b247', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: 'e957feacae4705fe6aea225f7cbb8947bfea8abb' }, this.text("zoomOut")), h("dso-icon", { key: '121b6fec06a8a629f5ccde14d0ea8a729adc3637', icon: "minus" }))), h("section", { key: '0de7e180cdc57f010bbbc5c34647316147583154', hidden: this.hideContent }, h("header", { key: '2a684665cb6f38d5243d56f03eb33e09a04edc51' }, h("h2", { key: '72d8775338f6619d81ddf668dbed684c3d9114f3' }, this.text("title")), h("button", { key: 'af87fedfd6149ea86d4fee73011110c0fa2e9273', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '5c6b6f98b2856e76d9991e4916182d06fa96c091' }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '79c097527f0c769782e18ff5e6f5ce0551ef6b2e', icon: "times" }))), h("dso-scrollable", { key: '26f4e1fe150f39f3333c550c3a9f976ae5e9397a' }, h("div", { key: '4b477dc5ba05eee31edc894ce19a07cb105d6eca', class: "content" }, h("slot", { key: 'e9fefab83fc4f3f08246393bd91b228563bd7563' }))))));
+        return (h(Fragment, null, h("button", { key: '71129262395af80727815c5c037e2a1a3e2f6305', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '6946ed104e63afe87d6546a42cdd985008446866', icon: "layers" }), h("span", { key: '60d1021d787564110d5597184022667ba63ee115' }, this.text("layersButton"))), h("div", { key: 'ee23f07ae10e2e80fa80e10c349873d03c1c01f5', class: "zoom-buttons" }, h("button", { key: '58d0c62c344bed5143eebdeb20adde43301fbfbf', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '00900c49f722d9aa1832b6f8f28a0918edc027d1' }, this.text("zoomIn")), h("dso-icon", { key: '3100105cfde33c5154bdb4fc1294576a2b4323c4', icon: "plus" })), h("button", { key: '2d1e64fb22fd22987cbb2772e7741a9a04c90db1', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '9c12425d221fbbeaacecc870935258e6120c1899' }, this.text("zoomOut")), h("dso-icon", { key: 'b272d4dd17e79830546f16589e034bee9cd6c534', icon: "minus" }))), h("section", { key: '81239629933408e475b713cae0a8221590887be2', hidden: this.hideContent }, h("header", { key: '53e18c2368be2726dfa581daa896da179acd6c17' }, h("h2", { key: '60a58b10403f4ec0e5a19b68d232ded6a3b227b2' }, this.text("title")), h("button", { key: '039518b12607cb7567e2a283df71871f6d940077', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '109a1bc50419f248e71fb7337cf6b196d02f41f0' }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '48cdd503426b7f21bcd2825710172a379d96005c', icon: "times" }))), h("dso-scrollable", { key: '0d6ce085c620a38b7ea384426563449efd14719a' }, h("div", { key: 'fd3d0cf333503ec5476f432ca55ff6ac981f4f51', class: "content" }, h("slot", { key: '538e54a07328037690be5b070323ec0471d7abc9' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"map-controls.js","sourceRoot":"","sources":["../../../../src/components/map-controls/map-controls.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,QAAQ,EAAE,~~CAAC,EAAE,~~MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEjH,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;~~AAGxC~~,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;~~AAEnD~~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","sourcesContent":["import { Component, Element, Event, EventEmitter, Fragment, h, Method, Prop, State, Watch } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { ~~MapControlsToggleEvent~~ } from \"./map-controls.~~interfaces~~\";\r\nimport { ~~translations~~ } from \"./map-controls.~~i18n~~\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n tag: \"dso-map-controls\",\r\n styleUrl: \"./map-controls.scss\",\r\n shadow: true,\r\n})\r\nexport class MapControls {\r\n @Element()\r\n host!: HTMLDsoMapControlsElement;\r\n\r\n /*\r\n To show and hide the Map Controls.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /\r\n To disable the zoom controls:\r\n \r\n * `in`: Disable zoom in button.\r\n * * `out`: Disable zoom out button.\r\n * * `both`: Disable zoom in and zoom out.\r\n /\r\n @Prop()\r\n disableZoom?: \"in\" \| \"out\" \| \"both\";\r\n\r\n /\r\n Emitted when the user activates the zoom in button.\r\n /\r\n @Event()\r\n dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n Emitted when the user activates the zoom out button.\r\n /\r\n @Event()\r\n dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n emits when the panel opens or closes.\r\n \r\n - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n /\r\n @Event()\r\n dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n @State()\r\n hideContent = !this.open;\r\n\r\n @Watch(\"open\")\r\n watchOpen(open: boolean) {\r\n if (open) {\r\n this.hideContent = false;\r\n\r\n setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n } else {\r\n setTimeout(() => {\r\n this.hideContent = true;\r\n\r\n this.#toggleButtonElement?.focus();\r\n }, transitionDuration);\r\n }\r\n }\r\n\r\n /\r\n Emitted when the visibility is toggled.\r\n \r\n Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n * @param e\r\n */\r\n @Method()\r\n async toggleVisibility(e: MouseEvent \| KeyboardEvent) {\r\n this.open = !this.open;\r\n\r\n this.dsoToggle.emit({\r\n originalEvent: e,\r\n open: this.open,\r\n });\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n #closeButtonElement: HTMLButtonElement \| undefined;\r\n #toggleButtonElement: HTMLButtonElement \| undefined;\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n type=\"button\"\r\n id=\"toggle-visibility-button\"\r\n class=\"toggle-visibility-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#toggleButtonElement = element)}\r\n >\r\n <dso-icon icon=\"layers\"></dso-icon>\r\n <span>{this.text(\"layersButton\")}</span>\r\n </button>\r\n <div class=\"zoom-buttons\">\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomIn.emit(e)}\r\n disabled={this.disableZoom === \"in\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span>{this.text(\"zoomIn\")}</span>\r\n <dso-icon icon=\"plus\"></dso-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomOut.emit(e)}\r\n disabled={this.disableZoom === \"out\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span>{this.text(\"zoomOut\")}</span>\r\n <dso-icon icon=\"minus\"></dso-icon>\r\n </button>\r\n </div>\r\n <section hidden={this.hideContent}>\r\n <header>\r\n <h2>{this.text(\"title\")}</h2>\r\n <button\r\n type=\"button\"\r\n class=\"close-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#closeButtonElement = element)}\r\n >\r\n <span>{this.text(\"hidePanel\", { title: this.text(\"title\") })}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n </header>\r\n <dso-scrollable>\r\n <div class=\"content\">\r\n <slot></slot>\r\n </div>\r\n </dso-scrollable>\r\n </section>\r\n </>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"map-controls.js","sourceRoot":"","sources":["../../../../src/components/map-controls/map-controls.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./map-controls.i18n\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n tag: \"dso-map-controls\",\r\n styleUrl: \"./map-controls.scss\",\r\n shadow: true,\r\n})\r\nexport class MapControls {\r\n @Element()\r\n host!: HTMLDsoMapControlsElement;\r\n\r\n /*\r\n To show and hide the Map Controls.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /\r\n To disable the zoom controls:\r\n \r\n * `in`: Disable zoom in button.\r\n * * `out`: Disable zoom out button.\r\n * * `both`: Disable zoom in and zoom out.\r\n /\r\n @Prop()\r\n disableZoom?: \"in\" \| \"out\" \| \"both\";\r\n\r\n /\r\n Emitted when the user activates the zoom in button.\r\n /\r\n @Event()\r\n dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n Emitted when the user activates the zoom out button.\r\n /\r\n @Event()\r\n dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n emits when the panel opens or closes.\r\n \r\n - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n /\r\n @Event()\r\n dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n @State()\r\n hideContent = !this.open;\r\n\r\n @Watch(\"open\")\r\n watchOpen(open: boolean) {\r\n if (open) {\r\n this.hideContent = false;\r\n\r\n setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n } else {\r\n setTimeout(() => {\r\n this.hideContent = true;\r\n\r\n this.#toggleButtonElement?.focus();\r\n }, transitionDuration);\r\n }\r\n }\r\n\r\n /\r\n Emitted when the visibility is toggled.\r\n \r\n Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n * @param e\r\n */\r\n @Method()\r\n async toggleVisibility(e: MouseEvent \| KeyboardEvent) {\r\n this.open = !this.open;\r\n\r\n this.dsoToggle.emit({\r\n originalEvent: e,\r\n open: this.open,\r\n });\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n #closeButtonElement: HTMLButtonElement \| undefined;\r\n #toggleButtonElement: HTMLButtonElement \| undefined;\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n type=\"button\"\r\n id=\"toggle-visibility-button\"\r\n class=\"toggle-visibility-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#toggleButtonElement = element)}\r\n >\r\n <dso-icon icon=\"layers\"></dso-icon>\r\n <span>{this.text(\"layersButton\")}</span>\r\n </button>\r\n <div class=\"zoom-buttons\">\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomIn.emit(e)}\r\n disabled={this.disableZoom === \"in\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span>{this.text(\"zoomIn\")}</span>\r\n <dso-icon icon=\"plus\"></dso-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomOut.emit(e)}\r\n disabled={this.disableZoom === \"out\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span>{this.text(\"zoomOut\")}</span>\r\n <dso-icon icon=\"minus\"></dso-icon>\r\n </button>\r\n </div>\r\n <section hidden={this.hideContent}>\r\n <header>\r\n <h2>{this.text(\"title\")}</h2>\r\n <button\r\n type=\"button\"\r\n class=\"close-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#closeButtonElement = element)}\r\n >\r\n <span>{this.text(\"hidePanel\", { title: this.text(\"title\") })}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n </header>\r\n <dso-scrollable>\r\n <div class=\"content\">\r\n <slot></slot>\r\n </div>\r\n </dso-scrollable>\r\n </section>\r\n </>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -28,7 +28,7 @@ export class MapOverlays {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '912b3952f7f5e647cd41a29ddfd9c9944f0968ad', class: "form-group dso-checkboxes" }, h("legend", { key: '4a00206699febc7cce55074a8ccc656ccadf88af', class: "sr-only" }, "Kaartlagen"), h("div", { key: '0b26d2deddd8fc32b9ecad91b317ff478c31add0', class: "dso-label-container" }, h("span", { key: '03b7e1541b138e5bd3547ba39e8c59612e906da9', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '70f4823f693900a9061395c486c2a0e75b6e8a78', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: '61c1e28610e035d416a6b01bd8c864d7ebdf4207', class: "form-group dso-checkboxes" }, h("legend", { key: '64090f6e976b92cc5d1bc3a1eb6626a8c53202f0', class: "sr-only" }, "Kaartlagen"), h("div", { key: '263e8df9d7ec96664a8e84819db5a78941207925', class: "dso-label-container" }, h("span", { key: '11e989edc2cf365d470ec350a34b0a888b2d19ca', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '108f4ed0ee0559eeae36a6ddfd78aa8af7feef7e', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     static get is() { return "dso-map-overlays"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"map-overlays.js","sourceRoot":"","sources":["../../../../src/components/map-overlays/map-overlays.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,~~CAAC~~,EAAE,~~IAAI~~,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;~~AAIxC~~,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;~~AAOnD~~,MAAM,OAAO,WAAW;IALxB;QAOU,mBAAc,GAA+C,EAAE,CAAC;QAKxE;;WAEG;QAEH,UAAK,GAAG,MAAM,EAAE,CAAC;QAoBT,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;KA6CpD;IAnDS,oBAAoB,CAAC,OAAgB,EAAE,CAAqC;QAClF,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAE7B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;IACnD,CAAC;IAID,kBAAkB;QAChB,IAAI,CAAC,QAAQ;aACV,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,eAAC,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;aAClG,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;;YACb,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;QAEL,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,CACL,iEAAU,KAAK,EAAC,2BAA2B;YACzC,+DAAQ,KAAK,EAAC,SAAS,iBAAoB;YAC3C,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,6DAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,IAC3C,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CACd,CACH;YACN,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAC9B,sBACE,GAAG,EAAE,OAAO,CAAC,EAAE,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,OAAO,CAAC,IAAI,EACnB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC5D,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC,CAAC;gBAExD,OAAO,CAAC,IAAI;gBACZ,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,SAAG,IAAI,EAAC,MAAM,IAAE,OAAO,CAAC,IAAI,CAAK,CAAC,CAAC,CAAC,IAAI,CACzC,CAClB,CAAC,CACE,CACG,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, h, ~~Prop~~ } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\~~n\r\~~nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\nimport { ~~Overlay,~~ ~~OverlayChangeEvent~~ } from \"./map-overlays.~~interfaces~~\";\r\nimport { ~~translations~~ } from \"./map-overlays.~~i18n~~\";\r\n\r\n@Component({\r\n tag: \"dso-map-overlays\",\r\n styleUrl: \"./map-overlays.scss\",\r\n shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n private previousOverlays: Overlay[] \| undefined;\r\n private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n @Element()\r\n host!: HTMLDsoMapOverlaysElement;\r\n\r\n /*\r\n To group the overlays together. Generally the default value suffices.\r\n /\r\n @Prop()\r\n group = uuidv4();\r\n\r\n /\r\n The overlays.\r\n /\r\n @Prop()\r\n overlays!: Overlay[];\r\n\r\n /\r\n Emitted when the user selects a different overlay.\r\n */\r\n @Event()\r\n dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n const { checked } = e.detail;\r\n\r\n this.dsoToggleOverlay.emit({ overlay, checked });\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n componentDidRender() {\r\n this.overlays\r\n .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n .forEach((o) => {\r\n this.selectableRefs[o.id]?.toggleInfo(false);\r\n });\r\n\r\n this.previousOverlays = this.overlays;\r\n }\r\n\r\n render() {\r\n for (const ref in this.selectableRefs) {\r\n delete this.selectableRefs[ref];\r\n }\r\n\r\n return (\r\n <fieldset class=\"form-group dso-checkboxes\">\r\n <legend class=\"sr-only\">Kaartlagen</legend>\r\n <div class=\"dso-label-container\">\r\n <span class=\"control-label\" aria-hidden=\"true\">\r\n {this.text(\"title\")}\r\n </span>\r\n </div>\r\n <div class=\"dso-field-container\">\r\n {this.overlays.map((overlay) => (\r\n <dso-selectable\r\n key={overlay.id}\r\n type=\"checkbox\"\r\n value={overlay.name}\r\n checked={overlay.checked}\r\n disabled={overlay.disabled}\r\n name={this.group}\r\n ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n >\r\n {overlay.name}\r\n {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n </dso-selectable>\r\n ))}\r\n </div>\r\n </fieldset>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"map-overlays.js","sourceRoot":"","sources":["../../../../src/components/map-overlays/map-overlays.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\n\r\nimport { translations } from \"./map-overlays.i18n\";\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-map-overlays\",\r\n styleUrl: \"./map-overlays.scss\",\r\n shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n private previousOverlays: Overlay[] \| undefined;\r\n private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n @Element()\r\n host!: HTMLDsoMapOverlaysElement;\r\n\r\n /*\r\n To group the overlays together. Generally the default value suffices.\r\n /\r\n @Prop()\r\n group = uuidv4();\r\n\r\n /\r\n The overlays.\r\n /\r\n @Prop()\r\n overlays!: Overlay[];\r\n\r\n /\r\n Emitted when the user selects a different overlay.\r\n */\r\n @Event()\r\n dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n const { checked } = e.detail;\r\n\r\n this.dsoToggleOverlay.emit({ overlay, checked });\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n componentDidRender() {\r\n this.overlays\r\n .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n .forEach((o) => {\r\n this.selectableRefs[o.id]?.toggleInfo(false);\r\n });\r\n\r\n this.previousOverlays = this.overlays;\r\n }\r\n\r\n render() {\r\n for (const ref in this.selectableRefs) {\r\n delete this.selectableRefs[ref];\r\n }\r\n\r\n return (\r\n <fieldset class=\"form-group dso-checkboxes\">\r\n <legend class=\"sr-only\">Kaartlagen</legend>\r\n <div class=\"dso-label-container\">\r\n <span class=\"control-label\" aria-hidden=\"true\">\r\n {this.text(\"title\")}\r\n </span>\r\n </div>\r\n <div class=\"dso-field-container\">\r\n {this.overlays.map((overlay) => (\r\n <dso-selectable\r\n key={overlay.id}\r\n type=\"checkbox\"\r\n value={overlay.name}\r\n checked={overlay.checked}\r\n disabled={overlay.disabled}\r\n name={this.group}\r\n ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n >\r\n {overlay.name}\r\n {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n </dso-selectable>\r\n ))}\r\n </div>\r\n </fieldset>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -42,7 +42,7 @@ export class MarkBar {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: 'dd7b7eaaabb3c90cb8e22ae789add1e489729997', class: "dso-mark-bar" }, h("div", { key: '4c512dad639d767e3956b9e225fee0b8301dfd63', class: "dso-mark-bar-input" }, h("input", { key: 'cd65945d8d1d76f07b987860fb84162af7e520e4', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'c71d9938fe4b5b7be255ff29dfd933f5ffbda692', htmlFor: "search-input" }, h("dso-icon", { key: '38b0f84fd24ece2c0f8279f61984f1fa458d6c0f', class: "dso-search-icon", icon: "search" }), h("span", { key: '1404fe4cfed0b57d3a19c8cf43c56a7622bb37d5', class: "label-text" }, this.label)), h("button", { key: 'eb4197ba90988a53e1aabf0b9f84eb2039f110fb', type: "button", onClick: this.handleClear }, h("dso-icon", { key: 'd4632a107abcaf10cdad91f51f9a53b495de1a88', icon: "times" }), h("span", { key: '761fbb5e96a50990e6ec0453f216578d78bbc7dd', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '7364c1860a5e684f32ea6800b2bc4c19e9b4f272', class: "dso-button-container" }, h("span", { key: '8c57772036cdc0a51644f157311a85102bf9d92d', class: "divider" }), h("button", { key: '7c0fda2062a24c52787ce272298ed68922ecb87e', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '5c0c6165c64a7011cb8d46f6458440dae6a60e26', icon: "chevron-up", class: "hydrated" }), h("span", { key: '7750fabddc5075e89f5795d4ed6e2e40573ad31d', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: 'a6ac6df0c61467d452dc9547e311db586e391096' }, current, "/", totalCount), h("button", { key: 'dae1e4a795809ac9af20261cd93277640ccbbb9b', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: 'f86affb1ad65b8b5e2d570cabd1855b61488687f', icon: "chevron-down", class: "hydrated" }), h("span", { key: '5f016699b38483d38303c6f7cfac48778394d6ae', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (h("div", { key: '25a89cdf7fb470b80e2bdf61730807b1c28c26fd', class: "dso-mark-bar" }, h("div", { key: '7b6d2c2ab2cce55574f51db8b3ee31272a3071e8', class: "dso-mark-bar-input" }, h("input", { key: '998cde8986f61fb6d48cd4231832bb0c69a441b7', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'a91ab401c3da6ab457816fcac11ba9338d2b64fb', htmlFor: "search-input" }, h("dso-icon", { key: '15c3d5cfa73ff59fc49776631c180a7c23345edb', class: "dso-search-icon", icon: "search" }), h("span", { key: '7729aaa5068f945ca379d2ac313b5e829c30487b', class: "label-text" }, this.label)), h("button", { key: '793756efcd30c7f03dd133d1cf1684d32869a466', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '6f290a131ad4533067328f27b601c96aa49a51da', icon: "times" }), h("span", { key: '0e5ea865d7a73de4e66e17d8e5c27e2420b1e3a0', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '6d85a4582762c3531381d8094b1d5810fc67f675', class: "dso-button-container" }, h("span", { key: '8dc823dbdf0c08fab51f6a006558052f0224c762', class: "divider" }), h("button", { key: 'a7cd048aa51c9271a8c92ca9d4d04bc9e425f6c1', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: 'b3828d809c6d80717908bd4c05af9b3fa9347106', icon: "chevron-up", class: "hydrated" }), h("span", { key: '5da016d27a3eb6a4fe4049073eef0e0075e7bacd', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: '7fa91bb5098828fb3da03132a1fd52767258e67b' }, current, "/", totalCount), h("button", { key: 'a18edd6e413546309000b1b5bf95830815e977f5', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: 'ba659db705dcaaa909813bc2facd3f93115505d0', icon: "chevron-down", class: "hydrated" }), h("span", { key: 'c2c116fba5166e07bdfc36c284334493d098fd89', class: "sr-only" }, "Volgend zoekresultaat")))));
     }
     static get is() { return "dso-mark-bar"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mark-bar.js","sourceRoot":"","sources":["../../../../src/components/mark-bar/mark-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,~~CAAC,EAAE,~~SAAS,EAAsB,~~IAAI,EAAE,~~KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;~~AAapG~~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","sourcesContent":["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"]}
1	+ {"version":3,"file":"mark-bar.js","sourceRoot":"","sources":["../../../../src/components/mark-bar/mark-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport {\r\n MarkBarClearEvent,\r\n MarkBarFocusOptions,\r\n MarkBarInputEvent,\r\n MarkBarPaginationEvent,\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"]}

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

@@ -49,10 +49,10 @@ export class Modal {
     }
     render() {
         var _a;
-        return (h("dialog", { key: 'b00551329a77638a99e92fc9535fc97bedddf777', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
+        return (h("dialog", { key: '83fe9d400195caeccad3ad786a259839e356afef', class: "dso-modal", role: (_a = this.dialogRole) !== 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: '0431cff1fb6b496c96991f01cbc51b5680505a2b', 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" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: 'b5e0c1d6f3894f5fa358573180c8cdf6568248ab' }, h("div", { key: '15d5f642b319448922960e008f5e40760e6b2bf4', class: "dso-body", tabIndex: 0 }, h("slot", { key: '89a6c5aad48a67c10f4ac8065734f190856cddbd', name: "body" }))), this.hasFooter && (h("div", { key: '9ec880a7f89630a0635d952dc3078751cfba36e4', class: "dso-footer" }, h("slot", { key: '5606e60c780ab8c26435664f7e4a751f94a54c60', name: "footer" }))))));
+            } }, h("div", { key: '5e2b1b12dbaac1b5b71aa2a52b42b201d217ee63', 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" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '241b3f078306402613b94d843c393c065125a650' }, h("div", { key: 'fc0f58c85c287ce3fb424e8cc18bec91562fc143', class: "dso-body", tabIndex: 0 }, h("slot", { key: 'e6bc51e2320f995aa2ab7d817ff655189032cc69', name: "body" }))), this.hasFooter && (h("div", { key: '77aa9bac43c4f44c15c98a87986175d057ff1ad6', class: "dso-footer" }, h("slot", { key: 'ec30bcd66bb3214e4a0efcc8c5a793596a5e92e9', name: "footer" }))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,~~CAAC~~,EAAE,~~IAAI~~,EAAE,~~KAAK~~,EAAE,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;~~AAGxC~~,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;~~AAO5C~~,MAAM,OAAO,KAAK;IALlB;QAYE,WAAM,GAAG,EAAE,EAAE,CAAC;QAcd;;WAEG;QAEH,eAAU,GAAkB,QAAQ,CAAC;QAErC;;;;;;WAMG;QAEH,gBAAW,GAAoC,SAAS,CAAC;QAEzD;;;;WAIG;QAEH,oBAAe,GAAG,IAAI,CAAC;QAcf,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;KAqEpD;IAzEC,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7D,CAAC;IAID,gBAAgB;;QACd,IAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,EAAE,CAAC;YACxC,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;YACzC,IAAI,aAAa,YAAY,WAAW,EAAE,CAAC;gBACzC,IAAI,CAAC,kBAAkB,GAAG,aAAa,CAAC;YAC1C,CAAC;YAED,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC;QACrC,CAAC;IACH,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;QAEhC,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE,CAAC;YAC/B,OAAO;QACT,CAAC;QAED,MAAA,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,IAAI,CAAC,kBAAkB,CAAC,0CAAE,KAAK,EAAE,CAAC;IACzD,CAAC;IAED,MAAM;;QACJ,OAAO,CACL,+DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,UAAU,mCAAI,SAAS,gBACvB,MAAM,qBACA,IAAI,CAAC,MAAM,EAC5B,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;gBAEnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;YAC3C,CAAC;YAED,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU;gBACpC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,WAAK,KAAK,EAAC,YAAY;oBACrB,UAAI,EAAE,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,UAAU,CAAM;oBAC1C,IAAI,CAAC,eAAe,IAAI,CACvB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC;wBAC9F,gBAAU,IAAI,EAAC,OAAO,GAAY;wBAClC,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAQ,CAC1C,CACV,CACG,CACP,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,IAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CACf,CACR;gBAED;oBACE,4DAAK,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC;wBAC/B,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACS;gBAEhB,IAAI,CAAC,SAAS,IAAI,CACjB,4DAAK,KAAK,EAAC,YAAY;oBACrB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,CACC,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, h, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { ~~ModalCloseEvent~~ } from \"./modal.~~interfaces~~\";\r\nimport { ~~translations~~ } from \"./modal.~~i18n~~\";\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 dialogRole: 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 private text = i18n(() => this.host, translations);\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.dialogRole ?? 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\">{this.text(\"close\")}</span>\r\n </button>\r\n )}\r\n </div>\r\n ) : (\r\n <span class=\"sr-only\" id={this.ariaId}>\r\n {this.text(\"dialog\")}\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"]}
1	+ {"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, h } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./modal.i18n\";\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-modal\",\r\n styleUrl: \"modal.scss\",\r\n shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n private htmlDialogElement?: HTMLDialogElement;\r\n\r\n @Element()\r\n host!: HTMLDsoModalElement;\r\n\r\n @State()\r\n ariaId = v4();\r\n\r\n /*\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 dialogRole: 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 private text = i18n(() => this.host, translations);\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.dialogRole ?? 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\">{this.text(\"close\")}</span>\r\n </button>\r\n )}\r\n </div>\r\n ) : (\r\n <span class=\"sr-only\" id={this.ariaId}>\r\n {this.text(\"dialog\")}\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"]}

package/dist/collection/components/onboarding-tip/onboarding-tip.css CHANGED Viewed

@@ -72,7 +72,7 @@
   text-shadow: none;
   text-transform: none;
   letter-spacing: normal;
-  word-break: break-word;
+  overflow-wrap: anywhere;
   word-spacing: normal;
   word-wrap: normal;
   white-space: normal;

package/dist/collection/components/onboarding-tip/onboarding-tip.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { arrow, autoUpdate, computePosition, hide, offset, flip, shift } from "@floating-ui/dom";
-import { h, Host } from "@stencil/core";
+import { arrow, autoUpdate, computePosition, flip, hide, offset, shift } from "@floating-ui/dom";
+import { Host, h } from "@stencil/core";
 export class OnboardingTip {
     constructor() {
         /**
@@ -102,7 +102,7 @@ export class OnboardingTip {
         });
     }
     render() {
-        return (h(Host, { key: 'dfebef068529cd980e0687b2cd5f9174787b6362', popover: "manual" }, h("div", { key: 'a4be1d3305a8d5adf5c5182cef80835b238e7774', class: "onboarding-tip", role: "tooltip" }, h("div", { key: 'ea8adbe1732c9158295967cd8a408d13c047200d', class: "onboarding-tip-inner" }, h("div", { key: '50371ee599f9a1cffdde7054d48d6e2c77ad6371', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'd5316ac2efae64714d518e044eecb5f029dd2813', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: 'f915a2258b8874eec15ec42c4a1249d8e17f4e2f', icon: "light-bulb" }), h("slot", { key: '132fbab5f794a2e4bafbdaf178cc45ea165daf7d', name: "heading" }))), h("button", { key: '29ef10c9ff3fb2d996a7d479a94409617db56775', type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { key: 'b5e5786d2d646f7aaaa5b752773eee8c7a16779f', icon: "times" }), h("span", { key: 'fbfc0861af78a5bf87e87e86241199abf1ea9a66', class: "sr-only" }, "Sluiten")), h("slot", { key: '08b3622b8244f51443a7fe28573efbcc60e264d3' }))), h("div", { key: '4f614b48c66975e71246588de6e8329f652d365f', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: '7c5150901a9ecbe69c373333009130db322d2303', popover: "manual" }, h("div", { key: 'ea013d32e5d7b74da14d420ca37a4eaffe377270', class: "onboarding-tip", role: "tooltip" }, h("div", { key: 'adb76bcf17737a81ff9a84e091b95c706261588a', class: "onboarding-tip-inner" }, h("div", { key: '9485bf312830f8788e3768719ced93d589c35de0', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '545450463fbf1c144481f5fa0cdf2b80744d3771', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '9c2ae3b0e5c6f3eb496dbbd46168ad10f417f4ab', icon: "light-bulb" }), h("slot", { key: 'a1db25995416339c41d1d2828a8b9257222a0917', name: "heading" }))), h("button", { key: '0a54cb67e9927602923fbda804f0839b1d995c4f', type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { key: 'e6c5d482f8ec171a6dd2969b66ac92b71d24bf8c', icon: "times" }), h("span", { key: '569fd4ac7d43b90c9c85d245636f34101dd28184', class: "sr-only" }, "Sluiten")), h("slot", { key: '984b8f980fa33e8d82a479c8c2a3b27a6645ee05' }))), h("div", { key: '7d0158f6329dec134ae9e049ce2110cbb4f27adf', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");

package/dist/collection/components/onboarding-tip/onboarding-tip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"onboarding-tip.js","sourceRoot":"","sources":["../../../../src/components/onboarding-tip/onboarding-tip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { arrow, autoUpdate, computePosition, hide, offset, Placement, flip, shift } from \"@floating-ui/dom\";\r\nimport { h, Component, Element, Prop, ComponentInterface, Event, EventEmitter, Host } from \"@stencil/core\";\r\n\r\nimport { OnboardingTipCloseEvent, OnboardingTipPlacement } from \"./onboarding-tip.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-onboarding-tip\",\r\n styleUrl: \"onboarding-tip.scss\",\r\n shadow: true,\r\n})\r\nexport class OnboardingTip implements ComponentInterface {\r\n @Element()\r\n private host!: HTMLDsoOnboardingTipElement;\r\n\r\n /*\r\n Where to place the Onboarding Tip relative to its reference element.\r\n /\r\n @Prop()\r\n placement: OnboardingTipPlacement = \"right\";\r\n\r\n /\r\n Emitted when the user closes the Onboarding Tip.\r\n /\r\n @Event()\r\n dsoClose!: EventEmitter<OnboardingTipCloseEvent>;\r\n\r\n componentDidRender() {\r\n if (!this.host.matches(\":popover-open\")) {\r\n this.host.showPopover();\r\n }\r\n\r\n if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {\r\n this.cleanUp = OnboardingTip.positionTip(this.referenceElement, this.host, this.tipArrowRef, this.placement);\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n if (this.host.matches(\":popover-open\")) {\r\n this.host.hidePopover();\r\n }\r\n\r\n this.cleanUp?.();\r\n this.cleanUp = undefined;\r\n }\r\n\r\n /\r\n This function positions the Onboarding Tip relative to its reference element. It is static so the position is calculated\r\n * only using the passed arguments.\r\n /\r\n private static positionTip(\r\n referenceElement: HTMLElement,\r\n tipRef: HTMLDsoOnboardingTipElement,\r\n tipArrowRef: HTMLDivElement,\r\n placement: Placement,\r\n ) {\r\n // Get half the arrow box's hypotenuse length\r\n const arrowLength = tipArrowRef.offsetWidth;\r\n const floatingOffset = Math.sqrt(2 arrowLength ** 2) / 2;\r\n const padding = 5;\r\n\r\n return autoUpdate(referenceElement, tipRef, () => {\r\n computePosition(referenceElement, tipRef, {\r\n strategy: \"fixed\",\r\n middleware: [\r\n offset(floatingOffset),\r\n flip({\r\n padding,\r\n }),\r\n shift({\r\n padding,\r\n }),\r\n arrow({\r\n padding: padding + arrowLength,\r\n element: tipArrowRef,\r\n }),\r\n hide({\r\n padding: 42,\r\n }),\r\n ],\r\n placement,\r\n }).then(({ x, y, middlewareData, placement: computedPlacement }) => {\r\n if (middlewareData.hide) {\r\n Object.assign(tipRef.style, {\r\n visibility: middlewareData.hide.referenceHidden ? \"hidden\" : \"visible\",\r\n });\r\n }\r\n\r\n Object.assign(tipRef.style, {\r\n left: `${x}px`,\r\n top: `${y}px`,\r\n });\r\n\r\n const side = computedPlacement.split(\"-\")[0];\r\n\r\n const staticSide = side\r\n ? {\r\n top: \"bottom\",\r\n right: \"left\",\r\n bottom: \"top\",\r\n left: \"right\",\r\n }[side]\r\n : \"top\";\r\n\r\n let angle;\r\n switch (staticSide) {\r\n default:\r\n case \"top\":\r\n angle = 45;\r\n break;\r\n case \"right\":\r\n angle = 135;\r\n break;\r\n case \"bottom\":\r\n angle = 225;\r\n break;\r\n case \"left\":\r\n angle = 315;\r\n break;\r\n }\r\n\r\n if (middlewareData.arrow && staticSide) {\r\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\r\n\r\n Object.assign(tipArrowRef.style, {\r\n right: \"\",\r\n bottom: \"\",\r\n left: arrowX ? `${arrowX}px` : \"\",\r\n top: arrowY ? `${arrowY}px` : \"\",\r\n [staticSide]: `${-arrowLength / 2}px`,\r\n transform: `rotate(${angle}deg)`,\r\n });\r\n }\r\n });\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n <Host popover=\"manual\">\r\n <div class=\"onboarding-tip\" role=\"tooltip\">\r\n <div class=\"onboarding-tip-inner\">\r\n <div class=\"onboarding-tip-content-wrapper\">\r\n {this.headingSlottedElement !== null && (\r\n <div class=\"onboarding-tip-content-heading\">\r\n <dso-icon icon=\"light-bulb\"></dso-icon>\r\n <slot name=\"heading\" />\r\n </div>\r\n )}\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 <slot></slot>\r\n </div>\r\n </div>\r\n <div class=\"onboarding-tip-arrow\" ref={(ref) => (this.tipArrowRef = ref)}></div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private tipArrowRef: HTMLDivElement \| undefined;\r\n\r\n private get headingSlottedElement() {\r\n return this.host.querySelector(\"[slot='heading']\");\r\n }\r\n\r\n private cleanUp: ReturnType<typeof autoUpdate> \| undefined;\r\n\r\n private get referenceElement(): HTMLElement \| undefined {\r\n const id = this.host.id;\r\n\r\n if (!id) {\r\n console.warn(\"Unable to find reference. Onboarding Tip has no [id] attribute.\");\r\n\r\n return;\r\n }\r\n\r\n const rootNode = this.host.getRootNode();\r\n if (!(rootNode instanceof Document \|\| rootNode instanceof ShadowRoot)) {\r\n console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n return;\r\n }\r\n\r\n const reference = rootNode.querySelector<HTMLElement>(`[aria-describedby=\"${id}`);\r\n if (!reference) {\r\n console.warn(`Unable to find reference element with aria-describedby ${id}`);\r\n\r\n return;\r\n }\r\n\r\n return reference;\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"onboarding-tip.js","sourceRoot":"","sources":["../../../../src/components/onboarding-tip/onboarding-tip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Placement, arrow, autoUpdate, computePosition, flip, hide, offset, shift } from \"@floating-ui/dom\";\r\nimport { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, h } from \"@stencil/core\";\r\n\r\nimport { OnboardingTipCloseEvent, OnboardingTipPlacement } from \"./onboarding-tip.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-onboarding-tip\",\r\n styleUrl: \"onboarding-tip.scss\",\r\n shadow: true,\r\n})\r\nexport class OnboardingTip implements ComponentInterface {\r\n @Element()\r\n private host!: HTMLDsoOnboardingTipElement;\r\n\r\n /*\r\n Where to place the Onboarding Tip relative to its reference element.\r\n /\r\n @Prop()\r\n placement: OnboardingTipPlacement = \"right\";\r\n\r\n /\r\n Emitted when the user closes the Onboarding Tip.\r\n /\r\n @Event()\r\n dsoClose!: EventEmitter<OnboardingTipCloseEvent>;\r\n\r\n componentDidRender() {\r\n if (!this.host.matches(\":popover-open\")) {\r\n this.host.showPopover();\r\n }\r\n\r\n if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {\r\n this.cleanUp = OnboardingTip.positionTip(this.referenceElement, this.host, this.tipArrowRef, this.placement);\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n if (this.host.matches(\":popover-open\")) {\r\n this.host.hidePopover();\r\n }\r\n\r\n this.cleanUp?.();\r\n this.cleanUp = undefined;\r\n }\r\n\r\n /\r\n This function positions the Onboarding Tip relative to its reference element. It is static so the position is calculated\r\n * only using the passed arguments.\r\n /\r\n private static positionTip(\r\n referenceElement: HTMLElement,\r\n tipRef: HTMLDsoOnboardingTipElement,\r\n tipArrowRef: HTMLDivElement,\r\n placement: Placement,\r\n ) {\r\n // Get half the arrow box's hypotenuse length\r\n const arrowLength = tipArrowRef.offsetWidth;\r\n const floatingOffset = Math.sqrt(2 arrowLength ** 2) / 2;\r\n const padding = 5;\r\n\r\n return autoUpdate(referenceElement, tipRef, () => {\r\n computePosition(referenceElement, tipRef, {\r\n strategy: \"fixed\",\r\n middleware: [\r\n offset(floatingOffset),\r\n flip({\r\n padding,\r\n }),\r\n shift({\r\n padding,\r\n }),\r\n arrow({\r\n padding: padding + arrowLength,\r\n element: tipArrowRef,\r\n }),\r\n hide({\r\n padding: 42,\r\n }),\r\n ],\r\n placement,\r\n }).then(({ x, y, middlewareData, placement: computedPlacement }) => {\r\n if (middlewareData.hide) {\r\n Object.assign(tipRef.style, {\r\n visibility: middlewareData.hide.referenceHidden ? \"hidden\" : \"visible\",\r\n });\r\n }\r\n\r\n Object.assign(tipRef.style, {\r\n left: `${x}px`,\r\n top: `${y}px`,\r\n });\r\n\r\n const side = computedPlacement.split(\"-\")[0];\r\n\r\n const staticSide = side\r\n ? {\r\n top: \"bottom\",\r\n right: \"left\",\r\n bottom: \"top\",\r\n left: \"right\",\r\n }[side]\r\n : \"top\";\r\n\r\n let angle;\r\n switch (staticSide) {\r\n default:\r\n case \"top\":\r\n angle = 45;\r\n break;\r\n case \"right\":\r\n angle = 135;\r\n break;\r\n case \"bottom\":\r\n angle = 225;\r\n break;\r\n case \"left\":\r\n angle = 315;\r\n break;\r\n }\r\n\r\n if (middlewareData.arrow && staticSide) {\r\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\r\n\r\n Object.assign(tipArrowRef.style, {\r\n right: \"\",\r\n bottom: \"\",\r\n left: arrowX ? `${arrowX}px` : \"\",\r\n top: arrowY ? `${arrowY}px` : \"\",\r\n [staticSide]: `${-arrowLength / 2}px`,\r\n transform: `rotate(${angle}deg)`,\r\n });\r\n }\r\n });\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n <Host popover=\"manual\">\r\n <div class=\"onboarding-tip\" role=\"tooltip\">\r\n <div class=\"onboarding-tip-inner\">\r\n <div class=\"onboarding-tip-content-wrapper\">\r\n {this.headingSlottedElement !== null && (\r\n <div class=\"onboarding-tip-content-heading\">\r\n <dso-icon icon=\"light-bulb\"></dso-icon>\r\n <slot name=\"heading\" />\r\n </div>\r\n )}\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 <slot></slot>\r\n </div>\r\n </div>\r\n <div class=\"onboarding-tip-arrow\" ref={(ref) => (this.tipArrowRef = ref)}></div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private tipArrowRef: HTMLDivElement \| undefined;\r\n\r\n private get headingSlottedElement() {\r\n return this.host.querySelector(\"[slot='heading']\");\r\n }\r\n\r\n private cleanUp: ReturnType<typeof autoUpdate> \| undefined;\r\n\r\n private get referenceElement(): HTMLElement \| undefined {\r\n const id = this.host.id;\r\n\r\n if (!id) {\r\n console.warn(\"Unable to find reference. Onboarding Tip has no [id] attribute.\");\r\n\r\n return;\r\n }\r\n\r\n const rootNode = this.host.getRootNode();\r\n if (!(rootNode instanceof Document \|\| rootNode instanceof ShadowRoot)) {\r\n console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n return;\r\n }\r\n\r\n const reference = rootNode.querySelector<HTMLElement>(`[aria-describedby=\"${id}`);\r\n if (!reference) {\r\n console.warn(`Unable to find reference element with aria-describedby ${id}`);\r\n\r\n return;\r\n }\r\n\r\n return reference;\r\n }\r\n}\r\n"]}

package/dist/collection/components/ozon-content/functional-components/wrap-wijzigactie.functional-component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wrap-wijzigactie.functional-component.js","sourceRoot":"","sources":["../../../../../src/components/ozon-content/functional-components/wrap-wijzigactie.functional-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;~~AAOvD~~,MAAM,CAAC,MAAM,eAAe,GAA8C,CAAC,EAAE,WAAW,EAAE,EAAE,QAAQ,EAAE,EAAE;IACtG,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;QAC9B,OAAO,eAAM,QAAQ,CAAO,CAAC;IAC/B,CAAC;IAED,IAAI,WAAW,KAAK,WAAW,EAAE,CAAC;QAChC,OAAO,eAAM,QAAQ,CAAO,CAAC;IAC/B,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { OzonContentWijzigActie } from \"../ozon-content.interfaces\";\r\n\r\nexport interface WrapWijzigactieProps {\r\n wijzigactie: OzonContentWijzigActie \| undefined;\r\n}\r\n\r\nexport const WrapWijzigactie: FunctionalComponent<WrapWijzigactieProps> = ({ wijzigactie }, children) => {\r\n if (wijzigactie === \"voegtoe\") {\r\n return <ins>{children}</ins>;\r\n }\r\n\r\n if (wijzigactie === \"verwijder\") {\r\n return <del>{children}</del>;\r\n }\r\n\r\n return children;\r\n};\r\n"]}
1	+ {"version":3,"file":"wrap-wijzigactie.functional-component.js","sourceRoot":"","sources":["../../../../../src/components/ozon-content/functional-components/wrap-wijzigactie.functional-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAQvD,MAAM,CAAC,MAAM,eAAe,GAA8C,CAAC,EAAE,WAAW,EAAE,EAAE,QAAQ,EAAE,EAAE;IACtG,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;QAC9B,OAAO,eAAM,QAAQ,CAAO,CAAC;IAC/B,CAAC;IAED,IAAI,WAAW,KAAK,WAAW,EAAE,CAAC;QAChC,OAAO,eAAM,QAAQ,CAAO,CAAC;IAC/B,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { OzonContentWijzigActie } from \"../ozon-content.interfaces\";\r\n\r\nexport interface WrapWijzigactieProps {\r\n wijzigactie: OzonContentWijzigActie \| undefined;\r\n}\r\n\r\nexport const WrapWijzigactie: FunctionalComponent<WrapWijzigactieProps> = ({ wijzigactie }, children) => {\r\n if (wijzigactie === \"voegtoe\") {\r\n return <ins>{children}</ins>;\r\n }\r\n\r\n if (wijzigactie === \"verwijder\") {\r\n return <del>{children}</del>;\r\n }\r\n\r\n return children;\r\n};\r\n"]}

package/dist/collection/components/ozon-content/nodes/abbr.node.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"abbr.node.js","sourceRoot":"","sources":["../../../../../src/components/ozon-content/nodes/abbr.node.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAKlC,MAAM,OAAO,mBAAmB;IAAhC;QACE,SAAI,GAAG,MAAM,CAAC;IAYhB,CAAC;IAVC,MAAM,CAAC,IAAa,EAAE,EAAE,YAAY,EAA0B;QAC5D,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAEzC,OAAO,CACL,YAAM,KAAK,EAAC,SAAS;YACnB,gBAAO,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAQ;YAC3C,KAAK,IAAI,KAAK,KAAK,GAAG,CAClB,CACR,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { h } from \"@stencil/core\";\r\n\r\nimport { ~~OzonContentNode~~ } from \"../ozon-content-node.interface\";\r\nimport { ~~OzonContentNodeContext~~ } from \"../ozon-content-node~~-context~~.interface\";\r\n\r\nexport class OzonContentAbbrNode implements OzonContentNode {\r\n name = \"abbr\";\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n const title = node.getAttribute(\"title\");\r\n\r\n return (\r\n <span class=\"od-abbr\">\r\n <abbr>{mapNodeToJsx(node.childNodes)}</abbr>\r\n {title && ` (${title})`}\r\n </span>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"abbr.node.js","sourceRoot":"","sources":["../../../../../src/components/ozon-content/nodes/abbr.node.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAKlC,MAAM,OAAO,mBAAmB;IAAhC;QACE,SAAI,GAAG,MAAM,CAAC;IAYhB,CAAC;IAVC,MAAM,CAAC,IAAa,EAAE,EAAE,YAAY,EAA0B;QAC5D,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAEzC,OAAO,CACL,YAAM,KAAK,EAAC,SAAS;YACnB,gBAAO,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAQ;YAC3C,KAAK,IAAI,KAAK,KAAK,GAAG,CAClB,CACR,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentAbbrNode implements OzonContentNode {\r\n name = \"abbr\";\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n const title = node.getAttribute(\"title\");\r\n\r\n return (\r\n <span class=\"od-abbr\">\r\n <abbr>{mapNodeToJsx(node.childNodes)}</abbr>\r\n {title && ` (${title})`}\r\n </span>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/ozon-content/nodes/al.node.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { getNodeName } from "../get-node-name.function";
-import { wijzigactieToClassName } from "../functions/wijzigactie-to-class-name.function";
-import { parseWijzigactieFromNode } from "../functions/parse-wijzigactie-from-node.function";
 import { WrapWijzigactie } from "../functional-components/wrap-wijzigactie.functional-component";
+import { parseWijzigactieFromNode } from "../functions/parse-wijzigactie-from-node.function";
+import { wijzigactieToClassName } from "../functions/wijzigactie-to-class-name.function";
+import { getNodeName } from "../get-node-name.function";
 function isNestedAl(path) {
     return path.some((n) => {
         const nodeName = getNodeName(n);

package/dist/collection/components/ozon-content/nodes/al.node.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"al.node.js","sourceRoot":"","sources":["../../../../../src/components/ozon-content/nodes/al.node.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,OAAO,EAAE,~~WAAW~~,EAAE,MAAM,~~2BAA2B~~,CAAC;~~AAIxD~~,OAAO,EAAE,~~sBAAsB~~,EAAE,MAAM,~~iDAAiD~~,CAAC;~~AACzF~~,OAAO,EAAE,~~wBAAwB~~,EAAE,MAAM,~~mDAAmD~~,CAAC;~~AAC7F~~,OAAO,EAAE,~~eAAe~~,EAAE,MAAM,~~gEAAgE~~,CAAC;~~AAEjG~~,SAAS,UAAU,CAAC,IAAY;IAC9B,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;QACrB,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;QAEhC,OAAO,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,WAAW,CAAC;IACvD,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,OAAO,iBAAiB;IAA9B;QACE,SAAI,GAAG,IAAI,CAAC;IAmBd,CAAC;IAjBC,MAAM,CAAC,IAAa,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAA0B;QAC1E,IAAI,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5C,MAAM,WAAW,GAAG,wBAAwB,CAAC,IAAI,CAAC,CAAC;QACnD,MAAM,SAAS,GAAG,sBAAsB,CAAC,WAAW,CAAC,CAAC;QAEtD,IAAI,MAAM,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAC/B,OAAO,GAAG,CACR,YAAM,IAAI,EAAC,WAAW,EAAC,KAAK,EAAE,SAAS,IACpC,OAAO,CACH,CACR,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,OAAO,GAAG,SAAG,KAAK,EAAE,SAAS,IAAG,OAAO,CAAK,CAAC;QAC/C,CAAC;QAED,OAAO,EAAC,eAAe,IAAC,WAAW,EAAE,WAAW,IAAG,OAAO,CAAmB,CAAC;IAChF,CAAC;CACF","sourcesContent":["import { h } from \"@stencil/core\";\r\n\r\nimport { ~~getNodeName~~ } from \"../~~get~~-~~node~~-~~name~~.~~function~~\";\r\nimport { ~~OzonContentNodeContext~~ } from \"../~~ozon~~-~~content~~-node~~-context~~.~~interface~~\";\r\nimport { ~~OzonContentNode~~ } from \"../~~ozon~~-~~content~~-~~node~~.~~interface~~\";\r\~~n\r\~~nimport { ~~wijzigactieToClassName~~ } from \"../~~functions/wijzigactie~~-to-~~class-~~name.function\";\r\nimport { ~~parseWijzigactieFromNode~~ } from \"../~~functions/parse~~-~~wijzigactie~~-~~from~~-~~node~~.~~function~~\";\r\nimport { ~~WrapWijzigactie~~ } from \"../~~functional~~-~~components/wrap~~-~~wijzigactie~~.~~functional-component~~\";\r\n\r\nfunction isNestedAl(path: Node[]) {\r\n return path.some((n) => {\r\n const nodeName = getNodeName(n);\r\n\r\n return nodeName === \"Al\" \|\| nodeName === \"Opschrift\";\r\n });\r\n}\r\n\r\nexport class OzonContentAlNode implements OzonContentNode {\r\n name = \"Al\";\r\n\r\n render(node: Element, { mapNodeToJsx, path, inline }: OzonContentNodeContext) {\r\n let content = mapNodeToJsx(node.childNodes);\r\n const wijzigactie = parseWijzigactieFromNode(node);\r\n const className = wijzigactieToClassName(wijzigactie);\r\n\r\n if (inline \|\| isNestedAl(path)) {\r\n content = (\r\n <span role=\"paragraph\" class={className}>\r\n {content}\r\n </span>\r\n );\r\n } else {\r\n content = <p class={className}>{content}</p>;\r\n }\r\n\r\n return <WrapWijzigactie wijzigactie={wijzigactie}>{content}</WrapWijzigactie>;\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"al.node.js","sourceRoot":"","sources":["../../../../../src/components/ozon-content/nodes/al.node.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,gEAAgE,CAAC;AACjG,OAAO,EAAE,wBAAwB,EAAE,MAAM,mDAAmD,CAAC;AAC7F,OAAO,EAAE,sBAAsB,EAAE,MAAM,iDAAiD,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAIxD,SAAS,UAAU,CAAC,IAAY;IAC9B,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;QACrB,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;QAEhC,OAAO,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,WAAW,CAAC;IACvD,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,OAAO,iBAAiB;IAA9B;QACE,SAAI,GAAG,IAAI,CAAC;IAmBd,CAAC;IAjBC,MAAM,CAAC,IAAa,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAA0B;QAC1E,IAAI,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5C,MAAM,WAAW,GAAG,wBAAwB,CAAC,IAAI,CAAC,CAAC;QACnD,MAAM,SAAS,GAAG,sBAAsB,CAAC,WAAW,CAAC,CAAC;QAEtD,IAAI,MAAM,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAC/B,OAAO,GAAG,CACR,YAAM,IAAI,EAAC,WAAW,EAAC,KAAK,EAAE,SAAS,IACpC,OAAO,CACH,CACR,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,OAAO,GAAG,SAAG,KAAK,EAAE,SAAS,IAAG,OAAO,CAAK,CAAC;QAC/C,CAAC;QAED,OAAO,EAAC,eAAe,IAAC,WAAW,EAAE,WAAW,IAAG,OAAO,CAAmB,CAAC;IAChF,CAAC;CACF","sourcesContent":["import { h } from \"@stencil/core\";\r\n\r\nimport { WrapWijzigactie } from \"../functional-components/wrap-wijzigactie.functional-component\";\r\nimport { parseWijzigactieFromNode } from \"../functions/parse-wijzigactie-from-node.function\";\r\nimport { wijzigactieToClassName } from \"../functions/wijzigactie-to-class-name.function\";\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nfunction isNestedAl(path: Node[]) {\r\n return path.some((n) => {\r\n const nodeName = getNodeName(n);\r\n\r\n return nodeName === \"Al\" \|\| nodeName === \"Opschrift\";\r\n });\r\n}\r\n\r\nexport class OzonContentAlNode implements OzonContentNode {\r\n name = \"Al\";\r\n\r\n render(node: Element, { mapNodeToJsx, path, inline }: OzonContentNodeContext) {\r\n let content = mapNodeToJsx(node.childNodes);\r\n const wijzigactie = parseWijzigactieFromNode(node);\r\n const className = wijzigactieToClassName(wijzigactie);\r\n\r\n if (inline \|\| isNestedAl(path)) {\r\n content = (\r\n <span role=\"paragraph\" class={className}>\r\n {content}\r\n </span>\r\n );\r\n } else {\r\n content = <p class={className}>{content}</p>;\r\n }\r\n\r\n return <WrapWijzigactie wijzigactie={wijzigactie}>{content}</WrapWijzigactie>;\r\n }\r\n}\r\n"]}