@dso-toolkit/core 63.0.0 → 65.0.0

package/dist/types/components/label/label.d.ts

@@ -1,4 +1,5 @@
 import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { LabelStatus } from "./label.interfaces";
 export declare class Label implements ComponentInterface {
     private labelContent;
     private mutationObserver?;
@@ -14,7 +15,7 @@ export declare class Label implements ComponentInterface {
     /**
      * The status of this Label.
      */
-    status?: "primary" | "info" | "success" | "warning" | "danger" | "error" | "bright" | "attention";
+    status?: LabelStatus;
     /**
      * Emitted when the user activates the remove button.
      */

package/dist/types/components/label/label.interfaces.d.ts

@@ -0,0 +1 @@
+export type LabelStatus = "primary" | "success" | "info" | "warning" | "danger" | "error" | "bright" | "attention";

package/dist/types/components/project-item/project-item.d.ts

@@ -0,0 +1,8 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
+export declare class ProjectItem implements ComponentInterface {
+    /**
+     * The label of the project item.
+     */
+    label?: string;
+    render(): any;
+}

package/dist/types/components/tabs/components/tab.d.ts

@@ -0,0 +1,33 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { TabsSwitchEvent } from "../tabs.interfaces";
+/**
+ * @slot - The label for this tab
+ */
+export declare class Tab {
+    host: HTMLDsoTabElement;
+    /**
+     * Makes the tab active. The tab for which the tabpanel is visible is the active tab.
+     */
+    active?: boolean;
+    /**
+     * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.
+     */
+    disabled?: boolean;
+    /**
+     * The optional href of the tab. Creates an anchor if present. Creates a button if absent.
+     */
+    href?: string;
+    /**
+     * Emitted when the user activates tab via click or arrow keys followed by space or enter.
+     */
+    dsoTabSwitch: EventEmitter<TabsSwitchEvent>;
+    /**
+     * @internal
+     */
+    _dsoFocus(): Promise<void>;
+    private anchorOrButtonRef?;
+    private emitEvent;
+    private keyUpHandler;
+    private clickHandler;
+    render(): any;
+}

package/dist/types/components/tabs/tabs.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @slot - The dso-tab elements. These should be direct children of the dso-tabs element.
+ * @slot panel - The panel with the content for the active tab
+ */
+export declare class Tabs {
+    private mutationObserver?;
+    host: HTMLDsoTabsElement;
+    private get enabledTabs();
+    private get firstTab();
+    private get lastTab();
+    private moveFocusToTab;
+    private moveFocusToPreviousTab;
+    private moveFocusToNextTab;
+    private keyUpHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/tabs/tabs.interfaces.d.ts

@@ -0,0 +1,4 @@
+export interface TabsSwitchEvent {
+    originalEvent: MouseEvent | KeyboardEvent;
+    isModifiedEvent: boolean;
+}

package/dist/types/components.d.ts

@@ -7,12 +7,13 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
 import { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionAnimationStartEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
-import { BadgeStatus } from "./components/badge/badge.interfaces";
+import { LabelStatus } from "./components/label/label.interfaces";
 import { AdvancedSelectChangeEvent, AdvancedSelectOption, AdvancedSelectOptionOrGroup, AdvancedSelectRedirectEvent } from "./components/advanced-select/advanced-select.interfaces";
 import { AnnotationActiveChangeEvent, AnnotationWijzigactie } from "./components/annotation/annotation.interfaces";
 import { RenvooiValue } from "./components/renvooi/renvooi.interfaces";
 import { AnnotationKaartClickEvent } from "./components/annotation/annotation-kaart/annotation-kaart.interfaces";
 import { AutosuggestMarkFunction, Suggestion } from "./components/autosuggest/autosuggest.interfaces";
+import { BadgeStatus } from "./components/badge/badge.interfaces";
 import { DsoCardClickedEvent, ImageShape } from "./components/card/card.interfaces";
 import { CardContainerMode } from "./components/card-container/card-container.interfaces";
 import { DatePickerBlurEvent, DatePickerChangeEvent, DatePickerFocusEvent, DatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
@@ -38,16 +39,18 @@ import { ResponsiveElementSize } from "./components/responsive-element/responsiv
 import { DsoScrollEndEvent } from "./components/scrollable/scrollable.interfaces";
 import { SelectableChangeEvent } from "./components/selectable/selectable.interfaces";
 import { SlideToggleActiveEvent } from "./components/slide-toggle/slide-toggle.interfaces";
+import { TabsSwitchEvent } from "./components/tabs/tabs.interfaces";
 import { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
 import { ViewerGridActiveTabSwitchEvent, ViewerGridChangeSizeAnimationEndEvent, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent, ViewerGridMainExpandEvent, ViewerGridMainToggleEvent, ViewerGridMode, ViewerGridPanelSize, ViewerGridVdkTab, ViewerGridVrkTab } from "./components/viewer-grid/viewer-grid.interfaces";
 export { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
 export { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionAnimationStartEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
-export { BadgeStatus } from "./components/badge/badge.interfaces";
+export { LabelStatus } from "./components/label/label.interfaces";
 export { AdvancedSelectChangeEvent, AdvancedSelectOption, AdvancedSelectOptionOrGroup, AdvancedSelectRedirectEvent } from "./components/advanced-select/advanced-select.interfaces";
 export { AnnotationActiveChangeEvent, AnnotationWijzigactie } from "./components/annotation/annotation.interfaces";
 export { RenvooiValue } from "./components/renvooi/renvooi.interfaces";
 export { AnnotationKaartClickEvent } from "./components/annotation/annotation-kaart/annotation-kaart.interfaces";
 export { AutosuggestMarkFunction, Suggestion } from "./components/autosuggest/autosuggest.interfaces";
+export { BadgeStatus } from "./components/badge/badge.interfaces";
 export { DsoCardClickedEvent, ImageShape } from "./components/card/card.interfaces";
 export { CardContainerMode } from "./components/card-container/card-container.interfaces";
 export { DatePickerBlurEvent, DatePickerChangeEvent, DatePickerFocusEvent, DatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
@@ -73,6 +76,7 @@ export { ResponsiveElementSize } from "./components/responsive-element/responsiv
 export { DsoScrollEndEvent } from "./components/scrollable/scrollable.interfaces";
 export { SelectableChangeEvent } from "./components/selectable/selectable.interfaces";
 export { SlideToggleActiveEvent } from "./components/slide-toggle/slide-toggle.interfaces";
+export { TabsSwitchEvent } from "./components/tabs/tabs.interfaces";
 export { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
 export { ViewerGridActiveTabSwitchEvent, ViewerGridChangeSizeAnimationEndEvent, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent, ViewerGridMainExpandEvent, ViewerGridMainToggleEvent, ViewerGridMode, ViewerGridPanelSize, ViewerGridVdkTab, ViewerGridVrkTab } from "./components/viewer-grid/viewer-grid.interfaces";
 export namespace Components {
@@ -92,14 +96,6 @@ export namespace Components {
           * `attachmentCount` takes precedence over `icon`
          */
         "attachmentCount"?: number;
-        /**
-          * A message to be displayed in the heading handle inside a Badge (optional)
-         */
-        "badgeMessage"?: string;
-        /**
-          * The status of the Badge in the heading handle (optional)
-         */
-        "badgeStatus"?: BadgeStatus;
         /**
           * Calling this method will set focus to the handle.
          */
@@ -124,6 +120,14 @@ export namespace Components {
           * To set an icon in the heading handle.
          */
         "icon"?: string;
+        /**
+          * The label to be displayed in the heading handle inside a Label (optional)
+         */
+        "label"?: string;
+        /**
+          * The status of the Label in the heading handle (optional)
+         */
+        "labelStatus"?: LabelStatus;
         /**
           * Set the Accordion Section open.
          */
@@ -774,7 +778,7 @@ export namespace Components {
         /**
           * The status of this Label.
          */
-        "status"?: "primary" | "info" | "success" | "warning" | "danger" | "error" | "bright" | "attention";
+        "status"?: LabelStatus;
         /**
           * Whether the Label is allowed to truncate the contents if it does not fit the container element.
          */
@@ -987,6 +991,12 @@ export namespace Components {
          */
         "size"?: "small" | "medium" | "large";
     }
+    interface DsoProjectItem {
+        /**
+          * The label of the project item.
+         */
+        "label"?: string;
+    }
     /**
      * Met dit component kan een `RenvooiValue` worden gepresenteerd.
      */
@@ -1082,6 +1092,21 @@ export namespace Components {
          */
         "labelledbyId"?: string;
     }
+    interface DsoTab {
+        "_dsoFocus": () => Promise<void>;
+        /**
+          * Makes the tab active. The tab for which the tabpanel is visible is the active tab.
+         */
+        "active"?: boolean;
+        /**
+          * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.
+         */
+        "disabled"?: boolean;
+        /**
+          * The optional href of the tab. Creates an anchor if present. Creates a button if absent.
+         */
+        "href"?: string;
+    }
     interface DsoTable {
         /**
           * Indicates whether the table is currently horizontally scrollable.
@@ -1092,6 +1117,8 @@ export namespace Components {
          */
         "noModal": boolean;
     }
+    interface DsoTabs {
+    }
     interface DsoToggletip {
         /**
           * Toggletip label.
@@ -1346,6 +1373,10 @@ export interface DsoSlideToggleCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoSlideToggleElement;
 }
+export interface DsoTabCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoTabElement;
+}
 export interface DsoTreeViewCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoTreeViewElement;
@@ -1973,6 +2004,12 @@ declare global {
         prototype: HTMLDsoProgressIndicatorElement;
         new (): HTMLDsoProgressIndicatorElement;
     };
+    interface HTMLDsoProjectItemElement extends Components.DsoProjectItem, HTMLStencilElement {
+    }
+    var HTMLDsoProjectItemElement: {
+        prototype: HTMLDsoProjectItemElement;
+        new (): HTMLDsoProjectItemElement;
+    };
     /**
      * Met dit component kan een `RenvooiValue` worden gepresenteerd.
      */
@@ -2050,12 +2087,35 @@ declare global {
         prototype: HTMLDsoSlideToggleElement;
         new (): HTMLDsoSlideToggleElement;
     };
+    interface HTMLDsoTabElementEventMap {
+        "dsoTabSwitch": TabsSwitchEvent;
+    }
+    interface HTMLDsoTabElement extends Components.DsoTab, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsoTabElementEventMap>(type: K, listener: (this: HTMLDsoTabElement, ev: DsoTabCustomEvent<HTMLDsoTabElementEventMap[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 HTMLDsoTabElementEventMap>(type: K, listener: (this: HTMLDsoTabElement, ev: DsoTabCustomEvent<HTMLDsoTabElementEventMap[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 HTMLDsoTabElement: {
+        prototype: HTMLDsoTabElement;
+        new (): HTMLDsoTabElement;
+    };
     interface HTMLDsoTableElement extends Components.DsoTable, HTMLStencilElement {
     }
     var HTMLDsoTableElement: {
         prototype: HTMLDsoTableElement;
         new (): HTMLDsoTableElement;
     };
+    interface HTMLDsoTabsElement extends Components.DsoTabs, HTMLStencilElement {
+    }
+    var HTMLDsoTabsElement: {
+        prototype: HTMLDsoTabsElement;
+        new (): HTMLDsoTabsElement;
+    };
     interface HTMLDsoToggletipElement extends Components.DsoToggletip, HTMLStencilElement {
     }
     var HTMLDsoToggletipElement: {
@@ -2175,12 +2235,15 @@ declare global {
         "dso-panel": HTMLDsoPanelElement;
         "dso-progress-bar": HTMLDsoProgressBarElement;
         "dso-progress-indicator": HTMLDsoProgressIndicatorElement;
+        "dso-project-item": HTMLDsoProjectItemElement;
         "dso-renvooi": HTMLDsoRenvooiElement;
         "dso-responsive-element": HTMLDsoResponsiveElementElement;
         "dso-scrollable": HTMLDsoScrollableElement;
         "dso-selectable": HTMLDsoSelectableElement;
         "dso-slide-toggle": HTMLDsoSlideToggleElement;
+        "dso-tab": HTMLDsoTabElement;
         "dso-table": HTMLDsoTableElement;
+        "dso-tabs": HTMLDsoTabsElement;
         "dso-toggletip": HTMLDsoToggletipElement;
         "dso-tooltip": HTMLDsoTooltipElement;
         "dso-tree-view": HTMLDsoTreeViewElement;
@@ -2204,14 +2267,6 @@ declare namespace LocalJSX {
           * `attachmentCount` takes precedence over `icon`
          */
         "attachmentCount"?: number;
-        /**
-          * A message to be displayed in the heading handle inside a Badge (optional)
-         */
-        "badgeMessage"?: string;
-        /**
-          * The status of the Badge in the heading handle (optional)
-         */
-        "badgeStatus"?: BadgeStatus;
         /**
           * The title of the handle
          */
@@ -2232,6 +2287,14 @@ declare namespace LocalJSX {
           * To set an icon in the heading handle.
          */
         "icon"?: string;
+        /**
+          * The label to be displayed in the heading handle inside a Label (optional)
+         */
+        "label"?: string;
+        /**
+          * The status of the Label in the heading handle (optional)
+         */
+        "labelStatus"?: LabelStatus;
         /**
           * Event emitted when the Accordion Section completes its toggle animation.
          */
@@ -3009,7 +3072,7 @@ declare namespace LocalJSX {
         /**
           * The status of this Label.
          */
-        "status"?: "primary" | "info" | "success" | "warning" | "danger" | "error" | "bright" | "attention";
+        "status"?: LabelStatus;
         /**
           * Whether the Label is allowed to truncate the contents if it does not fit the container element.
          */
@@ -3297,6 +3360,12 @@ declare namespace LocalJSX {
          */
         "size"?: "small" | "medium" | "large";
     }
+    interface DsoProjectItem {
+        /**
+          * The label of the project item.
+         */
+        "label"?: string;
+    }
     /**
      * Met dit component kan een `RenvooiValue` worden gepresenteerd.
      */
@@ -3398,6 +3467,24 @@ declare namespace LocalJSX {
          */
         "onDsoActiveChange"?: (event: DsoSlideToggleCustomEvent<SlideToggleActiveEvent>) => void;
     }
+    interface DsoTab {
+        /**
+          * Makes the tab active. The tab for which the tabpanel is visible is the active tab.
+         */
+        "active"?: boolean;
+        /**
+          * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.
+         */
+        "disabled"?: boolean;
+        /**
+          * The optional href of the tab. Creates an anchor if present. Creates a button if absent.
+         */
+        "href"?: string;
+        /**
+          * Emitted when the user activates tab via click or arrow keys followed by space or enter.
+         */
+        "onDsoTabSwitch"?: (event: DsoTabCustomEvent<TabsSwitchEvent>) => void;
+    }
     interface DsoTable {
         /**
           * Indicates whether the table is currently horizontally scrollable.
@@ -3408,6 +3495,8 @@ declare namespace LocalJSX {
          */
         "noModal"?: boolean;
     }
+    interface DsoTabs {
+    }
     interface DsoToggletip {
         /**
           * Toggletip label.
@@ -3615,12 +3704,15 @@ declare namespace LocalJSX {
         "dso-panel": DsoPanel;
         "dso-progress-bar": DsoProgressBar;
         "dso-progress-indicator": DsoProgressIndicator;
+        "dso-project-item": DsoProjectItem;
         "dso-renvooi": DsoRenvooi;
         "dso-responsive-element": DsoResponsiveElement;
         "dso-scrollable": DsoScrollable;
         "dso-selectable": DsoSelectable;
         "dso-slide-toggle": DsoSlideToggle;
+        "dso-tab": DsoTab;
         "dso-table": DsoTable;
+        "dso-tabs": DsoTabs;
         "dso-toggletip": DsoToggletip;
         "dso-tooltip": DsoTooltip;
         "dso-tree-view": DsoTreeView;
@@ -3679,6 +3771,7 @@ declare module "@stencil/core" {
             "dso-panel": LocalJSX.DsoPanel & JSXBase.HTMLAttributes<HTMLDsoPanelElement>;
             "dso-progress-bar": LocalJSX.DsoProgressBar & JSXBase.HTMLAttributes<HTMLDsoProgressBarElement>;
             "dso-progress-indicator": LocalJSX.DsoProgressIndicator & JSXBase.HTMLAttributes<HTMLDsoProgressIndicatorElement>;
+            "dso-project-item": LocalJSX.DsoProjectItem & JSXBase.HTMLAttributes<HTMLDsoProjectItemElement>;
             /**
              * Met dit component kan een `RenvooiValue` worden gepresenteerd.
              */
@@ -3687,7 +3780,9 @@ declare module "@stencil/core" {
             "dso-scrollable": LocalJSX.DsoScrollable & JSXBase.HTMLAttributes<HTMLDsoScrollableElement>;
             "dso-selectable": LocalJSX.DsoSelectable & JSXBase.HTMLAttributes<HTMLDsoSelectableElement>;
             "dso-slide-toggle": LocalJSX.DsoSlideToggle & JSXBase.HTMLAttributes<HTMLDsoSlideToggleElement>;
+            "dso-tab": LocalJSX.DsoTab & JSXBase.HTMLAttributes<HTMLDsoTabElement>;
             "dso-table": LocalJSX.DsoTable & JSXBase.HTMLAttributes<HTMLDsoTableElement>;
+            "dso-tabs": LocalJSX.DsoTabs & JSXBase.HTMLAttributes<HTMLDsoTabsElement>;
             "dso-toggletip": LocalJSX.DsoToggletip & JSXBase.HTMLAttributes<HTMLDsoToggletipElement>;
             "dso-tooltip": LocalJSX.DsoTooltip & JSXBase.HTMLAttributes<HTMLDsoTooltipElement>;
             "dso-tree-view": LocalJSX.DsoTreeView & JSXBase.HTMLAttributes<HTMLDsoTreeViewElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-toolkit/core",
-  "version": "63.0.0",
+  "version": "65.0.0",
   "description": "DSO Toolkit Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/components/index.js",
@@ -20,10 +20,10 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@stencil/core": "^4.19.2",
+    "@stencil/core": "4.20.0",
     "@stencil/store": "^2.0.16",
     "clsx": "^2.1.1",
-    "dso-toolkit": "^63.0.0",
+    "dso-toolkit": "^65.0.0",
     "escape-string-regexp": "^5.0.0",
     "focus-trap": "^7.5.4",
     "popper-max-size-modifier": "^0.2.0",
@@ -49,7 +49,7 @@
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
     "stencil-inline-svg": "^1.1.0",
-    "tsx": "^4.16.5",
+    "tsx": "^4.19.0",
     "typescript": "^5.5.4"
   },
   "peerDependencies": {