@baloise/ds-core 19.0.1 → 19.1.0-snapshot.1722-8ed5de5d1

package/components/all.d.ts

@@ -27,6 +27,7 @@ import { BalDate, defineCustomElement as defineBalDate } from './bal-date'
 import { BalDateCalendar, defineCustomElement as defineBalDateCalendar } from './bal-date-calendar'
 import { BalDateCalendarCell, defineCustomElement as defineBalDateCalendarCell } from './bal-date-calendar-cell'
 import { BalDivider, defineCustomElement as defineBalDivider } from './bal-divider'
+import { BalDocApp, defineCustomElement as defineBalDocApp } from './bal-doc-app'
 import { BalDropdown, defineCustomElement as defineBalDropdown } from './bal-dropdown'
 import { BalField, defineCustomElement as defineBalField } from './bal-field'
 import { BalFieldControl, defineCustomElement as defineBalFieldControl } from './bal-field-control'
@@ -145,6 +146,7 @@ export { BalDate, defineBalDate }
 export { BalDateCalendar, defineBalDateCalendar }
 export { BalDateCalendarCell, defineBalDateCalendarCell }
 export { BalDivider, defineBalDivider }
+export { BalDocApp, defineBalDocApp }
 export { BalDropdown, defineBalDropdown }
 export { BalField, defineBalField }
 export { BalFieldControl, defineBalFieldControl }

package/components/all.js

@@ -27,6 +27,7 @@ import { BalDate, defineCustomElement as defineBalDate } from './bal-date'
 import { BalDateCalendar, defineCustomElement as defineBalDateCalendar } from './bal-date-calendar'
 import { BalDateCalendarCell, defineCustomElement as defineBalDateCalendarCell } from './bal-date-calendar-cell'
 import { BalDivider, defineCustomElement as defineBalDivider } from './bal-divider'
+import { BalDocApp, defineCustomElement as defineBalDocApp } from './bal-doc-app'
 import { BalDropdown, defineCustomElement as defineBalDropdown } from './bal-dropdown'
 import { BalField, defineCustomElement as defineBalField } from './bal-field'
 import { BalFieldControl, defineCustomElement as defineBalFieldControl } from './bal-field-control'
@@ -145,6 +146,7 @@ export { BalDate, defineBalDate }
 export { BalDateCalendar, defineBalDateCalendar }
 export { BalDateCalendarCell, defineBalDateCalendarCell }
 export { BalDivider, defineBalDivider }
+export { BalDocApp, defineBalDocApp }
 export { BalDropdown, defineBalDropdown }
 export { BalField, defineBalField }
 export { BalFieldControl, defineBalFieldControl }
@@ -264,6 +266,7 @@ export const defineAllComponents = () => {
   defineBalDateCalendar()
   defineBalDateCalendarCell()
   defineBalDivider()
+  defineBalDocApp()
   defineBalDropdown()
   defineBalField()
   defineBalFieldControl()

package/components/bal-app.js

@@ -1,96 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { b as balBrowser } from './browser.js';
-import { b as balDevice } from './device.js';
-import { k as debounce, p as rIC, m as rOnLoad } from './helpers.js';
-import { L as Logger } from './log.js';
-import { s as startFocusVisible } from './focus-visible.js';
-import { b as updateBalAnimated } from './config.utils.js';
-
-const balAppCss = ":root{--bal-app-height:100%}.bal-app{position:relative}.lcp-wait{opacity:0;visibility:hidden;display:none}.lcp-ready .lcp-wait{opacity:inherit;visibility:inherit;display:inherit}";
-const BalAppStyle0 = balAppCss;
-
-const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.debouncedNotify = debounce(() => this.notifyResize(), 100);
-        this.notifyResize = async () => {
-            if (balBrowser.hasDocument && balBrowser.hasWindow) {
-                const doc = document.documentElement;
-                doc.style.setProperty('--bal-app-height', `${window.innerHeight}px`);
-            }
-        };
-        this.animated = true;
-        this.ready = false;
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    connectedCallback() {
-        if (this.animated === false) {
-            updateBalAnimated(this.animated);
-        }
-        if (balBrowser.hasWindow) {
-            window.addEventListener('resize', this.debouncedNotify);
-            this.debouncedNotify();
-        }
-    }
-    componentDidLoad() {
-        rIC(() => {
-            this.ready = true;
-            startFocusVisible();
-        });
-        rOnLoad(() => {
-            if (balBrowser.hasDocument && balBrowser.hasWindow) {
-                const doc = document.documentElement;
-                doc.classList.add('lcp-ready');
-            }
-        });
-    }
-    disconnectedCallback() {
-        if (balBrowser.hasWindow) {
-            window.removeEventListener('resize', this.debouncedNotify);
-        }
-    }
-    async setFocus(elements) {
-        if (this.focusVisible) {
-            this.focusVisible.setFocus(elements);
-        }
-    }
-    render() {
-        return (h(Host, { key: '8aa3c989125e06e500597db9773fca378e4b7467', class: {
-                'bal-app': true,
-                'bal-app--safari': balBrowser.isSafari,
-                'bal-app--touch': balDevice.hasTouchScreen,
-            } }, h("slot", { key: 'c0e432a988e29f653198ed4eeead7f18fa447035' })));
-    }
-    get el() { return this; }
-    static get style() { return BalAppStyle0; }
-}, [4, "bal-app", {
-        "animated": [516],
-        "ready": [1540],
-        "setFocus": [64]
-    }]);
-__decorate([
-    Logger('bal-app'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], App.prototype, "createLogger", null);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bal-app"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bal-app":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, App);
-            }
-            break;
-    } });
-}
+import { A as App, d as defineCustomElement$1 } from './bal-app2.js';
 
 const BalApp = App;
 const defineCustomElement = defineCustomElement$1;

