@dso-toolkit/core 83.1.0 → 84.1.0

package/dist/types/components.d.ts

@@ -29,11 +29,14 @@ import { IconButtonClickEvent, IconButtonVariant } from "./components/icon-butto
 import { TooltipPlacement } from "./functional-components/tooltip/tooltip.interfaces";
 import { InfoButtonToggleEvent } from "./components/info-button/info-button.interfaces";
 import { InputRangeChangeEvent } from "./components/input-range/input-range.interfaces";
+import { LegendCloseEvent, LegendContentSwitchEvent, LegendTabItem } from "./components/legend/legend.interfaces";
 import { LegendItemActiveChangeEvent } from "./components/legend-item/legend-item.interfaces";
 import { ListButtonChangeEvent, ListButtonSelectedEvent } from "./components/list-button/list-button.interfaces";
 import { LogoClickEvent, LogoLabelClickEvent } from "./components/logo/logo.interfaces";
 import { BaseLayer, BaseLayerChangeEvent } from "./components/map-base-layers/map-base-layers.interfaces";
 import { MapControlsToggleEvent } from "./components/map-controls/map-controls.interfaces";
+import { MapLayerActiveChangeEvent } from "./components/map-layer/map-layer.interfaces";
+import { MapLayerObjectActiveChangeEvent } from "./components/map-layer/components/map-layer-object.interfaces";
 import { Overlay, OverlayChangeEvent } from "./components/map-overlays/map-overlays.interfaces";
 import { MarkBarClearEvent, MarkBarFocusOptions, MarkBarInputEvent, MarkBarPaginationEvent } from "./components/mark-bar/mark-bar.interfaces";
 import { ModalCloseEvent } from "./components/modal/modal.interfaces";
@@ -77,11 +80,14 @@ export { IconButtonClickEvent, IconButtonVariant } from "./components/icon-butto
 export { TooltipPlacement } from "./functional-components/tooltip/tooltip.interfaces";
 export { InfoButtonToggleEvent } from "./components/info-button/info-button.interfaces";
 export { InputRangeChangeEvent } from "./components/input-range/input-range.interfaces";
+export { LegendCloseEvent, LegendContentSwitchEvent, LegendTabItem } from "./components/legend/legend.interfaces";
 export { LegendItemActiveChangeEvent } from "./components/legend-item/legend-item.interfaces";
 export { ListButtonChangeEvent, ListButtonSelectedEvent } from "./components/list-button/list-button.interfaces";
 export { LogoClickEvent, LogoLabelClickEvent } from "./components/logo/logo.interfaces";
 export { BaseLayer, BaseLayerChangeEvent } from "./components/map-base-layers/map-base-layers.interfaces";
 export { MapControlsToggleEvent } from "./components/map-controls/map-controls.interfaces";
+export { MapLayerActiveChangeEvent } from "./components/map-layer/map-layer.interfaces";
+export { MapLayerObjectActiveChangeEvent } from "./components/map-layer/components/map-layer-object.interfaces";
 export { Overlay, OverlayChangeEvent } from "./components/map-overlays/map-overlays.interfaces";
 export { MarkBarClearEvent, MarkBarFocusOptions, MarkBarInputEvent, MarkBarPaginationEvent } from "./components/mark-bar/mark-bar.interfaces";
 export { ModalCloseEvent } from "./components/modal/modal.interfaces";
@@ -387,11 +393,6 @@ export namespace Components {
           * To show text when no results are found.
          */
         "notFoundLabel"?: string;
-        /**
-          * Whether the previous suggestions will be presented when the input gets focus again.
-          * @default false
-         */
-        "suggestOnFocus": boolean;
         /**
           * The suggestions for the value of the slotted input element.  This can be an array of type Suggestion or an Array of type SuggestionGroup.  A suggestionGroup must have a `groupLabel` and `suggestions`.  A suggestion must have a `value` and can have a `type`, an `item` or `extras`.  The `type` is used to style the suggestion. `item` can be use to reference the original object that was used to create the suggestion. `extras` is an array of additional strings to further specify the suggestion.  The value should be null when no suggestions have been fetched.
           * @default null
@@ -846,6 +847,13 @@ export namespace Components {
          */
         "truncate"?: boolean;
     }
