@dso-toolkit/core 87.0.0 → 88.1.0

package/dist/collection/components/icon-button/icon-button.css

@@ -21,6 +21,36 @@
 }
 .dso-tooltip {
   --_dso-icon-button-tertiary-color: #fff;
+  --_dso-icon-button-tertiary-hover-color: #e5e5e5;
+  --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
+  --_dso-button-primary-background-color: #fff;
+  --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-background-color: #f2f2f2;
+  --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-border-color: #fff;
+  --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-border-color: #f2f2f2;
+  --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-color: #191919;
+  --_dso-button-primary-hover-color: #191919;
+  --_dso-button-primary-active-color: #191919;
+  --_dso-button-primary-disabled-color: #666;
+  --_dso-button-secondary-background-color: none;
+  --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);
+  --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-background-color: none;
+  --_dso-button-secondary-border-color: #fff;
+  --_dso-button-secondary-hover-border-color: #fff;
+  --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-secondary-color: #fff;
+  --_dso-button-secondary-hover-color: #fff;
+  --_dso-button-secondary-active-color: #fff;
+  --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-tertiary-color: #fff;
+  --_dso-button-tertiary-hover-color: #fff;
+  --_dso-button-tertiary-active-color: #fff;
+  --_dso-button-tertiary-disabled-color: #b2b2b2;
   background-color: #666;
   color: #fff;
   border-radius: 4px;
@@ -32,6 +62,7 @@
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.15s;
+  max-inline-size: 320px;
 }
 .dso-tooltip.visible {
   opacity: 1;
@@ -61,6 +92,36 @@
 }
 .dso-tooltip .tooltip-inner {
   --_dso-icon-button-tertiary-color: #fff;
+  --_dso-icon-button-tertiary-hover-color: #e5e5e5;
+  --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
+  --_dso-button-primary-background-color: #fff;
+  --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-background-color: #f2f2f2;
+  --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-border-color: #fff;
+  --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-border-color: #f2f2f2;
+  --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-color: #191919;
+  --_dso-button-primary-hover-color: #191919;
+  --_dso-button-primary-active-color: #191919;
+  --_dso-button-primary-disabled-color: #666;
+  --_dso-button-secondary-background-color: none;
+  --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);
+  --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-background-color: none;
+  --_dso-button-secondary-border-color: #fff;
+  --_dso-button-secondary-hover-border-color: #fff;
+  --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-secondary-color: #fff;
+  --_dso-button-secondary-hover-color: #fff;
+  --_dso-button-secondary-active-color: #fff;
+  --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-tertiary-color: #fff;
+  --_dso-button-tertiary-hover-color: #fff;
+  --_dso-button-tertiary-active-color: #fff;
+  --_dso-button-tertiary-disabled-color: #b2b2b2;
   background-color: #666;
   color: #fff;
   font-family: Asap, sans-serif;
@@ -70,34 +131,10 @@
   padding-inline: 8px;
   border-radius: 4px;
   line-height: 1.5;