package/components/bal-app2.js

@@ -0,0 +1,95 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { b as balBrowser } from './browser.js';
+import { b as balDevice } from './device.js';
+import { k as debounce, p as rIC, m as rOnLoad } from './helpers.js';
+import { L as Logger } from './log.js';
+import { s as startFocusVisible } from './focus-visible.js';
+import { b as updateBalAnimated } from './config.utils.js';
+
+const balAppCss = ":root{--bal-app-height:100%}.bal-app{position:relative}.lcp-wait{opacity:0;visibility:hidden;display:none}.lcp-ready .lcp-wait{opacity:inherit;visibility:inherit;display:inherit}";
+const BalAppStyle0 = balAppCss;
+
+const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.debouncedNotify = debounce(() => this.notifyResize(), 100);
+        this.notifyResize = async () => {
+            if (balBrowser.hasDocument && balBrowser.hasWindow) {
+                const doc = document.documentElement;
+                doc.style.setProperty('--bal-app-height', `${window.innerHeight}px`);
+            }
+        };
+        this.animated = true;
+        this.ready = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    connectedCallback() {
+        if (this.animated === false) {
+            updateBalAnimated(this.animated);
+        }
+        if (balBrowser.hasWindow) {
+            window.addEventListener('resize', this.debouncedNotify);
+            this.debouncedNotify();
+        }
+    }
+    componentDidLoad() {
+        rIC(() => {
+            this.ready = true;
+            startFocusVisible();
+        });
+        rOnLoad(() => {
+            if (balBrowser.hasDocument && balBrowser.hasWindow) {
+                const doc = document.documentElement;
+                doc.classList.add('lcp-ready');
+            }
+        });
+    }
+    disconnectedCallback() {
+        if (balBrowser.hasWindow) {
+            window.removeEventListener('resize', this.debouncedNotify);
+        }
+    }
+    async setFocus(elements) {
+        if (this.focusVisible) {
+            this.focusVisible.setFocus(elements);
+        }
+    }
+    render() {
+        return (h(Host, { key: '8aa3c989125e06e500597db9773fca378e4b7467', class: {
+                'bal-app': true,
+                'bal-app--safari': balBrowser.isSafari,
+                'bal-app--touch': balDevice.hasTouchScreen,
+            } }, h("slot", { key: 'c0e432a988e29f653198ed4eeead7f18fa447035' })));
+    }
+    get el() { return this; }
+    static get style() { return BalAppStyle0; }
+}, [4, "bal-app", {
+        "animated": [516],
+        "ready": [1540],
+        "setFocus": [64]
+    }]);
+__decorate([
+    Logger('bal-app'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], App.prototype, "createLogger", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-app"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-app":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, App);
+            }
+            break;
+    } });
+}
+
+export { App as A, defineCustomElement as d };

package/components/bal-button2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { i as inheritAttributes } from './attributes.js';
 import { a as ariaBooleanToString } from './aria.js';
