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

package/dist/types/components/bal-icon/bal-icon.interfaces.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="@baloise/ds-core" />
 declare namespace BalProps {
-    type BalIconColor = 'blue' | 'light-blue' | 'success' | 'success-dark' | 'success-darker' | 'danger' | 'danger-dark' | 'danger-darker' | 'warning' | 'warning-dark' | 'warning-darker' | 'white' | 'grey' | 'grey-light' | 'primary' | 'primary-light' | 'primary-dark' | '' | string;
+    type BalIconColor = 'blue' | 'light-blue' | 'success' | 'success-dark' | 'success-darker' | 'danger' | 'danger-dark' | 'danger-darker' | 'warning' | 'warning-dark' | 'warning-darker' | 'white' | 'grey' | 'grey-light' | 'grey-dark' | 'primary' | 'primary-light' | 'primary-dark' | '' | string;
     type BalIconSize = 'xsmall' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | '';
 }

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

@@ -5,7 +5,6 @@ import { BalElementStateInfo } from '../../utils/element-states';
 import { BalAriaFormLinking, BalAriaForm } from '../../utils/form';
 export declare class Label implements ComponentInterface, Loggable, BalConfigObserver, BalElementStateInfo, BalAriaFormLinking {
     el: HTMLElement;
-    private inputId;
     language: BalLanguage;
     region: BalRegion;
     ariaForm: BalAriaForm;
@@ -21,6 +20,10 @@ export declare class Label implements ComponentInterface, Loggable, BalConfigObs
      * 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 form control needs to be filled. If it is set to
      * `false` an optional label is added to the label..

package/dist/types/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.d.ts

@@ -26,6 +26,7 @@ export declare class ListItemAccordionHead implements ComponentInterface, Loggab
      * ------------------------------------------------------
      */
     private onClick;
+    private onKeyDown;
     /**
      * RENDER
      * ------------------------------------------------------

package/dist/types/components/bal-nav/bal-nav-menu-flyout/bal-nav-menu-flyout.d.ts

@@ -2,7 +2,6 @@ import { ComponentInterface } from '../../../stencil-public-runtime';
 import { LogInstance, Loggable } from '../../../utils/log';
 import { BalResizeObserver } from '../../../utils/resize';
 export declare class NavMenuFlyout implements ComponentInterface, Loggable, BalResizeObserver {
-    private navMenuFlyoutId;
     private bodyScrollHandler;
     el: HTMLElement;
     isHidden: boolean;
@@ -12,6 +11,10 @@ export declare class NavMenuFlyout implements ComponentInterface, Loggable, BalR
      * PUBLIC PROPERTY API
      * ------------------------------------------------------
      */
+    /**
+     * This is used to connect the flyout to the aria controls
+     * */
+    navId: string;
     /**
      * LIFECYCLE
      * ------------------------------------------------------

package/dist/types/components/bal-nav/models/bal-nav-link-item.d.ts

@@ -22,5 +22,6 @@ export declare class NavLinkItem implements BalProps.BalNavLinkItem {
     }>): any;
     render(_context?: {
         onClick: () => void;
+        flyoutId: string;
     }): any;
 }

package/dist/types/components/bal-nav/models/bal-nav-menu-link-item.d.ts

@@ -15,5 +15,6 @@ export declare class NavMenuLinkItem extends NavLinkItem implements BalProps.Bal
     }>): any;
     render(context?: {
         onClick: () => void;
+        flyoutId: string;
     }): any;
 }

package/dist/types/components/bal-nav/models/bal-nav-meta-link-item.d.ts

@@ -11,5 +11,7 @@ export declare class NavMetaLinkItem extends NavLinkItem implements BalProps.Bal
         activeMetaLinkValue: string;
         activeMenuLinkValue: string;
     }>): any;
-    render(): any;
+    render(context?: {
+        flyoutId: string;
+    }): any;
 }

package/dist/types/components/bal-option-list/bal-option-list.d.ts

@@ -59,6 +59,10 @@ export declare class OptionList implements ComponentInterface, Loggable {
      * PUBLIC METHODS
      * ------------------------------------------------------
      */
+    /**
+     * Focus the selected visible option in the list, if no option is selected it selects the first one
+     */
+    focusSelected(): Promise<number>;
     /**
      * Focus the first visible option in the list
      * @returns focusIndex
@@ -154,6 +158,7 @@ export declare class OptionList implements ComponentInterface, Loggable {
     private scrollTo;
     private updateFocus;
     private getOptionIndex;
+    private getSelectedOptionIndex;
     private getFirstOptionIndex;
     private getNextOptionIndex;
     private getPreviousOptionIndex;

package/dist/types/components/bal-progress-bar/bal-progress-bar.d.ts

@@ -1,7 +1,8 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
 import { BalBreakpointObserver, BalBreakpoints } from '../../utils/breakpoints';
 import type { BalConfigObserver, BalConfigState } from '../../utils/config';
-export declare class ProgressBar implements ComponentInterface, BalConfigObserver, BalBreakpointObserver {
+import { BalWindowResizeObserver } from '../../utils/resize';
+export declare class ProgressBar implements ComponentInterface, BalConfigObserver, BalBreakpointObserver, BalWindowResizeObserver {
     el: HTMLElement;
     private animated;
     private lineEl?;
@@ -15,9 +16,13 @@ export declare class ProgressBar implements ComponentInterface, BalConfigObserve
      */
     value: number;
     /**
-     * The shape color
+     * The background color
      */
     background: BalProps.BalProgressBarBackground;
+    /**
+     * The progress bar color
+     */
+    color: BalProps.BalProgressBarColor;
     /**
      * LIFECYCLE
      * ------------------------------------------------------
@@ -28,6 +33,7 @@ export declare class ProgressBar implements ComponentInterface, BalConfigObserve
      * ------------------------------------------------------
      */
     breakpointListener(_breakpoints: BalBreakpoints): void;
+    windowResizeListener(): void;
     configChanged(state: BalConfigState): Promise<void>;
     /**
      * PRIVATE METHODS

package/dist/types/components/bal-progress-bar/bal-progress-bar.interfaces.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="@baloise/ds-core" />
 declare namespace BalProps {
     type BalProgressBarBackground = 'white' | 'grey';
+    type BalProgressBarColor = 'primary' | 'purple' | 'yellow' | 'red' | 'green';
 }

package/dist/types/components/bal-segment/bal-segment-item/bal-segment-item.d.ts

@@ -0,0 +1,62 @@
+import { ComponentInterface, EventEmitter } from '../../../stencil-public-runtime';
+import { SegmentValue } from '../bal-segment.types';
+export declare class SegmentItem implements ComponentInterface {
+    private segmentEl;
+    private nativeEl;
+    private inheritedAttributes;
+    private id;
+    el: HTMLElement;
+    hasSlotContent: boolean;
+    isFocusable: boolean;
+    isVertical: boolean;
+    /**
+     * If `true`, the user cannot interact with the segment button.
+     */
+    disabled: boolean;
+    /**
+     * If `true`, the segment is shown in red.
+     */
+    invalid: boolean;
+    /**
+     * @internal
+     * Sets focus state for key navigation
+     */
+    focused: boolean;
+    /**
+     * @internal
+     * Sets checked state for key navigation
+     */
+    checked: boolean;
+    /**
+     * Label of the segment control
+     */
+    label: string;
+    /**
+     * The value of the segment button.
+     */
+    value: SegmentValue;
+    valueChanged(): void;
+    /**
+     * Emitted when the component was touched
+     */
+    balBlur: EventEmitter<BalEvents.BalSegmentBlurDetail>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /**
+     * @internal
+     * Focuses the native <button> element
+     * inside of ion-segment-button.
+     */
+    setFocus(): Promise<void>;
+    private updateVertical;
+    private updateState;
+    private get items();
+    private get allItems();
+    private isFirst;
+    private isLast;
+    private checkSlotContent;
+    private onSlottedItemsChange;
+    render(): any;
+}

