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

@dso-toolkit/core 54.2.1 → 55.0.0

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

Files changed (834) hide show

package/dist/components/dso-image-overlay.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dso-image-overlay.js","mappings":"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","names":["debounce"],"sources":["./src/components/image-overlay/image-overlay.scss?tag=dso-image-overlay&encapsulation=shadow","./src/components/image-overlay/image-overlay.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n:host {\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n:host(:hover) .open,\r\n.open:focus {\r\n opacity: 1;\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.open {\r\n @include button.secondary($modifiers: false, $icon-only: true);\r\n\r\n border: 0;\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n min-width: auto;\r\n padding: units.$u1;\r\n opacity: 0;\r\n position: absolute;\r\n right: units.$u2;\r\n top: units.$u2;\r\n}\r\n\r\n.dimmer {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: zindex.$image-overlay - 1;\r\n display: flex;\r\n padding: units.$u4;\r\n background-color: fade-out(colors.$wit, 0.2);\r\n justify-content: center;\r\n}\r\n\r\n.wrapper {\r\n align-self: center;\r\n box-shadow: 0 units.$u1 units.$u3 0 rgba(25, 25, 25, 0.4);\r\n line-height: 0;\r\n outline: 4px solid colors.$wit;\r\n position: relative;\r\n z-index: zindex.$image-overlay;\r\n\r\n .titel:not([hidden]) {\r\n background-color: colors.$wit;\r\n font-weight: 700;\r\n line-height: initial;\r\n padding: units.$u1;\r\n position: absolute;\r\n }\r\n\r\n img {\r\n width: auto;\r\n height: auto;\r\n max-width: 100%;\r\n max-height: calc(100vh - units.$u8);\r\n }\r\n\r\n .figuur-bijschrift:not([hidden]) {\r\n display: block;\r\n font-size: 0.75rem;\r\n font-style: italic;\r\n padding-bottom: units.$u1 * 1.5;\r\n padding-top: units.$u2;\r\n }\r\n}\r\n\r\n.close {\r\n @include button.secondary($modifiers: false, $icon-only: true);\r\n\r\n border: 0;\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n min-width: auto;\r\n padding: units.$u1;\r\n position: absolute;\r\n top: units.$u2;\r\n right: units.$u2;\r\n}\r\n","import { Component, ComponentInterface, Element, forceUpdate, h, Host, Listen, State } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\n\r\n@Component({\r\n tag: \"dso-image-overlay\",\r\n styleUrl: \"./image-overlay.scss\",\r\n shadow: true,\r\n})\r\nexport class ImageOverlay implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoImageOverlayElement;\r\n\r\n @State()\r\n active = false;\r\n\r\n @State()\r\n zoomable = false;\r\n\r\n private buttonElement: HTMLButtonElement | undefined;\r\n\r\n private wrapperElement: HTMLDivElement | undefined;\r\n\r\n private trap: FocusTrap | undefined;\r\n\r\n private titelSlot: HTMLElement | null = null;\r\n\r\n private bijschriftSlot: HTMLElement | null = null;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n\r\n @Listen(\"load\", { capture: true })\r\n loadListener(event: Event) {\r\n if (event.target instanceof HTMLImageElement) {\r\n this.setZoomable(event.target);\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.titelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='titel']\");\r\n\r\n this.bijschriftSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='bijschrift']\");\r\n }\r\n\r\n componentDidLoad() {\r\n this.resizeObserver = new ResizeObserver(\r\n debounce(() => {\r\n const imgElement = this.host.querySelector(\"img\");\r\n\r\n if (imgElement instanceof HTMLImageElement) {\r\n this.setZoomable(imgElement);\r\n }\r\n }, 200)\r\n );\r\n\r\n this.mutationObserver = new MutationObserver((e) => {\r\n forceUpdate(this.host);\r\n\r\n if (e[0]?.type === \"childList\") {\r\n this.resizeObserver?.disconnect();\r\n // <img> is gone or a new element.\r\n this.initZoomableImage();\r\n }\r\n });\r\n\r\n this.mutationObserver.observe(this.host, {\r\n attributes: true,\r\n subtree: true,\r\n attributeFilter: [\"src\", \"alt\"],\r\n childList: true,\r\n });\r\n\r\n this.initZoomableImage();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.trap?.deactivate();\r\n this.mutationObserver?.disconnect();\r\n this.resizeObserver?.disconnect();\r\n }\r\n\r\n private initZoomableImage(): void {\r\n const imgElement = this.host.querySelector(\"img\");\r\n\r\n if (!(imgElement instanceof HTMLImageElement)) {\r\n return;\r\n }\r\n\r\n // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.\r\n if (imgElement.complete) {\r\n this.setZoomable(imgElement);\r\n }\r\n\r\n this.resizeObserver?.observe(imgElement);\r\n }\r\n\r\n private setZoomable(imageElement: HTMLImageElement): void {\r\n const { width, naturalWidth, height, naturalHeight } = imageElement;\r\n\r\n this.zoomable = width < naturalWidth || height < naturalHeight;\r\n }\r\n\r\n render() {\r\n const { src, alt } = this.host.querySelector(\"img\") ?? {};\r\n\r\n return (\r\n <Host onClick={() => this.buttonElement?.focus()}>\r\n {this.active && src && alt && (\r\n <div class=\"dimmer\">\r\n <div class=\"wrapper\" ref={(element) => (this.wrapperElement = element)}>\r\n <div class=\"titel\" hidden={!this.titelSlot}>\r\n <slot name=\"titel\" />\r\n </div>\r\n <img src={src} alt={alt} />\r\n <button type=\"button\" class=\"close\" onClick={() => (this.active = false)}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span>Sluiten</span>\r\n </button>\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n <slot />\r\n {this.zoomable && (\r\n <button\r\n type=\"button\"\r\n class=\"open\"\r\n ref={(element) => (this.buttonElement = element)}\r\n onClick={() => (this.active = true)}\r\n >\r\n <dso-icon icon=\"external-link\"></dso-icon>\r\n <span>Afbeelding vergroot weergeven</span>\r\n </button>\r\n )}\r\n </Host>\r\n );\r\n }\r\n\r\n componentDidRender() {\r\n if (this.active && this.wrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.wrapperElement, {\r\n escapeDeactivates: true,\r\n clickOutsideDeactivates: (e) => {\r\n if (e instanceof MouseEvent && e.composedPath()[0] === this.wrapperElement) {\r\n this.active = false;\r\n\r\n return false;\r\n }\r\n\r\n return true;\r\n },\r\n setReturnFocus: this.buttonElement ?? false,\r\n onDeactivate: () => (this.active = false),\r\n }).activate();\r\n } else if (!this.active && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n}\r\n"],"version":3}

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

@@ -4,3 +4,5 @@ const DsoInfoButton = InfoButton;
 const defineCustomElement = defineCustomElement$1;
 export { DsoInfoButton, defineCustomElement };
+//# sourceMappingURL=dso-info-button.js.map

package/dist/components/dso-info-button.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"dso-info-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -4,3 +4,5 @@ const DsoInfo = Info;
 const defineCustomElement = defineCustomElement$1;
 export { DsoInfo, defineCustomElement };
+//# sourceMappingURL=dso-info.js.map

package/dist/components/dso-info.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"dso-info.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -9,17 +9,17 @@ const labelCss = ":host{display:inline-block;max-width:100%}*,*::after,*::before
 const resizeObserver = new ResizeObserver(debounce_1.debounce((entries) => {
   entries.forEach(({ target }) => {
     if (isDsoLabelComponent(target)) {
-      target.truncateLabel();
+      target._truncateLabel();
     }
   });
 }, 150));
 function isDsoLabelComponent(element) {
-  return element.truncateLabel !== undefined;
+  return element.tagName === "DSO-LABEL";
 }
 function hasEllipses(el) {
   return el.scrollWidth > el.clientWidth;
 }
-const Label = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -61,13 +61,15 @@ const Label = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.keydownListenerActive = false;
     }
   }
