@baloise/ds-core 16.3.0 → 16.4.0-nightly.20240916

package/dist/types/components.d.ts

@@ -7,24 +7,26 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { BalConfigState } from "./utils/config";
 import { AccordionState, BalAriaForm as BalAriaForm1, BalConfigState as BalConfigState1 } from "./interfaces";
-import { BalCarouselItemData } from "./components/bal-carousel/bal-carousel.type";
+import { BalCarouselItemData, BalSlide } from "./components/bal-carousel/bal-carousel.type";
 import { BalCheckboxOption } from "./components/bal-checkbox/bal-checkbox.type";
 import { BalAriaForm } from "./utils/form";
 import { BalOption } from "./utils/dropdown";
 import { OverlayEventDetail } from "./components/bal-modal/bal-modal.type";
 import { PopoverPresentOptions } from "./components/bal-popover/bal-popover";
 import { BalRadioOption } from "./components/bal-radio/bal-radio.type";
+import { SegmentValue } from "./components/bal-segment/bal-segment.types";
 import { BalStepOption } from "./components/bal-steps/bal-step.type";
 import { BalTabOption } from "./components/bal-tabs/bal-tab.type";
 export { BalConfigState } from "./utils/config";
 export { AccordionState, BalAriaForm as BalAriaForm1, BalConfigState as BalConfigState1 } from "./interfaces";
-export { BalCarouselItemData } from "./components/bal-carousel/bal-carousel.type";
+export { BalCarouselItemData, BalSlide } from "./components/bal-carousel/bal-carousel.type";
 export { BalCheckboxOption } from "./components/bal-checkbox/bal-checkbox.type";
 export { BalAriaForm } from "./utils/form";
 export { BalOption } from "./utils/dropdown";
 export { OverlayEventDetail } from "./components/bal-modal/bal-modal.type";
 export { PopoverPresentOptions } from "./components/bal-popover/bal-popover";
 export { BalRadioOption } from "./components/bal-radio/bal-radio.type";