package/dist/types/components/bal-segment/bal-segment.d.ts

@@ -0,0 +1,111 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { SegmentValue } from './bal-segment.types';
+import { LogInstance } from '../../utils/log';
+import { BalWindowResizeObserver } from '../../utils/resize';
+import { BalBreakpointObserver, BalBreakpoints } from '../../interfaces';
+export declare class Segment implements ComponentInterface, BalWindowResizeObserver, BalBreakpointObserver {
+    el: HTMLElement;
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    focusedValue?: SegmentValue;
+    keyboardMode: boolean;
+    isVertical: boolean;
+    isMobile: boolean;
+    maxWidth: number;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * If `true`, the segment is shown red.
+     */
+    invalid: boolean;
+    /**
+     * If `true`, the user cannot interact with the segment.
+     */
+    disabled: boolean;
+    /**
+     * If `true`, the segment items are presented vertical as a list.
+     */
+    vertical: boolean;
+    /**
+     * If `true`, and is vertical then the list height is limited and scrollable.
+     */
+    scrollable: boolean;
+    /**
+     * If `true`, the element uses the whole width
+     */
+    expanded: boolean;
+    /**
+     * the value of the segment.
+     */
+    value?: BalProps.BalSegmentValue;
+    protected valueChanged(value: BalProps.BalSegmentValue | undefined): void;
+    /**
+     * Emitted when the component was touched
+     */
+    balBlur: EventEmitter<BalEvents.BalSegmentBlurDetail>;
+    /**
+     * 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.
+     */
+    balChange: EventEmitter<BalEvents.BalSegmentChangeDetail>;
+    /**
+     * Emitted when the value of the segment changes from user committed actions
+     * or from externally assigning a value.
+     *
+     * @internal
+     */
+    balSelect: EventEmitter<BalEvents.BalSegmentChangeDetail>;
+    /**
+     * Emitted when the vertical style changes
+     *
+     * @internal
+     */
+    balVertical: EventEmitter<BalEvents.BalSegmentVerticalDetail>;
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentDidLoad(): Promise<void>;
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    breakpointListener(breakpoints: BalBreakpoints): void;
+    windowResizeListener(): void;
+    listenOnBalBlur(ev: BalEvents.BalSegmentBlur): void;
+    listenOnKeyDown(ev: KeyboardEvent): void;
+    /**
+     * GETTERS
+     * ------------------------------------------------------
+     */
+    private get items();
+    private get checked();
+    private getSegmentItem;
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    private emitValueChange;
+    private emitVerticalChange;
+    private defineWidth;
+    /**
+     * PRIVATE EVENT HANDLERS
+     * ------------------------------------------------------
+     */
+    private onPointerDown;
+    private onSlottedItemsChange;
+    private onClick;
+    private getIndicator;
+    private checkButton;
+    private setCheckedClasses;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

package/dist/types/components/bal-segment/bal-segment.interfaces.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="@baloise/ds-core" />
+declare namespace BalProps {
+    type BalSegmentValue = string | number;
+}
+declare namespace BalEvents {
+    interface BalSegmentCustomEvent<T> extends CustomEvent<T> {
+        detail: T;
+        target: HTMLBalSegmentElement;
+    }
+    interface BalSegmentItemCustomEvent<T> extends CustomEvent<T> {
+        detail: T;
+        target: HTMLBalSegmentItemElement;
+    }
+    type BalSegmentChangeDetail = BalProps.BalSegmentValue;
+    type BalSegmentChange = BalSegmentCustomEvent<BalSegmentChangeDetail>;
+    type BalSegmentVerticalDetail = boolean;
+    type BalSegmentVertical = BalSegmentCustomEvent<BalSegmentVerticalDetail>;
+    type BalSegmentBlurDetail = FocusEvent;
+    type BalSegmentBlur = BalSegmentCustomEvent<BalSegmentBlurDetail>;
+}

package/dist/types/components/bal-segment/bal-segment.types.d.ts

@@ -0,0 +1 @@
+export type SegmentValue = string | number;

package/dist/types/components/bal-steps/bal-steps.d.ts

@@ -23,6 +23,10 @@ export declare class Steps implements Loggable, BalMutationObserver, BalBreakpoi
      * 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`.
      */

package/dist/types/components/bal-steps/bal-steps.interfaces.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="@baloise/ds-core" />
-declare namespace BalProps { }
+declare namespace BalProps {
+    type BalStepsColor = 'primary' | 'light-blue' | 'purple' | 'yellow' | 'red' | 'green';
+}
 declare namespace BalEvents {
     interface BalStepsCustomEvent<T> extends CustomEvent<T> {
         detail: T;

package/dist/types/components/bal-steps/components/step-button.d.ts

@@ -4,6 +4,7 @@ export interface StepButtonProps {
     item: BalStepOption;
     isMobile: boolean;
     clickable: boolean;
+    color: BalProps.BalStepsColor;
     onSelectTab: (ev: MouseEvent, item: BalStepOption) => void;
 }
 export declare const StepButton: FunctionalComponent<StepButtonProps>;

package/dist/types/components/bal-tabs/bal-tab-item/bal-tab-item.d.ts

@@ -47,6 +47,14 @@ export declare class TabItem {
      * Tab icon not available for the steps.
      */
     icon?: string;
+    /**
+     * If `true` the tab does not have a panel
+     */
+    noPanel: boolean;
+    /**
+     * A11y attributes for the native tab element.
+     */
+    aria?: BalProps.BalTabItemAria;
     /**
      * Emitted when the link element has clicked
      */
@@ -75,6 +83,8 @@ export declare class TabItem {
         prevent: boolean;
         navigate: EventEmitter<MouseEvent>;
         trackingData: Attributes;
+        noPanel: boolean;
+        aria: BalProps.BalTabItemAria;
     };
     render(): any;
 }

package/dist/types/components/bal-tabs/bal-tab.type.d.ts

@@ -15,9 +15,11 @@ export interface BalTabOption {
     passed?: boolean;
     index?: number;
     context?: BalProps.BalTabsContext;
-    navigate?: EventEmitter<MouseEvent>;
+    navigate?: EventEmitter<Event>;
     trackingData?: Attributes;
     hidden?: boolean;
+    noPanel?: boolean;
+    aria?: BalProps.BalTabItemAria;
 }
 export interface TabLineProps {
     context?: BalProps.BalTabsContext;
@@ -41,7 +43,7 @@ export interface TabProps {
     iconPosition: BalProps.BalTabsIconPosition;
     tabs: BalTabOption[];
     context: BalProps.BalTabsContext;
-    onSelectTab: (ev: MouseEvent, tab: BalTabOption) => void;
+    onSelectTab: (ev: Event, tab: BalTabOption) => void;
     lineWidth?: number;
     lineOffsetLeft?: number;
     lineHeight?: number;
@@ -63,5 +65,5 @@ export interface TabItemProps {
     context: BalProps.BalTabsContext;
     iconPosition: BalProps.BalTabsIconPosition;
     trackingData?: Attributes;
-    onSelectTab: (ev: MouseEvent) => void;
+    onSelectTab: (ev: Event) => void;
 }

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

@@ -45,7 +45,7 @@ export declare class Tabs implements ComponentInterface, Loggable, BalConfigObse
      */
     overflow: 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[];
     protected optionChanged(): Promise<void>;
@@ -66,7 +66,7 @@ export declare class Tabs implements ComponentInterface, Loggable, BalConfigObse
      */
     spaceless: boolean;
     /**
-     * If `true` the tabs or steps can be clicked.
+     * If `true` the tabs or tabs can be clicked.
      */
     clickable: boolean;
     /**
@@ -128,6 +128,7 @@ export declare class Tabs implements ComponentInterface, Loggable, BalConfigObse
     resizeListener(): void;
     listenToWillAnimate(ev: UIEvent): void;
     listenToDidAnimate(ev: UIEvent): void;
+    listenToKeyDown(ev: KeyboardEvent): void;
     isUsedInNavbar(ev: UIEvent): void;
     /**
      * PUBLIC METHODS
@@ -159,12 +160,14 @@ export declare class Tabs implements ComponentInterface, Loggable, BalConfigObse
      * PRIVATE METHODS
      * ------------------------------------------------------
      */
+    private get isTabList();
     private get items();
     private getOptions;
     private updateStore;
     private setActiveItem;
     private setActiveContent;
-    private isActive;
+    private isTabActive;
+    private isTabVisible;
     private parseVertical;
     private isVertical;
     private getTargetElement;
@@ -178,6 +181,15 @@ export declare class Tabs implements ComponentInterface, Loggable, BalConfigObse
     private expandAccordion;
     private collapseAccordion;
     private shouldAnimate;
+    /**
+     * PRIVATE Tab Navigation with Arrow Keys
+     * ------------------------------------------------------
+     */
+    private findNextTab;
+    private findPreviousTab;
+    private tabListSelectNext;
+    private tabListSelectPrevious;
+    focus(tab: BalTabOption): Promise<void>;
     /**
      * EVENT BINDING
      * ------------------------------------------------------

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

@@ -5,6 +5,9 @@ declare namespace BalProps {
     type BalTabsVertical = boolean | 'mobile' | 'tablet';
     type BalTabsFloat = 'left' | 'right';
     type BalTabsColSize = 'one-quarter' | 'one-third' | 'half' | 'two-thirds' | 'three-quarters' | 'full';
+    type BalTabItemAria = {
+        controls?: string;
+    };
 }
 declare namespace BalEvents {
     interface BalTabsCustomEvent<T> extends CustomEvent<T> {

package/dist/types/components/bal-tabs/components/tab-button.d.ts

@@ -9,6 +9,7 @@ export interface TabButtonProps {
     isVertical: boolean;
     accordion: boolean;
     isAccordionOpen: boolean;
+    isLinkList: boolean;
     inverted: boolean;
     expanded: boolean;
     spaceless: boolean;

package/dist/types/components/bal-tabs/components/tab-nav.d.ts

@@ -17,6 +17,7 @@ export interface TabNavProps {
     animated: boolean;
     spaceless: boolean;
     expanded: boolean;
+    isLinkList: boolean;
     verticalColSize: BalProps.BalTabsColSize;
     iconPosition: BalProps.BalTabsIconPosition;
     context?: BalProps.BalTabsContext;

package/dist/types/components/docs/bal-doc-app/bal-doc-app.d.ts

@@ -0,0 +1,21 @@
+import { ComponentInterface } from '../../../stencil-public-runtime';
+/**
+ * @internal
+ */
+export declare class DocApp implements ComponentInterface {
+    logComponents: string;
+    logLifecycle: boolean;
+    logEvents: boolean;
+    logRender: boolean;
+    logCustom: boolean;
+    stickyFooter: boolean;
+    region?: string;
+    language?: string;
+    /**
+     * Disables all animation inside the bal-app. Can be used for simplify e2e testing.
+     */
+    animated: boolean;
+    connectedCallback(): void;
+    componentDidRender(): void;
+    render(): any;
+}