@baloise/ds-core 19.9.5 → 20.0.0-next.4

package/dist/collection/components/bal-date/bal-date.js

@@ -1,1142 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import { isEscapeKey } from "@baloise/web-app-utils";
-import { Host, h, } from "@stencil/core";
-import { ariaBooleanToString } from "../../utils/aria";
-import { inheritAttributes } from "../../utils/attributes";
-import { BEM } from "../../utils/bem";
-import { balBrowser } from "../../utils/browser";
-import { ListenToConfig, defaultConfig } from "../../utils/config";
-import { BalDate } from "../../utils/date";
-import { balFloatingUi } from "../../utils/floating-ui";
-import { FOCUS_KEYS } from "../../utils/focus-visible";
-import { defaultBalAriaForm } from "../../utils/form";
-import { stopEventBubbling } from "../../utils/form-input";
-import { addEventListener, debounceEvent, rIC, removeEventListener, waitAfterIdleCallback } from "../../utils/helpers";
-import { isSpaceKey } from "../../utils/keyboard";
-import { Logger } from "../../utils/log";
-import { i18nBalDate } from "./bal-date.i18n";
-export class Date {
-    constructor() {
-        this.inputId = `bal-da-${dateIds++}`;
-        this.inheritedAttributes = {};
-        this.isKeyboardMode = false;
-        this.hasFocus = false;
-        this.isExpanded = false;
-        this.language = defaultConfig.language;
-        this.ariaForm = defaultBalAriaForm;
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * If `true` the component gets a invalid style.
-         */
-        this.invalid = false;
-        /**
-         * If `true` the attribute required is added to the native input.
-         */
-        this.required = false;
-        /**
-         * 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.
-         */
-        this.disabled = false;
-        /**
-         * If `true` the element can not mutated, meaning the user can not edit the control.
-         */
-        this.readonly = false;
-        /**
-         * If `true` there will be no trigger icon visible, so no UX indicator for a picker
-         */
-        this.freeSolo = false;
-        /**
-         * If `true` the datepicker only open on click of the icon
-         */
-        this.triggerIcon = false;
-        /**
-         * Closes the datepicker popover after selection
-         */
-        this.closeOnSelect = true;
-        /**
-         * Indicates whether the value of the control can be automatically completed by the browser.
-         */
-        this.autocomplete = 'off';
-        /**
-         * The value of the form field, which accepts ISO 8601 date strings (YYYY-MM-DD).
-         */
-        this.value = undefined;
-        /**
-         * Callback to determine which date in the datepicker should be selectable.
-         */
-        this.allowedDates = undefined;
-        /**
-         * If `true`, it returns the string `INVALID_VALUE` within the balChange event if the input provided is not valid.
-         */
-        this.allowInvalidValue = false;
-        /**
-         * 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`.
-         */
-        this.debounce = 0;
-        /**
-         * If `true`, in Angular reactive forms the control will not be set invalid
-         */
-        this.autoInvalidOff = false;
-        /**
-         * LIFECYCLE
-         * ------------------------------------------------------
-         */
-        this.hasConnected = false;
-        /**
-         * PRIVATE METHOD
-         * ------------------------------------------------------
-         */
-        this.handleKeydown = (ev) => {
-            this.isKeyboardMode = FOCUS_KEYS.includes(ev.key);
-        };
-        this.handlePointerDown = () => {
-            this.isKeyboardMode = false;
-        };
-        this.handleOutsideClick = (ev) => {
-            if (this.isExpanded) {
-                if (!this.el.contains(ev.target)) {
-                    this.isExpanded = false;
-                    this.hasFocus = false;
-                    rIC(() => this.balBlur.emit(ev));
-                }
-            }
-        };
-        this.handleFocus = (ev) => {
-            stopEventBubbling(ev);
-            this.hasFocus = true;
-            this.balFocus.emit(ev.detail);
-        };
-        this.handleBlur = (ev) => {
-            stopEventBubbling(ev);
-            if (!this.isExpanded) {
-                this.hasFocus = false;
-                rIC(() => this.balBlur.emit(ev.detail));
-            }
-        };
-        /**
-         * EVENT BINDING
-         * ------------------------------------------------------
-         */
-        this.onIconClick = async (_ev) => {
-            if (this.triggerIcon) {
-                await this.toggle();
-            }
-            else {
-                await this.open();
-            }
-        };
-        this.onInputClick = async (_ev) => {
-            if (!this.triggerIcon) {
-                await this.open();
-            }
-        };
-        this.onCalendarChange = (ev) => {
-            stopEventBubbling(ev);
-            this.value = ev.detail;
-            this.balChange.emit(this.value);
-            if (this.closeOnSelect) {
-                this.close();
-                this.hasFocus = false;
-                rIC(() => this.balBlur.emit());
-            }
-        };
-        this.onInputInput = (ev) => {
-            stopEventBubbling(ev);
-            this.balInput.emit(ev.detail);
-            if (ev.detail) {
-                const date = BalDate.fromAnyFormat(ev.detail);
-                if (date.isValid) {
-                    this.calendarValue = date.toISODate();
-                }
-            }
-        };
-        this.onInputChange = (ev) => {
-            stopEventBubbling(ev);
-            this.value = ev.detail;
-            this.balChange.emit(this.value);
-        };
-        this.onKeyPress = async ({ detail }) => {
-            if (detail && detail.key) {
-                if (this.isExpanded) {
-                    if (detail.key === 'Tab' || isEscapeKey(detail) || isSpaceKey(detail)) {
-                        await this.close();
-                    }
-                }
-                else {
-                    if (isSpaceKey(detail)) {
-                        await this.open();
-                    }
-                }
-            }
-        };
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    valueChanged() {
-        this.calendarValue = this.value;
-    }
-    debounceChanged() {
-        this.balChange = debounceEvent(this.balChange, this.debounce);
-    }
-    connectedCallback() {
-        if (balBrowser.hasDocument) {
-            addEventListener(document, 'keydown', this.handleKeydown);
-            addEventListener(document, 'touchstart', this.handlePointerDown);
-            addEventListener(document, 'mousedown', this.handlePointerDown);
-            addEventListener(document, 'click', this.handleOutsideClick);
-        }
-        this.hasConnected = true;
-        this.valueChanged();
-    }
-    disconnectedCallback() {
-        if (balBrowser.hasDocument) {
-            removeEventListener(document, 'keydown', this.handleKeydown);
-            removeEventListener(document, 'touchstart', this.handlePointerDown);
-            removeEventListener(document, 'mousedown', this.handlePointerDown);
-            removeEventListener(document, 'click', this.handleOutsideClick);
-        }
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title', 'data-hj-allow']);
-    }
-    /**
-     * @internal define config for the component
-     */
-    async configChanged(state) {
-        this.language = state.language;
-    }
-    /**
-     * PUBLIC METHOD
-     * ------------------------------------------------------
-     */
-    /**
-     * Opens the accordion
-     */
-    async open() {
-        return this.expand();
-    }
-    /**
-     * Closes the accordion
-     */
-    async close() {
-        return this.collapse();
-    }
-    /**
-     * Triggers the accordion
-     */
-    async toggle() {
-        if (this.isExpanded) {
-            return this.collapse();
-        }
-        else {
-            return this.expand();
-        }
-    }
-    /**
-     * Selects an option
-     */
-    async select(dateString) {
-        const date = BalDate.fromISO(dateString);
-        if (date.isValid) {
-            this.value = date.toISODate();
-            this.calendarValue = this.value;
-        }
-    }
-    /**
-     * Sets focus on the native `input` in `bal-input`. Use this method instead of the global
-     * `input.focus()`.
-     */
-    async setFocus() {
-        if (this.inputEl && !this.disabled && !this.readonly) {
-            await waitAfterIdleCallback();
-            this.inputEl.focus();
-        }
-    }
-    /**
-     * Sets blur on the native `input` in `bal-input`. Use this method instead of the global
-     * `input.blur()`.
-     * @internal
-     */
-    async setBlur() {
-        var _a;
-        if (this.inputEl && !this.disabled && !this.readonly) {
-            await waitAfterIdleCallback();
-            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setBlur();
-        }
-    }
-    /**
-     * Returns the native `<input>` element used under the hood.
-     */
-    async getInputElement() {
-        var _a;
-        return (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.getInputElement();
-    }
-    /**
-     * @internal
-     */
-    async setAriaForm(ariaForm) {
-        var _a;
-        this.ariaForm = Object.assign({}, ariaForm);
-        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAriaForm(ariaForm);
-    }
-    async expand() {
-        if (this.referenceEl && this.floatingEl) {
-            const lib = await balFloatingUi.load();
-            this.balWillAnimate.emit();
-            this.isExpanded = true;
-            this.popupCleanup = lib.autoUpdate(this.referenceEl, this.floatingEl, () => {
-                this.updatePosition(this.referenceEl, this.floatingEl);
-            });
-        }
-        return this.isExpanded;
-    }
-    async collapse() {
-        if (this.floatingEl) {
-            this.balWillAnimate.emit();
-            this.isExpanded = false;
-            if (this.popupCleanup) {
-                this.popupCleanup();
-            }
-            this.balDidAnimate.emit();
-        }
-        return this.isExpanded;
-    }
-    async updatePosition(referenceEl, floatingEl) {
-        const lib = await balFloatingUi.load();
-        lib
-            .computePosition(referenceEl, floatingEl, {
-            placement: 'bottom-start',
-            middleware: [lib.offset(4), lib.flip({ crossAxis: false })],
-        })
-            .then(({ x, y }) => {
-            Object.assign(floatingEl.style, {
-                left: `${x}px`,
-                top: `${y}px`,
-            });
-            this.balDidAnimate.emit();
-        });
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = BEM.block('date');
-        const blockIcon = block.element('icon');
-        const blockPopup = block.element('popup');
-        return (h(Host, { key: '66accfbf681e12eefdc6e61912fe5736f75c4501', id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '4e816b701215387a395c6a73da929609302d0c8f', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ key: '188d50af76d1625bafb08b2d8ad4d13756bc4468', name: this.name, required: this.required, placeholder: this.placeholder, value: this.value, min: this.min, max: this.max, invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, allowInvalidValue: this.allowInvalidValue, autocomplete: this.autocomplete, onClick: this.onInputClick, onBalInput: this.onInputInput, onBalChange: this.onInputChange, onBalFocus: ev => this.handleFocus(ev), onBalBlur: ev => this.handleBlur(ev), onBalKeyPress: this.onKeyPress, ref: el => (this.inputEl = el) }, this.inheritedAttributes)), !this.freeSolo ? (h("bal-icon", { name: "date", role: "button", tabindex: -1, class: Object.assign(Object.assign({}, blockIcon.class()), blockIcon.modifier('clickable').class(!this.disabled && !this.readonly)), "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', onClick: this.onIconClick, "aria-label": i18nBalDate[this.language].toggleDatepicker, "aria-haspopup": "true", "aria-expanded": ariaBooleanToString(this.isExpanded) })) : ('')), h("div", { key: '8eaee6ea09c2099057a2ad0165d63f70154d4095', role: "dialog", class: Object.assign(Object.assign({}, blockPopup.class()), blockPopup.modifier('visible').class(this.isExpanded)), ref: el => (this.floatingEl = el), "aria-hidden": `${this.isExpanded !== true}`, "aria-presented": `${this.isExpanded === true}` }, h("bal-date-calendar", { key: '16f6680967612f55e9f8259b780a02e61c830090', value: this.calendarValue, min: this.min, max: this.max, minYearProp: this.minYearProp, maxYearProp: this.maxYearProp, defaultDate: this.defaultDate, allowedDates: this.allowedDates, onBalChange: this.onCalendarChange }))));
-    }
-    static get is() { return "bal-date"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["bal-date.sass"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["bal-date.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The name of the control, which is submitted with the form data."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name",
-                "defaultValue": "this.inputId"
-            },
-            "invalid": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the component gets a invalid style."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "invalid",
-                "defaultValue": "false"
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the attribute required is added to the native input."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "required",
-                "defaultValue": "false"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "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."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "readonly": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the element can not mutated, meaning the user can not edit the control."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "readonly",
-                "defaultValue": "false"
-            },
-            "freeSolo": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` there will be no trigger icon visible, so no UX indicator for a picker"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "free-solo",
-                "defaultValue": "false"
-            },
-            "placeholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The text to display when the select is empty."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placeholder"
-            },
-            "triggerIcon": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the datepicker only open on click of the icon"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "trigger-icon",
-                "defaultValue": "false"
-            },
-            "closeOnSelect": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Closes the datepicker popover after selection"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "close-on-select",
-                "defaultValue": "true"
-            },
-            "autocomplete": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "BalProps.BalInputAutocomplete",
-                    "resolved": "\"on\" | \"off\" | \"tel\" | \"url\" | \"email\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
-                    "references": {
-                        "BalProps": {
-                            "location": "global",
-                            "id": "global::BalProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Indicates whether the value of the control can be automatically completed by the browser."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "autocomplete",
-                "defaultValue": "'off'"
-            },
-            "value": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string | undefined",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The value of the form field, which accepts ISO 8601 date strings (YYYY-MM-DD)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value",
-                "defaultValue": "undefined"
-            },
-            "min": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The minimum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\nsuch as `1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the minimum could just be the year, such as `1994`.\nDefaults to the beginning of the year, 100 years ago from today."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "min"
-            },
-            "max": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The maximum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\n`1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the maximum could just be the year, such as `1994`.\nDefaults to the end of this year."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max"
-            },
-            "minYearProp": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Earliest year available for selection"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "min-year"
-            },
-            "maxYearProp": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Latest year available for selection"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-year"
-            },
-            "defaultDate": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The date to defines where the datepicker popup starts. The prop accepts ISO 8601 date strings (YYYY-MM-DD)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "default-date"
-            },
-            "allowedDates": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "BalProps.BalDateCallback | undefined",
-                    "resolved": "(dateString: string) => boolean",
-                    "references": {
-                        "BalProps": {
-                            "location": "global",
-                            "id": "global::BalProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Callback to determine which date in the datepicker should be selectable."
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "undefined"
-            },
-            "allowInvalidValue": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, it returns the string `INVALID_VALUE` within the balChange event if the input provided is not valid."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "allow-invalid-value",
-                "defaultValue": "false"
-            },
-            "debounce": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "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`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "debounce",
-                "defaultValue": "0"
-            },
-            "autoInvalidOff": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, in Angular reactive forms the control will not be set invalid"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "auto-invalid-off",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isKeyboardMode": {},
-            "hasFocus": {},
-            "isExpanded": {},
-            "language": {},
-            "calendarValue": {},
-            "ariaForm": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "balInput",
-                "name": "balInput",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when a keyboard input occurred."
-                },
-                "complexType": {
-                    "original": "BalEvents.BalDateInputDetail",
-                    "resolved": "string",
-                    "references": {
-                        "BalEvents": {
-                            "location": "global",
-                            "id": "global::BalEvents"
-                        }
-                    }
-                }
-            }, {
-                "method": "balChange",
-                "name": "balChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when a option got selected."
-                },
-                "complexType": {
-                    "original": "BalEvents.BalDateChangeDetail",
-                    "resolved": "string",
-                    "references": {
-                        "BalEvents": {
-                            "location": "global",
-                            "id": "global::BalEvents"
-                        }
-                    }
-                }
-            }, {
-                "method": "balWillAnimate",
-                "name": "balWillAnimate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted before the animation starts"
-                },
-                "complexType": {
-                    "original": "BalEvents.BalDateWillAnimateDetail",
-                    "resolved": "boolean",
-                    "references": {
-                        "BalEvents": {
-                            "location": "global",
-                            "id": "global::BalEvents"
-                        }
-                    }
-                }
-            }, {
-                "method": "balDidAnimate",
-                "name": "balDidAnimate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted after the animation has finished"
-                },
-                "complexType": {
-                    "original": "BalEvents.BalDateDidAnimateDetail",
-                    "resolved": "boolean",
-                    "references": {
-                        "BalEvents": {
-                            "location": "global",
-                            "id": "global::BalEvents"
-                        }
-                    }
-                }
-            }, {
-                "method": "balBlur",
-                "name": "balBlur",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the input loses focus."
-                },
-                "complexType": {
-                    "original": "BalEvents.BalDateBlurDetail",
-                    "resolved": "FocusEvent",
-                    "references": {
-                        "BalEvents": {
-                            "location": "global",
-                            "id": "global::BalEvents"
-                        }
-                    }
-                }
-            }, {
-                "method": "balFocus",
-                "name": "balFocus",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the input has focus."
-                },
-                "complexType": {
-                    "original": "BalEvents.BalDateFocusDetail",
-                    "resolved": "FocusEvent",
-                    "references": {
-                        "BalEvents": {
-                            "location": "global",
-                            "id": "global::BalEvents"
-                        }
-                    }
-                }
-            }, {
-                "method": "balInputClick",
-                "name": "balInputClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the input has clicked."
-                },
-                "complexType": {
-                    "original": "BalEvents.BalDateInputClickDetail",
-                    "resolved": "MouseEvent",
-                    "references": {
-                        "BalEvents": {
-                            "location": "global",
-                            "id": "global::BalEvents"
-                        }
-                    }
-                }
-            }, {
-                "method": "balIconClick",
-                "name": "balIconClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the icon has clicked."
-                },
-                "complexType": {
-                    "original": "BalEvents.BalDateIconClickDetail",
-                    "resolved": "MouseEvent",
-                    "references": {
-                        "BalEvents": {
-                            "location": "global",
-                            "id": "global::BalEvents"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "configChanged": {
-                "complexType": {
-                    "signature": "(state: BalConfigState) => Promise<void>",
-                    "parameters": [{
-                            "name": "state",
-                            "type": "BalConfigState",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "BalConfigState": {
-                            "location": "import",
-                            "path": "../../utils/config",
-                            "id": "src/utils/config/index.ts::BalConfigState"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": "define config for the component"
-                        }]
-                }
-            },
-            "open": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Opens the accordion",
-                    "tags": []
-                }
-            },
-            "close": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Closes the accordion",
-                    "tags": []
-                }
-            },
-            "toggle": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Triggers the accordion",
-                    "tags": []
-                }
-            },
-            "select": {
-                "complexType": {
-                    "signature": "(dateString: string) => Promise<void>",
-                    "parameters": [{
-                            "name": "dateString",
-                            "type": "string",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Selects an option",
-                    "tags": []
-                }
-            },
-            "setFocus": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Sets focus on the native `input` in `bal-input`. Use this method instead of the global\n`input.focus()`.",
-                    "tags": []
-                }
-            },
-            "setBlur": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Sets blur on the native `input` in `bal-input`. Use this method instead of the global\n`input.blur()`.",
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }]
-                }
-            },
-            "getInputElement": {
-                "complexType": {
-                    "signature": "() => Promise<HTMLInputElement | undefined>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "HTMLInputElement": {
-                            "location": "global",
-                            "id": "global::HTMLInputElement"
-                        }
-                    },
-                    "return": "Promise<HTMLInputElement>"
-                },
-                "docs": {
-                    "text": "Returns the native `<input>` element used under the hood.",
-                    "tags": []
-                }
-            },
-            "setAriaForm": {
-                "complexType": {
-                    "signature": "(ariaForm: BalAriaForm) => Promise<void>",
-                    "parameters": [{
-                            "name": "ariaForm",
-                            "type": "BalAriaForm",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "BalAriaForm": {
-                            "location": "import",
-                            "path": "../../utils/form",
-                            "id": "src/utils/form.ts::BalAriaForm"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }]
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "valueChanged"
-            }, {
-                "propName": "debounce",
-                "methodName": "debounceChanged"
-            }];
-    }
-}
-__decorate([
-    Logger('bal-date'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], Date.prototype, "createLogger", null);
-__decorate([
-    ListenToConfig(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Promise)
-], Date.prototype, "configChanged", null);
-let dateIds = 0;