+    interface DsoLegend {
+        /**
+          * TabItems in the legend topbar
+          * @default []
+         */
+        "tabItems": LegendTabItem[];
+    }
     interface DsoLegendItem {
         /**
           * Controls whether this Legend Item can be active or not
@@ -951,6 +959,27 @@ export namespace Components {
          */
         "toggleVisibility": (e: MouseEvent | KeyboardEvent) => Promise<void>;
     }
+    interface DsoMapLayer {
+        /**
+          * A boolean to indicate if the Map Layer is capable of being activated. When `true` a Slide Toggle displays on the right.
+          * @default false
+         */
+        "activatable": boolean;
+        /**
+          * An optional boolean indicating whether the Map Layer is active.
+         */
+        "active"?: boolean;
+        /**
+          * The label of the Map Layer.
+         */
+        "label": string | undefined;
+    }
+    interface DsoMapLayerObject {
+        /**
+          * An optional boolean indicating whether the Map Layer Object is active.
+         */
+        "active"?: boolean;
+    }
     interface DsoMapOverlays {
         /**
           * To group the overlays together. Generally the default value suffices.
@@ -1018,6 +1047,11 @@ export namespace Components {
         "placement": TooltipPlacement;
     }
     interface DsoOzonContent {
+        /**
+          * Boolean indicating that this dso-ozon-content is part of an annotated context. If true the content of the toggletip for "IntIoRef" will show a "Kenmerken en kaart" annotation button.
+          * @default false
+         */
+        "annotated": boolean;
         /**
           * A BegripResolver that will be called for STOP element "IntRef". If the ref-attribute of IntRef points to a Begrip it should return the `<Definitie>` of that Begrip otherwise it should return undefined.
          */
@@ -1487,6 +1521,10 @@ export interface DsoLabelCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoLabelElement;
 }
+export interface DsoLegendCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoLegendElement;
+}
 export interface DsoLegendItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoLegendItemElement;
@@ -1507,6 +1545,14 @@ export interface DsoMapControlsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoMapControlsElement;
 }
+export interface DsoMapLayerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoMapLayerElement;
+}
+export interface DsoMapLayerObjectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoMapLayerObjectElement;
+}
 export interface DsoMapOverlaysCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoMapOverlaysElement;
@@ -2038,6 +2084,24 @@ declare global {
         prototype: HTMLDsoLabelElement;
         new (): HTMLDsoLabelElement;
     };
