@dso-toolkit/core 100.0.0 → 100.2.0

package/dist/types/components.d.ts

@@ -26,6 +26,7 @@ import { DocumentComponentAnnotationsWijzigactie, DocumentComponentInputType, Do
 import { OzonContentBegripResolver, OzonContentClickEvent, OzonContentInputType, OzonContentMarkItemHighlightEvent, OzonContentUrlResolver } from "./components/ozon-content/ozon-content.interfaces";
 import { DropdownMenuInternalState, DropdownMenuItemClickEvent, DropdownMenuItemType } from "./components/dropdown-menu/dropdown-menu.interfaces";
 import { ExpandableAnimationEndEvent, ExpandableAnimationStartEvent } from "./components/expandable/expandable.interfaces";
+import { GridColumnCloseEvent } from "./components/grid-column/grid-column.interfaces";
 import { HeaderAuthStatus, HeaderCompactMode, HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
 import { HistoryItemClickEvent, HistoryItemType } from "./components/history-item/history-item.interfaces";
 import { IconButtonClickEvent, IconButtonVariant } from "./components/icon-button/icon-button.interfaces";
@@ -51,6 +52,8 @@ import { ResponsiveElementSize } from "./components/responsive-element/responsiv
 import { DsoScrollEndEvent } from "./components/scrollable/scrollable.interfaces";
 import { SegmentedButtonChangeEvent, SegmentedButtonOption } from "./components/segmented-button/segmented-button.interfaces";
 import { SelectableChangeEvent } from "./components/selectable/selectable.interfaces";
+import { ShoppingCartMode, ShoppingCartToggleEvent } from "./components/shopping-cart/shopping-cart.interfaces";
+import { ShoppingCartItemCloseEvent, ShoppingCartItemDeleteEvent, ShoppingCartItemEditEvent, ShoppingCartItemMode } from "./components/shopping-cart/shopping-cart-item/shopping-cart-item.interfaces";
 import { SkiplinkClickEvent } from "./components/skiplink/skiplink.interfaces";
 import { SlideToggleActiveEvent } from "./components/slide-toggle/slide-toggle.interfaces";
 import { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from "./components/survey-rating/survey-rating.interfaces";
@@ -79,6 +82,7 @@ export { DocumentComponentAnnotationsWijzigactie, DocumentComponentInputType, Do
 export { OzonContentBegripResolver, OzonContentClickEvent, OzonContentInputType, OzonContentMarkItemHighlightEvent, OzonContentUrlResolver } from "./components/ozon-content/ozon-content.interfaces";
 export { DropdownMenuInternalState, DropdownMenuItemClickEvent, DropdownMenuItemType } from "./components/dropdown-menu/dropdown-menu.interfaces";
 export { ExpandableAnimationEndEvent, ExpandableAnimationStartEvent } from "./components/expandable/expandable.interfaces";
+export { GridColumnCloseEvent } from "./components/grid-column/grid-column.interfaces";
 export { HeaderAuthStatus, HeaderCompactMode, HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
 export { HistoryItemClickEvent, HistoryItemType } from "./components/history-item/history-item.interfaces";
 export { IconButtonClickEvent, IconButtonVariant } from "./components/icon-button/icon-button.interfaces";
@@ -104,6 +108,8 @@ export { ResponsiveElementSize } from "./components/responsive-element/responsiv
 export { DsoScrollEndEvent } from "./components/scrollable/scrollable.interfaces";
 export { SegmentedButtonChangeEvent, SegmentedButtonOption } from "./components/segmented-button/segmented-button.interfaces";
 export { SelectableChangeEvent } from "./components/selectable/selectable.interfaces";
+export { ShoppingCartMode, ShoppingCartToggleEvent } from "./components/shopping-cart/shopping-cart.interfaces";
+export { ShoppingCartItemCloseEvent, ShoppingCartItemDeleteEvent, ShoppingCartItemEditEvent, ShoppingCartItemMode } from "./components/shopping-cart/shopping-cart-item/shopping-cart-item.interfaces";
 export { SkiplinkClickEvent } from "./components/skiplink/skiplink.interfaces";
 export { SlideToggleActiveEvent } from "./components/slide-toggle/slide-toggle.interfaces";
 export { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from "./components/survey-rating/survey-rating.interfaces";
@@ -684,6 +690,17 @@ export namespace Components {
          */
         "open"?: boolean;
     }
+    interface DsoGridColumn {
+        /**
+          * The column widths per breakpoint (e.g. "xs-4", "md-6 lg-8"). Without "col-" prefix. Widths only; push, pull and offset are not supported.
+         */
+        "columns": string | undefined;
+        /**
+          * When set, the column content expands to the full width of the row and renders as a modal overlay with a backdrop. The column keeps its own place in the row; the overlay panel is anchored to the row and scrolls with the page. Below the sm breakpoint the overlay does not apply and the content stays in the flow of the page.
+          * @default false
+         */
+        "overlay": boolean;
+    }
     interface DsoHeader {
         /**
           * Used to show the login/logout option. 'none' renders nothing.
@@ -735,6 +752,8 @@ export namespace Components {
          */
         "userProfileUrl"?: string;
     }
+    interface DsoHeroImage {
+    }
     interface DsoHighlightBox {
         /**
           * For a bordered Highlight Box.
@@ -1330,6 +1349,40 @@ export namespace Components {
          */
         "value"?: string;
     }
+    interface DsoShoppingCart {
+        /**
+          * The mode of the Shopping Cart.
+          * @default "side"
+         */
+        "mode": ShoppingCartMode;
+        /**
+          * When set, a toggle button is rendered. In the `side` mode this is a button to expand the Shopping Cart, in the `main` mode this is a button to collapse the Shopping Cart.
+          * @default false
+         */
+        "toggleable": boolean;
+    }
+    interface DsoShoppingCartItem {
+        /**
+          * When set an edit (pencil) action is rendered.
+          * @default false
+         */
+        "editable": boolean;
+        /**
+          * The mode of the Shopping Cart Item.
+          * @default "view"
+         */
+        "mode": ShoppingCartItemMode;
+        /**
+          * When set a delete (trash) action is rendered.
+          * @default false
+         */
+        "removable": boolean;
+        /**
+          * When set a warning icon is rendered before the name.
+          * @default false
+         */
+        "warning": boolean;
+    }
     interface DsoSkiplink {
         /**
           * link text
@@ -1552,6 +1605,10 @@ export interface DsoExpandableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoExpandableElement;
 }
+export interface DsoGridColumnCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoGridColumnElement;
+}
 export interface DsoHeaderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoHeaderElement;
@@ -1668,6 +1725,14 @@ export interface DsoSelectableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoSelectableElement;
 }
+export interface DsoShoppingCartCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoShoppingCartElement;
+}
+export interface DsoShoppingCartItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoShoppingCartItemElement;
+}
 export interface DsoSkiplinkCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoSkiplinkElement;
@@ -2043,6 +2108,23 @@ declare global {
         prototype: HTMLDsoExpandableElement;
         new (): HTMLDsoExpandableElement;
     };
+    interface HTMLDsoGridColumnElementEventMap {
+        "dsoClose": GridColumnCloseEvent;
+    }
+    interface HTMLDsoGridColumnElement extends Components.DsoGridColumn, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsoGridColumnElementEventMap>(type: K, listener: (this: HTMLDsoGridColumnElement, ev: DsoGridColumnCustomEvent<HTMLDsoGridColumnElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsoGridColumnElementEventMap>(type: K, listener: (this: HTMLDsoGridColumnElement, ev: DsoGridColumnCustomEvent<HTMLDsoGridColumnElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsoGridColumnElement: {
+        prototype: HTMLDsoGridColumnElement;
+        new (): HTMLDsoGridColumnElement;
+    };
     interface HTMLDsoHeaderElementEventMap {
         "dsoHeaderClick": HeaderEvent;
     }
@@ -2060,6 +2142,12 @@ declare global {
         prototype: HTMLDsoHeaderElement;
         new (): HTMLDsoHeaderElement;
     };
+    interface HTMLDsoHeroImageElement extends Components.DsoHeroImage, HTMLStencilElement {
+    }
+    var HTMLDsoHeroImageElement: {
+        prototype: HTMLDsoHeroImageElement;
+        new (): HTMLDsoHeroImageElement;
+    };
     interface HTMLDsoHighlightBoxElement extends Components.DsoHighlightBox, HTMLStencilElement {
     }
     var HTMLDsoHighlightBoxElement: {
@@ -2595,6 +2683,42 @@ declare global {
         prototype: HTMLDsoSelectableElement;
         new (): HTMLDsoSelectableElement;
     };
+    interface HTMLDsoShoppingCartElementEventMap {
+        "dsoToggle": ShoppingCartToggleEvent;
+    }
+    interface HTMLDsoShoppingCartElement extends Components.DsoShoppingCart, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsoShoppingCartElementEventMap>(type: K, listener: (this: HTMLDsoShoppingCartElement, ev: DsoShoppingCartCustomEvent<HTMLDsoShoppingCartElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsoShoppingCartElementEventMap>(type: K, listener: (this: HTMLDsoShoppingCartElement, ev: DsoShoppingCartCustomEvent<HTMLDsoShoppingCartElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsoShoppingCartElement: {
+        prototype: HTMLDsoShoppingCartElement;
+        new (): HTMLDsoShoppingCartElement;
+    };
+    interface HTMLDsoShoppingCartItemElementEventMap {
+        "dsoEdit": ShoppingCartItemEditEvent;
+        "dsoDelete": ShoppingCartItemDeleteEvent;
+        "dsoClose": ShoppingCartItemCloseEvent;
+    }
+    interface HTMLDsoShoppingCartItemElement extends Components.DsoShoppingCartItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsoShoppingCartItemElementEventMap>(type: K, listener: (this: HTMLDsoShoppingCartItemElement, ev: DsoShoppingCartItemCustomEvent<HTMLDsoShoppingCartItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsoShoppingCartItemElementEventMap>(type: K, listener: (this: HTMLDsoShoppingCartItemElement, ev: DsoShoppingCartItemCustomEvent<HTMLDsoShoppingCartItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsoShoppingCartItemElement: {
+        prototype: HTMLDsoShoppingCartItemElement;
+        new (): HTMLDsoShoppingCartItemElement;
+    };
     interface HTMLDsoSkiplinkElementEventMap {
         "dsoSkiplinkClick": SkiplinkClickEvent;
     }
@@ -2770,7 +2894,9 @@ declare global {
         "dso-dropdown-menu-group": HTMLDsoDropdownMenuGroupElement;
         "dso-dropdown-menu-item": HTMLDsoDropdownMenuItemElement;
         "dso-expandable": HTMLDsoExpandableElement;
+        "dso-grid-column": HTMLDsoGridColumnElement;
         "dso-header": HTMLDsoHeaderElement;
+        "dso-hero-image": HTMLDsoHeroImageElement;
         "dso-highlight-box": HTMLDsoHighlightBoxElement;
         "dso-history-item": HTMLDsoHistoryItemElement;
         "dso-icon": HTMLDsoIconElement;
@@ -2806,6 +2932,8 @@ declare global {
         "dso-scrollable": HTMLDsoScrollableElement;
         "dso-segmented-button": HTMLDsoSegmentedButtonElement;
         "dso-selectable": HTMLDsoSelectableElement;
+        "dso-shopping-cart": HTMLDsoShoppingCartElement;
+        "dso-shopping-cart-item": HTMLDsoShoppingCartItemElement;
         "dso-skiplink": HTMLDsoSkiplinkElement;
         "dso-slide-toggle": HTMLDsoSlideToggleElement;
         "dso-survey-rating": HTMLDsoSurveyRatingElement;
@@ -3510,6 +3638,21 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
     }
+    interface DsoGridColumn {
+        /**
+          * The column widths per breakpoint (e.g. "xs-4", "md-6 lg-8"). Without "col-" prefix. Widths only; push, pull and offset are not supported.
+         */
+        "columns": string | undefined;
+        /**
+          * Emitted when the user dismisses the overlay: a click on the backdrop or the Escape key.
+         */
+        "onDsoClose"?: (event: DsoGridColumnCustomEvent<GridColumnCloseEvent>) => void;
+        /**
+          * When set, the column content expands to the full width of the row and renders as a modal overlay with a backdrop. The column keeps its own place in the row; the overlay panel is anchored to the row and scrolls with the page. Below the sm breakpoint the overlay does not apply and the content stays in the flow of the page.
+          * @default false
+         */
+        "overlay"?: boolean;
+    }
     interface DsoHeader {
         /**
           * Used to show the login/logout option. 'none' renders nothing.
@@ -3565,6 +3708,8 @@ declare namespace LocalJSX {
          */
         "userProfileUrl"?: string;
     }
+    interface DsoHeroImage {
+    }
     interface DsoHighlightBox {
         /**
           * For a bordered Highlight Box.
@@ -4292,6 +4437,56 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface DsoShoppingCart {
+        /**
+          * The mode of the Shopping Cart.
+          * @default "side"
+         */
+        "mode"?: ShoppingCartMode;
+        /**
+          * Emitted when the user clicks the toggle button (the button in the `side` mode or the "Sluiten" button in the `main` mode).
+         */
+        "onDsoToggle"?: (event: DsoShoppingCartCustomEvent<ShoppingCartToggleEvent>) => void;
+        /**
+          * When set, a toggle button is rendered. In the `side` mode this is a button to expand the Shopping Cart, in the `main` mode this is a button to collapse the Shopping Cart.
+          * @default false
+         */
+        "toggleable"?: boolean;
+    }
+    interface DsoShoppingCartItem {
+        /**
+          * When set an edit (pencil) action is rendered.
+          * @default false
+         */
+        "editable"?: boolean;
+        /**
+          * The mode of the Shopping Cart Item.
+          * @default "view"
+         */
+        "mode"?: ShoppingCartItemMode;
+        /**
+          * Emitted when the user clicks the close button in the `edit` mode.
+         */
+        "onDsoClose"?: (event: DsoShoppingCartItemCustomEvent<ShoppingCartItemCloseEvent>) => void;
+        /**
+          * Emitted when the user clicks the delete (trash) action.
+         */
+        "onDsoDelete"?: (event: DsoShoppingCartItemCustomEvent<ShoppingCartItemDeleteEvent>) => void;
+        /**
+          * Emitted when the user clicks the edit (pencil) action.
+         */
+        "onDsoEdit"?: (event: DsoShoppingCartItemCustomEvent<ShoppingCartItemEditEvent>) => void;
+        /**
+          * When set a delete (trash) action is rendered.
+          * @default false
+         */
+        "removable"?: boolean;
+        /**
+          * When set a warning icon is rendered before the name.
+          * @default false
+         */
+        "warning"?: boolean;
+    }
     interface DsoSkiplink {
         /**
           * link text
@@ -4674,6 +4869,10 @@ declare namespace LocalJSX {
         "enableAnimation": boolean;
         "minimumHeight": number;
     }
+    interface DsoGridColumnAttributes {
+        "columns": string | undefined;
+        "overlay": boolean;
+    }
     interface DsoHeaderAttributes {
         "compact": HeaderCompactMode;
         "authStatus": HeaderAuthStatus;
@@ -4858,6 +5057,16 @@ declare namespace LocalJSX {
         "indeterminate": boolean;
         "infoFixed": boolean;
     }
+    interface DsoShoppingCartAttributes {
+        "mode": ShoppingCartMode;
+        "toggleable": boolean;
+    }
+    interface DsoShoppingCartItemAttributes {
+        "mode": ShoppingCartItemMode;
+        "warning": boolean;
+        "editable": boolean;
+        "removable": boolean;
+    }
     interface DsoSkiplinkAttributes {
         "to": string | undefined;
         "label": string | undefined;
@@ -4925,7 +5134,9 @@ declare namespace LocalJSX {
         "dso-dropdown-menu-group": Omit<DsoDropdownMenuGroup, keyof DsoDropdownMenuGroupAttributes> & { [K in keyof DsoDropdownMenuGroup & keyof DsoDropdownMenuGroupAttributes]?: DsoDropdownMenuGroup[K] } & { [K in keyof DsoDropdownMenuGroup & keyof DsoDropdownMenuGroupAttributes as `attr:${K}`]?: DsoDropdownMenuGroupAttributes[K] } & { [K in keyof DsoDropdownMenuGroup & keyof DsoDropdownMenuGroupAttributes as `prop:${K}`]?: DsoDropdownMenuGroup[K] };
         "dso-dropdown-menu-item": Omit<DsoDropdownMenuItem, keyof DsoDropdownMenuItemAttributes> & { [K in keyof DsoDropdownMenuItem & keyof DsoDropdownMenuItemAttributes]?: DsoDropdownMenuItem[K] } & { [K in keyof DsoDropdownMenuItem & keyof DsoDropdownMenuItemAttributes as `attr:${K}`]?: DsoDropdownMenuItemAttributes[K] } & { [K in keyof DsoDropdownMenuItem & keyof DsoDropdownMenuItemAttributes as `prop:${K}`]?: DsoDropdownMenuItem[K] } & OneOf<"type", DsoDropdownMenuItem["type"], DsoDropdownMenuItemAttributes["type"]>;
         "dso-expandable": Omit<DsoExpandable, keyof DsoExpandableAttributes> & { [K in keyof DsoExpandable & keyof DsoExpandableAttributes]?: DsoExpandable[K] } & { [K in keyof DsoExpandable & keyof DsoExpandableAttributes as `attr:${K}`]?: DsoExpandableAttributes[K] } & { [K in keyof DsoExpandable & keyof DsoExpandableAttributes as `prop:${K}`]?: DsoExpandable[K] };
+        "dso-grid-column": Omit<DsoGridColumn, keyof DsoGridColumnAttributes> & { [K in keyof DsoGridColumn & keyof DsoGridColumnAttributes]?: DsoGridColumn[K] } & { [K in keyof DsoGridColumn & keyof DsoGridColumnAttributes as `attr:${K}`]?: DsoGridColumnAttributes[K] } & { [K in keyof DsoGridColumn & keyof DsoGridColumnAttributes as `prop:${K}`]?: DsoGridColumn[K] } & OneOf<"columns", DsoGridColumn["columns"], DsoGridColumnAttributes["columns"]>;
         "dso-header": Omit<DsoHeader, keyof DsoHeaderAttributes> & { [K in keyof DsoHeader & keyof DsoHeaderAttributes]?: DsoHeader[K] } & { [K in keyof DsoHeader & keyof DsoHeaderAttributes as `attr:${K}`]?: DsoHeaderAttributes[K] } & { [K in keyof DsoHeader & keyof DsoHeaderAttributes as `prop:${K}`]?: DsoHeader[K] };
+        "dso-hero-image": DsoHeroImage;
         "dso-highlight-box": Omit<DsoHighlightBox, keyof DsoHighlightBoxAttributes> & { [K in keyof DsoHighlightBox & keyof DsoHighlightBoxAttributes]?: DsoHighlightBox[K] } & { [K in keyof DsoHighlightBox & keyof DsoHighlightBoxAttributes as `attr:${K}`]?: DsoHighlightBoxAttributes[K] } & { [K in keyof DsoHighlightBox & keyof DsoHighlightBoxAttributes as `prop:${K}`]?: DsoHighlightBox[K] };
         "dso-history-item": Omit<DsoHistoryItem, keyof DsoHistoryItemAttributes> & { [K in keyof DsoHistoryItem & keyof DsoHistoryItemAttributes]?: DsoHistoryItem[K] } & { [K in keyof DsoHistoryItem & keyof DsoHistoryItemAttributes as `attr:${K}`]?: DsoHistoryItemAttributes[K] } & { [K in keyof DsoHistoryItem & keyof DsoHistoryItemAttributes as `prop:${K}`]?: DsoHistoryItem[K] } & OneOf<"type", DsoHistoryItem["type"], DsoHistoryItemAttributes["type"]>;
         "dso-icon": Omit<DsoIcon, keyof DsoIconAttributes> & { [K in keyof DsoIcon & keyof DsoIconAttributes]?: DsoIcon[K] } & { [K in keyof DsoIcon & keyof DsoIconAttributes as `attr:${K}`]?: DsoIconAttributes[K] } & { [K in keyof DsoIcon & keyof DsoIconAttributes as `prop:${K}`]?: DsoIcon[K] };
@@ -4961,6 +5172,8 @@ declare namespace LocalJSX {
         "dso-scrollable": Omit<DsoScrollable, keyof DsoScrollableAttributes> & { [K in keyof DsoScrollable & keyof DsoScrollableAttributes]?: DsoScrollable[K] } & { [K in keyof DsoScrollable & keyof DsoScrollableAttributes as `attr:${K}`]?: DsoScrollableAttributes[K] } & { [K in keyof DsoScrollable & keyof DsoScrollableAttributes as `prop:${K}`]?: DsoScrollable[K] };
         "dso-segmented-button": Omit<DsoSegmentedButton, keyof DsoSegmentedButtonAttributes> & { [K in keyof DsoSegmentedButton & keyof DsoSegmentedButtonAttributes]?: DsoSegmentedButton[K] } & { [K in keyof DsoSegmentedButton & keyof DsoSegmentedButtonAttributes as `attr:${K}`]?: DsoSegmentedButtonAttributes[K] } & { [K in keyof DsoSegmentedButton & keyof DsoSegmentedButtonAttributes as `prop:${K}`]?: DsoSegmentedButton[K] } & OneOf<"label", DsoSegmentedButton["label"], DsoSegmentedButtonAttributes["label"]>;
         "dso-selectable": Omit<DsoSelectable, keyof DsoSelectableAttributes> & { [K in keyof DsoSelectable & keyof DsoSelectableAttributes]?: DsoSelectable[K] } & { [K in keyof DsoSelectable & keyof DsoSelectableAttributes as `attr:${K}`]?: DsoSelectableAttributes[K] } & { [K in keyof DsoSelectable & keyof DsoSelectableAttributes as `prop:${K}`]?: DsoSelectable[K] } & OneOf<"type", DsoSelectable["type"], DsoSelectableAttributes["type"]>;
+        "dso-shopping-cart": Omit<DsoShoppingCart, keyof DsoShoppingCartAttributes> & { [K in keyof DsoShoppingCart & keyof DsoShoppingCartAttributes]?: DsoShoppingCart[K] } & { [K in keyof DsoShoppingCart & keyof DsoShoppingCartAttributes as `attr:${K}`]?: DsoShoppingCartAttributes[K] } & { [K in keyof DsoShoppingCart & keyof DsoShoppingCartAttributes as `prop:${K}`]?: DsoShoppingCart[K] };
+        "dso-shopping-cart-item": Omit<DsoShoppingCartItem, keyof DsoShoppingCartItemAttributes> & { [K in keyof DsoShoppingCartItem & keyof DsoShoppingCartItemAttributes]?: DsoShoppingCartItem[K] } & { [K in keyof DsoShoppingCartItem & keyof DsoShoppingCartItemAttributes as `attr:${K}`]?: DsoShoppingCartItemAttributes[K] } & { [K in keyof DsoShoppingCartItem & keyof DsoShoppingCartItemAttributes as `prop:${K}`]?: DsoShoppingCartItem[K] };
         "dso-skiplink": Omit<DsoSkiplink, keyof DsoSkiplinkAttributes> & { [K in keyof DsoSkiplink & keyof DsoSkiplinkAttributes]?: DsoSkiplink[K] } & { [K in keyof DsoSkiplink & keyof DsoSkiplinkAttributes as `attr:${K}`]?: DsoSkiplinkAttributes[K] } & { [K in keyof DsoSkiplink & keyof DsoSkiplinkAttributes as `prop:${K}`]?: DsoSkiplink[K] } & OneOf<"to", DsoSkiplink["to"], DsoSkiplinkAttributes["to"]> & OneOf<"label", DsoSkiplink["label"], DsoSkiplinkAttributes["label"]>;
         "dso-slide-toggle": Omit<DsoSlideToggle, keyof DsoSlideToggleAttributes> & { [K in keyof DsoSlideToggle & keyof DsoSlideToggleAttributes]?: DsoSlideToggle[K] } & { [K in keyof DsoSlideToggle & keyof DsoSlideToggleAttributes as `attr:${K}`]?: DsoSlideToggleAttributes[K] } & { [K in keyof DsoSlideToggle & keyof DsoSlideToggleAttributes as `prop:${K}`]?: DsoSlideToggle[K] };
         "dso-survey-rating": DsoSurveyRating;
@@ -5007,7 +5220,9 @@ declare module "@stencil/core" {
             "dso-dropdown-menu-group": LocalJSX.IntrinsicElements["dso-dropdown-menu-group"] & JSXBase.HTMLAttributes<HTMLDsoDropdownMenuGroupElement>;
             "dso-dropdown-menu-item": LocalJSX.IntrinsicElements["dso-dropdown-menu-item"] & JSXBase.HTMLAttributes<HTMLDsoDropdownMenuItemElement>;
             "dso-expandable": LocalJSX.IntrinsicElements["dso-expandable"] & JSXBase.HTMLAttributes<HTMLDsoExpandableElement>;
+            "dso-grid-column": LocalJSX.IntrinsicElements["dso-grid-column"] & JSXBase.HTMLAttributes<HTMLDsoGridColumnElement>;
             "dso-header": LocalJSX.IntrinsicElements["dso-header"] & JSXBase.HTMLAttributes<HTMLDsoHeaderElement>;
+            "dso-hero-image": LocalJSX.IntrinsicElements["dso-hero-image"] & JSXBase.HTMLAttributes<HTMLDsoHeroImageElement>;
             "dso-highlight-box": LocalJSX.IntrinsicElements["dso-highlight-box"] & JSXBase.HTMLAttributes<HTMLDsoHighlightBoxElement>;
             "dso-history-item": LocalJSX.IntrinsicElements["dso-history-item"] & JSXBase.HTMLAttributes<HTMLDsoHistoryItemElement>;
             "dso-icon": LocalJSX.IntrinsicElements["dso-icon"] & JSXBase.HTMLAttributes<HTMLDsoIconElement>;
@@ -5046,6 +5261,8 @@ declare module "@stencil/core" {
             "dso-scrollable": LocalJSX.IntrinsicElements["dso-scrollable"] & JSXBase.HTMLAttributes<HTMLDsoScrollableElement>;
             "dso-segmented-button": LocalJSX.IntrinsicElements["dso-segmented-button"] & JSXBase.HTMLAttributes<HTMLDsoSegmentedButtonElement>;
             "dso-selectable": LocalJSX.IntrinsicElements["dso-selectable"] & JSXBase.HTMLAttributes<HTMLDsoSelectableElement>;
+            "dso-shopping-cart": LocalJSX.IntrinsicElements["dso-shopping-cart"] & JSXBase.HTMLAttributes<HTMLDsoShoppingCartElement>;
+            "dso-shopping-cart-item": LocalJSX.IntrinsicElements["dso-shopping-cart-item"] & JSXBase.HTMLAttributes<HTMLDsoShoppingCartItemElement>;
             "dso-skiplink": LocalJSX.IntrinsicElements["dso-skiplink"] & JSXBase.HTMLAttributes<HTMLDsoSkiplinkElement>;
             "dso-slide-toggle": LocalJSX.IntrinsicElements["dso-slide-toggle"] & JSXBase.HTMLAttributes<HTMLDsoSlideToggleElement>;
             "dso-survey-rating": LocalJSX.IntrinsicElements["dso-survey-rating"] & JSXBase.HTMLAttributes<HTMLDsoSurveyRatingElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-toolkit/core",
-  "version": "100.0.0",
+  "version": "100.2.0",
   "description": "DSO Toolkit Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/components/index.js",
@@ -17,26 +17,26 @@
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
     "@stencil/core": "4.43.5",
-    "@stencil/store": "^2.2.2",
+    "@stencil/store": "^2.2.4",
     "clsx": "^2.1.1",
     "escape-string-regexp": "^5.0.0",
     "focus-trap": "^8.2.2",
     "i18next": "^26.3.6",
     "tabbable": "^6.5.0",
     "uuid": "^14.0.1",
-    "dso-toolkit": "100.0.0"
+    "dso-toolkit": "100.2.0"
   },
   "devDependencies": {
     "@stencil/angular-output-target": "^1.4.1",
     "@stencil/react-output-target": "^1.6.1",
-    "@stencil/sass": "^3.3.2",
+    "@stencil/sass": "^3.3.3",
     "@types/debounce": "^1.2.4",
     "@types/lodash.kebabcase": "^4.1.9",
     "@types/lodash.random": "^3.2.9",
     "@types/lodash.samplesize": "^4.2.9",
     "@types/node": "^24.13.3",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "concurrently": "^10.0.4",
     "debounce": "^3.0.0",
     "lodash.kebabcase": "^4.1.1",
@@ -47,11 +47,11 @@
     "react-dom": "^19.2.8",
     "rimraf": "^6.1.3",
     "stencil-inline-svg": "^1.1.0",
-    "tsx": "^4.23.1",
+    "tsx": "^4.23.12",
     "typescript": "~5.9.3"
   },
   "peerDependencies": {
-    "dso-toolkit": "100.0.0"
+    "dso-toolkit": "100.2.0"
   },
   "nx": {
     "includedScripts": []

package/dist/cjs/dso-icon-button.cjs.entry.js

@@ -1,93 +0,0 @@
-'use strict';
-
-var index = require('./index-fOjUpMJG.js');
-var positionTooltip_function = require('./position-tooltip.function-DCOaqlbY.js');
-var tooltip_functionalComponent = require('./tooltip.functional-component-D6oJmzwD.js');
-require('./floating-ui.dom-BKTTOpb1.js');
-
-const iconButtonCss = () => `.dso-tooltip {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --_dso-link-color: currentColor;   --_dso-link-hover-color: currentColor;   --_dso-link-visited-color: currentColor;   --_dso-link-download-icon: var(--_dso-di-download-wit);   --_dso-link-extern-icon: var(--_dso-di-external-link-wit);   --_dso-link-phone-icon: var(--_dso-di-call-wit);   --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit);   --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit);   --_dso-icon-button-secondary-active-color: #fff;   --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-secondary-toggled-color: #fff;   --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2);   --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-color: #f2f2f2;   --_dso-icon-button-tertiary-hover-color: #fff;   --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-tertiary-toggled-color: #fff;   --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;   --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit);   --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit);   --_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;   overflow: unset;   margin: 0;   border: 0;   padding: 0;   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));   opacity: 0;   visibility: hidden;   max-inline-size: 320px; } .dso-tooltip .tooltip-inner {   --_dso-span-role-paragraph-margin-block: 8px;   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --_dso-link-color: currentColor;   --_dso-link-hover-color: currentColor;   --_dso-link-visited-color: currentColor;   --_dso-link-download-icon: var(--_dso-di-download-wit);   --_dso-link-extern-icon: var(--_dso-di-external-link-wit);   --_dso-link-phone-icon: var(--_dso-di-call-wit);   --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit);   --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit);   --_dso-icon-button-secondary-active-color: #fff;   --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-secondary-toggled-color: #fff;   --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2);   --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-color: #f2f2f2;   --_dso-icon-button-tertiary-hover-color: #fff;   --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-tertiary-toggled-color: #fff;   --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;   --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit);   --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit);   --_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;   font-size: 1rem;   font-weight: normal;   padding-block: 0;   padding-inline: 8px;   border-radius: 4px;   line-height: 1.5; } .dso-tooltip .tooltip-arrow {   position: absolute;   background-color: #666;   border-start-start-radius: 4px;   block-size: 8px;   inline-size: 8px;   pointer-events: none;   z-index: -1; }  :host {   display: inline-block;   line-height: 1;   position: var(--_dso-icon-button-position, static);   inset-block-start: var(--_dso-icon-button-inset-block-start, 0);   inset-inline-end: var(--_dso-icon-button-inset-inline-end, 0); }  *, *::after, *::before {   box-sizing: border-box; }  .dso-secondary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-secondary:focus, .dso-secondary:focus-visible {   outline-offset: 2px; } .dso-secondary:active {   outline: 0; } .dso-secondary.extern::after, .dso-secondary.download::after {   content: "";   display: inline-block; } .dso-secondary {   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);   float: var(--_dso-button-float-secondary, none);   border-width: 1px;   border-style: solid;   border-radius: 4px;   line-height: 1.5;   min-inline-size: 56px;   inline-size: var(--_dso-button-inline-size, auto);   padding-block: 11px;   padding-inline: 15px; } .dso-secondary: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);   float: var(--_dso-button-float-secondary, none); } .dso-secondary: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);   float: var(--_dso-button-float-secondary, none); } .dso-secondary[disabled], .dso-secondary[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);   float: var(--_dso-button-float-secondary, none); } .dso-secondary.dso-small {   line-height: 1rem; } .dso-secondary.dso-small dso-icon, .dso-secondary.dso-small.extern::after, .dso-secondary.dso-small.download::after, .dso-secondary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-secondary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-extra-small {   line-height: 1rem; } .dso-secondary.dso-extra-small dso-icon, .dso-secondary.dso-extra-small.extern::after, .dso-secondary.dso-extra-small.download::after, .dso-secondary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-secondary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-extra-small {   padding-block: 9px; } .dso-secondary dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } .dso-secondary span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } .dso-secondary dso-icon + span:not(.sr-only) {   margin-inline-start: 8px; } .dso-secondary.dso-spinner-left[disabled], .dso-secondary.dso-spinner-right[disabled] {   background-color: #fff;   border-color: #39870c;   color: #39870c; } .dso-secondary.dso-spinner-left::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%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; } .dso-secondary.dso-spinner-left:not([disabled]):hover::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%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; } .dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-spinner-right::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%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; } .dso-secondary.dso-spinner-right:not([disabled]):hover::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%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; } .dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {   block-size: 16px;   inline-size: 16px; } .dso-secondary {   padding-inline: calc(8px - 1px);   padding-block: calc(8px - 1px);   border-start-start-radius: var(--_dso-icon-button-border-start-start-radius, 4px);   border-start-end-radius: var(--_dso-icon-button-border-start-end-radius, 4px);   border-end-end-radius: var(--_dso-icon-button-border-end-end-radius, 4px);   border-end-start-radius: var(--_dso-icon-button-border-end-start-radius, 4px);   border-block-end-width: var(--_dso-icon-button-border-block-end-width, 1px);   border-inline-end-width: var(--_dso-icon-button-border-inline-end-width, 1px); } .dso-secondary:not([disabled]):active {   background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   color: var(--_dso-icon-button-secondary-active-color, #fff); } .dso-secondary:not([disabled]).toggled {   background-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);   border-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);   color: var(--_dso-icon-button-secondary-toggled-color, #fff); } .dso-secondary:not([disabled]).toggled:hover {   background-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);   border-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27); } .dso-secondary:not([disabled]).toggled:active {   background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   color: var(--_dso-icon-button-secondary-active-color, #fff); }  .dso-tertiary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible {   outline-offset: 2px; } .dso-tertiary:active {   outline: 0; } .dso-tertiary.extern::after, .dso-tertiary.download::after {   content: "";   display: inline-block; } .dso-tertiary {   padding-inline: 0;   padding-block: 0;   color: var(--_dso-icon-button-tertiary-color, #39870c);   background-color: transparent;   border: 0; } .dso-tertiary:not([disabled]):hover {   color: var(--_dso-icon-button-tertiary-hover-color, var(--_dso-icon-button-tertiary-color, #275937)); } .dso-tertiary:not([disabled]):active {   color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #1f472c)); } .dso-tertiary:not([disabled]).toggled {   color: var(--_dso-icon-button-tertiary-toggled-color, var(--_dso-icon-button-tertiary-color, #275937)); } .dso-tertiary:not([disabled]).toggled:hover {   color: var(--_dso-icon-button-tertiary-toggled-hover-color, var(--_dso-icon-button-tertiary-color, #1b3e27)); } .dso-tertiary:not([disabled]).toggled:active {   color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #1f472c)); } .dso-tertiary[disabled] {   color: var(--_dso-icon-button-tertiary-disabled-color, var(--_dso-icon-button-tertiary-color, #afcf9d)); }  .dso-map {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-map:focus, .dso-map:focus-visible {   outline-offset: 2px; } .dso-map:active {   outline: 0; } .dso-map {   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);   float: var(--_dso-button-float-secondary, none);   border-width: 1px;   border-style: solid;   border-radius: 4px;   line-height: 1.5;   min-inline-size: 56px;   inline-size: var(--_dso-button-inline-size, auto);   padding-block: 11px;   padding-inline: 15px; } .dso-map: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);   float: var(--_dso-button-float-secondary, none); } .dso-map: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);   float: var(--_dso-button-float-secondary, none); } .dso-map[disabled], .dso-map[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);   float: var(--_dso-button-float-secondary, none); } .dso-map.dso-small {   line-height: 1rem; } .dso-map.dso-small dso-icon, .dso-map.dso-small.extern::after, .dso-map.dso-small.download::after, .dso-map.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-map.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-extra-small {   line-height: 1rem; } .dso-map.dso-extra-small dso-icon, .dso-map.dso-extra-small.extern::after, .dso-map.dso-extra-small.download::after, .dso-map.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-map.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-extra-small {   padding-block: 9px; } .dso-map dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } .dso-map span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } .dso-map dso-icon + span:not(.sr-only) {   margin-inline-start: 8px; } .dso-map.dso-spinner-left[disabled], .dso-map.dso-spinner-right[disabled] {   background-color: #fff;   border-color: #39870c;   color: #39870c; } .dso-map.dso-spinner-left::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%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; } .dso-map.dso-spinner-left:not([disabled]):hover::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%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; } .dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-spinner-right::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%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; } .dso-map.dso-spinner-right:not([disabled]):hover::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%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; } .dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after {   block-size: 16px;   inline-size: 16px; } .dso-map {   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);   border: 0;   font-weight: 600;   margin-inline-end: 16px;   padding-block: 8px;   padding-inline: 16px;   white-space: nowrap; } .dso-map:focus, .dso-map:focus-visible {   outline-offset: -1px; } .dso-map:has(span.sr-only):has(dso-icon) {   padding: 8px;   min-inline-size: auto;   block-size: 40px;   inline-size: 40px; } .dso-map {   padding-inline: 8px;   padding-block: 8px;   border: 0;   margin-inline-end: 0;   box-shadow: var(--_dso-icon-button-map-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.3));   border-start-start-radius: var(--_dso-icon-button-border-start-start-radius, 4px);   border-start-end-radius: var(--_dso-icon-button-border-start-end-radius, 4px);   border-end-end-radius: var(--_dso-icon-button-border-end-end-radius, 4px);   border-end-start-radius: var(--_dso-icon-button-border-end-start-radius, 4px); } .dso-map:not([disabled]):active {   background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   color: var(--_dso-icon-button-secondary-active-color, #fff); } .dso-map:not([disabled]).toggled {   background-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);   border-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);   color: var(--_dso-icon-button-secondary-toggled-color, #fff); } .dso-map:not([disabled]).toggled:hover {   background-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);   border-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27); } .dso-map:not([disabled]).toggled:active {   background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); }  .icon-button {   min-inline-size: auto;   cursor: pointer; } .icon-button[disabled] {   cursor: default; }`;
-
-const IconButton = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.dsoClick = index.createEvent(this, "dsoClick", 3);
-        this.lastClickTime = 0;
-        this.tooltipShowDelay = 500;
-        /**
-         * 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.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;
-            }
-            this.clearToolTipTimeout();
-            this.tooltipTimeout = window.setTimeout(() => {
-                if (!this.tooltipElRef?.isConnected) {
-                    return;
-                }
-                this.tooltipElRef?.showPopover();
-                if (!this.cleanUpFunction && this.buttonElRef && this.tooltipElRef && this.tooltipArrowElRef) {
-                    this.cleanUpFunction = positionTooltip_function.positionTooltip({
-                        referenceElement: this.buttonElRef,
-                        tipRef: this.tooltipElRef,
-                        tipArrowRef: this.tooltipArrowElRef,
-                        placementTip: this.tooltipPlacement,
-                        topPositionSmallViewPort: false,
-                        halfMainAxisOffset: false,
-                        forceVisible: true,
-                    });
-                }
-            }, this.tooltipShowDelay);
-        };
-        this.clearToolTipTimeout = () => {
-            if (this.tooltipTimeout) {
-                clearTimeout(this.tooltipTimeout);
-            }
-        };
-        this.handleHideTooltip = () => {
-            this.clearToolTipTimeout();
-            if (this.tooltipElRef?.isConnected && this.tooltipElRef.matches(":popover-open")) {
-                this.tooltipElRef.hidePopover();
-            }
-            this.cleanUpTooltip();
-        };
-        this.handleClick = (event) => {
-            this.lastClickTime = Date.now();
-            this.handleHideTooltip();
-            this.dsoClick.emit({ originalEvent: event, toggled: !this.toggled });
-        };
-    }
-    /**
-     * Focuses the button.
-     */
-    async setFocus() {
-        this.buttonElRef?.focus();
-    }
-    cleanUpTooltip() {
-        this.cleanUpFunction?.();
-        this.cleanUpFunction = undefined;
-    }
-    disconnectedCallback() {
-        this.clearToolTipTimeout();
-        this.cleanUpTooltip();
-    }
-    render() {
-        return (index.h("button", { key: '4c930bb2fd38dfce8db767072ff7ad994dfbd869', ref: (element) => (this.buttonElRef = element), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant} ${this.toggled ? "toggled" : ""}`, "aria-pressed": this.toggled?.toString(), "aria-expanded": this.expanded?.toString(), onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, index.h("dso-icon", { key: '1137f9ab4dcdb979544781d03b657e24359cc801', icon: this.icon, "aria-hidden": "true" }), index.h(tooltip_functionalComponent.Tooltip, { key: '5ec39345d360e556d7b23a11d67eec64aaab48ab', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
-    }
-};
-IconButton.style = iconButtonCss();
-
-exports.dso_icon_button = IconButton;