@dso-toolkit/core 79.0.1 → 79.1.0

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

@@ -0,0 +1,254 @@
+import { h } from "@stencil/core";
+import { positionTooltip } from "../../functional-components/tooltip/position-tooltip.function";
+import { Tooltip } from "../../functional-components/tooltip/tooltip.functional-component";
+export class IconButton {
+    constructor() {
+        /**
+         * The variant of the Icon Button.
+         */
+        this.variant = "secondary";
+        /**
+         * The placement of the tooltip on hover and focus of the Icon Button.
+         */
+        this.tooltipPlacement = "top";
+        /**
+         * To disable the Icon Button
+         */
+        this.disabled = false;
+        this.showTooltip = false;
+        this.lastClickTime = 0;
+        this.tooltipShowDelay = 500;
+        this.handleShowTooltip = () => {
+            if (this.disabled) {
+                return;
+            }
+            // Don't show the tooltip if the button is clicked within 500ms of the last click
+            if (Date.now() - this.lastClickTime < this.tooltipShowDelay) {
+                return;
+            }
+            if (this.tooltipTimeout) {
+                clearTimeout(this.tooltipTimeout);
+            }
+            this.tooltipTimeout = window.setTimeout(() => {
+                var _a;
+                this.showTooltip = true;
+                (_a = this.tooltipElRef) === null || _a === void 0 ? void 0 : _a.showPopover();
+                if (!this.cleanUp && this.buttonElRef && this.tooltipElRef && this.tipArrowElRef) {
+                    this.cleanUp = positionTooltip({
+                        referenceElement: this.buttonElRef,
+                        tipRef: this.tooltipElRef,
+                        tipArrowRef: this.tipArrowElRef,
+                        placementTip: this.tooltipPlacement,
+                        topPositionSmallViewPort: false,
+                        halfMainAxisOffset: false,
+                        forceVisible: true,
+                    });
+                }
+            }, this.tooltipShowDelay);
+        };
+        this.handleHideTooltip = () => {
+            var _a;
+            if (this.tooltipTimeout) {
+                clearTimeout(this.tooltipTimeout);
+            }
+            this.showTooltip = false;
+            (_a = this.tooltipElRef) === null || _a === void 0 ? void 0 : _a.hidePopover();
+            if (!this.showTooltip && this.cleanUp) {
+                this.cleanUp();
+                this.cleanUp = undefined;
+            }
+        };
+        this.handleClick = (e) => {
+            this.lastClickTime = Date.now();
+            this.handleHideTooltip();
+            this.dsoClick.emit({ originalEvent: e });
+        };
+    }
+    /**
+     * Focuses the button.
+     */
+    async setFocus() {
+        var _a;
+        (_a = this.buttonElRef) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    render() {
+        return (h("button", { key: '8e39b350f929f7cee82d93375afa1daab5d9fb55', 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: '6e45b442c90b2b4e6eded5383346fdfc77591912', icon: this.icon }), h(Tooltip, { key: 'fb5a1b523d0a5306feb7615de420cf609cd6738a', 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"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["icon-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["icon-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "attribute": "icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The alias of the icon in the button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the Icon Button which is shown on hover in a tooltip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconButtonVariant",
+                    "resolved": "\"map\" | \"secondary\" | \"tertiary\" | undefined",
+                    "references": {
+                        "IconButtonVariant": {
+                            "location": "import",
+                            "path": "./icon-button.interfaces",
+                            "id": "src/components/icon-button/icon-button.interfaces.ts::IconButtonVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of the Icon Button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "\"secondary\""
+            },
+            "tooltipPlacement": {
+                "type": "string",
+                "attribute": "tooltip-placement",
+                "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 tooltip on hover and focus of the Icon Button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "\"top\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "To disable the Icon Button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showTooltip": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoClick",
+                "name": "dsoClick",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user clicks the Icon Button."
+                },
+                "complexType": {
+                    "original": "IconButtonClickEvent",
+                    "resolved": "IconButtonClickEvent",
+                    "references": {
+                        "IconButtonClickEvent": {
+                            "location": "import",
+                            "path": "./icon-button.interfaces",
+                            "id": "src/components/icon-button/icon-button.interfaces.ts::IconButtonClickEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focuses the button.",
+                    "tags": []
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=icon-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, 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 { IconButtonClickEvent, IconButtonVariant } from \"./icon-button.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-icon-button\",\r\n  styleUrl: \"icon-button.scss\",\r\n  shadow: true,\r\n})\r\nexport class IconButton implements ComponentInterface {\r\n  /**\r\n   * The alias of the icon in the button.\r\n   */\r\n  @Prop({ reflect: true })\r\n  icon!: string | undefined;\r\n\r\n  /**\r\n   * The label of the Icon Button which is shown on hover in a tooltip.\r\n   */\r\n  @Prop({ reflect: true })\r\n  label!: string | undefined;\r\n\r\n  /**\r\n   * The variant of the Icon Button.\r\n   */\r\n  @Prop({ reflect: true })\r\n  variant?: IconButtonVariant = \"secondary\";\r\n\r\n  /**\r\n   * The placement of the tooltip on hover and focus of the Icon Button.\r\n   */\r\n  @Prop({ reflect: true })\r\n  tooltipPlacement: TooltipPlacement = \"top\";\r\n\r\n  /**\r\n   * To disable the Icon Button\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Emitted when the user clicks the Icon Button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClick!: EventEmitter<IconButtonClickEvent>;\r\n\r\n  @State()\r\n  showTooltip = false;\r\n\r\n  /**\r\n   * Focuses the button.\r\n   */\r\n  @Method()\r\n  async setFocus() {\r\n    this.buttonElRef?.focus();\r\n  }\r\n\r\n  private buttonElRef?: HTMLButtonElement;\r\n  private tooltipElRef?: HTMLDivElement;\r\n  private tipArrowElRef?: HTMLSpanElement;\r\n  private tooltipTimeout?: number;\r\n  private cleanUp: TooltipClean | undefined;\r\n  private lastClickTime = 0;\r\n  private tooltipShowDelay = 500;\r\n\r\n  private handleShowTooltip = () => {\r\n    if (this.disabled) {\r\n      return;\r\n    }\r\n\r\n    // Don't show the tooltip if the button is clicked within 500ms of the last click\r\n    if (Date.now() - this.lastClickTime < this.tooltipShowDelay) {\r\n      return;\r\n    }\r\n\r\n    if (this.tooltipTimeout) {\r\n      clearTimeout(this.tooltipTimeout);\r\n    }\r\n\r\n    this.tooltipTimeout = window.setTimeout(() => {\r\n      this.showTooltip = true;\r\n      this.tooltipElRef?.showPopover();\r\n\r\n      if (!this.cleanUp && this.buttonElRef && this.tooltipElRef && this.tipArrowElRef) {\r\n        this.cleanUp = positionTooltip({\r\n          referenceElement: this.buttonElRef,\r\n          tipRef: this.tooltipElRef,\r\n          tipArrowRef: this.tipArrowElRef,\r\n          placementTip: this.tooltipPlacement,\r\n          topPositionSmallViewPort: false,\r\n          halfMainAxisOffset: false,\r\n          forceVisible: true,\r\n        });\r\n      }\r\n    }, this.tooltipShowDelay);\r\n  };\r\n\r\n  private handleHideTooltip = () => {\r\n    if (this.tooltipTimeout) {\r\n      clearTimeout(this.tooltipTimeout);\r\n    }\r\n\r\n    this.showTooltip = false;\r\n    this.tooltipElRef?.hidePopover();\r\n\r\n    if (!this.showTooltip && this.cleanUp) {\r\n      this.cleanUp();\r\n      this.cleanUp = undefined;\r\n    }\r\n  };\r\n\r\n  private handleClick = (e: MouseEvent) => {\r\n    this.lastClickTime = Date.now();\r\n    this.handleHideTooltip();\r\n    this.dsoClick.emit({ originalEvent: e });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <button\r\n        ref={(el) => (this.buttonElRef = el)}\r\n        type=\"button\"\r\n        disabled={this.disabled}\r\n        aria-label={this.label}\r\n        class={`icon-button dso-${this.variant}`}\r\n        onMouseEnter={this.handleShowTooltip}\r\n        onMouseLeave={this.handleHideTooltip}\r\n        onFocus={this.handleShowTooltip}\r\n        onBlur={this.handleHideTooltip}\r\n        onClick={this.handleClick}\r\n      >\r\n        <dso-icon icon={this.icon} />\r\n        <Tooltip\r\n          visible={this.showTooltip}\r\n          onAfterHidden={this.handleHideTooltip}\r\n          tipElementRef={(element) => (this.tooltipElRef = element)}\r\n          tipArrowElementRef={(element) => (this.tipArrowElRef = element)}\r\n        >\r\n          {this.label}\r\n        </Tooltip>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -8,156 +8,7 @@
   opacity: 1;
 }
 
-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;
-}
-
-.open {
-  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;
-}
-.open:focus, .open:focus-visible {
-  outline-offset: 2px;
-}
-.open:active {
-  outline: 0;
-}
-.open {
-  background-color: var(--_dso-button-secondary-background-color, #fff);
-  border-color: var(--_dso-button-secondary-border-color, #39870c);
-  color: var(--_dso-button-secondary-color, #39870c);
-}
-.open {
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-inline-size: 56px;
-  padding-block: 11px;
-  padding-inline: 15px;
-}
-.open:hover {
-  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
-  border-color: var(--_dso-button-secondary-hover-border-color, #275937);
-  color: var(--_dso-button-secondary-hover-color, #275937);
-}
-.open:active {
-  background-color: var(--_dso-button-secondary-active-background-color, #275937);
-  border-color: var(--_dso-button-secondary-active-border-color, #275937);
-  color: var(--_dso-button-secondary-active-color, #fff);
-}
-.open[disabled], .open[disabled]:hover {
-  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
-  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
-  color: var(--_dso-button-secondary-disabled-color, #afcf9d);
-}
-.open.dso-small {
-  line-height: 1rem;
-}
-.open.dso-small dso-icon,
-.open.dso-small svg.di, .open.dso-small.extern::after, .open.dso-small.download::after, .open.dso-small.dso-spinner::before {
-  margin-block-end: -4px;
-  margin-block-start: -4px;
-}
-.open.dso-small.dso-spinner-left::before {
-  block-size: 16px;
-  inline-size: 16px;
-}
-.open.dso-small.dso-spinner-right::after {
-  block-size: 16px;
-  inline-size: 16px;
-}
-.open > span {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-.open.dso-spinner-left[disabled], .open.dso-spinner-right[disabled] {
-  background-color: #fff;
-  border-color: #39870c;
-  color: #39870c;
-}
-.open.dso-spinner-left::before {
-  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");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-end: 8px;
-}
-.open.dso-spinner-left:not([disabled]):hover::before {
-  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");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-end: 8px;
-}
-.open.dso-spinner-left:not([disabled]).dso-small:hover::before {
-  block-size: 16px;
-  inline-size: 16px;
-}
-.open.dso-spinner-right::after {
-  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");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-start: 8px;
-}
-.open.dso-spinner-right:not([disabled]):hover::after {
-  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");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-start: 8px;
-}
-.open.dso-spinner-right:not([disabled]).dso-small:hover::after {
-  block-size: 16px;
-  inline-size: 16px;
-}
 .open {
-  border: 0;
-  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
-  min-inline-size: auto;
-  padding: 8px;
   opacity: 0;
   position: absolute;
   inset-inline-end: 16px;
@@ -204,135 +55,6 @@ button::-moz-focus-inner {
 }
 
 .close {
-  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;
-}
-.close:focus, .close:focus-visible {
-  outline-offset: 2px;
-}
-.close:active {
-  outline: 0;
-}
-.close {
-  background-color: var(--_dso-button-secondary-background-color, #fff);
-  border-color: var(--_dso-button-secondary-border-color, #39870c);
-  color: var(--_dso-button-secondary-color, #39870c);
-}
-.close {
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-inline-size: 56px;
-  padding-block: 11px;
-  padding-inline: 15px;
-}
-.close:hover {
-  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
-  border-color: var(--_dso-button-secondary-hover-border-color, #275937);
-  color: var(--_dso-button-secondary-hover-color, #275937);
-}
-.close:active {
-  background-color: var(--_dso-button-secondary-active-background-color, #275937);
-  border-color: var(--_dso-button-secondary-active-border-color, #275937);
-  color: var(--_dso-button-secondary-active-color, #fff);
-}
-.close[disabled], .close[disabled]:hover {
-  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
-  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
-  color: var(--_dso-button-secondary-disabled-color, #afcf9d);
-}
-.close.dso-small {
-  line-height: 1rem;
-}
-.close.dso-small dso-icon,
-.close.dso-small svg.di, .close.dso-small.extern::after, .close.dso-small.download::after, .close.dso-small.dso-spinner::before {
-  margin-block-end: -4px;
-  margin-block-start: -4px;
-}
-.close.dso-small.dso-spinner-left::before {
-  block-size: 16px;
-  inline-size: 16px;
-}
-.close.dso-small.dso-spinner-right::after {
-  block-size: 16px;
-  inline-size: 16px;
-}
-.close > span {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-.close.dso-spinner-left[disabled], .close.dso-spinner-right[disabled] {
-  background-color: #fff;
-  border-color: #39870c;
-  color: #39870c;
-}
-.close.dso-spinner-left::before {
-  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");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-end: 8px;
-}
-.close.dso-spinner-left:not([disabled]):hover::before {
-  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");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-end: 8px;
-}
-.close.dso-spinner-left:not([disabled]).dso-small:hover::before {
-  block-size: 16px;
-  inline-size: 16px;
-}
-.close.dso-spinner-right::after {
-  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");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-start: 8px;
-}
-.close.dso-spinner-right:not([disabled]):hover::after {
-  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");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-start: 8px;
-}
-.close.dso-spinner-right:not([disabled]).dso-small:hover::after {
-  block-size: 16px;
-  inline-size: 16px;
-}
-.close {
-  border: 0;
-  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
-  min-inline-size: auto;
-  padding: 8px;
   position: absolute;
   inset-block-start: 16px;
   inset-inline-end: 16px;
@@ -348,6 +70,10 @@ ins.editaction-add {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   border-color: #e4f1d4;
   color: #191919;
@@ -375,6 +101,10 @@ ins.editaction-add .wrapper {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   border-color: #e4f1d4;
   color: #191919;
@@ -413,6 +143,10 @@ del.editaction-remove {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   border-color: #f5d8dc;
   color: #191919;
@@ -445,6 +179,10 @@ del.editaction-remove .wrapper {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   border-color: #f5d8dc;
   color: #191919;

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

@@ -6,7 +6,7 @@ const wijzigactieLabels = {
     voegtoe: "Toegevoegd",
 };
 const Dimmer = ({ active, src, alt, ref, click }, children) => active &&
-    src && (h("div", { class: "dimmer" }, h("div", { class: "wrapper", ref: ref }, children[2], children[0], h("img", { src: src, alt: alt }), h("button", { type: "button", class: "close", onClick: click }, h("dso-icon", { icon: "times" }), h("span", null, "Sluiten")), children[1])));
+    src && (h("div", { class: "dimmer" }, h("div", { class: "wrapper", ref: ref }, children[2], children[0], h("img", { src: src, alt: alt }), h("dso-icon-button", { icon: "times", variant: "map", class: "close", label: "Sluiten", onDsoClick: click }), children[1])));
 export class ImageOverlay {
     constructor() {
         this.active = false;
@@ -76,14 +76,14 @@ export class ImageOverlay {
         var _a;
         const { src, alt } = (_a = this.host.querySelector("img")) !== null && _a !== void 0 ? _a : {};
         const editActionLabel = (this.wijzigactie && this.isWijzigactie(this.wijzigactie) && wijzigactieLabels[this.wijzigactie]) || undefined;
-        const button = this.zoomable && (h("button", { type: "button", class: "open", ref: (element) => (this.buttonElement = element), onClick: () => (this.active = true) }, h("dso-icon", { icon: "external-link" }), h("span", null, "Afbeelding vergroot weergeven")));
+        const button = this.zoomable && (h("dso-icon-button", { icon: "external-link", class: "open", variant: "map", label: "Afbeelding vergroot weergeven", ref: (element) => (this.iconButtonElement = element), onDsoClick: () => (this.active = true) }));
         if (this.wijzigactie === "verwijder") {
-            return (h(Host, { onClick: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("del", { class: "editaction-remove" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), click: () => (this.active = false) }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" })), h("div", { class: "editaction-label" }, editActionLabel, ":")), h("slot", null), button)));
+            return (h(Host, { onClick: () => { var _a; return (_a = this.iconButtonElement) === null || _a === void 0 ? void 0 : _a.setFocus(); } }, h("del", { class: "editaction-remove" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), click: () => (this.active = false) }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" })), h("div", { class: "editaction-label" }, editActionLabel, ":")), h("slot", null), button)));
         }
         if (this.wijzigactie === "voegtoe") {
-            return (h(Host, { onClick: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("ins", { class: "editaction-add" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), click: () => (this.active = false) }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" })), h("div", { class: "editaction-label" }, editActionLabel, ":")), h("slot", null), button)));
+            return (h(Host, { onClick: () => { var _a; return (_a = this.iconButtonElement) === null || _a === void 0 ? void 0 : _a.setFocus(); } }, h("ins", { class: "editaction-add" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), click: () => (this.active = false) }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" })), h("div", { class: "editaction-label" }, editActionLabel, ":")), h("slot", null), button)));
         }
-        return (h(Host, { onClick: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), click: () => (this.active = false) }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" }))), h("slot", null), button));
+        return (h(Host, { onClick: () => { var _a; return (_a = this.iconButtonElement) === null || _a === void 0 ? void 0 : _a.setFocus(); } }, h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), click: () => (this.active = false) }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" }))), h("slot", null), button));
     }
     componentDidRender() {
         var _a, _b;
@@ -97,8 +97,11 @@ export class ImageOverlay {
                     }
                     return true;
                 },
-                setReturnFocus: (_a = this.buttonElement) !== null && _a !== void 0 ? _a : false,
+                setReturnFocus: (_a = this.iconButtonElement) !== null && _a !== void 0 ? _a : false,
                 onDeactivate: () => (this.active = false),
+                tabbableOptions: {
+                    getShadowRoot: (node) => { var _a; return (_a = node.shadowRoot) !== null && _a !== void 0 ? _a : undefined; },
+                },
             }).activate();
         }
         else if (!this.active && this.trap) {