@baloise/ds-core 0.0.5-nightly.e56f740

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

@@ -0,0 +1,225 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { LogInstance, Loggable } from '../../utils/log';
+import { BalConfigState } from '../../utils/config';
+import { BalAriaForm } from '../../interfaces';
+import { BalAriaFormLinking } from '../../utils/form';
+export declare class Date implements ComponentInterface, Loggable, BalAriaFormLinking {
+    private inputId;
+    private inheritedAttributes;
+    private popupCleanup?;
+    private referenceEl;
+    private floatingEl;
+    private inputEl;
+    el: HTMLElement;
+    private isExpanded;
+    private language;
+    private calendarValue;
+    ariaForm: BalAriaForm;
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    name: string;
+    /**
+     * If `true` the component gets a invalid style.
+     */
+    invalid: boolean;
+    /**
+     * If `true` the attribute required is added to the native input.
+     */
+    required: boolean;
+    /**
+     * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+     */
+    disabled: boolean;
+    /**
+     * If `true` the element can not mutated, meaning the user can not edit the control.
+     */
+    readonly: boolean;
+    /**
+     * If `true` there will be on trigger icon visible
+     */
+    freeSolo: boolean;
+    /**
+     * The text to display when the select is empty.
+     */
+    placeholder?: string;
+    /**
+     * If `true` the datepicker only open on click of the icon
+     */
+    triggerIcon: boolean;
+    /**
+     * Closes the datepicker popover after selection
+     */
+    closeOnSelect: boolean;
+    /**
+     * The value of the form field, which accepts ISO 8601 date strings (YYYY-MM-DD).
+     */
+    value: string | undefined;
+    protected valueChanged(): void;
+    /**
+     * The minimum datetime allowed. Value must be a date string
+     * following the
+     * [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),
+     * such as `1996-12-19`. The format does not have to be specific to an exact
+     * datetime. For example, the minimum could just be the year, such as `1994`.
+     * Defaults to the beginning of the year, 100 years ago from today.
+     */
+    min?: string;
+    /**
+     * The maximum datetime allowed. Value must be a date string
+     * following the
+     * [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),
+     * `1996-12-19`. The format does not have to be specific to an exact
+     * datetime. For example, the maximum could just be the year, such as `1994`.
+     * Defaults to the end of this year.
+     */
+    max?: string;
+    /**
+     * Earliest year available for selection
+     */
+    minYearProp?: number;
+    /**
+     * Latest year available for selection
+     */
+    maxYearProp?: number;
+    /**
+     * The date to defines where the datepicker popup starts. The prop accepts ISO 8601 date strings (YYYY-MM-DD).
+     */
+    defaultDate?: string;
+    /**
+     * Callback to determine which date in the datepicker should be selectable.
+     */
+    allowedDates: BalProps.BalDateCallback | undefined;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
+     */
+    debounce: number;
+    protected debounceChanged(): void;
+    /**
+     * If `true`, in Angular reactive forms the control will not be set invalid
+     */
+    autoInvalidOff: boolean;
+    /**
+     * Emitted when a keyboard input occurred.
+     */
+    balInput: EventEmitter<BalEvents.BalDateInputDetail>;
+    /**
+     * Emitted when a option got selected.
+     */
+    balChange: EventEmitter<BalEvents.BalDateChangeDetail>;
+    /**
+     * Emitted before the animation starts
+     */
+    balWillAnimate: EventEmitter<BalEvents.BalDateWillAnimateDetail>;
+    /**
+     * Emitted after the animation has finished
+     */
+    balDidAnimate: EventEmitter<BalEvents.BalDateDidAnimateDetail>;
+    /**
+     * Emitted when the input loses focus.
+     */
+    balBlur: EventEmitter<BalEvents.BalDateBlurDetail>;
+    /**
+     * Emitted when the input has focus.
+     */
+    balFocus: EventEmitter<BalEvents.BalDateFocusDetail>;
+    /**
+     * Emitted when the input has clicked.
+     */
+    balInputClick: EventEmitter<BalEvents.BalDateInputClickDetail>;
+    /**
+     * Emitted when the icon has clicked.
+     */
+    balIconClick: EventEmitter<BalEvents.BalDateIconClickDetail>;
+    /**
+     * @internal - Use this to close unused popovers.
+     */
+    balPopoverPrepare: EventEmitter<string>;
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToKeydown(ev: KeyboardEvent): Promise<void>;
+    listenOnKeyup(ev: KeyboardEvent): Promise<void>;
+    listenOnclick(ev: UIEvent): Promise<void>;
+    listenOnPopoverPrepare(ev: CustomEvent<string>): Promise<void>;
+    /**
+     * @internal define config for the component
+     */
+    configChanged(state: BalConfigState): Promise<void>;
+    /**
+     * PUBLIC METHOD
+     * ------------------------------------------------------
+     */
+    /**
+     * Opens the accordion
+     */
+    open(): Promise<boolean>;
+    /**
+     * Closes the accordion
+     */
+    close(): Promise<boolean>;
+    /**
+     * Triggers the accordion
+     */
+    toggle(): Promise<boolean>;
+    /**
+     * Selects an option
+     */
+    select(dateString: string): Promise<void>;
+    /**
+     * Sets focus on the native `input` in `bal-input`. Use this method instead of the global
+     * `input.focus()`.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Sets blur on the native `input` in `bal-input`. Use this method instead of the global
+     * `input.blur()`.
+     * @internal
+     */
+    setBlur(): Promise<void>;
+    /**
+     * Returns the native `<input>` element used under the hood.
+     */
+    getInputElement(): Promise<HTMLInputElement | undefined>;
+    /**
+     * @internal
+     */
+    setAriaForm(ariaForm: BalAriaForm): Promise<void>;
+    /**
+     * PRIVATE METHOD
+     * ------------------------------------------------------
+     */
+    private expand;
+    private collapse;
+    private updatePosition;
+    /**
+     * EVENT BINDING
+     * ------------------------------------------------------
+     */
+    private onIconClick;
+    private onInputClick;
+    private onCalendarChange;
+    private onInputInput;
+    private onInputChange;
+    private onInputFocus;
+    private onInputBlur;
+    private onKeyPress;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

package/dist/types/components/bal-date/bal-date.i18n.d.ts

@@ -0,0 +1,8 @@
+import { I18n } from '../../interfaces';
+export interface I18nBalDate {
+    toggleDatepicker: string;
+    nextMonth: string;
+    previousMonth: string;
+    selectMonth: string;
+}
+export declare const i18nBalDate: I18n<I18nBalDate>;

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

@@ -0,0 +1,26 @@
+/// <reference types="packages/core/src/interfaces" />
+declare namespace BalProps {
+    type BalDateCallback = (dateString: string) => boolean;
+}
+declare namespace BalEvents {
+    interface BalDateCustomEvent<T> extends CustomEvent<T> {
+        detail: T;
+        target: HTMLBalDateElement;
+    }
+    type BalDateChangeDetail = string | undefined;
+    type BalDateChange = BalDateCustomEvent<BalDateChangeDetail>;
+    type BalDateInputDetail = string | undefined;
+    type BalDateInput = BalDateCustomEvent<BalDateInputDetail>;
+    type BalDateBlurDetail = FocusEvent;
+    type BalDateBlur = BalDateCustomEvent<BalDateBlurDetail>;
+    type BalDateFocusDetail = FocusEvent;
+    type BalDateFocus = BalDateCustomEvent<BalDateFocusDetail>;
+    type BalDateInputClickDetail = MouseEvent;
+    type BalDateInputClick = BalDateCustomEvent<BalDateInputClickDetail>;
+    type BalDateIconClickDetail = MouseEvent;
+    type BalDateIconClick = BalDateCustomEvent<BalDateIconClickDetail>;
+    type BalDateWillAnimateDetail = boolean;
+    type BalDateWillAnimate = BalDateCustomEvent<BalDateWillAnimateDetail>;
+    type BalDateDidAnimateDetail = boolean;
+    type BalDateDidAnimate = BalDateCustomEvent<BalDateDidAnimateDetail>;
+}

package/dist/types/components/bal-date/utils/calendar.d.ts

@@ -0,0 +1,38 @@
+import { I18n } from '../../../interfaces';
+export declare function getDaysInMonth(year: number, month: number): number | undefined;
+export interface ListItem {
+    value: number;
+    label: string;
+    today?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+}
+export interface DayCell {
+    day: number;
+    month: number;
+    year: number;
+    isoDate: string;
+    fullDate: string;
+    today: boolean;
+    disabled: boolean;
+}
+export declare function emptyCell(): {
+    day: number;
+    month: number;
+    year: number;
+    isoDate: string;
+    fullDate: string;
+    today: boolean;
+    disabled: boolean;
+};
+export declare function generateCalendarGrid(year: number, month: number, min?: string, max?: string, allowedDates?: BalProps.BalDateCalendarAllowedDatesCallback): DayCell[];
+export declare function getFirstWeekdayOfMonth(year: number, month: number): number;
+export type WeekdayCell = {
+    ariaLabel: string;
+    textContent: string;
+};
+export declare function validateLanguage(language: string): keyof I18n<any>;
+export declare function generateYears(currentYear: number, minYear: number, maxYear: number): ListItem[];
+export declare function generateMonths(language: keyof I18n<any>, currentYear?: number, selectedDate?: string, min?: string, max?: string): ListItem[];
+export declare function generateWeekDays(language: keyof I18n<any>): WeekdayCell[];
+export declare function getFirstDayOfMonth(year: number, month: number): Date | undefined;

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

@@ -0,0 +1,221 @@
+import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
+import { BalCalendarCell, BalPointerDate } from './bal-datepicker.type';
+import { BalConfigObserver, BalLanguage, BalConfigState, BalRegion } from '../../utils/config';
+import { FormInput } from '../../utils/form-input';
+import { Loggable, LogInstance } from '../../utils/log';
+import { BalBreakpointObserver, BalBreakpoints } from '../../utils/breakpoints';
+import { BalAriaForm, BalAriaFormLinking } from '../../utils/form';
+export declare class Datepicker implements ComponentInterface, BalConfigObserver, FormInput<string | undefined>, Loggable, BalBreakpointObserver, BalAriaFormLinking {
+    private inputId;
+    private inheritedAttributes;
+    private popoverElement;
+    nativeInput: HTMLInputElement;
+    inputValue: string;
+    initialValue?: string;
+    el: HTMLElement;
+    language: BalLanguage;
+    region: BalRegion;
+    isMobile: boolean;
+    focused: boolean;
+    isPopoverOpen: boolean;
+    selectedDate?: string;
+    pointerDate: BalPointerDate;
+    ariaForm: BalAriaForm;
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    name: string;
+    /**
+     * If `true` the component gets a invalid style.
+     */
+    invalid: boolean;
+    /**
+     * If `true` the attribute required is added to the native input.
+     */
+    required: boolean;
+    /**
+     * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+     */
+    disabled: boolean;
+    /**
+     * If `true` the element can not mutated, meaning the user can not edit the control.
+     */
+    readonly: boolean;
+    /**
+     * Defines if the select is in a loading state.
+     */
+    loading: boolean;
+    /**
+     * The text to display when the select is empty.
+     */
+    placeholder?: string;
+    /**
+     * The minimum datetime allowed. Value must be a date string
+     * following the
+     * [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),
+     * such as `1996-12-19`. The format does not have to be specific to an exact
+     * datetime. For example, the minimum could just be the year, such as `1994`.
+     * Defaults to the beginning of the year, 100 years ago from today.
+     */
+    min?: string;
+    /**
+     * The maximum datetime allowed. Value must be a date string
+     * following the
+     * [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),
+     * `1996-12-19`. The format does not have to be specific to an exact
+     * datetime. For example, the maximum could just be the year, such as `1994`.
+     * Defaults to the end of this year.
+     */
+    max?: string;
+    /**
+     * Closes the datepicker popover after selection
+     */
+    closeOnSelect: boolean;
+    /**
+     * If `true` the datepicker only open on click of the icon
+     */
+    triggerIcon: boolean;
+    /**
+     * Earliest year available for selection
+     */
+    minYearProp?: number;
+    /**
+     * Latest year available for selection
+     */
+    maxYearProp?: number;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
+     */
+    debounce: number;
+    protected debounceChanged(): void;
+    /**
+     * The date to defines where the datepicker popup starts. The prop accepts ISO 8601 date strings (YYYY-MM-DD).
+     */
+    defaultDate?: string;
+    /**
+     * The value of the form field, which accepts ISO 8601 date strings (YYYY-MM-DD).
+     */
+    value?: string;
+    /**
+     * Update the native input element when the value changes
+     */
+    protected valueChanged(): void;
+    /**
+     * Callback to determine which date in the datepicker should be selectable.
+     */
+    allowedDates: BalProps.BalDatepickerCallback | undefined;
+    /**
+     * If `true`, in Angular reactive forms the control will not be set invalid
+     */
+    autoInvalidOff: boolean;
+    /**
+     * Emitted when a option got selected.
+     */
+    balChange: EventEmitter<BalEvents.BalDatepickerChangeDetail>;
+    /**
+     * Emitted when a keyboard input occurred.
+     */
+    balInput: EventEmitter<BalEvents.BalDatepickerInputDetail>;
+    /**
+     * Emitted when the input loses focus.
+     */
+    balBlur: EventEmitter<BalEvents.BalDatepickerBlurDetail>;
+    /**
+     * Emitted when the input has focus.
+     */
+    balFocus: EventEmitter<BalEvents.BalDatepickerFocusDetail>;
+    /**
+     * Emitted when the input has clicked.
+     */
+    balInputClick: EventEmitter<BalEvents.BalDatepickerInputClickDetail>;
+    /**
+     * Emitted when the icon has clicked.
+     */
+    balIconClick: EventEmitter<BalEvents.BalDatepickerIconClickDetail>;
+    listenOnClick(ev: UIEvent): void;
+    private resetHandlerTimer?;
+    resetHandler(ev: UIEvent): void;
+    breakpointListener(breakpoints: BalBreakpoints): void;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    componentWillLoad(): void;
+    /**
+     * @internal define config for the component
+     */
+    configChanged(state: BalConfigState): Promise<void>;
+    /**
+     * Opens the popover
+     */
+    open(): Promise<void>;
+    /**
+     * Closes the popover
+     */
+    close(): Promise<void>;
+    /**
+     * Selects an option
+     */
+    select(dateString: string): Promise<void>;
+    /**
+     * Sets focus on the native `input`. Use this method instead of the global
+     * `input.focus()`.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Sets blur on the native `input`. Use this method instead of the global
+     * `input.blur()`.
+     * @internal
+     */
+    setBlur(): Promise<void>;
+    /**
+     * Returns the native `<input>` element used under the hood.
+     */
+    getInputElement(): Promise<HTMLInputElement>;
+    /**
+     * @internal
+     */
+    setAriaForm(ariaForm: BalAriaForm): Promise<void>;
+    private updatePointerDates;
+    private updateValue;
+    get minYear(): number;
+    get maxYear(): number;
+    get years(): number[];
+    get months(): {
+        name: string;
+        index: number;
+    }[];
+    get weekDays(): string[];
+    get firstDateOfBox(): Date;
+    getLocale(): string;
+    get calendarGrid(): BalCalendarCell[][];
+    private getAllowedDates;
+    private onIconClick;
+    private onInputClick;
+    private onPopoverChange;
+    private formatDate;
+    private onInput;
+    private onInputChange;
+    private onClickDateCell;
+    private onInputKeyUp;
+    private onInputKeyDown;
+    private onMonthSelect;
+    private onYearSelect;
+    private onInputFocus;
+    private onInputBlur;
+    private fireBlur;
+    private handleClick;
+    render(): any;
+    renderInput(): any;
+    renderGrid(): any;
+    renderWeekDayHeader(): any;
+    renderHeader(): any;
+    private previousMonth;
+    private nextMonth;
+    private calcPreviousMonth;
+    private calcNextMonth;
+    private lastDayOfMonth;
+    private get isPreviousMonthDisabled();
+    private get isNextMonthDisabled();
+    private isDateInRange;
+}

package/dist/types/components/bal-datepicker/bal-datepicker.i18n.d.ts

@@ -0,0 +1,10 @@
+import { I18n } from '../../interfaces';
+interface I18nBalDatepicker {
+    months: string[];
+    monthsShort: string[];
+    weekdays: string[];
+    weekdaysShort: string[];
+    weekdaysMin: string[];
+}
+export declare const i18nBalDatepicker: I18n<I18nBalDatepicker>;
+export {};

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

@@ -0,0 +1,22 @@
+/// <reference types="packages/core/src/interfaces" />
+declare namespace BalProps {
+    type BalDatepickerCallback = (dateString: string) => boolean;
+}
+declare namespace BalEvents {
+    interface BalDatepickerCustomEvent<T> extends CustomEvent<T> {
+        detail: T;
+        target: HTMLBalDatepickerElement;
+    }
+    type BalDatepickerChangeDetail = string | undefined;
+    type BalDatepickerChange = BalDatepickerCustomEvent<BalDatepickerChangeDetail>;
+    type BalDatepickerInputDetail = string | undefined;
+    type BalDatepickerInput = BalDatepickerCustomEvent<BalDatepickerInputDetail>;
+    type BalDatepickerBlurDetail = FocusEvent;
+    type BalDatepickerBlur = BalDatepickerCustomEvent<BalDatepickerBlurDetail>;
+    type BalDatepickerFocusDetail = FocusEvent;
+    type BalDatepickerFocus = BalDatepickerCustomEvent<BalDatepickerFocusDetail>;
+    type BalDatepickerInputClickDetail = MouseEvent;
+    type BalDatepickerInputClick = BalDatepickerCustomEvent<BalDatepickerInputClickDetail>;
+    type BalDatepickerIconClickDetail = MouseEvent;
+    type BalDatepickerIconClick = BalDatepickerCustomEvent<BalDatepickerIconClickDetail>;
+}

package/dist/types/components/bal-datepicker/bal-datepicker.type.d.ts

@@ -0,0 +1,14 @@
+export interface BalCalendarCell {
+    date: Date;
+    label: string;
+    dateString: string;
+    isToday: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+    isOutdated: boolean;
+}
+export interface BalPointerDate {
+    year: number;
+    month: number;
+    day: number;
+}

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

@@ -0,0 +1,28 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+import { Loggable, LogInstance } from '../../utils/log';
+export declare class BalDivider implements ComponentInterface, Loggable {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * Defines the position of the child elements if they
+     * are showed verticaly or horizontally. Default is verticaly.
+     */
+    layout: BalProps.BalDividerLayout;
+    /**
+     * Defines the space between the child elements. Default is xx-small.
+     */
+    space: BalProps.BalDividerSpace;
+    /**
+     * Defines the color of the separator line.
+     */
+    color: BalProps.BalDividerColor;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

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

@@ -0,0 +1,6 @@
+/// <reference types="packages/core/src/interfaces" />
+declare namespace BalProps {
+    type BalDividerLayout = 'horizontal' | 'vertical' | '';
+    type BalDividerColor = 'primary' | 'primary-light' | 'primary-dark' | 'grey-light' | 'grey' | 'grey-dark' | 'warning' | 'success' | 'danger' | 'danger-dark' | 'danger-darker' | 'white' | 'light-blue';
+    type BalDividerSpace = 'none' | 'xx-small' | 'x-small' | 'small' | 'normal' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | '';
+}

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

@@ -0,0 +1,23 @@
+export declare class FieldControl {
+    /**
+     * @deprecated
+     * Baloise icon for the right side of the input
+     */
+    iconRight: string;
+    /**
+     * @deprecated
+     * Baloise icon for the left side of the input
+     */
+    iconLeft: string;
+    /**
+     * If `true` on mobile devices the form control children are aligned verticaly and expanded to the full width
+     */
+    expandedOnMobile?: boolean;
+    /**
+     * If `true` a loading spinner is visible at the end of the input
+     */
+    loading: boolean;
+    get buildIconLeftTemplate(): any;
+    get buildIconRightTemplate(): any;
+    render(): any;
+}

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

@@ -0,0 +1,15 @@
+export declare class FieldHint {
+    /**
+     * Text of the inputs label
+     */
+    subject?: string;
+    /**
+     * Text for the close button.
+     */
+    closeLabel: string;
+    /**
+     * Disables the close button for tablet and desktop
+     */
+    small: boolean;
+    render(): any;
+}