@dso-toolkit/core 88.0.0 → 88.1.0

package/dist/collection/components/document-component/document-component.css

@@ -30,6 +30,7 @@ label.dso-primary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 a.dso-primary:focus, a.dso-primary:focus-visible,
 button.dso-primary:focus,
@@ -231,6 +232,7 @@ label.dso-secondary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 a.dso-secondary:focus, a.dso-secondary:focus-visible,
 button.dso-secondary:focus,
@@ -488,6 +490,7 @@ label.dso-tertiary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 a.dso-tertiary:focus, a.dso-tertiary:focus-visible,
 button.dso-tertiary:focus,
@@ -512,18 +515,163 @@ label.dso-tertiary.download::after {
 }
 a.dso-tertiary,
 button.dso-tertiary,
+label.dso-tertiary {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-block-end: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: start;
+  user-select: none;
+  vertical-align: middle;
+  background-clip: padding-box;
+}
+a.dso-tertiary:focus, a.dso-tertiary:focus-visible,
+button.dso-tertiary:focus,
+button.dso-tertiary:focus-visible,
+label.dso-tertiary:focus,
+label.dso-tertiary:focus-visible {
+  outline-offset: 2px;
+}
+a.dso-tertiary:active,
+button.dso-tertiary:active,
+label.dso-tertiary:active {
+  outline: 0;
+}
+a.dso-tertiary.extern::after, a.dso-tertiary.download::after,
+button.dso-tertiary.extern::after,
+button.dso-tertiary.download::after,
+label.dso-tertiary.extern::after,
+label.dso-tertiary.download::after {
+  content: "";
+  display: inline-block;
+  margin-inline-start: 8px;
+}
+a.dso-tertiary,
+button.dso-tertiary,
+label.dso-tertiary {
+  background-color: var(--_dso-button-tertiary-background-color, );
+  border-color: var(--_dso-button-tertiary-border-color, );
+  color: var(--_dso-button-tertiary-color, #39870c);
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
+a.dso-tertiary:hover,
+button.dso-tertiary:hover,
+label.dso-tertiary:hover {
+  background-color: var(--_dso-button-tertiary-hover-background-color, );
+  border-color: var(--_dso-button-tertiary-hover-border-color, );
+  color: var(--_dso-button-tertiary-hover-color, #275937);
+}
+a.dso-tertiary:active,
+button.dso-tertiary:active,
+label.dso-tertiary:active {
+  background-color: var(--_dso-button-tertiary-active-background-color, );
+  border-color: var(--_dso-button-tertiary-active-border-color, );
+  color: var(--_dso-button-tertiary-active-color, #173521);
+}
+a.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover,
+button.dso-tertiary[disabled],
+button.dso-tertiary[disabled]:hover,
+label.dso-tertiary[disabled],
+label.dso-tertiary[disabled]:hover {
+  background-color: var(--_dso-button-tertiary-disabled-background-color, );
+  border-color: var(--_dso-button-tertiary-disabled-border-color, );
+  color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
+}
+a.dso-tertiary.dso-small,
+button.dso-tertiary.dso-small,
+label.dso-tertiary.dso-small {
+  line-height: 1rem;
+}
+a.dso-tertiary.dso-small dso-icon, a.dso-tertiary.dso-small.extern::after, a.dso-tertiary.dso-small.download::after, a.dso-tertiary.dso-small.dso-spinner::before,
+button.dso-tertiary.dso-small dso-icon,
+button.dso-tertiary.dso-small.extern::after,
+button.dso-tertiary.dso-small.download::after,
+button.dso-tertiary.dso-small.dso-spinner::before,
+label.dso-tertiary.dso-small dso-icon,
+label.dso-tertiary.dso-small.extern::after,
+label.dso-tertiary.dso-small.download::after,
+label.dso-tertiary.dso-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+a.dso-tertiary.dso-small.dso-spinner-left::before,
+button.dso-tertiary.dso-small.dso-spinner-left::before,
+label.dso-tertiary.dso-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-tertiary.dso-small.dso-spinner-right::after,
+button.dso-tertiary.dso-small.dso-spinner-right::after,
+label.dso-tertiary.dso-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-tertiary.dso-extra-small,
+button.dso-tertiary.dso-extra-small,
+label.dso-tertiary.dso-extra-small {
+  line-height: 1rem;
+}
+a.dso-tertiary.dso-extra-small dso-icon, a.dso-tertiary.dso-extra-small.extern::after, a.dso-tertiary.dso-extra-small.download::after, a.dso-tertiary.dso-extra-small.dso-spinner::before,
+button.dso-tertiary.dso-extra-small dso-icon,
+button.dso-tertiary.dso-extra-small.extern::after,
+button.dso-tertiary.dso-extra-small.download::after,
+button.dso-tertiary.dso-extra-small.dso-spinner::before,
+label.dso-tertiary.dso-extra-small dso-icon,
+label.dso-tertiary.dso-extra-small.extern::after,
+label.dso-tertiary.dso-extra-small.download::after,
+label.dso-tertiary.dso-extra-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+a.dso-tertiary.dso-extra-small.dso-spinner-left::before,
+button.dso-tertiary.dso-extra-small.dso-spinner-left::before,
+label.dso-tertiary.dso-extra-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-tertiary.dso-extra-small.dso-spinner-right::after,
+button.dso-tertiary.dso-extra-small.dso-spinner-right::after,
+label.dso-tertiary.dso-extra-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-tertiary.dso-extra-small,
+button.dso-tertiary.dso-extra-small,
+label.dso-tertiary.dso-extra-small {
+  padding-block: 9px;
+}
+a.dso-tertiary dso-icon:has(+ span:not(.sr-only)),
+button.dso-tertiary dso-icon:has(+ span:not(.sr-only)),
+label.dso-tertiary dso-icon:has(+ span:not(.sr-only)) {
+  margin-inline-start: -8px;
+}
+a.dso-tertiary span:not(.sr-only) + dso-icon,
+button.dso-tertiary span:not(.sr-only) + dso-icon,
+label.dso-tertiary span:not(.sr-only) + dso-icon {
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
+}
+a.dso-tertiary dso-icon + span:not(.sr-only),
+button.dso-tertiary dso-icon + span:not(.sr-only),
+label.dso-tertiary dso-icon + span:not(.sr-only) {
+  margin-inline-start: 8px;
+}
+a.dso-tertiary,
+button.dso-tertiary,
 label.dso-tertiary {
   border: 0;
-  color: #39870c;
   line-height: 1;
   padding: 0;
   background-color: transparent;
 }
-a.dso-tertiary[disabled],
-button.dso-tertiary[disabled],
-label.dso-tertiary[disabled] {
-  color: #afcf9d;
-}
 a.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,
 button.dso-tertiary[disabled].dso-spinner-left,
 button.dso-tertiary[disabled].dso-spinner-right,
@@ -534,15 +682,9 @@ label.dso-tertiary[disabled].dso-spinner-right {
 a.dso-tertiary:not([disabled]):hover,
 button.dso-tertiary:not([disabled]):hover,
 label.dso-tertiary:not([disabled]):hover {
-  color: #275937;
   text-decoration: underline;
   text-underline-position: under;
 }
-a.dso-tertiary:not([disabled]):active,
-button.dso-tertiary:not([disabled]):active,
-label.dso-tertiary:not([disabled]):active {
-  color: #173521;
-}
 a.dso-tertiary.dso-align,
 button.dso-tertiary.dso-align,
 label.dso-tertiary.dso-align {
@@ -675,6 +817,7 @@ label.dso-map {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 a.dso-map:focus, a.dso-map:focus-visible,
 button.dso-map:focus,
@@ -1004,6 +1147,10 @@ mark.dso-highlight {
   --_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;
@@ -1053,6 +1200,10 @@ mark.dso-highlight {
   --_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);

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;
@@ -62,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;
@@ -103,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;
@@ -259,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;
@@ -298,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/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-button/info-button.css

@@ -86,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,4 +1,4 @@
-import { Host, forceUpdate, h } from "@stencil/core";
+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 {
@@ -15,21 +15,19 @@ export class InfoButton {
          * The placement of the Toggletip on click.
          */
         this.toggletipPlacement = "top";
-        this.hover = false;
         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();
-            }
-        };
+        this.hasToggletip = false;
         this.keyDownHandler = (event) => {
-            var _a;
             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();
             }
         };
@@ -46,14 +44,9 @@ export class InfoButton {
             (_c = (_b = this.button) === null || _b === void 0 ? void 0 : _b.setFocus) === null || _c === void 0 ? void 0 : _c.call(_b);
         }
     }
-    get isToggletipMode() {
-        return !!this.host.querySelector("[slot='toggletip']");
-    }
     handleToggle(originalEvent) {
-        var _a;
-        if (this.isToggletipMode) {
+        if (this.hasToggletip) {
             this.toggletipActive = !this.toggletipActive;
-            (_a = this.toggletipElRef) === null || _a === void 0 ? void 0 : _a.showPopover();
         }
         else {
             this.dsoToggle.emit({ originalEvent, active: !this.active });
@@ -65,14 +58,13 @@ export class InfoButton {
         this.cleanUp = undefined;
     }
     componentDidRender() {
-        var _a, _b;
-        if (!this.isToggletipMode) {
+        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) {
-            (_b = this.toggletipElRef) === null || _b === void 0 ? void 0 : _b.showPopover();
             this.cleanUp = positionTooltip({
                 referenceElement: this.button,
                 tipRef: this.toggletipElRef,
@@ -81,10 +73,19 @@ export class InfoButton {
                 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(() => {
-            forceUpdate(this.host);
+            this.hasToggletip = !!this.host.querySelector("[slot='toggletip']");
         });
         this.mutationObserver.observe(this.host, {
             childList: true,
@@ -98,9 +99,9 @@ export class InfoButton {
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: '0edb498762c57aac0e2fcd0efdcd54066e705e7c', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false), 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.hover || this.toggletipActive ? "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": (this.active || this.toggletipActive).toString(), onClick: (e) => this.handleToggle(e), ref: (element) => (this.buttonSecondary = element) }, h("dso-icon", { icon: this.active || this.hover || this.toggletipActive ? "info-active" : "info" }), h("span", { class: "sr-only" }, this.label))), this.isToggletipMode !== null && (h(Tooltip, { key: 'a1aac908e69a86fb00001730ab027089e9b21ecc', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element), visible: this.toggletipActive }, h("dso-scrollable", { key: '14cab11c5e9a100e93729cc7d4d1f42604d8309b', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: 'a5607eba0612c624da9e8c2282bb47eb734ff819', name: "toggletip" }))))));
+        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"; }
@@ -171,7 +172,7 @@ export class InfoButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "label",
                 "defaultValue": "\"Toelichting bij optie\""
             },
@@ -197,7 +198,7 @@ export class InfoButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "toggletip-placement",
                 "defaultValue": "\"top\""
             }
@@ -205,8 +206,8 @@ export class InfoButton {
     }
     static get states() {
         return {
-            "hover": {},
-            "toggletipActive": {}
+            "toggletipActive": {},
+            "hasToggletip": {}
         };
     }
     static get events() {

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":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Method, Prop, State, forceUpdate, 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()\r\n  label = \"Toelichting bij optie\";\r\n\r\n  /**\r\n   * The placement of the Toggletip on click.\r\n   */\r\n  @Prop()\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  hover = false;\r\n\r\n  @State()\r\n  toggletipActive = 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 get isToggletipMode(): boolean {\r\n    return !!this.host.querySelector(\"[slot='toggletip']\");\r\n  }\r\n\r\n  private handleToggle(originalEvent: MouseEvent) {\r\n    if (this.isToggletipMode) {\r\n      this.toggletipActive = !this.toggletipActive;\r\n      this.toggletipElRef?.showPopover();\r\n    } else {\r\n      this.dsoToggle.emit({ originalEvent, active: !this.active });\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 keyDownHandler = (event: KeyboardEvent) => {\r\n    if (!this.toggletipActive) return;\r\n\r\n    if (event.key === \"Escape\") {\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.isToggletipMode) {\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.toggletipElRef?.showPopover();\r\n\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\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => {\r\n      forceUpdate(this.host);\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\r\n        onMouseenter={() => (this.hover = true)}\r\n        onMouseleave={() => (this.hover = false)}\r\n        onKeydown={this.keyDownHandler}\r\n        onFocusout={this.focusOutHandler}\r\n      >\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 || 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.hover || this.toggletipActive ? \"info-active\" : \"info\"}></dso-icon>\r\n            <span class=\"sr-only\">{this.label}</span>\r\n          </button>\r\n        )}\r\n        {this.isToggletipMode !== 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"]}
+{"version":3,"file":"info-button.js","sourceRoot":"","sources":["../../../../src/components/info-button/info-button.tsx"],"names":[],"mappings":"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","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"]}