+export { SegmentValue } from "./components/bal-segment/bal-segment.types";
 export { BalStepOption } from "./components/bal-steps/bal-step.type";
 export { BalTabOption } from "./components/bal-tabs/bal-tab.type";
 export namespace Components {
@@ -378,6 +380,10 @@ export namespace Components {
           * If `true` the carousel uses the full height
          */
         "fullHeight": boolean;
+        /**
+          * Defines the role of the carousel.
+         */
+        "htmlRole": 'tablist' | 'list' | '';
         /**
           * Defines special looks.
          */
@@ -390,11 +396,11 @@ export namespace Components {
           * Defines how many slides are visible in the container for the user. `auto` will use the size of the actual item content
          */
         "itemsPerView": 'auto' | 1 | 2 | 3 | 4;
-        "next": (steps?: number) => Promise<void>;
+        "next": (steps?: number) => Promise<BalSlide | undefined>;
         /**
           * PUBLIC METHODS ------------------------------------------------------
          */
-        "previous": (steps?: number) => Promise<void>;
+        "previous": (steps?: number) => Promise<BalSlide | undefined>;
         /**
           * If `true` vertical scrolling on mobile is enabled.
          */
@@ -426,6 +432,10 @@ export namespace Components {
           * Specifies the URL of the page the link goes to
          */
         "href"?: string;
+        /**
+          * Defines the role of the carousel.
+         */
+        "htmlRole": 'tab' | 'listitem' | '';
         /**
           * Label of the slide which will be used for pagination tabs
          */
@@ -438,6 +448,7 @@ export namespace Components {
           * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
          */
         "rel"?: string;
+        "setFocus": () => Promise<void>;
         /**
           * Src path to the image
          */
@@ -957,6 +968,20 @@ export namespace Components {
          */
         "space": BalProps.BalDividerSpace;
     }
+    interface BalDocApp {
+        /**
+          * Disables all animation inside the bal-app. Can be used for simplify e2e testing.
+         */
+        "animated": boolean;
+        "language"?: string;
+        "logComponents": string;
+        "logCustom": boolean;
+        "logEvents": boolean;
+        "logLifecycle": boolean;
+        "logRender": boolean;
+        "region"?: string;
+        "stickyFooter": boolean;
+    }
     interface BalDropdown {
         /**
           * Indicates whether the value of the control can be automatically completed by the browser.
@@ -1729,6 +1754,10 @@ export namespace Components {
           * The value of the for attribute must be a single id for a labeled form-related element in the same document as the <label> element. So, any given label element can be associated with only one form control.
          */
         "htmlFor"?: string;
+        /**
+          * Define the id of the native label element
+         */
+        "htmlId"?: string;
         /**
           * If `true` the component gets a invalid red style.
          */
@@ -2014,6 +2043,10 @@ export namespace Components {
         "position": BalProps.BalNavMenuBarPosition;
     }
     interface BalNavMenuFlyout {
+        /**
+          * This is used to connect the flyout to the aria controls
+         */
+        "navId": string;
     }
     interface BalNavMetaBar {
         /**
@@ -2254,6 +2287,10 @@ export namespace Components {
           * @returns focusIndex
          */
         "focusPrevious": () => Promise<number>;
+        /**
+          * Focus the selected visible option in the list, if no option is selected it selects the first one
+         */
+        "focusSelected": () => Promise<number>;
         /**
           * Returns a list of options
          */
@@ -2520,9 +2557,13 @@ export namespace Components {
     }
     interface BalProgressBar {
         /**
-          * The shape color
+          * The background color
          */
         "background": BalProps.BalProgressBarBackground;
+        /**
+          * The progress bar color
+         */
+        "color": BalProps.BalProgressBarColor;
         "configChanged": (state: BalConfigState) => Promise<void>;
         /**
           * The value of the bar in percentage. So min is 0 and 100 would be the max value.
@@ -2683,6 +2724,53 @@ export namespace Components {
          */
         "verticalOnMobile": boolean;
     }
+    interface BalSegment {
+        /**
+          * If `true`, the user cannot interact with the segment.
+         */
+        "disabled": boolean;
+        /**
+          * If `true`, the element uses the whole width
+         */
+        "expanded": boolean;
+        /**
+          * If `true`, the segment is shown red.
+         */
+        "invalid": boolean;
+        /**
+          * If `true`, and is vertical then the list height is limited and scrollable.
+         */
+        "scrollable": boolean;
+        /**
+          * the value of the segment.
+         */
+        "value"?: BalProps.BalSegmentValue;
+        /**
+          * If `true`, the segment items are presented vertical as a list.
+         */
+        "vertical": boolean;
+    }
+    interface BalSegmentItem {
+        "checked": boolean;
+        /**
+          * If `true`, the user cannot interact with the segment button.
+         */
+        "disabled": boolean;
+        "focused": boolean;
+        /**
+          * If `true`, the segment is shown in red.
+         */
+        "invalid": boolean;
+        /**
+          * Label of the segment control
+         */
+        "label": string;
+        "setFocus": () => Promise<void>;
+        /**
+          * The value of the segment button.
+         */
+        "value": SegmentValue;
+    }
     interface BalSelect {
         /**
           * If `true`, in Angular reactive forms the control will not be set invalid
@@ -3047,6 +3135,10 @@ export namespace Components {
           * If `true` the tabs or steps can be clicked.
          */
         "clickable": boolean;
+        /**
+          * Defines the color of the steps so it can be placed on colored backgrounds
+         */
+        "color": BalProps.BalStepsColor;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
@@ -3073,6 +3165,10 @@ export namespace Components {
           * Tells if this route is active and overrides the bal-tabs value property.
          */
         "active": boolean;
+        /**
+          * A11y attributes for the native tab element.
+         */
+        "aria"?: BalProps.BalTabItemAria;
         /**
           * If `true` a small red bubble is added to the tab.
          */
@@ -3101,6 +3197,10 @@ export namespace Components {
           * Label for the tab.
          */
         "label": string;
+        /**
+          * If `true` the tab does not have a panel
+         */
+        "noPanel": boolean;
         /**
           * Tell's if the linking is done by a router.
          */
@@ -3134,7 +3234,7 @@ export namespace Components {
          */
         "border": boolean;
         /**
-          * If `true` the tabs or steps can be clicked.
+          * If `true` the tabs or tabs can be clicked.
          */
         "clickable": boolean;
         "closeAccordion": () => Promise<void>;
@@ -3176,7 +3276,7 @@ export namespace Components {
          */
         "optionalTabSelection": boolean;
         /**
-          * Steps can be passed as a property or through HTML markup.
+          * Tabs can be passed as a property or through HTML markup.
          */
         "options": BalTabOption[];
         /**
@@ -3596,6 +3696,14 @@ export interface BalRadioGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBalRadioGroupElement;
 }
+export interface BalSegmentCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBalSegmentElement;
+}
+export interface BalSegmentItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBalSegmentItemElement;
+}
 export interface BalSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBalSelectElement;
@@ -3981,6 +4089,12 @@ declare global {
         prototype: HTMLBalDividerElement;
         new (): HTMLBalDividerElement;
     };
+    interface HTMLBalDocAppElement extends Components.BalDocApp, HTMLStencilElement {
+    }
+    var HTMLBalDocAppElement: {
+        prototype: HTMLBalDocAppElement;
+        new (): HTMLBalDocAppElement;
+    };
     interface HTMLBalDropdownElementEventMap {
         "balChange": BalEvents.BalDropdownChangeDetail;
         "balFocus": BalEvents.BalDropdownFocusDetail;
@@ -4610,6 +4724,43 @@ declare global {
         prototype: HTMLBalRadioGroupElement;
         new (): HTMLBalRadioGroupElement;
     };
+    interface HTMLBalSegmentElementEventMap {
+        "balBlur": BalEvents.BalSegmentBlurDetail;
+        "balChange": BalEvents.BalSegmentChangeDetail;
+        "balSelect": BalEvents.BalSegmentChangeDetail;
+        "balVertical": BalEvents.BalSegmentVerticalDetail;
+    }
+    interface HTMLBalSegmentElement extends Components.BalSegment, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBalSegmentElementEventMap>(type: K, listener: (this: HTMLBalSegmentElement, ev: BalSegmentCustomEvent<HTMLBalSegmentElementEventMap[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 HTMLBalSegmentElementEventMap>(type: K, listener: (this: HTMLBalSegmentElement, ev: BalSegmentCustomEvent<HTMLBalSegmentElementEventMap[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 HTMLBalSegmentElement: {
+        prototype: HTMLBalSegmentElement;
+        new (): HTMLBalSegmentElement;
+    };
+    interface HTMLBalSegmentItemElementEventMap {
+        "balBlur": BalEvents.BalSegmentBlurDetail;
+    }
+    interface HTMLBalSegmentItemElement extends Components.BalSegmentItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBalSegmentItemElementEventMap>(type: K, listener: (this: HTMLBalSegmentItemElement, ev: BalSegmentItemCustomEvent<HTMLBalSegmentItemElementEventMap[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 HTMLBalSegmentItemElementEventMap>(type: K, listener: (this: HTMLBalSegmentItemElement, ev: BalSegmentItemCustomEvent<HTMLBalSegmentItemElementEventMap[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 HTMLBalSegmentItemElement: {
+        prototype: HTMLBalSegmentItemElement;
+        new (): HTMLBalSegmentItemElement;
+    };
     interface HTMLBalSelectElementEventMap {
         "balChange": BalEvents.BalSelectChangeDetail;
         "balInputClick": BalEvents.BalSelectInputClickDetail;
@@ -4931,6 +5082,7 @@ declare global {
         "bal-date-calendar-cell": HTMLBalDateCalendarCellElement;
         "bal-datepicker": HTMLBalDatepickerElement;
         "bal-divider": HTMLBalDividerElement;
+        "bal-doc-app": HTMLBalDocAppElement;
         "bal-dropdown": HTMLBalDropdownElement;
         "bal-field": HTMLBalFieldElement;
         "bal-field-control": HTMLBalFieldControlElement;
@@ -4991,6 +5143,8 @@ declare global {
         "bal-radio": HTMLBalRadioElement;
         "bal-radio-button": HTMLBalRadioButtonElement;
         "bal-radio-group": HTMLBalRadioGroupElement;
+        "bal-segment": HTMLBalSegmentElement;
+        "bal-segment-item": HTMLBalSegmentItemElement;
         "bal-select": HTMLBalSelectElement;
         "bal-select-option": HTMLBalSelectOptionElement;
         "bal-shape": HTMLBalShapeElement;
@@ -5372,6 +5526,10 @@ declare namespace LocalJSX {
           * If `true` the carousel uses the full height
          */
         "fullHeight"?: boolean;
+        /**
+          * Defines the role of the carousel.
+         */
+        "htmlRole"?: 'tablist' | 'list' | '';
         /**
           * Defines special looks.
          */
@@ -5418,6 +5576,10 @@ declare namespace LocalJSX {
           * Specifies the URL of the page the link goes to
          */
         "href"?: string;
+        /**
+          * Defines the role of the carousel.
+         */
+        "htmlRole"?: 'tab' | 'listitem' | '';
         /**
           * Label of the slide which will be used for pagination tabs
          */
@@ -5978,6 +6140,20 @@ declare namespace LocalJSX {
          */
         "space"?: BalProps.BalDividerSpace;
     }
+    interface BalDocApp {
+        /**
+          * Disables all animation inside the bal-app. Can be used for simplify e2e testing.
+         */
+        "animated"?: boolean;
+        "language"?: string;
+        "logComponents"?: string;
+        "logCustom"?: boolean;
+        "logEvents"?: boolean;
+        "logLifecycle"?: boolean;
+        "logRender"?: boolean;
+        "region"?: string;
+        "stickyFooter"?: boolean;
+    }
     interface BalDropdown {
         /**
           * Indicates whether the value of the control can be automatically completed by the browser.
@@ -6766,6 +6942,10 @@ declare namespace LocalJSX {
           * The value of the for attribute must be a single id for a labeled form-related element in the same document as the <label> element. So, any given label element can be associated with only one form control.
          */
         "htmlFor"?: string;
+        /**
+          * Define the id of the native label element
+         */
+        "htmlId"?: string;
         /**
           * If `true` the component gets a invalid red style.
          */
@@ -7053,6 +7233,10 @@ declare namespace LocalJSX {
         "position"?: BalProps.BalNavMenuBarPosition;
     }
     interface BalNavMenuFlyout {
+        /**
+          * This is used to connect the flyout to the aria controls
+         */
+        "navId"?: string;
     }
     interface BalNavMetaBar {
         /**
@@ -7490,9 +7674,13 @@ declare namespace LocalJSX {
     }
     interface BalProgressBar {
         /**
-          * The shape color
+          * The background color
          */
         "background"?: BalProps.BalProgressBarBackground;
+        /**
+          * The progress bar color
+         */
+        "color"?: BalProps.BalProgressBarColor;
         /**
           * The value of the bar in percentage. So min is 0 and 100 would be the max value.
          */
@@ -7664,6 +7852,62 @@ declare namespace LocalJSX {
          */
         "verticalOnMobile"?: boolean;
     }
+    interface BalSegment {
+        /**
+          * If `true`, the user cannot interact with the segment.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true`, the element uses the whole width
+         */
+        "expanded"?: boolean;
+        /**
+          * If `true`, the segment is shown red.
+         */
+        "invalid"?: boolean;
+        /**
+          * Emitted when the component was touched
+         */
+        "onBalBlur"?: (event: BalSegmentCustomEvent<BalEvents.BalSegmentBlurDetail>) => void;
+        /**
+          * Emitted when the value property has changed and any dragging pointer has been released from `bal-segment`.  This event will not emit when programmatically setting the `value` property.
+         */
+        "onBalChange"?: (event: BalSegmentCustomEvent<BalEvents.BalSegmentChangeDetail>) => void;
+        /**
+          * If `true`, and is vertical then the list height is limited and scrollable.
+         */
+        "scrollable"?: boolean;
+        /**
+          * the value of the segment.
+         */
+        "value"?: BalProps.BalSegmentValue;
+        /**
+          * If `true`, the segment items are presented vertical as a list.
+         */
+        "vertical"?: boolean;
+    }
+    interface BalSegmentItem {
+        /**
+          * If `true`, the user cannot interact with the segment button.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true`, the segment is shown in red.
+         */
+        "invalid"?: boolean;
+        /**
+          * Label of the segment control
+         */
+        "label"?: string;
+        /**
+          * Emitted when the component was touched
+         */
+        "onBalBlur"?: (event: BalSegmentItemCustomEvent<BalEvents.BalSegmentBlurDetail>) => void;
+        /**
+          * The value of the segment button.
+         */
+        "value"?: SegmentValue;
+    }
     interface BalSelect {
         /**
           * If `true`, in Angular reactive forms the control will not be set invalid
@@ -8017,6 +8261,10 @@ declare namespace LocalJSX {
           * If `true` the tabs or steps can be clicked.
          */
         "clickable"?: boolean;
+        /**
+          * Defines the color of the steps so it can be placed on colored backgrounds
+         */
+        "color"?: BalProps.BalStepsColor;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
@@ -8039,6 +8287,10 @@ declare namespace LocalJSX {
           * Tells if this route is active and overrides the bal-tabs value property.
          */
         "active"?: boolean;
+        /**
+          * A11y attributes for the native tab element.
+         */
+        "aria"?: BalProps.BalTabItemAria;
         /**
           * If `true` a small red bubble is added to the tab.
          */
@@ -8063,6 +8315,10 @@ declare namespace LocalJSX {
           * Label for the tab.
          */
         "label"?: string;
+        /**
+          * If `true` the tab does not have a panel
+         */
+        "noPanel"?: boolean;
         /**
           * Emitted when the link element has clicked
          */
@@ -8096,7 +8352,7 @@ declare namespace LocalJSX {
          */
         "border"?: boolean;
         /**
-          * If `true` the tabs or steps can be clicked.
+          * If `true` the tabs or tabs can be clicked.
          */
         "clickable"?: boolean;
         /**
@@ -8144,7 +8400,7 @@ declare namespace LocalJSX {
          */
         "optionalTabSelection"?: boolean;
         /**
-          * Steps can be passed as a property or through HTML markup.
+          * Tabs can be passed as a property or through HTML markup.
          */
         "options"?: BalTabOption[];
         /**
@@ -8478,6 +8734,7 @@ declare namespace LocalJSX {
         "bal-date-calendar-cell": BalDateCalendarCell;
         "bal-datepicker": BalDatepicker;
         "bal-divider": BalDivider;
+        "bal-doc-app": BalDocApp;
         "bal-dropdown": BalDropdown;
         "bal-field": BalField;
         "bal-field-control": BalFieldControl;
@@ -8538,6 +8795,8 @@ declare namespace LocalJSX {
         "bal-radio": BalRadio;
         "bal-radio-button": BalRadioButton;
         "bal-radio-group": BalRadioGroup;
+        "bal-segment": BalSegment;
+        "bal-segment-item": BalSegmentItem;
         "bal-select": BalSelect;
         "bal-select-option": BalSelectOption;
         "bal-shape": BalShape;
@@ -8599,6 +8858,7 @@ declare module "@stencil/core" {
             "bal-date-calendar-cell": LocalJSX.BalDateCalendarCell & JSXBase.HTMLAttributes<HTMLBalDateCalendarCellElement>;
             "bal-datepicker": LocalJSX.BalDatepicker & JSXBase.HTMLAttributes<HTMLBalDatepickerElement>;
             "bal-divider": LocalJSX.BalDivider & JSXBase.HTMLAttributes<HTMLBalDividerElement>;
+            "bal-doc-app": LocalJSX.BalDocApp & JSXBase.HTMLAttributes<HTMLBalDocAppElement>;
             "bal-dropdown": LocalJSX.BalDropdown & JSXBase.HTMLAttributes<HTMLBalDropdownElement>;
             "bal-field": LocalJSX.BalField & JSXBase.HTMLAttributes<HTMLBalFieldElement>;
             "bal-field-control": LocalJSX.BalFieldControl & JSXBase.HTMLAttributes<HTMLBalFieldControlElement>;
@@ -8659,6 +8919,8 @@ declare module "@stencil/core" {
             "bal-radio": LocalJSX.BalRadio & JSXBase.HTMLAttributes<HTMLBalRadioElement>;
             "bal-radio-button": LocalJSX.BalRadioButton & JSXBase.HTMLAttributes<HTMLBalRadioButtonElement>;
             "bal-radio-group": LocalJSX.BalRadioGroup & JSXBase.HTMLAttributes<HTMLBalRadioGroupElement>;
+            "bal-segment": LocalJSX.BalSegment & JSXBase.HTMLAttributes<HTMLBalSegmentElement>;
+            "bal-segment-item": LocalJSX.BalSegmentItem & JSXBase.HTMLAttributes<HTMLBalSegmentItemElement>;
             "bal-select": LocalJSX.BalSelect & JSXBase.HTMLAttributes<HTMLBalSelectElement>;
             "bal-select-option": LocalJSX.BalSelectOption & JSXBase.HTMLAttributes<HTMLBalSelectOptionElement>;
             "bal-shape": LocalJSX.BalShape & JSXBase.HTMLAttributes<HTMLBalShapeElement>;