+import { i as inheritAttributes } from './attributes.js';
 import { m as rOnLoad } from './helpers.js';
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 import { d as defineCustomElement$1 } from './bal-spinner2.js';
@@ -12,6 +12,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     constructor() {
         super();
         this.__registerHost();
+        this.balClick = createEvent(this, "balClick", 7);
         this.balNavigate = createEvent(this, "balNavigate", 7);
         this.balFocus = createEvent(this, "balFocus", 7);
         this.balBlur = createEvent(this, "balBlur", 7);
@@ -24,8 +25,11 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
             this.balBlur.emit();
         };
         this.onClick = (ev) => {
-            if (this.href !== undefined) {
-                this.balNavigate.emit(ev);
+            if (!this.disabled) {
+                this.balClick.emit(ev);
+                if (this.href !== undefined) {
+                    this.balNavigate.emit(ev);
+                }
             }
         };
         this.isLargestContentPaintDone = false;
@@ -62,15 +66,10 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         }
     }
     componentDidLoad() {
-        var _a;
         rOnLoad(() => (this.isLargestContentPaintDone = true));
-        if (this.el.getAttribute('bal-popup') && !((_a = this.aria) === null || _a === void 0 ? void 0 : _a.haspopup)) {
-            this.aria = {
-                haspopup: 'true',
-            };
-        }
     }
     componentWillLoad() {
+        var _a;
         this.inheritAttributes = inheritAttributes(this.el, [
             'title',
             'aria-label',
@@ -79,6 +78,11 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
             'tabindex',
             'aria-haspopup',
         ]);
+        if (this.el.hasAttribute('bal-popup') && !((_a = this.aria) === null || _a === void 0 ? void 0 : _a.haspopup)) {
+            this.aria = {
+                haspopup: 'true',
+            };
+        }
     }
     componentDidRender() {
         this.balDidRender.emit();
@@ -205,7 +209,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         "noWrap": [4, "no-wrap"],
         "name": [1],
         "value": [8],
-        "aria": [16],
+        "aria": [1040],
         "isLargestContentPaintDone": [32]
     }, [[6, "click", "listenOnClick"]]]);
 function defineCustomElement() {

package/components/bal-date.js

@@ -1,14 +1,17 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { i as i18nBalDate } from './bal-date.i18n.js';
-import { B as BEM } from './bem.js';
-import { L as Logger } from './log.js';
+import { i as isEscapeKey } from './index.esm.js';
+import { a as ariaBooleanToString } from './aria.js';
 import { i as inheritAttributes } from './attributes.js';
-import { s as stopEventBubbling } from './form-input.js';
-import { o as debounceEvent } from './helpers.js';
-import { d as defaultBalAriaForm } from './form.js';
+import { B as BEM } from './bem.js';
+import { b as balBrowser } from './browser.js';
 import { b as balFloatingUi } from './floating-ui.js';
-import { a as ariaBooleanToString } from './aria.js';
+import { F as FOCUS_KEYS } from './focus-visible.js';
+import { d as defaultBalAriaForm } from './form.js';
+import { s as stopEventBubbling } from './form-input.js';
+import { p as rIC, o as debounceEvent, l as addEventListener, r as removeEventListener, d as waitAfterIdleCallback } from './helpers.js';
+import { L as Logger } from './log.js';
+import { i as i18nBalDate } from './bal-date.i18n.js';
 import { d as defineCustomElement$6 } from './bal-date-calendar2.js';
 import { d as defineCustomElement$5 } from './bal-date-calendar-cell2.js';
 import { d as defineCustomElement$4 } from './bal-icon2.js';
@@ -34,9 +37,44 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         this.balFocus = createEvent(this, "balFocus", 7);
         this.balInputClick = createEvent(this, "balInputClick", 7);
         this.balIconClick = createEvent(this, "balIconClick", 7);
-        this.balPopoverPrepare = createEvent(this, "balPopoverPrepare", 7);
         this.inputId = `bal-da-${dateIds++}`;
         this.inheritedAttributes = {};
+        /**
+         * 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
          * ------------------------------------------------------
@@ -60,6 +98,8 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
             this.balChange.emit(this.value);
             if (this.closeOnSelect) {
                 this.close();
+                this.hasFocus = false;
+                rIC(() => this.balBlur.emit());
             }
         };
         this.onInputInput = (ev) => {
@@ -77,24 +117,22 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
             this.value = ev.detail;
             this.balChange.emit(this.value);
         };
-        this.onInputFocus = (ev) => {
-            stopEventBubbling(ev);
-            this.balFocus.emit(ev.detail);
-        };
-        this.onInputBlur = (ev) => {
-            stopEventBubbling(ev);
-            this.balBlur.emit(ev.detail);
-        };
         this.onKeyPress = async ({ detail }) => {
-            if (isSpaceKey(detail) && !this.triggerIcon) {
+            if (detail && detail.key) {
                 if (this.isExpanded) {
-                    await this.close();
+                    if (detail.key === 'Tab' || isEscapeKey(detail) || isSpaceKey(detail)) {
+                        await this.close();
+                    }
                 }
                 else {
-                    await this.open();
+                    if (isSpaceKey(detail)) {
+                        await this.open();
+                    }
                 }
             }
         };
+        this.isKeyboardMode = false;
+        this.hasFocus = false;
         this.isExpanded = false;
         this.language = defaultConfig.language;
         this.calendarValue = undefined;
@@ -129,43 +167,26 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
     debounceChanged() {
         this.balChange = debounceEvent(this.balChange, this.debounce);
     }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
     connectedCallback() {
-        this.valueChanged();
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
-    }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    async listenToKeydown(ev) {
-        if (this.isExpanded && (ev.key === 'Escape' || ev.key === 'Esc')) {
-            ev.preventDefault();
-            await this.close();
-        }
-    }
-    async listenOnKeyup(ev) {
-        // dismiss popup when focus next form control
-        if (ev.key === 'Tab' && !this.el.contains(document.activeElement) && this.isExpanded) {
-            await this.close();
+        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();
     }
-    async listenOnclick(ev) {
-        // when clicked outside dismiss popup
-        if (this.isExpanded && !this.el.contains(ev.target)) {
-            await this.close();
+    disconnectedCallback() {
+        if (balBrowser.hasDocument) {
+            removeEventListener(document, 'keydown', this.handleKeydown);
+            removeEventListener(document, 'touchstart', this.handlePointerDown);
+            removeEventListener(document, 'mousedown', this.handlePointerDown);
+            removeEventListener(document, 'click', this.handleOutsideClick);
         }
     }
-    async listenOnPopoverPrepare(ev) {
-        // dismiss this popover, because another will open
-        if (this.inputId !== ev.detail) {
-            await this.close();
-        }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
     }
     /**
      * @internal define config for the component
@@ -215,8 +236,10 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
      * `input.focus()`.
      */
     async setFocus() {
-        var _a;
-        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.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
@@ -225,7 +248,10 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
      */
     async setBlur() {
         var _a;
-        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setBlur();
+        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.
@@ -242,14 +268,9 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         this.ariaForm = Object.assign({}, ariaForm);
         (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAriaForm(ariaForm);
     }
-    /**
-     * PRIVATE METHOD
-     * ------------------------------------------------------
-     */
     async expand() {
         if (this.referenceEl && this.floatingEl) {
             const lib = await balFloatingUi.load();
-            this.balPopoverPrepare.emit(this.inputId);
             this.balWillAnimate.emit();
             this.isExpanded = true;
             this.popupCleanup = lib.autoUpdate(this.referenceEl, this.floatingEl, () => {
@@ -292,7 +313,7 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         const block = BEM.block('date');
         const blockIcon = block.element('icon');
         const blockPopup = block.element('popup');
-        return (h(Host, { key: 'f6b28c8faba40da040e139ec92757837c643bc44', id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '8474544891624bc816606bcbca7a9589f2740acb', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ key: '04609fd4beddc284e8c132864cdbff1cd76e0328', 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: this.onInputFocus, onBalBlur: this.onInputBlur, 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: '4d167de602c3a6e48f6f35d7fade4e5d5b6d4706', 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: 'b0abca943beea5a541eead43d050a0c5add16216', value: this.calendarValue, min: this.min, max: this.max, minYearProp: this.minYearProp, maxYearProp: this.maxYearProp, defaultDate: this.defaultDate, allowedDates: this.allowedDates, onBalChange: this.onCalendarChange }))));
+        return (h(Host, { key: 'df763339a5267bc106d30ca6cc3d62bc75c8f05f', id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '55d4f91e6b77f56f38274bb984be9dc21a54a5a4', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ key: 'bf2b5f66aaf62f45f01e42cdd3e236707094d9dd', 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: '828597483d6ccc05c8fa9059b7d64941d8edc3d8', 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: '781a4f0d0b8ebc2c8b05a883e9441f4483e25820', value: this.calendarValue, min: this.min, max: this.max, minYearProp: this.minYearProp, maxYearProp: this.maxYearProp, defaultDate: this.defaultDate, allowedDates: this.allowedDates, onBalChange: this.onCalendarChange }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -321,6 +342,8 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         "allowInvalidValue": [4, "allow-invalid-value"],
         "debounce": [2],
         "autoInvalidOff": [516, "auto-invalid-off"],
+        "isKeyboardMode": [32],
+        "hasFocus": [32],
         "isExpanded": [32],
         "language": [32],
         "calendarValue": [32],
@@ -334,7 +357,7 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         "setBlur": [64],
         "getInputElement": [64],
         "setAriaForm": [64]
-    }, [[8, "keydown", "listenToKeydown"], [8, "keyup", "listenOnKeyup"], [4, "click", "listenOnclick"], [4, "balPopoverPrepare", "listenOnPopoverPrepare"]], {
+    }, undefined, {
         "value": ["valueChanged"],
         "debounce": ["debounceChanged"]
     }]);

package/components/bal-doc-app.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalDocApp extends Components.BalDocApp, HTMLElement {}
+export const BalDocApp: {
+    prototype: BalDocApp;
+    new (): BalDocApp;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;