@baloise/ds-core 16.3.0 → 16.4.0

package/dist/html.html-data.json

@@ -894,6 +894,18 @@
           "name": "full-height",
           "description": "If `true` the carousel uses the full height"
         },
+        {
+          "name": "html-role",
+          "description": "Defines the role of the carousel.",
+          "values": [
+            {
+              "name": "list"
+            },
+            {
+              "name": "tablist"
+            }
+          ]
+        },
         {
           "name": "interface",
           "description": "Defines special looks.",
@@ -993,6 +1005,18 @@
           "name": "href",
           "description": "Specifies the URL of the page the link goes to"
         },
+        {
+          "name": "html-role",
+          "description": "Defines the role of the carousel.",
+          "values": [
+            {
+              "name": "listitem"
+            },
+            {
+              "name": "tab"
+            }
+          ]
+        },
         {
           "name": "label",
           "description": "Label of the slide which will be used for pagination tabs"
@@ -4351,7 +4375,12 @@
         "kind": "markdown",
         "value": ""
       },
-      "attributes": [],
+      "attributes": [
+        {
+          "name": "nav-id",
+          "description": "This is used to connect the flyout to the aria controls"
+        }
+      ],
       "references": [
         {
           "name": "Source code",
@@ -5187,7 +5216,7 @@
       "attributes": [
         {
           "name": "background",
-          "description": "The shape color",
+          "description": "The background color",
           "values": [
             {
               "name": "grey"
@@ -5197,6 +5226,27 @@
             }
           ]
         },
+        {
+          "name": "color",
+          "description": "The progress bar color",
+          "values": [
+            {
+              "name": "green"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "purple"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "yellow"
+            }
+          ]
+        },
         {
           "name": "value",
           "description": "The value of the bar in percentage. So min is 0 and 100 would be the max value."
@@ -6447,6 +6497,30 @@
           "name": "clickable",
           "description": "If `true` the tabs or steps can be clicked."
         },
+        {
+          "name": "color",
+          "description": "Defines the color of the steps so it can be placed on colored backgrounds",
+          "values": [
+            {
+              "name": "green"
+            },
+            {
+              "name": "light-blue"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "purple"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "yellow"
+            }
+          ]
+        },
         {
           "name": "debounce",
           "description": "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`."
@@ -6498,6 +6572,10 @@
           "name": "label",
           "description": "Label for the tab."
         },
+        {
+          "name": "no-panel",
+          "description": "If `true` the tab does not have a panel"
+        },
         {
           "name": "prevent",
           "description": "Tell's if the linking is done by a router."
@@ -6568,7 +6646,7 @@
         },
         {
           "name": "clickable",
-          "description": "If `true` the tabs or steps can be clicked."
+          "description": "If `true` the tabs or tabs can be clicked."
         },
         {
           "name": "context",

package/dist/types/components/bal-accordion/bal-accordion-summary/bal-accordion-summary.d.ts

@@ -44,6 +44,7 @@ export declare class AccordionSummary implements ComponentInterface, Loggable {
      * ------------------------------------------------------
      */
     private onClick;
+    private onKeyDown;
     /**
      * RENDER
      * ------------------------------------------------------

package/dist/types/components/bal-accordion/bal-accordion-trigger/bal-accordion-trigger.d.ts

@@ -58,6 +58,7 @@ export declare class AccordionTrigger implements ComponentInterface, Loggable {
      * ------------------------------------------------------
      */
     private get parentAccordionElement();
+    private get parentAccordionSummaryElement();
     /**
      * PRIVATE METHODS
      * ------------------------------------------------------

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

@@ -2,6 +2,7 @@ import { ComponentInterface, EventEmitter } from '../../../stencil-public-runtim
 import { BalCarouselItemData } from '../bal-carousel.type';
 export declare class CarouselItem implements ComponentInterface {
     private imageInheritAttributes;
+    private buttonEl;
     el: HTMLElement;
     /**
      * Src path to the image
@@ -11,6 +12,10 @@ export declare class CarouselItem implements ComponentInterface {
      * Label of the slide which will be used for pagination tabs
      */
     label: string;
+    /**
+     * Defines the role of the carousel.
+     */
+    htmlRole: 'tab' | 'listitem' | '';
     /**
      * The type of button.
      */
@@ -62,6 +67,7 @@ export declare class CarouselItem implements ComponentInterface {
     balBlur: EventEmitter<BalEvents.BalCarouselItemBlurDetail>;
     componentWillLoad(): void;
     getData(): Promise<BalCarouselItemData>;
+    setFocus(): Promise<void>;
     private onClick;
     private onFocus;
     private onBlur;

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

@@ -1,4 +1,5 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { BalSlide } from './bal-carousel.type';
 import { BalBreakpointObserver, BalBreakpoints } from '../../utils/breakpoints';
 import { BalSwipeInfo, BalSwipeObserver } from '../../utils/swipe';
 import { BalMutationObserver } from '../../utils/mutation';
@@ -12,6 +13,7 @@ export declare class Carousel implements ComponentInterface, BalBreakpointObserv
     private previousTransformValue;
     private currentRaf;
     private carouselId;
+    private carouselContainerId;
     isLastSlideVisible: boolean;
     isMobile: boolean;
     language: BalLanguage;
@@ -37,6 +39,10 @@ export declare class Carousel implements ComponentInterface, BalBreakpointObserv
      * Defines the layout of the navigation controls.
      */
     controls: 'small' | 'large' | 'dots' | 'tabs' | 'none';
+    /**
+     * Defines the role of the carousel.
+     */
+    htmlRole: 'tablist' | 'list' | '';
     /**
      * If `true` items move under the controls, instead of having a gap
      */
@@ -88,6 +94,7 @@ export declare class Carousel implements ComponentInterface, BalBreakpointObserv
     swipeListener({ left, right }: BalSwipeInfo): void;
     breakpointListener(breakpoints: BalBreakpoints): void;
     resizeListener(): void;
+    listenToKeyDown(ev: KeyboardEvent): void;
     /**
      * @internal define config for the component
      */
@@ -96,8 +103,8 @@ export declare class Carousel implements ComponentInterface, BalBreakpointObserv
      * PUBLIC METHODS
      * ------------------------------------------------------
      */
-    previous(steps?: number): Promise<void>;
-    next(steps?: number): Promise<void>;
+    previous(steps?: number): Promise<BalSlide | undefined>;
+    next(steps?: number): Promise<BalSlide | undefined>;
     /**
      * PRIVATE METHODS
      * ------------------------------------------------------
@@ -105,6 +112,8 @@ export declare class Carousel implements ComponentInterface, BalBreakpointObserv
     private animate;
     private buildSlide;
     private itemsChanged;
+    private focusNextItem;
+    private focusPreviousItem;
     /**
      * GETTERS
      * ------------------------------------------------------

package/dist/types/components/bal-carousel/controls/dot-control.d.ts

@@ -5,6 +5,7 @@ export interface DotControlItem {
 export interface DotControlProps {
     value: number;
     items: DotControlItem[];
+    containerId: string;
     onControlChange: (item: DotControlItem) => void;
 }
 export declare const DotControl: FunctionalComponent<DotControlProps>;

package/dist/types/components/bal-carousel/controls/large-control.d.ts

@@ -6,6 +6,7 @@ export interface LargeControlProps {
     areControlsHidden: boolean;
     leftControlTitle: string;
     rightControlTitle: string;
+    containerId: string;
     onPreviousClick: () => void;
     onNextClick: () => void;
 }

package/dist/types/components/bal-carousel/controls/small-control.d.ts

@@ -5,6 +5,7 @@ export interface SmallControlProps {
     inverted: boolean;
     leftControlTitle: string;
     rightControlTitle: string;
+    containerId: string;
     onPreviousClick: () => void;
     onNextClick: () => void;
 }

package/dist/types/components/bal-carousel/controls/tab-control.d.ts

@@ -6,6 +6,7 @@ export interface TabControlItem {
 export interface TabControlProps {
     value: number;
     items: TabControlItem[];
+    containerId: string;
     onControlChange: (item: TabControlItem) => void;
 }
 export declare const TabControl: FunctionalComponent<TabControlProps>;

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

@@ -13,6 +13,11 @@ export declare class Checkbox implements ComponentInterface, FormInput<any>, Log
     focused: boolean;
     buttonTabindex?: number;
     ariaForm: BalAriaForm;
+    /**
+     * Track focus state
+     * If `true` checkbox needs to remain focused
+     */
+    wasFocused: boolean;
     log: LogInstance;
     createLogger(log: LogInstance): void;
     /**

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

@@ -2,7 +2,6 @@ import { ComponentInterface } from '../../stencil-public-runtime';
 import { BalConfigObserver, BalConfigState } from '../../interfaces';
 import { BalLanguage, BalRegion } from '../../utils/config';
 export declare class Close implements ComponentInterface, BalConfigObserver {
-    private inheritedAttributes;
     el: HTMLElement;
     language: BalLanguage;
     region: BalRegion;
@@ -14,7 +13,6 @@ export declare class Close implements ComponentInterface, BalConfigObserver {
      * If `true` it supports dark backgrounds.
      */
     inverted: boolean;
-    componentWillRender(): void;
     /**
      * @internal define config for the component
      */

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

@@ -15,9 +15,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
      * ------------------------------------------------------

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-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;