@baloise/ds-core 16.0.3 → 16.1.0

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

@@ -0,0 +1,187 @@
+import { ComponentInterface, Event, EventEmitter } from '../../stencil-public-runtime';
+import { LogInstance, Loggable } from '../../utils/log';
+import { Attributes } from '../../utils/attributes';
+import { BalOption, DropdownEventsUtil, DropdownFormSubmit, DropdownFormSubmitUtil, DropdownOptionUtil, DropdownPopupUtil, DropdownValueUtil, DropdownFocus, DropdownFocusUtil, DropdownAutoFillUtil } from '../../utils/dropdown';
+import { BalConfigObserver, BalConfigState, BalLanguage, BalRegion } from '../../utils/config';
+import { BalAriaForm, BalAriaFormLinking } from '../../utils/form';
+export declare class Dropdown implements ComponentInterface, Loggable, BalConfigObserver, BalAriaFormLinking, DropdownFormSubmit, DropdownFocus {
+    el: HTMLElement;
+    panelEl: HTMLDivElement | undefined;
+    listEl: HTMLBalOptionListElement | undefined;
+    nativeEl: HTMLInputElement | undefined;
+    selectEl: HTMLSelectElement | undefined;
+    inputId: string;
+    inheritedAttributes: Attributes;
+    initialValue?: string | string[];
+    nativeOptions: string[];
+    rawOptions: BalOption[];
+    choices: BalOption[];
+    rawValue: string[];
+    hasFocus: boolean;
+    isExpanded: boolean;
+    isAutoFilled: boolean;
+    inputLabel: string;
+    ariaForm: BalAriaForm;
+    language: BalLanguage;
+    region: BalRegion;
+    httpFormSubmit: boolean;
+    labelToFocus: string;
+    valueUtil: DropdownValueUtil;
+    eventsUtil: DropdownEventsUtil;
+    popupUtil: DropdownPopupUtil;
+    optionUtil: DropdownOptionUtil;
+    formSubmitUtil: DropdownFormSubmitUtil;
+    focusUtil: DropdownFocusUtil;
+    autoFillUtil: DropdownAutoFillUtil;
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * Indicates whether the value of the control can be automatically completed by the browser.
+     */
+    autocomplete: BalProps.BalInputAutocomplete;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    name: string;
+    /**
+     * Defines the placeholder of the component. Only shown when the value is empty
+     */
+    placeholder: string;
+    /**
+     * If `true` there will be on trigger icon visible
+     */
+    icon: string;
+    /**
+     * If `true`, the user cannot interact with the option.
+     */
+    disabled: boolean;
+    /**
+     * If `true` the element can not mutated, meaning the user can not edit the control.
+     */
+    readonly: boolean;
+    /**
+     * If `true`, the user can select multiple options.
+     */
+    multiple: boolean;
+    /**
+     * If `true`, the selected options are shown as chips
+     */
+    chips: boolean;
+    /**
+     * If `true`, a cross at the end is visible to clear the selection
+     */
+    clearable: boolean;
+    /**
+     * If `true`, the component will be shown as invalid
+     */
+    invalid: boolean;
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     */
+    required: boolean;
+    /**
+     * Defines if the select is in a loading state.
+     */
+    loading: boolean;
+    /**
+     * Defines the filter logic of the list
+     */
+    filter: BalProps.BalOptionListFilter;
+    /**
+     * Defines the max height of the list element
+     */
+    contentHeight: number;
+    /**
+     * @internal
+     * Set this to `true` when the component is placed on a dark background.
+     */
+    inverted: boolean;
+    /**
+     * Steps can be passed as a property or through HTML markup.
+     */
+    options: BalOption[];
+    protected optionChanged(): Promise<void>;
+    /**
+     * The value of the selected options.
+     */
+    value?: string | string[];
+    valueChanged(newValue: string | string[] | undefined, oldValue: string | string[] | undefined): void;
+    /**
+     * Emitted when a option got selected.
+     */
+    balChange: EventEmitter<BalEvents.BalDropdownChangeDetail>;
+    /**
+     * Emitted when the input has focus.
+     */
+    balFocus: EventEmitter<BalEvents.BalDropdownFocusDetail>;
+    /**
+     * Emitted when the input loses focus.
+     */
+    balBlur: EventEmitter<BalEvents.BalDropdownBlurDetail>;
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback(): void;
+    componentWillRender(): Promise<void>;
+    componentDidRender(): void;
+    componentDidLoad(): void;
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    /**
+     * @internal define config for the component
+     */
+    configChanged(state: BalConfigState): Promise<void>;
+    listenToOptionChange(ev: BalEvents.BalOptionChange): Promise<void>;
+    listenOnClickOutside(ev: UIEvent): void;
+    resetHandler(ev: UIEvent): void;
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * Sets the focus on the input element
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Returns the value of the component
+     */
+    getValue(): Promise<string[]>;
+    /**
+     * Sets the value to `[]`, the input value to ´''´ and the focus index to ´0´.
+     */
+    clear(): Promise<void>;
+    /**
+     * Opens the popup with option list
+     */
+    open(): Promise<void>;
+    /**
+     * Closes the popup with option list
+     */
+    close(): Promise<void>;
+    /**
+     * Select option by passed value
+     */
+    select(newValue: string | string[]): Promise<void>;
+    /**
+     * @internal
+     */
+    setAriaForm(ariaForm: BalAriaForm): Promise<void>;
+    /**
+     * EVENT BINDING
+     * ------------------------------------------------------
+     */
+    handleAutoFill: (ev: Event) => Promise<void>;
+    handleKeyDown: (ev: KeyboardEvent) => void;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

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

@@ -0,0 +1,14 @@
+/// <reference types="@baloise/ds-core" />
+declare namespace BalProps { }
+declare namespace BalEvents {
+    interface BalDropdownCustomEvent<T> extends CustomEvent<T> {
+        detail: T;
+        target: HTMLBalDropdownElement;
+    }
+    type BalDropdownChangeDetail = string | string[];
+    type BalDropdownChange = BalDropdownCustomEvent<BalDropdownChangeDetail>;
+    type BalDropdownBlurDetail = FocusEvent;
+    type BalDropdownBlur = BalDropdownCustomEvent<BalDropdownBlurDetail>;
+    type BalDropdownFocusDetail = FocusEvent;
+    type BalDropdownFocus = BalDropdownCustomEvent<BalDropdownFocusDetail>;
+}

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

@@ -50,6 +50,7 @@ export declare class Field implements ComponentInterface, BalMutationObserver {
     componentWillLoad(): void;
     componentDidLoad(): Promise<void>;
     private isDirectChild;
+    private isVisible;
     private findDirectChild;
     private findDirectChildren;
     syncAriaAttributes(): Promise<void>;

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

@@ -3,7 +3,7 @@ import { BalConfigObserver, BalConfigState, BalLanguage, BalRegion } from '../..
 import { Loggable, LogInstance } from '../../utils/log';
 import { BalElementStateInfo } from '../../utils/element-states';
 import { BalAriaFormLinking, BalAriaForm } from '../../utils/form';
-export declare class BalLabel implements ComponentInterface, Loggable, BalConfigObserver, BalElementStateInfo, BalAriaFormLinking {
+export declare class Label implements ComponentInterface, Loggable, BalConfigObserver, BalElementStateInfo, BalAriaFormLinking {
     el: HTMLElement;
     private inputId;
     language: BalLanguage;

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

@@ -1,6 +1,6 @@
 import { ComponentInterface } from '../../../stencil-public-runtime';
 import { LogInstance, Loggable } from '../../../utils/log';
-export declare class NavigationLink implements ComponentInterface, Loggable {
+export declare class NavLink implements ComponentInterface, Loggable {
     log: LogInstance;
     createLogger(log: LogInstance): void;
     /**

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

@@ -1,6 +1,6 @@
 import { ComponentInterface } from '../../../stencil-public-runtime';
 import { LogInstance, Loggable } from '../../../utils/log';
-export declare class NavigationLinkGrid implements ComponentInterface, Loggable {
+export declare class NavLinkGrid implements ComponentInterface, Loggable {
     log: LogInstance;
     createLogger(log: LogInstance): void;
     /**

package/dist/types/components/bal-nav/bal-nav-link-grid-col/bal-nav-link-grid-col.d.ts

@@ -1,6 +1,6 @@
 import { ComponentInterface } from '../../../stencil-public-runtime';
 import { LogInstance, Loggable } from '../../../utils/log';
-export declare class NavigationLinkGridCol implements ComponentInterface, Loggable {
+export declare class NavLinkGridCol implements ComponentInterface, Loggable {
     log: LogInstance;
     createLogger(log: LogInstance): void;
     /**

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

@@ -1,6 +1,6 @@
 import { ComponentInterface } from '../../../stencil-public-runtime';
 import { LogInstance, Loggable } from '../../../utils/log';
-export declare class NavigationLinkGroup implements ComponentInterface, Loggable {
+export declare class NavLinkGroup implements ComponentInterface, Loggable {
     log: LogInstance;
     createLogger(log: LogInstance): void;
     /**

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

@@ -8,7 +8,7 @@ import { NavLinkItemObserver } from './bal-nav.types';
 import { BalConfigObserver, BalConfigState, BalLanguage, BalRegion } from '../../utils/config';
 import { NavMenuLinkItem } from './models/bal-nav-menu-link-item';
 import { NavLinkItem } from './models/bal-nav-link-item';
-export declare class NavMetaBar implements ComponentInterface, Loggable, BalBreakpointObserver, BalMutationObserver, NavLinkItemObserver, BalConfigObserver {
+export declare class Nav implements ComponentInterface, Loggable, BalBreakpointObserver, BalMutationObserver, NavLinkItemObserver, BalConfigObserver {
     private navId;
     private bodyScrollHandler;
     private menuBarEl;

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

@@ -1,4 +1,4 @@
-export declare class BalNotices {
+export declare class Notices {
     /**
      * @internal The interface tells the notice where to show the notice.
      */

package/dist/types/components/bal-number-input/bal-number-input.d.ts

@@ -6,6 +6,7 @@ import { Loggable, LogInstance } from '../../utils/log';
 export declare class NumberInput implements ComponentInterface, BalConfigObserver, FormInput<number | undefined>, BalAriaFormLinking, Loggable {
     private inputId;
     private inheritedAttributes;
+    private selectTimeout?;
     lastValue: string;
     nativeInput?: HTMLInputElement;
     inputValue?: number;

package/dist/types/components/bal-number-input/bal-number-input.utils.d.ts

@@ -7,10 +7,12 @@ export declare function toUserFormattedNumber(value: string, decimalPoints?: num
 export type ValidateKeyDownOptions = {
     decimal: number;
     key: string;
+    ctrlKey: boolean;
+    metaKey: boolean;
     newValue: string;
     oldValue: string;
     selectionStart: number | null;
     selectionEnd: number | null;
 };
 export declare const countDecimalSeparators: (value: string) => number;
-export declare function validateKeyDown({ key, selectionStart, selectionEnd, newValue, decimal, }: ValidateKeyDownOptions): boolean;
+export declare function validateKeyDown({ key, ctrlKey, metaKey, selectionStart, selectionEnd, newValue, decimal, }: ValidateKeyDownOptions): boolean;

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

@@ -0,0 +1,91 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { Loggable, LogInstance } from '../../utils/log';
+import { BalElementStateInfo, BalElementStateObserver } from '../../utils/element-states';
+import { BalOption } from '../../utils/dropdown';
+export declare class Option implements ComponentInterface, Loggable, BalElementStateObserver, BalOption {
+    private inputId;
+    el: HTMLElement;
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    checkbox: boolean;
+    interactionState: BalElementStateInfo;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * Label will be shown in the input element when it got selected
+     */
+    label: string;
+    /**
+     * The value of the select option. This value will be returned by the parent `<bal-select>` element.
+     */
+    value: string;
+    /**
+     * If `true`, the user cannot interact with the option.
+     */
+    disabled: boolean;
+    /**
+     * If `true`, the option can present in more than one line.
+     */
+    multiline: boolean;
+    /**
+     * If `true`, the option is shown in red.
+     */
+    invalid: boolean;
+    /**
+     * If `true`, the option is selected.
+     */
+    selected: boolean;
+    /**
+     * If `true`, the option is focused.
+     */
+    focused: boolean;
+    /**
+     * If `true`, the option is hidden.
+     */
+    hidden: boolean;
+    /**
+     * Emitted when the option gets selected or unselected
+     */
+    balOptionChange: EventEmitter<BalEvents.BalOptionChangeDetail>;
+    /**
+     * @internal
+     * Emitted when a option gets focused.
+     */
+    balOptionFocus: EventEmitter<BalEvents.BalOptionFocusDetail>;
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentWillRender(): void | Promise<void>;
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToMouseEnter(): void;
+    elementStateListener(info: BalElementStateInfo): void;
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * Selects or deselects the option and informs other components
+     */
+    select(selected?: boolean): Promise<void>;
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    private get interactionChildElements();
+    /**
+     * EVENT BINDING
+     * ------------------------------------------------------
+     */
+    private onClick;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

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

@@ -0,0 +1,19 @@
+/// <reference types="@baloise/ds-core" />
+declare namespace BalProps { }
+declare namespace BalEvents {
+    interface BalOptionCustomEvent<T> extends CustomEvent<T> {
+        detail: T;
+        target: HTMLBalOptionElement;
+    }
+    interface BalOption {
+        value: string;
+        label: string;
+        selected: boolean;
+    }
+    type BalOptionFocusDetail = BalOption;
+    type BalOptionFocus = BalOptionCustomEvent<BalOptionFocusDetail>;
+    type BalOptionBlurDetail = FocusEvent;
+    type BalOptionBlur = BalOptionCustomEvent<BalOptionBlurDetail>;
+    type BalOptionChangeDetail = BalOption;
+    type BalOptionChange = BalOptionCustomEvent<BalOptionChangeDetail>;
+}

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

@@ -0,0 +1,168 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+import { Loggable, LogInstance } from '../../utils/log';
+import { BalAriaForm } from '../../utils/form';
+import { BalOption } from '../../utils/dropdown';
+export declare class OptionList implements ComponentInterface, Loggable {
+    private inputId;
+    private inheritAttributes;
+    private focusRaf;
+    el: HTMLElement;
+    log: LogInstance;
+    ariaForm: BalAriaForm;
+    createLogger(log: LogInstance): void;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * If `true` the list supports multiple selections
+     */
+    multiple: boolean;
+    /**
+     * If `true`, the user cannot interact with the option.
+     */
+    disabled: boolean;
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     */
+    required: boolean;
+    /**
+     * Defines the focused option with his index value
+     */
+    focusIndex: number;
+    /**
+     * Id of the label element to describe this option list
+     */
+    labelledby?: string;
+    /**
+     * Defines the filter logic of the list
+     */
+    filter: BalProps.BalOptionListFilter;
+    /**
+     * Defines the max height of the list element
+     */
+    contentHeight?: number;
+    contentHeightChanged(value?: number): void;
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentDidLoad(): void;
+    componentWillRender(): void;
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToMouseEnter(ev: BalEvents.BalOptionFocus): void;
+    listenToOptionChange({ detail }: BalEvents.BalOptionFocus): void;
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * Focus the first visible option in the list
+     * @returns focusIndex
+     */
+    focusFirst(): Promise<number>;
+    /**
+     * Focus the last visible option in the list
+     * @returns focusIndex
+     */
+    focusLast(): Promise<number>;
+    /**
+     * Focus the next visible option in the list
+     * @returns focusIndex
+     */
+    focusNext(): Promise<number>;
+    /**
+     * Focus the previous visible option in the list
+     * @returns focusIndex
+     */
+    focusPrevious(): Promise<number>;
+    /**
+     * Focus the option with the label that starts with the search property
+     * @returns focusIndex
+     */
+    focusByLabel(search: string, config: Partial<{
+        select: boolean;
+    }>): Promise<number>;
+    /**
+     * Filter the options by the given filter property and hides options
+     * @returns focusIndex
+     */
+    filterByContent(search: string): Promise<number>;
+    /**
+     * Shows or hides all options
+     */
+    resetHidden(hidden?: boolean): Promise<void>;
+    /**
+     * Selects or deselects all options
+     */
+    resetSelected(selected?: boolean): Promise<void>;
+    /**
+     * Updates options
+     */
+    updateSelected(values?: string[]): Promise<void>;
+    /**
+     * Resets the focus index to pristine and scrolls to the top of the list
+     */
+    resetFocus(): Promise<number>;
+    /**
+     * Returns a list of option values
+     */
+    getSelectedValues(): Promise<string[]>;
+    /**
+     * Returns a list of option labels
+     */
+    getSelectedOptions(values?: string[]): Promise<BalOption[]>;
+    /**
+     * Returns a list of options
+     */
+    getValues(): Promise<string[]>;
+    /**
+     * Returns a list of options
+     */
+    getLabels(): Promise<string[]>;
+    /**
+     * Returns a list of accessible options
+     */
+    getOptions(): Promise<BalOption[]>;
+    /**
+     * Selects the option with the current focus
+     */
+    selectByFocus(): Promise<void>;
+    /**
+     * @internal
+     */
+    setAriaForm(ariaForm: BalAriaForm): Promise<void>;
+    /**
+     * GETTERS
+     * ------------------------------------------------------
+     */
+    private get options();
+    private get allOptions();
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    private filterOptions;
+    private isOptionVisible;
+    private updateScrollTopPosition;
+    private updateScrollBottomPosition;
+    private getScrollTopForTopPosition;
+    private getScrollTopForBottomPosition;
+    private scrollTo;
+    private updateFocus;
+    private getOptionIndex;
+    private getFirstOptionIndex;
+    private getNextOptionIndex;
+    private getPreviousOptionIndex;
+    private getLastOptionIndex;
+    private getOptionIndexByLabel;
+    private getLength;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="@baloise/ds-core" />
+declare namespace BalProps {
+    type BalOptionListFilter = 'includes' | 'starts-with';
+}
+declare namespace BalEvents { }

package/dist/types/components/bal-radio/bal-radio-button/bal-radio-button.d.ts

@@ -1,7 +1,7 @@
 import { ComponentInterface, EventEmitter } from '../../../stencil-public-runtime';
 import { Loggable, LogInstance } from '../../../utils/log';
 import { BalElementStateInfo, BalElementStateObserver } from '../../../utils/element-states';
-export declare class BalRadioButton implements ComponentInterface, Loggable, BalElementStateObserver {
+export declare class RadioButton implements ComponentInterface, Loggable, BalElementStateObserver {
     el: HTMLElement;
     private keyboardMode;
     log: LogInstance;

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

@@ -177,7 +177,7 @@ export declare class Select implements ComponentInterface, Loggable, BalAriaForm
      */
     setFocus(): Promise<void>;
     /**
-     * Sets the focus on the input element
+     * Returns the value of the component
      */
     getValue(): Promise<string[]>;
     /**

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

@@ -1,10 +1,12 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
 import { Loggable, LogInstance } from '../../utils/log';
-export declare class Spinner implements ComponentInterface, Loggable {
+import { BalConfigObserver, BalConfigState } from '../../utils/config';
+export declare class Spinner implements ComponentInterface, Loggable, BalConfigObserver {
     private animationItem;
     private animationFunction?;
     private currentRaf;
     log: LogInstance;
+    animated: boolean;
     createLogger(log: LogInstance): void;
     el: HTMLElement;
     /**
@@ -23,17 +25,27 @@ export declare class Spinner implements ComponentInterface, Loggable {
     /**
      * Defines the color of the spinner.
      */
-    color: 'blue' | 'white';
+    color: BalProps.BalSpinnerColor;
     /**
      * If `true` the component is smaller
      */
     small: boolean;
+    /**
+     * Defines the look of the spinner
+     */
+    variation: BalProps.BalSpinnerVariation;
+    variationWatcher(newValue: BalProps.BalSpinnerVariation, oldValue: BalProps.BalSpinnerVariation): void;
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    configChanged(state: BalConfigState): void;
     /**
      * PRIVATE METHODS
      * ------------------------------------------------------

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

@@ -0,0 +1,6 @@
+/// <reference types="@baloise/ds-core" />
+declare namespace BalProps {
+    type BalSpinnerColor = 'blue' | 'white';
+    type BalSpinnerVariation = 'logo' | 'circle';
+}
+declare namespace BalEvents { }

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

@@ -1,6 +1,6 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
 import { Loggable, LogInstance } from '../../utils/log';
-export declare class BalStack implements ComponentInterface, Loggable {
+export declare class Stack implements ComponentInterface, Loggable {
     log: LogInstance;
     createLogger(log: LogInstance): void;
     /**