+    interface HTMLDsoLegendElementEventMap {
+        "dsoContentSwitch": LegendContentSwitchEvent;
+        "dsoClose": LegendCloseEvent;
+    }
+    interface HTMLDsoLegendElement extends Components.DsoLegend, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsoLegendElementEventMap>(type: K, listener: (this: HTMLDsoLegendElement, ev: DsoLegendCustomEvent<HTMLDsoLegendElementEventMap[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 HTMLDsoLegendElementEventMap>(type: K, listener: (this: HTMLDsoLegendElement, ev: DsoLegendCustomEvent<HTMLDsoLegendElementEventMap[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 HTMLDsoLegendElement: {
+        prototype: HTMLDsoLegendElement;
+        new (): HTMLDsoLegendElement;
+    };
     interface HTMLDsoLegendItemElementEventMap {
         "dsoActiveChange": LegendItemActiveChangeEvent;
         "dsoMouseEnter": any;
@@ -2129,6 +2193,42 @@ declare global {
         prototype: HTMLDsoMapControlsElement;
         new (): HTMLDsoMapControlsElement;
     };
+    interface HTMLDsoMapLayerElementEventMap {
+        "dsoActiveChange": MapLayerActiveChangeEvent;
+    }
+    interface HTMLDsoMapLayerElement extends Components.DsoMapLayer, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsoMapLayerElementEventMap>(type: K, listener: (this: HTMLDsoMapLayerElement, ev: DsoMapLayerCustomEvent<HTMLDsoMapLayerElementEventMap[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 HTMLDsoMapLayerElementEventMap>(type: K, listener: (this: HTMLDsoMapLayerElement, ev: DsoMapLayerCustomEvent<HTMLDsoMapLayerElementEventMap[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 HTMLDsoMapLayerElement: {
+        prototype: HTMLDsoMapLayerElement;
+        new (): HTMLDsoMapLayerElement;
+    };
+    interface HTMLDsoMapLayerObjectElementEventMap {
+        "dsoActiveChange": MapLayerObjectActiveChangeEvent;
+        "dsoMouseEnter": any;
+        "dsoMouseLeave": any;
+    }
+    interface HTMLDsoMapLayerObjectElement extends Components.DsoMapLayerObject, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsoMapLayerObjectElementEventMap>(type: K, listener: (this: HTMLDsoMapLayerObjectElement, ev: DsoMapLayerObjectCustomEvent<HTMLDsoMapLayerObjectElementEventMap[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 HTMLDsoMapLayerObjectElementEventMap>(type: K, listener: (this: HTMLDsoMapLayerObjectElement, ev: DsoMapLayerObjectCustomEvent<HTMLDsoMapLayerObjectElementEventMap[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 HTMLDsoMapLayerObjectElement: {
+        prototype: HTMLDsoMapLayerObjectElement;
+        new (): HTMLDsoMapLayerObjectElement;
+    };
     interface HTMLDsoMapOverlaysElementEventMap {
         "dsoToggleOverlay": OverlayChangeEvent;
     }
@@ -2552,11 +2652,14 @@ declare global {
         "dso-info-button": HTMLDsoInfoButtonElement;
         "dso-input-range": HTMLDsoInputRangeElement;
         "dso-label": HTMLDsoLabelElement;
+        "dso-legend": HTMLDsoLegendElement;
         "dso-legend-item": HTMLDsoLegendItemElement;
         "dso-list-button": HTMLDsoListButtonElement;
         "dso-logo": HTMLDsoLogoElement;
         "dso-map-base-layers": HTMLDsoMapBaseLayersElement;
         "dso-map-controls": HTMLDsoMapControlsElement;
+        "dso-map-layer": HTMLDsoMapLayerElement;
+        "dso-map-layer-object": HTMLDsoMapLayerObjectElement;
         "dso-map-overlays": HTMLDsoMapOverlaysElement;
         "dso-mark-bar": HTMLDsoMarkBarElement;
         "dso-modal": HTMLDsoModalElement;
@@ -2927,11 +3030,6 @@ declare namespace LocalJSX {
           * Emitted when a suggestion is selected. The `detail` property of the `CustomEvent` will contain the selected suggestion.
          */
         "onDsoSelect"?: (event: DsoAutosuggestCustomEvent<Suggestion>) => void;
-        /**
-          * Whether the previous suggestions will be presented when the input gets focus again.
-          * @default false
-         */
-        "suggestOnFocus"?: boolean;
         /**
           * The suggestions for the value of the slotted input element.  This can be an array of type Suggestion or an Array of type SuggestionGroup.  A suggestionGroup must have a `groupLabel` and `suggestions`.  A suggestion must have a `value` and can have a `type`, an `item` or `extras`.  The `type` is used to style the suggestion. `item` can be use to reference the original object that was used to create the suggestion. `extras` is an array of additional strings to further specify the suggestion.  The value should be null when no suggestions have been fetched.
           * @default null
@@ -3465,6 +3563,21 @@ declare namespace LocalJSX {
          */
         "truncate"?: boolean;
     }
+    interface DsoLegend {
+        /**
+          * Emitted when the user closes the Legend.
+         */
+        "onDsoClose"?: (event: DsoLegendCustomEvent<LegendCloseEvent>) => void;
+        /**
+          * Emitted when a tabItem is pressed.
+         */
+        "onDsoContentSwitch"?: (event: DsoLegendCustomEvent<LegendContentSwitchEvent>) => void;
+        /**
+          * TabItems in the legend topbar
+          * @default []
+         */
+        "tabItems"?: LegendTabItem[];
+    }
     interface DsoLegendItem {
         /**
           * Controls whether this Legend Item can be active or not
@@ -3609,6 +3722,43 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
     }
+    interface DsoMapLayer {
+        /**
+          * A boolean to indicate if the Map Layer is capable of being activated. When `true` a Slide Toggle displays on the right.
+          * @default false
+         */
+        "activatable"?: boolean;
+        /**
+          * An optional boolean indicating whether the Map Layer is active.
+         */
+        "active"?: boolean;
+        /**
+          * The label of the Map Layer.
+         */
+        "label": string | undefined;
+        /**
+          * Emitted when user activates or deactivates the Map Layer.
+         */
+        "onDsoActiveChange"?: (event: DsoMapLayerCustomEvent<MapLayerActiveChangeEvent>) => void;
+    }
+    interface DsoMapLayerObject {
+        /**
+          * An optional boolean indicating whether the Map Layer Object is active.
+         */
+        "active"?: boolean;
+        /**
+          * Emitted when user activates or deactivates the Map Layer Object.
+         */
+        "onDsoActiveChange"?: (event: DsoMapLayerObjectCustomEvent<MapLayerObjectActiveChangeEvent>) => void;
+        /**
+          * Emitted when the mouse enters the Map Layer Object.
+         */
+        "onDsoMouseEnter"?: (event: DsoMapLayerObjectCustomEvent<any>) => void;
+        /**
+          * Emitted when the mouse leaves the Map Layer Object.
+         */
+        "onDsoMouseLeave"?: (event: DsoMapLayerObjectCustomEvent<any>) => void;
+    }
     interface DsoMapOverlays {
         /**
           * To group the overlays together. Generally the default value suffices.
@@ -3700,6 +3850,11 @@ declare namespace LocalJSX {
         "placement"?: TooltipPlacement;
     }
     interface DsoOzonContent {
+        /**
+          * Boolean indicating that this dso-ozon-content is part of an annotated context. If true the content of the toggletip for "IntIoRef" will show a "Kenmerken en kaart" annotation button.
+          * @default false
+         */
+        "annotated"?: boolean;
         /**
           * A BegripResolver that will be called for STOP element "IntRef". If the ref-attribute of IntRef points to a Begrip it should return the `<Definitie>` of that Begrip otherwise it should return undefined.
          */
@@ -4197,11 +4352,14 @@ declare namespace LocalJSX {
         "dso-info-button": DsoInfoButton;
         "dso-input-range": DsoInputRange;
         "dso-label": DsoLabel;
+        "dso-legend": DsoLegend;
         "dso-legend-item": DsoLegendItem;
         "dso-list-button": DsoListButton;
         "dso-logo": DsoLogo;
         "dso-map-base-layers": DsoMapBaseLayers;
         "dso-map-controls": DsoMapControls;
+        "dso-map-layer": DsoMapLayer;
+        "dso-map-layer-object": DsoMapLayerObject;
         "dso-map-overlays": DsoMapOverlays;
         "dso-mark-bar": DsoMarkBar;
         "dso-modal": DsoModal;
@@ -4272,11 +4430,14 @@ declare module "@stencil/core" {
             "dso-info-button": LocalJSX.DsoInfoButton & JSXBase.HTMLAttributes<HTMLDsoInfoButtonElement>;
             "dso-input-range": LocalJSX.DsoInputRange & JSXBase.HTMLAttributes<HTMLDsoInputRangeElement>;
             "dso-label": LocalJSX.DsoLabel & JSXBase.HTMLAttributes<HTMLDsoLabelElement>;
+            "dso-legend": LocalJSX.DsoLegend & JSXBase.HTMLAttributes<HTMLDsoLegendElement>;
             "dso-legend-item": LocalJSX.DsoLegendItem & JSXBase.HTMLAttributes<HTMLDsoLegendItemElement>;
             "dso-list-button": LocalJSX.DsoListButton & JSXBase.HTMLAttributes<HTMLDsoListButtonElement>;
             "dso-logo": LocalJSX.DsoLogo & JSXBase.HTMLAttributes<HTMLDsoLogoElement>;
             "dso-map-base-layers": LocalJSX.DsoMapBaseLayers & JSXBase.HTMLAttributes<HTMLDsoMapBaseLayersElement>;
             "dso-map-controls": LocalJSX.DsoMapControls & JSXBase.HTMLAttributes<HTMLDsoMapControlsElement>;
+            "dso-map-layer": LocalJSX.DsoMapLayer & JSXBase.HTMLAttributes<HTMLDsoMapLayerElement>;
+            "dso-map-layer-object": LocalJSX.DsoMapLayerObject & JSXBase.HTMLAttributes<HTMLDsoMapLayerObjectElement>;
             "dso-map-overlays": LocalJSX.DsoMapOverlays & JSXBase.HTMLAttributes<HTMLDsoMapOverlaysElement>;
             "dso-mark-bar": LocalJSX.DsoMarkBar & JSXBase.HTMLAttributes<HTMLDsoMarkBarElement>;
             "dso-modal": LocalJSX.DsoModal & JSXBase.HTMLAttributes<HTMLDsoModalElement>;

package/dist/types/stencil-public-runtime.d.ts

@@ -1,4 +1,6 @@
-declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type CustomMethodDecorator<T> = (target: object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+type MixinInstance<F> = F extends (base: MixedInCtor) => MixedInCtor<infer I> ? I : never;
 export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
 }
@@ -123,6 +125,9 @@ export interface AttachInternalsDecorator {
 export interface ListenDecorator {
     (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;
 }
+export interface ResolveVarFunction {
+    <T>(variable: T): string;
+}
 export interface ListenOptions {
     /**
      * Handlers can also be registered for an event other than the host itself.
@@ -151,7 +156,13 @@ export interface StateDecorator {
     (): PropertyDecorator;
 }
 export interface WatchDecorator {
-    (propName: string): CustomMethodDecorator<any>;
+    (propName: any): CustomMethodDecorator<(newValue?: any, oldValue?: any, propName?: any, ...args: any[]) => any | void>;
+}
+export interface PropSerializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => string | null>;
+}
+export interface AttrDeserializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => any>;
 }
 export interface UserBuildConditionals {
     isDev: boolean;
@@ -200,6 +211,24 @@ export declare const AttachInternals: AttachInternalsDecorator;
  * https://stenciljs.com/docs/events#listen-decorator
  */
 export declare const Listen: ListenDecorator;
+/**
+ * The `resolveVar()` function is a compile-time utility that resolves const variables
+ * and object properties to their string literal values. This allows variables to be
+ * used in `@Listen` and `@Event` decorators instead of hardcoded strings.
+ *
+ * @example
+ * ```ts
+ * const MY_EVENT = 'myEvent';
+ * @Listen(resolveVar(MY_EVENT))
+ * ```
+ *
+ * @example
+ * ```ts
+ * const EVENTS = { MY_EVENT: 'myEvent' } as const;
+ * @Event({ eventName: resolveVar(EVENTS.MY_EVENT) })
+ * ```
+ */
+export declare const resolveVar: ResolveVarFunction;
 /**
  * The `@Method()` decorator is used to expose methods on the public API.
  * Class methods decorated with the @Method() decorator can be called directly
@@ -233,6 +262,14 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
+/**
+ * Decorator to serialize a property to an attribute string.
+ */
+export declare const PropSerialize: PropSerializeDecorator;
+/**
+ * Decorator to deserialize an attribute string to a property.
+ */
+export declare const AttrDeserialize: AttrDeserializeDecorator;
 export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
 export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
@@ -349,6 +386,58 @@ export declare function readTask(task: RafCallback): void;
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
  */
 export declare const setErrorHandler: (handler: ErrorHandler) => void;
+export type TagTransformer = (tag: string) => string;
+/**
+ * Sets a tag transformer to be used when rendering your custom elements.
+ * ```ts
+ * setTagTransformer((tag) => {
+ *  if (tag.startsWith('my-')) return `new-${tag}`
+ *  return tag;
+ * });
+ * ```
+ * Will mean all your components that start with `my-` are defined instead with `new-my-` prefix.
+ *
+ * @param transformer the transformer function to use which must return a string.
+ */
+export declare function setTagTransformer(transformer: TagTransformer): void;
+/**
+ * Transforms a tag name using a transformer set via `setTagTransformer`
+ *
+ * @param tag - the tag to transform e.g. `my-tag`
+ * @returns the transformed tag e.g. `new-my-tag`
+ */
+export declare function transformTag(tag: string): string;
+/**
+ * @deprecated - Use `MixedInCtor` instead:
+ * ```ts
+ * import { MixedInCtor } from '@stencil/core';
+ *
+ * const AFactoryFn = <B extends MixedInCtor>(Base: B) => {class A extends Base { propA = A }; return A;}
+ * ```
+ */
+export type MixinFactory = (base: MixedInCtor) => MixedInCtor;
+export type MixedInCtor<T = {}> = new (...args: any[]) => T;
+/**
+ * Compose multiple mixin classes into a single constructor.
+ * The resulting class has the combined instance types of all mixed-in classes.
+ *
+ * Example:
+ * ```ts
+ * import { Mixin, MixedInCtor } from '@stencil/core';
+ *
+ * const AWrap = <B extends MixedInCtor>(Base: B) => {class A extends Base { propA = A }; return A;}
+ * const BWrap = <B extends MixedInCtor>(Base: B) => {class B extends Base { propB = B }; return B;}
+ * const CWrap = <B extends MixedInCtor>(Base: B) => {class C extends Base { propC = C }; return C;}
+ *
+ * class X extends Mixin(AWrap, BWrap, CWrap) {
+ *   render() { return <div>{this.propA} {this.propB} {this.propC}</div>; }
+ * }
+ * ```
+ *
+ * @param mixinFactories mixin factory functions that return a class which extends from the provided class.
+ * @returns a class that is composed from extending each of the provided classes in the order they were provided.
+ */
+export declare function Mixin<const TMixins extends readonly MixinFactory[]>(...mixinFactories: TMixins): abstract new (...args: any[]) => UnionToIntersection<MixinInstance<TMixins[number]>>;
 /**
  * This file gets copied to all distributions of stencil component collections.
  * - no imports
@@ -1700,6 +1789,7 @@ export interface CustomElementsDefineOptions {
     exclude?: string[];
     resourcesUrl?: string;
     syncQueue?: boolean;
+    /** @deprecated in-favour of `setTagTransformer` and `transformTag` */
     transformTagName?: (tagName: string) => string;
     jmp?: (c: Function) => any;
     raf?: (c: FrameRequestCallback) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-toolkit/core",
-  "version": "83.1.0",
+  "version": "84.1.0",
   "description": "DSO Toolkit Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/components/index.js",
@@ -21,10 +21,10 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
     "@popperjs/core": "^2.11.8",
-    "@stencil/core": "4.36.1",
+    "@stencil/core": "4.39.0",
     "@stencil/store": "^2.2.1",
     "clsx": "^2.1.1",
-    "dso-toolkit": "^83.1.0",
+    "dso-toolkit": "^84.1.0",
     "escape-string-regexp": "^5.0.0",
     "focus-trap": "^7.6.6",
     "i18next": "^25.6.2",
@@ -57,7 +57,7 @@
     "typescript": "~5.9.3"
   },
   "peerDependencies": {
-    "dso-toolkit": "83.1.0"
+    "dso-toolkit": "84.1.0"
   },
   "nx": {
     "includedScripts": []

package/dist/bundle/p--8xOEWb7.js

@@ -1,49 +0,0 @@
-import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment } from './p-Dm38fPV4.js';
-import { d as defineCustomElement$2 } from './p-CXctuPtC.js';
-import { d as defineCustomElement$1 } from './p-CWK4j8Tr.js';
-
-const infoCss = ":host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative}:host{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}:host{--_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:#f2f2f2;color:#191919}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}dso-icon-button{position:absolute;inset-inline-end:8px;inset-block-start:8px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:inset(0)}";
-
-const Info = /*@__PURE__*/ proxyCustomElement(class Info extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.dsoClose = createEvent(this, "dsoClose", 7);
-    }
-    render() {
-        return (h(Fragment, { key: '6ea8fd02c7e0df97ecf3c57a895334f312c513c3' }, h("slot", { key: '1721e91318a52c8c4208b2acac069c723c748ec5' }), !this.fixed && (h("dso-icon-button", { key: 'fac469f4c2ee028d3f45b83353f038f7cb95fe58', label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
-    }
-    static get style() { return infoCss; }
-}, [257, "dso-info", {
-        "fixed": [516],
-        "active": [516]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dso-info", "dso-icon", "dso-icon-button"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dso-info":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Info);
-            }
-            break;
-        case "dso-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "dso-icon-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { Info as I, defineCustomElement as d };
-//# sourceMappingURL=p--8xOEWb7.js.map
-
-//# sourceMappingURL=p--8xOEWb7.js.map

package/dist/bundle/p--8xOEWb7.js.map

@@ -1 +0,0 @@
-{"file":"p--8xOEWb7.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,itDAAitD;;MCOptD,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAAC,CAAA,CAAA;;;;;;;IAmBf,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACZ,CAAC,IAAI,CAAC,KAAK,KACV,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,GAC7D,CACH,CACQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n  display: block;\r\n\r\n  @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n  display: none;\r\n}\r\n\r\ndso-icon-button {\r\n  position: absolute;\r\n  inset-inline-end: units.$u1;\r\n  inset-block-start: units.$u1;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n","import { Component, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-info\",\r\n  styleUrl: \"./info.scss\",\r\n  shadow: true,\r\n})\r\nexport class Info {\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fixed?: boolean;\r\n\r\n  /**\r\n   * Whether the Info is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the close button.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <slot></slot>\r\n        {!this.fixed && (\r\n          <dso-icon-button\r\n            label=\"Sluiten\"\r\n            variant=\"tertiary\"\r\n            icon=\"times\"\r\n            onDsoClick={(e) => this.dsoClose.emit(e.detail.originalEvent)}\r\n          />\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/p-B9a249cd.js

@@ -1,12 +0,0 @@
-import { h, F as Fragment } from './p-Dm38fPV4.js';
-
-const AnnotationListRenvooiValues = ({ values }) => {
-    return (h(Fragment, null, values === null || values === void 0 ? void 0 : values.map((v, i) => (h(Fragment, null,
-        i > 0 && ", ",
-        h("dso-renvooi", { value: v }))))));
-};
-
-export { AnnotationListRenvooiValues as A };
-//# sourceMappingURL=p-B9a249cd.js.map
-
-//# sourceMappingURL=p-B9a249cd.js.map