-  max-inline-size: 320px;
 }
 .dso-tooltip .tooltip-arrow {
-  --_dso-alert-success-border-color: #39870c;
-  --_dso-alert-error-border-color: #ce3f51;
-  --_dso-alert-info-border-color: #6ca4d9;
-  --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
-}
-.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
-}
-.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
-}
-.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
-}
-.dso-tooltip .tooltip-arrow {
-  --_dso-icon-button-tertiary-color: #fff;
-  background-color: #666;
-  color: #fff;
   position: absolute;
+  background-color: #666;
   border-start-start-radius: 4px;
   block-size: 8px;
   inline-size: 8px;
@@ -126,6 +163,7 @@
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 .dso-secondary:focus, .dso-secondary:focus-visible {
   outline-offset: 2px;
@@ -282,6 +320,7 @@
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 .dso-tertiary:focus, .dso-tertiary:focus-visible {
   outline-offset: 2px;
@@ -321,6 +360,7 @@
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 .dso-map:focus, .dso-map:focus-visible {
   outline-offset: 2px;

package/dist/collection/components/icon-button/icon-button.js

@@ -82,7 +82,7 @@ export class IconButton {
         this.cleanUp = undefined;
     }
     render() {
-        return (h("button", { key: 'cfa3c7d98955a1965d46abe68e9faea867c55679', ref: (el) => (this.buttonElRef = el), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: 'f6978374915ba3e9d27c19582114ab2a36838115', icon: this.icon }), h(Tooltip, { key: '21e7bd67dd9800cd4d596b41aabf9c338c100e17', visible: this.showTooltip, onAfterHidden: this.handleHideTooltip, tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label)));
+        return (h("button", { key: '8b22306b71a11a9a5bb331e3138d398a1ea28c25', ref: (el) => (this.buttonElRef = el), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: '5e0331ca7a343c70ef6f0fc0667d567d7c2814ad', icon: this.icon }), h(Tooltip, { key: 'ddf5f41269e6102ef81b05096119386e15478236', visible: this.showTooltip, onAfterHidden: this.handleHideTooltip, tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label)));
     }
     static get is() { return "dso-icon-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/image-overlay/image-overlay.css

@@ -87,6 +87,10 @@ ins.editaction-add {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
@@ -120,6 +124,10 @@ ins.editaction-add .wrapper {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
@@ -164,6 +172,10 @@ del.editaction-remove {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
   --_dso-ozon-content-toggletip-color: colors.$zwart;
@@ -203,6 +215,10 @@ del.editaction-remove .wrapper {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
   --_dso-ozon-content-toggletip-color: colors.$zwart;

package/dist/collection/components/info/info.css

@@ -28,6 +28,10 @@
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #f2f2f2;
   color: #191919;
 }

package/dist/collection/components/info/info.js

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class Info {
     render() {
-        return (h(Fragment, { key: '3e0e4c7174c343e0ffe3395a3fb0e4b54c7e6dd1' }, h("slot", { key: 'd50d49ce8f6bc9c185e4d8e16a28d1d31d0de520' }), !this.fixed && (h("dso-icon-button", { key: '82c25d9bb8b6d203837f23113c8f0bd676ae4064', label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (h(Fragment, { key: '332b53fe2d36d9018e14ff8a888b48d74b487b31' }, h("slot", { key: 'a9fcdee710f9e75434f240f3c0375e90f86dc587' }), !this.fixed && (h("dso-icon-button", { key: 'e75455d9d8bf16684cea7e02fb114cdf34d40d6a', label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
     }
     static get is() { return "dso-info"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/info-button/info-button.css

@@ -1,4 +1,7 @@
 :host {
+  --_dt-scrollable-border-radius: 4px;
+  --_dt-scrollable-container-padding-inline: 16px;
+  --_dt-scrollable-container-padding-block: 8px;
   display: inline-block;
 }
 
@@ -8,6 +11,54 @@
   box-sizing: border-box;
 }
 
+.dso-tooltip {
+  --_dso-alert-success-border-color: initial;
+  --_dso-alert-error-border-color: initial;
+  --_dso-alert-info-border-color: initial;
+  --_dso-alert-warning-border-color: initial;
+  background-color: #fff;
+  color: #191919;
+  border-radius: 4px;
+  overflow: unset;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s;
+  max-inline-size: 640px;
+}
+.dso-tooltip.visible {
+  opacity: 1;
+  visibility: visible;
+}
+.dso-tooltip .tooltip-inner {
+  --_dt-span-role-paragraph-margin-block: 8px;
+  --_dso-alert-success-border-color: initial;
+  --_dso-alert-error-border-color: initial;
+  --_dso-alert-info-border-color: initial;
+  --_dso-alert-warning-border-color: initial;
+  background-color: #fff;
+  color: #191919;
+  font-family: Asap, sans-serif;
+  font-size: 1rem;
+  font-weight: normal;
+  padding-block: 0;
+  padding-inline: 0;
+  border-radius: 4px;
+  line-height: 1.5;
+}
+.dso-tooltip .tooltip-arrow {
+  position: absolute;
+  background-color: #fff;
+  border-start-start-radius: 4px;
+  block-size: 10px;
+  inline-size: 10px;
+  pointer-events: none;
+  z-index: -1;
+}
+
 .sr-only {
   position: absolute;
   inline-size: 1px;
@@ -35,6 +86,6 @@ button {
 }
 
 dso-icon-button {
-  margin-inline-start: var(--_dt-info-button-margin-inline-start, 8px);
   vertical-align: top;
+  margin-inline-start: var(--_dt-info-button-margin-inline-start, 8px);
 }

package/dist/collection/components/info-button/info-button.js

@@ -1,28 +1,107 @@
 import { Host, h } from "@stencil/core";
+import { positionTooltip } from "../../functional-components/tooltip/position-tooltip.function";
+import { Tooltip } from "../../functional-components/tooltip/tooltip.functional-component";
 export class InfoButton {
     constructor() {
-        this.hover = false;
+        /**
+         * Whether the InfoButton is active.
+         */
+        this.active = false;
         /**
          * The label.
          */
         this.label = "Toelichting bij optie";
+        /**
+         * The placement of the Toggletip on click.
+         */
+        this.toggletipPlacement = "top";
+        this.toggletipActive = false;
+        this.hasToggletip = false;
+        this.keyDownHandler = (event) => {
+            if (!this.toggletipActive)
+                return;
+            if (event.key === "Escape") {
+                this.toggletipActive = false;
+            }
+        };
+        this.focusOutHandler = (event) => {
+            var _a;
+            if (!this.host.contains(event.relatedTarget)) {
+                this.toggletipActive = false;
+                (_a = this.toggletipElRef) === null || _a === void 0 ? void 0 : _a.hidePopover();
+            }
+        };
     }
     /**
      * To set focus to the toggle button.
      */
     async setFocus() {
-        var _a, _b;
-        (_a = this.button) === null || _a === void 0 ? void 0 : _a.setFocus();
-        (_b = this.buttonSecondary) === null || _b === void 0 ? void 0 : _b.focus();
+        var _a, _b, _c;
+        if (this.secondary) {
+            (_a = this.buttonSecondary) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            (_c = (_b = this.button) === null || _b === void 0 ? void 0 : _b.setFocus) === null || _c === void 0 ? void 0 : _c.call(_b);
+        }
     }
     handleToggle(originalEvent) {
-        this.active = !this.active;
-        this.dsoToggle.emit({ originalEvent, active: this.active });
+        if (this.hasToggletip) {
+            this.toggletipActive = !this.toggletipActive;
+        }
+        else {
+            this.dsoToggle.emit({ originalEvent, active: !this.active });
+        }
+    }
+    cleanupTooltip() {
+        var _a;
+        (_a = this.cleanUp) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.cleanUp = undefined;
+    }
+    componentDidRender() {
+        var _a, _b, _c;
+        if (!this.hasToggletip) {
+            (_a = this.toggletipElRef) === null || _a === void 0 ? void 0 : _a.hidePopover();
+            this.cleanupTooltip();
+            return;
+        }
+        if (!this.cleanUp && this.toggletipActive && this.button && this.toggletipElRef && this.toggletipArrowElRef) {
+            this.cleanUp = positionTooltip({
+                referenceElement: this.button,
+                tipRef: this.toggletipElRef,
+                tipArrowRef: this.toggletipArrowElRef,
+                placementTip: this.toggletipPlacement,
+                restrictContentElement: this.restrictContentElement,
+            });
+        }
+        if (this.cleanUp) {
+            if (this.toggletipActive) {
+                (_b = this.toggletipElRef) === null || _b === void 0 ? void 0 : _b.showPopover();
+            }
+            else {
+                (_c = this.toggletipElRef) === null || _c === void 0 ? void 0 : _c.hidePopover();
+                this.cleanupTooltip();
+            }
+        }
+    }
+    connectedCallback() {
+        this.mutationObserver = new MutationObserver(() => {
+            this.hasToggletip = !!this.host.querySelector("[slot='toggletip']");
+        });
+        this.mutationObserver.observe(this.host, {
+            childList: true,
+            attributes: true,
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        this.cleanupTooltip();
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: '081ec92479c56bc53665fc9fb909838cff959c9e', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, !this.secondary ? (h("dso-icon-button", { variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.hover ? "info-active" : "info", ref: (element) => (this.button = element) })) : (
+        return (h(Host, { key: '731a5752654925228e0116b60ae106eda7ad08bc', onKeydown: this.keyDownHandler, onFocusout: this.focusOutHandler }, !this.secondary ? (h("dso-icon-button", { variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-active" : "info", ref: (element) => (this.button = element) })) : (
         // ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working
-        h("button", { type: "button", class: "dso-info-secondary", "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.buttonSecondary = element) }, h("dso-icon", { icon: this.active || this.hover ? "info-active" : "info" }), h("span", { class: "sr-only" }, this.label)))));
+        h("button", { type: "button", class: "dso-info-secondary", "aria-expanded": (this.active || this.toggletipActive).toString(), onClick: (e) => this.handleToggle(e), ref: (element) => (this.buttonSecondary = element) }, h("dso-icon", { icon: this.active || this.toggletipActive ? "info-active" : "info" }), h("span", { class: "sr-only" }, this.label))), this.hasToggletip !== null && (h(Tooltip, { key: 'a80bae5b9e9e1126bbc4a0b0f72c59f0b90f33a8', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element), visible: this.toggletipActive }, h("dso-scrollable", { key: '73189990daa593b27f1a3d89e6dff380eedac29e', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: '7b944161e7a9c0db7824628619623b97f82498fd', name: "toggletip" }))))));
     }
     static get is() { return "dso-info-button"; }
     static get encapsulation() { return "shadow"; }
@@ -40,14 +119,14 @@ export class InfoButton {
         return {
             "active": {
                 "type": "boolean",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Whether the InfoButton is active."
@@ -55,7 +134,8 @@ export class InfoButton {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "active"
+                "attribute": "active",
+                "defaultValue": "false"
             },
             "secondary": {
                 "type": "boolean",
@@ -92,15 +172,42 @@ export class InfoButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "label",
                 "defaultValue": "\"Toelichting bij optie\""
+            },
+            "toggletipPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipPlacement",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "TooltipPlacement": {
+                            "location": "import",
+                            "path": "../../functional-components/tooltip/tooltip.interfaces",
+                            "id": "src/functional-components/tooltip/tooltip.interfaces.ts::TooltipPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placement of the Toggletip on click."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "toggletip-placement",
+                "defaultValue": "\"top\""
             }
         };
     }
     static get states() {
         return {
-            "hover": {}
+            "toggletipActive": {},
+            "hasToggletip": {}
         };
     }
     static get events() {
@@ -148,5 +255,6 @@ export class InfoButton {
             }
         };
     }
+    static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=info-button.js.map

package/dist/collection/components/info-button/info-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"info-button.js","sourceRoot":"","sources":["../../../../src/components/info-button/info-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAS7F,MAAM,OAAO,UAAU;IALvB;QAgBE,UAAK,GAAG,KAAK,CAAC;QAQd;;WAEG;QAEH,UAAK,GAAG,uBAAuB,CAAC;KAiDjC;IAzCC;;OAEG;IAEH,KAAK,CAAC,QAAQ;;QACZ,MAAA,IAAI,CAAC,MAAM,0CAAE,QAAQ,EAAE,CAAC;QACxB,MAAA,IAAI,CAAC,eAAe,0CAAE,KAAK,EAAE,CAAC;IAChC,CAAC;IAEO,YAAY,CAAC,aAAyB;QAC5C,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAC9D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IACpF,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CACjB,uBACE,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,EAC5D,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,EACxD,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,GACzC,CACH,CAAC,CAAC,CAAC;QACF,sHAAsH;QACtH,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,oBAAoB,mBACX,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,EACpF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EACpC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;YAElD,gBAAU,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,GAAa;YAC/E,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Host, Method, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { InfoButtonToggleEvent } from \"./info-button.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-info-button\",\r\n  shadow: true,\r\n  styleUrl: \"info-button.scss\",\r\n})\r\nexport class InfoButton {\r\n  private button?: HTMLDsoIconButtonElement;\r\n  private buttonSecondary?: HTMLButtonElement;\r\n\r\n  /**\r\n   * Whether the InfoButton is active.\r\n   */\r\n  @Prop({ mutable: true, reflect: true })\r\n  active?: boolean;\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  /**\r\n   * For secondary Info Button.\r\n   */\r\n  @Prop()\r\n  secondary?: boolean;\r\n\r\n  /**\r\n   * The label.\r\n   */\r\n  @Prop()\r\n  label = \"Toelichting bij optie\";\r\n\r\n  /**\r\n   * Emitted when the user activates the Info Button.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<InfoButtonToggleEvent>;\r\n\r\n  /**\r\n   * To set focus to the toggle button.\r\n   */\r\n  @Method()\r\n  async setFocus() {\r\n    this.button?.setFocus();\r\n    this.buttonSecondary?.focus();\r\n  }\r\n\r\n  private handleToggle(originalEvent: MouseEvent) {\r\n    this.active = !this.active;\r\n    this.dsoToggle.emit({ originalEvent, active: this.active });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host onMouseenter={() => (this.hover = true)} onMouseleave={() => (this.hover = false)}>\r\n        {!this.secondary ? (\r\n          <dso-icon-button\r\n            variant=\"tertiary\"\r\n            label={this.label}\r\n            onDsoClick={(e) => this.handleToggle(e.detail.originalEvent)}\r\n            icon={this.active || this.hover ? \"info-active\" : \"info\"}\r\n            ref={(element) => (this.button = element)}\r\n          />\r\n        ) : (\r\n          // ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working\r\n          <button\r\n            type=\"button\"\r\n            class=\"dso-info-secondary\"\r\n            aria-expanded={typeof this.active === \"boolean\" ? this.active.toString() : undefined}\r\n            onClick={(e) => this.handleToggle(e)}\r\n            ref={(element) => (this.buttonSecondary = element)}\r\n          >\r\n            <dso-icon icon={this.active || this.hover ? \"info-active\" : \"info\"}></dso-icon>\r\n            <span class=\"sr-only\">{this.label}</span>\r\n          </button>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"info-button.js","sourceRoot":"","sources":["../../../../src/components/info-button/info-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEtG,OAAO,EAAE,eAAe,EAAE,MAAM,+DAA+D,CAAC;AAChG,OAAO,EAAE,OAAO,EAAE,MAAM,kEAAkE,CAAC;AAU3F,MAAM,OAAO,UAAU;IALvB;QAiBE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;QAQf;;WAEG;QAEH,UAAK,GAAG,uBAAuB,CAAC;QAEhC;;WAEG;QAEH,uBAAkB,GAAqB,KAAK,CAAC;QAS7C,oBAAe,GAAG,KAAK,CAAC;QAGxB,iBAAY,GAAG,KAAK,CAAC;QAsBb,mBAAc,GAAG,CAAC,KAAoB,EAAE,EAAE;YAChD,IAAI,CAAC,IAAI,CAAC,eAAe;gBAAE,OAAO;YAElC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC/B,CAAC;QACH,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,KAAiB,EAAE,EAAE;;YAC9C,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,EAAE,CAAC;gBACrD,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;gBAC7B,MAAA,IAAI,CAAC,cAAc,0CAAE,WAAW,EAAE,CAAC;YACrC,CAAC;QACH,CAAC,CAAC;KA0FH;IA3HC;;OAEG;IAEH,KAAK,CAAC,QAAQ;;QACZ,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,MAAA,IAAI,CAAC,eAAe,0CAAE,KAAK,EAAE,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,QAAQ,kDAAI,CAAC;QAC5B,CAAC;IACH,CAAC;IAEO,YAAY,CAAC,aAAyB;QAC5C,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;QAC/C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAC/D,CAAC;IACH,CAAC;IAiBO,cAAc;;QACpB,MAAA,IAAI,CAAC,OAAO,oDAAI,CAAC;QACjB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;IAC3B,CAAC;IAED,kBAAkB;;QAChB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,MAAA,IAAI,CAAC,cAAc,0CAAE,WAAW,EAAE,CAAC;YACnC,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC5G,IAAI,CAAC,OAAO,GAAG,eAAe,CAAC;gBAC7B,gBAAgB,EAAE,IAAI,CAAC,MAAM;gBAC7B,MAAM,EAAE,IAAI,CAAC,cAAc;gBAC3B,WAAW,EAAE,IAAI,CAAC,mBAAmB;gBACrC,YAAY,EAAE,IAAI,CAAC,kBAAkB;gBACrC,sBAAsB,EAAE,IAAI,CAAC,sBAAsB;aACpD,CAAC,CAAC;QACL,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;gBACzB,MAAA,IAAI,CAAC,cAAc,0CAAE,WAAW,EAAE,CAAC;YACrC,CAAC;iBAAM,CAAC;gBACN,MAAA,IAAI,CAAC,cAAc,0CAAE,WAAW,EAAE,CAAC;gBACnC,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,CAAC;QACH,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YAChD,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACtE,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;YACvC,SAAS,EAAE,IAAI;YACf,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;;QAClB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QAEpC,OAAO,IAAI,CAAC,gBAAgB,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,UAAU,EAAE,IAAI,CAAC,eAAe;YACnE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CACjB,uBACE,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,EAC5D,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,EAClE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,GACzC,CACH,CAAC,CAAC,CAAC;YACF,sHAAsH;YACtH,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,oBAAoB,mBACX,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,QAAQ,EAAE,EAC/D,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EACpC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;gBAElD,gBAAU,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,GAAa;gBACzF,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACV;YACA,IAAI,CAAC,YAAY,KAAK,IAAI,IAAI,CAC7B,EAAC,OAAO,qDACN,aAAa,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,EAC3D,kBAAkB,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,mBAAmB,GAAG,OAAO,CAAC,EACrE,OAAO,EAAE,IAAI,CAAC,eAAe;gBAE7B,uEAAgB,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,sBAAsB,GAAG,OAAO,CAAC;oBACvE,6DAAM,IAAI,EAAC,WAAW,GAAG,CACV,CACT,CACX,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Method, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../functional-components/tooltip/position-tooltip.function\";\r\nimport { Tooltip } from \"../../functional-components/tooltip/tooltip.functional-component\";\r\nimport { TooltipClean, TooltipPlacement } from \"../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\nimport { InfoButtonToggleEvent } from \"./info-button.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-info-button\",\r\n  shadow: true,\r\n  styleUrl: \"info-button.scss\",\r\n})\r\nexport class InfoButton {\r\n  private button?: HTMLDsoIconButtonElement;\r\n  private buttonSecondary?: HTMLButtonElement;\r\n  private toggletipElRef?: HTMLDivElement;\r\n  private toggletipArrowElRef?: HTMLSpanElement;\r\n  private cleanUp: TooltipClean | undefined;\r\n  private mutationObserver?: MutationObserver;\r\n  private restrictContentElement?: HTMLElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoInfoButtonElement;\r\n\r\n  /**\r\n   * Whether the InfoButton is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active = false;\r\n\r\n  /**\r\n   * For secondary Info Button.\r\n   */\r\n  @Prop()\r\n  secondary?: boolean;\r\n\r\n  /**\r\n   * The label.\r\n   */\r\n  @Prop({ reflect: true })\r\n  label = \"Toelichting bij optie\";\r\n\r\n  /**\r\n   * The placement of the Toggletip on click.\r\n   */\r\n  @Prop({ reflect: true })\r\n  toggletipPlacement: TooltipPlacement = \"top\";\r\n\r\n  /**\r\n   * Emitted when the user activates the Info Button.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<InfoButtonToggleEvent>;\r\n\r\n  @State()\r\n  toggletipActive = false;\r\n\r\n  @State()\r\n  hasToggletip = false;\r\n\r\n  /**\r\n   * To set focus to the toggle button.\r\n   */\r\n  @Method()\r\n  async setFocus() {\r\n    if (this.secondary) {\r\n      this.buttonSecondary?.focus();\r\n    } else {\r\n      this.button?.setFocus?.();\r\n    }\r\n  }\r\n\r\n  private handleToggle(originalEvent: MouseEvent) {\r\n    if (this.hasToggletip) {\r\n      this.toggletipActive = !this.toggletipActive;\r\n    } else {\r\n      this.dsoToggle.emit({ originalEvent, active: !this.active });\r\n    }\r\n  }\r\n\r\n  private keyDownHandler = (event: KeyboardEvent) => {\r\n    if (!this.toggletipActive) return;\r\n\r\n    if (event.key === \"Escape\") {\r\n      this.toggletipActive = false;\r\n    }\r\n  };\r\n\r\n  private focusOutHandler = (event: FocusEvent) => {\r\n    if (!this.host.contains(event.relatedTarget as Node)) {\r\n      this.toggletipActive = false;\r\n      this.toggletipElRef?.hidePopover();\r\n    }\r\n  };\r\n\r\n  private cleanupTooltip() {\r\n    this.cleanUp?.();\r\n    this.cleanUp = undefined;\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (!this.hasToggletip) {\r\n      this.toggletipElRef?.hidePopover();\r\n      this.cleanupTooltip();\r\n      return;\r\n    }\r\n\r\n    if (!this.cleanUp && this.toggletipActive && this.button && this.toggletipElRef && this.toggletipArrowElRef) {\r\n      this.cleanUp = positionTooltip({\r\n        referenceElement: this.button,\r\n        tipRef: this.toggletipElRef,\r\n        tipArrowRef: this.toggletipArrowElRef,\r\n        placementTip: this.toggletipPlacement,\r\n        restrictContentElement: this.restrictContentElement,\r\n      });\r\n    }\r\n\r\n    if (this.cleanUp) {\r\n      if (this.toggletipActive) {\r\n        this.toggletipElRef?.showPopover();\r\n      } else {\r\n        this.toggletipElRef?.hidePopover();\r\n        this.cleanupTooltip();\r\n      }\r\n    }\r\n  }\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => {\r\n      this.hasToggletip = !!this.host.querySelector(\"[slot='toggletip']\");\r\n    });\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      childList: true,\r\n      attributes: true,\r\n    });\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.cleanupTooltip();\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host onKeydown={this.keyDownHandler} onFocusout={this.focusOutHandler}>\r\n        {!this.secondary ? (\r\n          <dso-icon-button\r\n            variant=\"tertiary\"\r\n            label={this.label}\r\n            onDsoClick={(e) => this.handleToggle(e.detail.originalEvent)}\r\n            icon={this.active || this.toggletipActive ? \"info-active\" : \"info\"}\r\n            ref={(element) => (this.button = element)}\r\n          />\r\n        ) : (\r\n          // ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working\r\n          <button\r\n            type=\"button\"\r\n            class=\"dso-info-secondary\"\r\n            aria-expanded={(this.active || this.toggletipActive).toString()}\r\n            onClick={(e) => this.handleToggle(e)}\r\n            ref={(element) => (this.buttonSecondary = element)}\r\n          >\r\n            <dso-icon icon={this.active || this.toggletipActive ? \"info-active\" : \"info\"}></dso-icon>\r\n            <span class=\"sr-only\">{this.label}</span>\r\n          </button>\r\n        )}\r\n        {this.hasToggletip !== null && (\r\n          <Tooltip\r\n            tipElementRef={(element) => (this.toggletipElRef = element)}\r\n            tipArrowElementRef={(element) => (this.toggletipArrowElRef = element)}\r\n            visible={this.toggletipActive}\r\n          >\r\n            <dso-scrollable ref={(element) => (this.restrictContentElement = element)}>\r\n              <slot name=\"toggletip\" />\r\n            </dso-scrollable>\r\n          </Tooltip>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/input-range/input-range.js

@@ -10,13 +10,13 @@ export class InputRange {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: '7bf4d5d30b928c993bae1f5d25325e73f4b2f760', id: "description", hidden: true }, this.description)), h("span", { key: '3806477e5f52f5f95a62d766cd2bb5e9ef60668c', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: 'bfb6213eb4dc7ed7c52f2645952fbeb53a611d8e', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: 'f3796a5bbd719af7fe23c285ba4f1519eaaaf1b9', id: "description", hidden: true }, this.description)), h("span", { key: '1048b041a13dbf244b2d6fe76dccf8f97a2d7b4b', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: '438056be852e2b4136de65cec13faa6a6c43418b', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: 'bdd86302b7c2ef717a40f2103faff3dbadd691df', class: "counter", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: '8b3f86e7c42f0dffdc2b550f365c4bdc91627ffc', class: "counter", "aria-hidden": "true" }, max, this.unit)));
     }
     static get is() { return "dso-input-range"; }
     static get encapsulation() { return "shadow"; }