-  async truncateLabel() {
+  /**
+   * @internal
+   */
+  async _truncateLabel() {
     setTimeout(() => {
       this.isTruncated = this.labelContent && hasEllipses(this.labelContent);
     });
   }
-  /** **[Internal]** Synchronizes the text on the remove button and tooltip. You should never have to use this. */
-  async syncLabelText() {
+  syncLabelText() {
     this.labelText = this.host.textContent;
   }
   componentDidLoad() {
@@ -97,7 +99,7 @@ const Label = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   startTruncate() {
     resizeObserver.observe(this.host);
     this.startMutationObserver();
-    this.truncateLabel();
+    this._truncateLabel();
   }
   stopTruncate() {
     document.removeEventListener("keydown", this.keyDownListener);
@@ -132,8 +134,7 @@ const Label = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "textFocus": [32],
     "isTruncated": [32],
     "labelText": [32],
-    "truncateLabel": [64],
-    "syncLabelText": [64]
+    "_truncateLabel": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -163,3 +164,5 @@ const DsoLabel = Label;
 const defineCustomElement = defineCustomElement$1;
 export { DsoLabel, defineCustomElement };
+//# sourceMappingURL=dso-label.js.map

package/dist/components/dso-label.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dso-label.js","mappings":"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","names":["debounce"],"sources":["./src/components/label/label.scss?tag=dso-label&encapsulation=shadow","./src/components/label/label.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n display: inline-block;\r\n max-width: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n @include label.root();\r\n\r\n &.dso-hover {\r\n .dso-label-content {\r\n text-decoration: line-through;\r\n }\r\n }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n display: inline-block;\r\n max-width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n vertical-align: bottom;\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n .dso-truncate.dso-label-content {\r\n max-width: calc(100% - (units.$u3 + 4px));\r\n }\r\n}\r\n","import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { debounce } from \"debounce\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce((entries) => {\r\n entries.forEach(({ target }) => {\r\n if (isDsoLabelComponent(target)) {\r\n target._truncateLabel();\r\n }\r\n });\r\n }, 150)\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-label\",\r\n styleUrl: \"label.scss\",\r\n shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n private labelContent: HTMLSpanElement | undefined;\r\n\r\n private keydownListenerActive = false;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n private host!: HTMLDsoLabelElement;\r\n\r\n /**\r\n * For compact Label\r\n */\r\n @Prop()\r\n compact?: boolean;\r\n\r\n /**\r\n * Shows a button that can be used to remove the Label.\r\n */\r\n @Prop()\r\n removable?: boolean;\r\n\r\n /**\r\n * The status of this Label.\r\n */\r\n @Prop()\r\n status?: \"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"error\" | \"bright\" | \"attention\";\r\n\r\n @State()\r\n removeHover?: boolean;\r\n\r\n @State()\r\n removeFocus?: boolean;\r\n\r\n /**\r\n * Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n */\r\n @Prop()\r\n truncate?: boolean;\r\n\r\n @State()\r\n textHover?: boolean;\r\n\r\n @State()\r\n textFocus?: boolean;\r\n\r\n @State()\r\n isTruncated?: boolean;\r\n\r\n @State()\r\n labelText: string | null = null;\r\n\r\n /**\r\n * Emitted when the user activates the remove button.\r\n */\r\n @Event()\r\n dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n @Watch(\"truncate\")\r\n watchTruncate(truncate: boolean) {\r\n if (truncate) {\r\n this.startTruncate();\r\n } else {\r\n this.stopTruncate();\r\n }\r\n }\r\n\r\n @Watch(\"textHover\")\r\n @Watch(\"textFocus\")\r\n watchTooltipActive() {\r\n if (!this.keydownListenerActive && (this.textHover || this.textFocus)) {\r\n document.addEventListener(\"keydown\", this.keyDownListener);\r\n this.keydownListenerActive = true;\r\n }\r\n\r\n if (!this.textHover && !this.textFocus) {\r\n document.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.keydownListenerActive = false;\r\n }\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n @Method()\r\n async _truncateLabel() {\r\n setTimeout(() => {\r\n this.isTruncated = this.labelContent && hasEllipses(this.labelContent);\r\n });\r\n }\r\n\r\n private syncLabelText() {\r\n this.labelText = this.host.textContent;\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.truncate) {\r\n this.startTruncate();\r\n }\r\n\r\n if (this.removable) {\r\n this.startMutationObserver();\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.stopTruncate();\r\n }\r\n\r\n /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n private startMutationObserver(): void {\r\n if (this.mutationObserver) {\r\n return;\r\n }\r\n\r\n this.mutationObserver = new MutationObserver((entries) => entries.forEach(() => this.syncLabelText()));\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n\r\n this.labelText = this.host.textContent;\r\n }\r\n\r\n private startTruncate(): void {\r\n resizeObserver.observe(this.host);\r\n this.startMutationObserver();\r\n this._truncateLabel();\r\n }\r\n\r\n private stopTruncate(): void {\r\n document.removeEventListener(\"keydown\", this.keyDownListener);\r\n\r\n resizeObserver.unobserve(this.host);\r\n this.isTruncated = undefined;\r\n this.keydownListenerActive = false;\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.key === \"Escape\") {\r\n this.textHover = false;\r\n this.textFocus = false;\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <span\r\n aria-describedby=\"toggle-anchor\"\r\n class={clsx(\"dso-label\", {\r\n [`dso-label-${this.status}`]: this.status,\r\n \"dso-compact\": this.compact && !this.removable,\r\n \"dso-hover\": this.removeHover || this.removeFocus,\r\n })}\r\n >\r\n <slot name=\"symbol\"></slot>\r\n <span\r\n class={clsx(\"dso-label-content\", {\r\n \"dso-truncate\": !!this.truncate,\r\n })}\r\n ref={(element) => (this.labelContent = element)}\r\n tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n onMouseEnter={() => (this.textHover = true)}\r\n onMouseLeave={() => (this.textHover = false)}\r\n onFocus={() => (this.textFocus = true)}\r\n onBlur={() => (this.textFocus = false)}\r\n >\r\n <slot></slot>\r\n </span>\r\n {this.removable && (\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n onMouseEnter={() => (this.removeHover = true)}\r\n onMouseLeave={() => (this.removeHover = false)}\r\n onFocus={() => (this.removeFocus = true)}\r\n onBlur={() => (this.removeFocus = false)}\r\n >\r\n <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n )}\r\n </span>\r\n {this.isTruncated && (\r\n <dso-tooltip\r\n stateless\r\n id=\"toggle-anchor\"\r\n active={this.textHover || this.textFocus}\r\n position=\"top\"\r\n strategy=\"absolute\"\r\n >\r\n {this.labelText}\r\n </dso-tooltip>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}

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

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

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

@@ -0,0 +1 @@

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

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

@@ -7,7 +7,7 @@ import { v as v4 } from './v4.js';
 const mapBaseLayersCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-width:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-bottom:8px;max-width:100%;text-align:left}p[slot=info]{margin:0}";
-const MapBaseLayers = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MapBaseLayers = /*@__PURE__*/ proxyCustomElement(class MapBaseLayers extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -78,3 +78,5 @@ const DsoMapBaseLayers = MapBaseLayers;
 const defineCustomElement = defineCustomElement$1;
 export { DsoMapBaseLayers, defineCustomElement };
+//# sourceMappingURL=dso-map-base-layers.js.map

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

@@ -0,0 +1 @@

+ {"file":"dso-map-base-layers.js","mappings":";;;;;;;AAAA,MAAM,gBAAgB,GAAG,4WAA4W;;MCUxX,aAAa;;;;;;IAEhB,mBAAc,GAA+C,EAAE,CAAC;iBAYhEA,EAAM,EAAE;;;EAQR,sBAAsB,CAAC,SAAoB;IACjD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,CAAC;GAC9D;EAED,kBAAkB;IAChB,IAAI,CAAC,UAAU;OACZ,MAAM,CAAC,CAAC,CAAC,mBAAK,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,kBAAkB,0CAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;OACpG,OAAO,CAAC,CAAC,CAAC;;MACT,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;KAC9C,CAAC,CAAC;IAEL,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAAC;GAC3C;EAED,MAAM;IACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE;MACrC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;KACjC;IAED,QACE,gBAAU,KAAK,EAAC,uBAAuB,IACrC,cAAQ,KAAK,EAAC,SAAS,kBAAqB,EAC5C,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,kBAEvC,CACH,EACN,WAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,MAC7B,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,KAAK,GAAG,KAAK,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC9D,WAAW,EAAE,MAAM,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,IAExD,SAAS,CAAC,IAAI,EACd,SAAS,CAAC,IAAI,GAAG,SAAG,IAAI,EAAC,MAAM,IAAE,SAAS,CAAC,IAAI,CAAK,GAAG,IAAI,CAC7C,CAClB,CAAC,CACE,CACG,EACX;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["uuidv4"],"sources":["./src/components/map-base-layers/map-base-layers.scss?tag=dso-map-base-layers&encapsulation=shadow","./src/components/map-base-layers/map-base-layers.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n border: 0;\r\n margin: 0;\r\n min-width: 0;\r\n padding: 0;\r\n\r\n .control-label {\r\n display: inline-block;\r\n font-weight: bold;\r\n margin-bottom: units.$u1;\r\n max-width: 100%;\r\n text-align: left;\r\n }\r\n}\r\n\r\np[slot=\"info\"] {\r\n margin: 0;\r\n}\r\n","import { Component, h, Prop, Event, EventEmitter, ComponentInterface } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\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 /**\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 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 Achtergrond\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"],"version":3}

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

@@ -2,9 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './scrollable.js';
-const transitionDuration = 300; // Sync with $transition-duration in ./map-controls.scss
-const mapControlsCss = ":host {\n  background-color: #fff;\n  border: 1px solid #ccc;\n  bottom: 0;\n  display: block;\n  font-family: Asap, sans-serif;\n  position: absolute;\n  top: 0;\n  left: 100%;\n  transition: transform 300ms ease;\n  width: 300px;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host([open]) {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n  transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button {\n  display: none;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.toggle-visibility-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  font-weight: 600;\n  margin-right: 16px;\n  padding: 8px 16px;\n  white-space: nowrap;\n  position: absolute;\n  right: calc(100% + 56px);\n  top: 16px;\n}\n.toggle-visibility-button:focus, .toggle-visibility-button:focus-visible {\n  outline-offset: 2px;\n}\n.toggle-visibility-button:active {\n  outline: 0;\n}\n.toggle-visibility-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.toggle-visibility-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.toggle-visibility-button[disabled], .toggle-visibility-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.toggle-visibility-button.btn-sm {\n  line-height: 1rem;\n}\n.toggle-visibility-button.btn-sm dso-icon,\n.toggle-visibility-button.btn-sm svg.di, .toggle-visibility-button.btn-sm.extern::after, .toggle-visibility-button.btn-sm.download::after, .toggle-visibility-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.toggle-visibility-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button dso-icon,\n.toggle-visibility-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.toggle-visibility-button span + dso-icon,\n.toggle-visibility-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.toggle-visibility-button.dso-spinner-left[disabled], .toggle-visibility-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.toggle-visibility-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n\n.zoom-buttons {\n  border-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  display: flex;\n  flex-wrap: wrap;\n  flex: 0 0;\n  position: absolute;\n  right: calc(100% + 16px);\n  top: 16px;\n}\n.zoom-buttons button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n.zoom-buttons button:focus, .zoom-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.zoom-buttons button:active {\n  outline: 0;\n}\n.zoom-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.zoom-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.zoom-buttons button[disabled], .zoom-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.zoom-buttons button.btn-sm {\n  line-height: 1rem;\n}\n.zoom-buttons button.btn-sm dso-icon,\n.zoom-buttons button.btn-sm svg.di, .zoom-buttons button.btn-sm.extern::after, .zoom-buttons button.btn-sm.download::after, .zoom-buttons button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.zoom-buttons button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.zoom-buttons button.dso-spinner-left[disabled], .zoom-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.zoom-buttons button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.zoom-buttons button + button {\n  border-radius: 0;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-top: 1px solid #ccc;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  padding: 0;\n  position: absolute;\n  right: 16px;\n  top: 16px;\n}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button[disabled] {\n  color: #afcf9d;\n}\n.close-button[disabled].dso-spinner-left, .close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.close-button:not([disabled]):active {\n  color: #173521;\n}\n.close-button.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.close-button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\nsection:not([hidden]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\nheader,\n.content {\n  padding: 16px;\n}\n\nheader {\n  border-bottom: 1px solid #ccc;\n  flex-grow: 0;\n  position: relative;\n}\nheader h2 {\n  color: #275937;\n  font-family: \"Asap\", sans-serif;\n  line-height: 1;\n  margin: 0;\n}";
+const mapControlsCss = ":host {\n  background-color: #fff;\n  border: 1px solid #ccc;\n  bottom: 0;\n  display: block;\n  font-family: Asap, sans-serif;\n  position: absolute;\n  top: 0;\n  left: 100%;\n  transition: transform 300ms ease;\n  width: 300px;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host([open]) {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n  transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button {\n  display: none;\n}\n:host([open]) .zoom-buttons {\n  top: 16px;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.toggle-visibility-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  font-weight: 600;\n  margin-right: 16px;\n  padding: 8px 16px;\n  white-space: nowrap;\n  position: absolute;\n  right: calc(100% + 56px);\n  top: 16px;\n}\n.toggle-visibility-button:focus, .toggle-visibility-button:focus-visible {\n  outline-offset: 2px;\n}\n.toggle-visibility-button:active {\n  outline: 0;\n}\n.toggle-visibility-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.toggle-visibility-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.toggle-visibility-button[disabled], .toggle-visibility-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.toggle-visibility-button.btn-sm {\n  line-height: 1rem;\n}\n.toggle-visibility-button.btn-sm dso-icon,\n.toggle-visibility-button.btn-sm svg.di, .toggle-visibility-button.btn-sm.extern::after, .toggle-visibility-button.btn-sm.download::after, .toggle-visibility-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.toggle-visibility-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button dso-icon,\n.toggle-visibility-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.toggle-visibility-button span + dso-icon,\n.toggle-visibility-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.toggle-visibility-button.dso-spinner-left[disabled], .toggle-visibility-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.toggle-visibility-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n\n.zoom-buttons {\n  border-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  display: flex;\n  flex-wrap: wrap;\n  flex: 0 0;\n  position: absolute;\n  right: calc(100% + 16px);\n  top: 16px;\n}\n.zoom-buttons button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n.zoom-buttons button:focus, .zoom-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.zoom-buttons button:active {\n  outline: 0;\n}\n.zoom-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.zoom-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.zoom-buttons button[disabled], .zoom-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.zoom-buttons button.btn-sm {\n  line-height: 1rem;\n}\n.zoom-buttons button.btn-sm dso-icon,\n.zoom-buttons button.btn-sm svg.di, .zoom-buttons button.btn-sm.extern::after, .zoom-buttons button.btn-sm.download::after, .zoom-buttons button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.zoom-buttons button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.zoom-buttons button.dso-spinner-left[disabled], .zoom-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.zoom-buttons button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.zoom-buttons button + button {\n  border-radius: 0;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-top: 1px solid #ccc;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  padding: 0;\n  position: absolute;\n  right: 16px;\n  top: 16px;\n}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button[disabled] {\n  color: #afcf9d;\n}\n.close-button[disabled].dso-spinner-left, .close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.close-button:not([disabled]):active {\n  color: #173521;\n}\n.close-button.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.close-button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\nsection:not([hidden]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\nheader,\n.content {\n  padding: 16px;\n}\n\nheader {\n  border-bottom: 1px solid #ccc;\n  flex-grow: 0;\n  position: relative;\n}\nheader h2 {\n  color: #275937;\n  font-family: \"Asap\", sans-serif;\n  line-height: 1;\n  margin: 0;\n}\n\n@media screen and (max-width: 767px) {\n  .toggle-visibility-button {\n    height: 40px;\n    margin-right: 0;\n    min-width: auto;\n    right: calc(100% + 16px);\n    width: 40px;\n  }\n  .toggle-visibility-button dso-icon {\n    margin-right: 0;\n  }\n  .toggle-visibility-button span {\n    visibility: hidden;\n  }\n  .zoom-buttons {\n    top: 72px;\n  }\n}";
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
   if (kind === "a" && !f)
@@ -23,7 +21,9 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
   return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
 var _MapControls_closeButtonElement, _MapControls_toggleButtonElement;
-const MapControls = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+// Sync with $transition-duration in ./map-controls.scss
+const transitionDuration = 300;
+const MapControls = /*@__PURE__*/ proxyCustomElement(class MapControls extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -51,6 +51,12 @@ const MapControls = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }, transitionDuration);
     }
   }
+  /**
+   * Emitted when the visibility is toggled.
+   *
+   * Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.
+   * @param e
+   */
   async toggleVisibility(e) {
     this.open = !this.open;
     this.dsoToggle.emit({
@@ -99,4 +105,6 @@ function defineCustomElement$1() {
 const DsoMapControls = MapControls;
 const defineCustomElement = defineCustomElement$1;
-export { DsoMapControls, defineCustomElement, transitionDuration as t };
+export { DsoMapControls, defineCustomElement };
+//# sourceMappingURL=dso-map-controls.js.map

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

@@ -0,0 +1 @@

+ {"file":"dso-map-controls.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,4tjBAA4tjB;;;;;;;;;;;;;;;;;;;ACGnvjB;AACA,MAAM,kBAAkB,GAAG,GAAG,CAAC;MAOlB,WAAW;;;;;;;;IACd,eAAU,GAAG,YAAY,CAAC;IAyElC,kDAAmD;IACnD,mDAAoD;gBApE7C,KAAK;;uBAkCE,CAAC,IAAI,CAAC,IAAI;;EAGxB,SAAS,CAAC,IAAa;IACrB,IAAI,IAAI,EAAE;MACR,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;MAEzB,UAAU,CAAC,gBAAM,OAAA,MAAA,uBAAA,IAAI,uCAAoB,0CAAE,KAAK,EAAE,CAAA,EAAA,EAAE,kBAAkB,CAAC,CAAC;KACzE;SAAM;MACL,UAAU,CAAC;;QACT,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAExB,MAAA,uBAAA,IAAI,wCAAqB,0CAAE,KAAK,EAAE,CAAC;OACpC,EAAE,kBAAkB,CAAC,CAAC;KACxB;GACF;;;;;;;EASD,MAAM,gBAAgB,CAAC,CAA6B;IAClD,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IAEvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAClB,aAAa,EAAE,CAAC;MAChB,IAAI,EAAE,IAAI,CAAC,IAAI;KAChB,CAAC,CAAC;GACJ;EAKD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,cACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,MAAM,uBAAA,IAAI,oCAAwB,OAAO,MAAA,CAAC,IAEvD,gBAAU,IAAI,EAAC,QAAQ,GAAY,EACnC,6BAAuB,CAChB,EACT,WAAK,KAAK,EAAC,cAAc,IACvB,cACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EACtC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAElE,0BAAoB,EACpB,gBAAU,IAAI,EAAC,MAAM,GAAY,CAC1B,EACT,cACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EACvC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAEnE,2BAAqB,EACrB,gBAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACL,EACN,eAAS,MAAM,EAAE,IAAI,CAAC,WAAW,IAC/B,kBACE,cAAK,IAAI,CAAC,UAAU,CAAM,EAC1B,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,MAAM,uBAAA,IAAI,mCAAuB,OAAO,MAAA,CAAC,IAEtD,mCAAsB,IAAI,CAAC,UAAU,CAAQ,EAC7C,gBAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACF,EACT,0BACE,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACS,CACT,CACL,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/map-controls/map-controls.scss?tag=dso-map-controls&encapsulation=shadow","./src/components/map-controls/map-controls.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"map-controls.variables\" as core-map-controls-variables;\r\n\r\n:host {\r\n background-color: colors.$wit;\r\n border: 1px solid colors.$grijs-20;\r\n bottom: 0;\r\n display: block;\r\n font-family: typography.$font-family-base;\r\n position: absolute;\r\n top: 0;\r\n left: 100%;\r\n transition: transform core-map-controls-variables.$transition-duration ease;\r\n width: 300px;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([open]) {\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\r\n transform: translateX(-100%);\r\n\r\n .toggle-visibility-button {\r\n display: none;\r\n }\r\n\r\n .zoom-buttons {\r\n top: units.$u2;\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.toggle-visibility-button {\r\n @include button.map();\r\n\r\n position: absolute;\r\n right: calc(100% + #{core-map-controls-variables.$controls-margin + core-map-controls-variables.$zoom-button-size});\r\n top: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\n.zoom-buttons {\r\n border-radius: 4px;\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 0 0;\r\n position: absolute;\r\n right: calc(100% + core-map-controls-variables.$controls-margin);\r\n top: core-map-controls-variables.$controls-margin;\r\n\r\n button {\r\n @include button.secondary($modifiers: false, $icon-only: true);\r\n @include button.map-focus();\r\n\r\n border: 0;\r\n padding: 8px;\r\n border-radius: 0;\r\n border-top-left-radius: 4px;\r\n border-top-right-radius: 4px;\r\n flex: 0 0 100%;\r\n height: core-map-controls-variables.$zoom-button-size;\r\n min-width: auto;\r\n width: core-map-controls-variables.$zoom-button-size;\r\n\r\n + button {\r\n border-radius: 0;\r\n border-bottom-left-radius: 4px;\r\n border-bottom-right-radius: 4px;\r\n border-top: 1px solid colors.$grijs-20;\r\n }\r\n }\r\n}\r\n\r\n.close-button {\r\n @include button.tertiary($modifiers: false, $icon-only: true);\r\n\r\n padding: 0;\r\n position: absolute;\r\n right: core-map-controls-variables.$controls-margin;\r\n top: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\nsection:not([hidden]) {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n}\r\n\r\nheader,\r\n.content {\r\n padding: units.$u2;\r\n}\r\n\r\nheader {\r\n border-bottom: 1px solid colors.$grijs-20;\r\n flex-grow: 0;\r\n position: relative;\r\n\r\n h2 {\r\n color: colors.$bosgroen;\r\n font-family: typography.$headings-font-family;\r\n line-height: 1;\r\n margin: 0;\r\n }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n .toggle-visibility-button {\r\n height: units.$u5;\r\n margin-right: 0;\r\n min-width: auto;\r\n right: calc(100% + core-map-controls-variables.$controls-margin);\r\n width: units.$u5;\r\n\r\n dso-icon {\r\n margin-right: 0;\r\n }\r\n\r\n span {\r\n visibility: hidden;\r\n }\r\n }\r\n\r\n .zoom-buttons {\r\n top: units.$u9;\r\n }\r\n}\r\n","import { Component, h, Host, Prop, Event, EventEmitter, State, Watch, Method } from \"@stencil/core\";\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 private panelTitle = \"Kaartlagen\";\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 #closeButtonElement: HTMLButtonElement | undefined;\r\n #toggleButtonElement: HTMLButtonElement | undefined;\r\n\r\n render() {\r\n return (\r\n <Host>\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>Kaartlagen</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>Zoom in</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>Zoom uit</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.panelTitle}</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>Verberg paneel {this.panelTitle}</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 </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

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

@@ -7,7 +7,7 @@ import { v as v4 } from './v4.js';
 const mapOverlaysCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-width:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-bottom:8px;max-width:100%;text-align:left}p[slot=info]{margin:0}";
-const MapOverlays = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MapOverlays = /*@__PURE__*/ proxyCustomElement(class MapOverlays extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -79,3 +79,5 @@ const DsoMapOverlays = MapOverlays;
 const defineCustomElement = defineCustomElement$1;
 export { DsoMapOverlays, defineCustomElement };
+//# sourceMappingURL=dso-map-overlays.js.map

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

@@ -0,0 +1 @@

+ {"file":"dso-map-overlays.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,4WAA4W;;MCYtX,WAAW;;;;;;IAEd,mBAAc,GAA+C,EAAE,CAAC;iBAMhEA,EAAM,EAAE;;;EAcR,oBAAoB,CAAC,OAAgB,EAAE,CAAqC;IAClF,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,YAAY,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,GAAG,KAAK,CAAC;IAEhG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;GAClD;EAED,kBAAkB;IAChB,IAAI,CAAC,QAAQ;OACV,MAAM,CAAC,CAAC,CAAC,mBAAK,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;OAClG,OAAO,CAAC,CAAC,CAAC;;MACT,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;KAC9C,CAAC,CAAC;IAEL,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;GACvC;EAED,MAAM;IACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE;MACrC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;KACjC;IAED,QACE,gBAAU,KAAK,EAAC,2BAA2B,IACzC,cAAQ,KAAK,EAAC,SAAS,iBAAoB,EAC3C,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,iBAEvC,CACH,EACN,WAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACzB,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,KAAK,GAAG,KAAK,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC5D,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC,CAAC,IAExD,OAAO,CAAC,IAAI,EACZ,OAAO,CAAC,IAAI,GAAG,SAAG,IAAI,EAAC,MAAM,IAAE,OAAO,CAAC,IAAI,CAAK,GAAG,IAAI,CACzC,CAClB,CAAC,CACE,CACG,EACX;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["uuidv4"],"sources":["./src/components/map-overlays/map-overlays.scss?tag=dso-map-overlays&encapsulation=shadow","./src/components/map-overlays/map-overlays.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n border: 0;\r\n margin: 0;\r\n min-width: 0;\r\n padding: 0;\r\n\r\n .control-label {\r\n display: inline-block;\r\n font-weight: bold;\r\n margin-bottom: units.$u1;\r\n max-width: 100%;\r\n text-align: left;\r\n }\r\n}\r\n\r\np[slot=\"info\"] {\r\n margin: 0;\r\n}\r\n","import { Component, Event, EventEmitter, Prop, h, ComponentInterface } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\n\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.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 /**\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.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;\r\n\r\n this.dsoToggleOverlay.emit({ overlay, checked });\r\n }\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 Kaartlagen\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"],"version":3}

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

@@ -1,11 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { c as createFocusTrap } from './focus-trap.esm.js';
-import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './scrollable.js';
 import { v as v4 } from './v4.js';
-const modalCss = "@keyframes slideInFromTop{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{bottom:0;height:100%;left:0;position:fixed;right:0;top:0;z-index:530}.dso-modal .dso-dialog{animation:1s ease-out 0s 1 slideInFromTop;margin-top:15vh;margin-left:auto;margin-right:auto;max-width:640px;opacity:1;background-color:#fff;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4)}.dso-modal .dso-header{border-bottom:1px solid #ccc;padding:16px;position:relative}.dso-modal .dso-header h2{color:#275937;margin:0;max-width:calc(100% - 24px)}.dso-modal .dso-header .dso-close{background-color:transparent;border:0;height:32px;padding:0;position:absolute;right:13px;text-align:center;top:16px;width:32px}.dso-modal .dso-body{height:calc(100% - 96px - 1.5rem);max-height:calc(70vh - 144px - 1.5em);min-height:1.5rem;overflow-x:auto;padding:32px}.dso-modal .dso-body p{margin:0 0 16px}.dso-modal .dso-body ul,.dso-modal .dso-body ol{margin-bottom:16px}.dso-modal .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal .dso-body pre{margin:0 0 16px}.dso-modal .dso-body blockquote{padding:16px 24px}.dso-modal .dso-body dso-highlight-box,.dso-modal .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal .dso-body img{height:auto;max-width:100%}.dso-modal .dso-footer{min-height:80px;padding:0 32px 32px;text-align:right}@media screen and (max-width: 767px){.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-left:0}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.btn-default,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.btn-default,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.btn-default,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.btn-default{margin-left:16px}.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .btn+.btn-link,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn-link,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn-link,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn-link{margin-left:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-width:100%;margin-top:0}.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-left:0}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{float:none}}.dso-modal-overlay{background-color:rgba(255, 255, 255, 0.8);bottom:0;display:block;left:0;position:fixed;right:0;top:0;z-index:529}.dso-close dso-icon{color:#39870c}";
+const modalCss = "@keyframes slideInFromTop{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{bottom:0;height:100%;left:0;position:fixed;right:0;top:0;z-index:530}.dso-modal .dso-dialog{animation:1s ease-out 0s 1 slideInFromTop;background-color:#fff;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);margin-left:auto;margin-right:auto;margin-top:clamp(40px, 15vh, 15vh);max-width:640px;opacity:1}.dso-modal .dso-header{border-bottom:1px solid #ccc;padding:16px;position:relative}.dso-modal .dso-header h2{color:#275937;margin:0;max-width:calc(100% - 24px)}.dso-modal .dso-header .dso-close{background-color:transparent;border:0;height:32px;padding:0;position:absolute;right:13px;text-align:center;top:16px;width:32px}.dso-modal>.dso-dialog>.dso-body{height:calc(100% - 96px - 1.5rem);max-height:calc(70vh - 144px - 1.5em);min-height:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>.dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>.dso-body img{height:auto;max-width:100%}.dso-modal>.dso-dialog>dso-scrollable{height:calc(100% - 96px - 1.5rem);max-height:calc(70vh - 144px - 1.5em);min-height:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{height:auto;max-width:100%}.dso-modal .dso-footer{min-height:80px;padding:16px 32px;text-align:right}@media screen and (max-width: 767px){.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-left:0}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.btn-default,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.btn-default,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.btn-default,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.btn-default{margin-left:16px}.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .btn+.btn-link,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn-link,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn-link,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn-link{margin-left:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-width:100%;margin-top:0}.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-left:0}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{margin-bottom:8px;margin-top:8px;min-height:216px}.dso-modal .dso-header{padding:8px 16px}.dso-modal .dso-header .dso-close{top:8px}.dso-modal .dso-body{padding:16px 24px}.dso-modal .dso-footer{min-height:auto;overflow:auto;padding:8px 32px}}.dso-modal-overlay{background-color:rgba(255, 255, 255, 0.8);bottom:0;display:block;left:0;position:fixed;right:0;top:0;z-index:529}.dso-close dso-icon{color:#39870c}";
-const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -31,7 +32,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     var _a;
-    return (h(Fragment, null, h("div", { class: "dso-modal-overlay" }), h("div", { class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.modalElement = element) }, h("div", { class: "dso-dialog", role: "document", ref: (element) => (this.dialogElement = element) }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("div", { class: "dso-body", tabIndex: 0 }, h("slot", { name: "body" })), this.hasFooter && (h("div", { class: "dso-footer" }, h("slot", { name: "footer" })))))));
+    return (h(Fragment, null, h("div", { class: "dso-modal-overlay" }), h("div", { class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.modalElement = element) }, h("div", { class: "dso-dialog", role: "document", ref: (element) => (this.dialogElement = element) }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("dso-scrollable", null, h("div", { class: "dso-body", tabIndex: 0 }, h("slot", { name: "body" }))), this.hasFooter && (h("div", { class: "dso-footer" }, h("slot", { name: "footer" })))))));
   }
   setFocusTrap() {
     if (this.dialogElement && !this.trap) {
@@ -83,7 +84,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["dso-modal", "dso-icon"];
+  const components = ["dso-modal", "dso-icon", "dso-scrollable"];
   components.forEach(tagName => { switch (tagName) {
     case "dso-modal":
       if (!customElements.get(tagName)) {
@@ -91,6 +92,11 @@ function defineCustomElement$1() {
       }
       break;
     case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "dso-scrollable":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }
@@ -102,3 +108,5 @@ const DsoModal = Modal;
 const defineCustomElement = defineCustomElement$1;
 export { DsoModal, defineCustomElement };
+//# sourceMappingURL=dso-modal.js.map

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

@@ -0,0 +1 @@

+ {"file":"dso-modal.js","mappings":"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","names":[],"sources":["./src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","./src/components/modal/modal.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n @include modal.root();\r\n}\r\n\r\n.dso-modal-overlay {\r\n @include modal.overlay();\r\n}\r\n\r\n.dso-close {\r\n dso-icon {\r\n color: modal.$close-icon-color;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, State } from \"@stencil/core\";\r\nimport { createFocusTrap, FocusTargetValueOrFalse, FocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { DsoModalCloseEvent } 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 trap?: FocusTrap;\r\n\r\n private dialogElement?: HTMLDivElement;\r\n\r\n private modalElement?: HTMLDivElement;\r\n\r\n @Element()\r\n host!: HTMLDsoModalElement;\r\n\r\n @State()\r\n ariaId = v4();\r\n\r\n @State()\r\n hasFooter?: 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 role: string | null = \"dialog\";\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 @Prop()\r\n showCloseButton = true;\r\n\r\n /**\r\n * Selector used to query the element which will be focused when the component instantiated. When undefined the modal focuses the first button.dso-primary in the modal footer. If no button can be found the close button is focused.\r\n */\r\n @Prop()\r\n initialFocus?: string;\r\n\r\n /**\r\n * Function that returns the element to focus on Modal close. Return `false` for no focus restore.\r\n */\r\n @Prop()\r\n returnFocus?: (nodeFocusedBeforeActivation: HTMLElement | SVGElement) => FocusTargetValueOrFalse;\r\n\r\n /**\r\n * Emitted when the user wants to close the Modal.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<DsoModalCloseEvent>;\r\n\r\n componentWillLoad(): void {\r\n this.hasFooter = this.host.querySelector(\"*[slot = 'footer']\") !== null;\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.setFocusTrap();\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.trap?.deactivate({ onDeactivate: () => undefined }); // override FocusTrap onDeactivate callback to avoid double event emits\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <div class=\"dso-modal-overlay\"></div>\r\n <div\r\n class=\"dso-modal\"\r\n role={this.role ?? undefined}\r\n aria-modal=\"true\"\r\n aria-labelledby={this.ariaId}\r\n ref={(element) => (this.modalElement = element)}\r\n >\r\n <div class=\"dso-dialog\" role=\"document\" ref={(element) => (this.dialogElement = element)}>\r\n {this.modalTitle ? (\r\n <div class=\"dso-header\">\r\n <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n {this.showCloseButton && (\r\n <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n )}\r\n </div>\r\n ) : (\r\n <span class=\"sr-only\" id={this.ariaId}>\r\n Dialoog\r\n </span>\r\n )}\r\n\r\n <dso-scrollable>\r\n <div class=\"dso-body\" tabIndex={0}>\r\n <slot name=\"body\" />\r\n </div>\r\n </dso-scrollable>\r\n\r\n {this.hasFooter && (\r\n <div class=\"dso-footer\">\r\n <slot name=\"footer\" />\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n </Fragment>\r\n );\r\n }\r\n\r\n private setFocusTrap() {\r\n if (this.dialogElement && !this.trap) {\r\n this.trap = createFocusTrap(this.dialogElement, {\r\n initialFocus: () => {\r\n if (this.initialFocus) {\r\n const initialFocusElement = this.host.querySelector<HTMLElement>(this.initialFocus);\r\n if (!initialFocusElement) {\r\n console.warn(`element '${this.initialFocus}' could not be found`);\r\n } else {\r\n return initialFocusElement;\r\n }\r\n }\r\n\r\n return (\r\n this.host.querySelector<HTMLButtonElement>(\"div[slot='footer'] .dso-primary\") ??\r\n this.modalElement?.querySelector<HTMLButtonElement>(\".dso-close\") ??\r\n false\r\n );\r\n },\r\n allowOutsideClick: true,\r\n setReturnFocus: (e) => this.returnFocus?.(e) ?? e,\r\n escapeDeactivates: true,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n clickOutsideDeactivates: (e) => {\r\n if (e instanceof MouseEvent && e.composedPath()[0] === this.modalElement) {\r\n return true;\r\n }\r\n\r\n return false;\r\n },\r\n onDeactivate: () => {\r\n delete this.trap;\r\n\r\n this.dsoClose.emit({ originalEvent: undefined });\r\n },\r\n }).activate();\r\n }\r\n }\r\n}\r\n"],"version":3}