@baloise/ds-core 16.8.0 → 17.0.0-nightly.20241202

package/dist/esm/bal-stage_6.entry.js

@@ -1,6 +1,10 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
+import { l as rLCP } from './helpers-72ae7307.js';
+import './browser-a8073d92.js';
+import './icons.constant-a7885631.js';
+import './config.utils-6ac6c9bd.js';
 
 const balStageCss = ":root{--bal-stage-background-red:var(--bal-color-red);--bal-stage-background-yellow:var(--bal-color-yellow);--bal-stage-background-green:var(--bal-color-green);--bal-stage-background-purple:var(--bal-color-purple);--bal-stage-back-font-family:var(--bal-font-family-title);--bal-stage-back-font-weight:var(--bal-font-weight-bold)}.bal-stage{display:block;position:relative}.bal-stage--is-purple{background:var(--bal-stage-background-purple)}.bal-stage--is-green{background:var(--bal-stage-background-green)}.bal-stage--is-red{background:var(--bal-stage-background-red)}.bal-stage--is-yellow{background:var(--bal-stage-background-yellow)}.bal-stage .bal-stage-content{display:block;position:static}.bal-stage .bal-stage-content .bal-stage-image{overflow:hidden}.bal-stage .bal-stage-content .bal-stage-image img{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.bal-stage .bal-stage-content .bal-stage-body{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;padding-top:calc(var(--bal-space-xxxx-large) + 4rem);padding-bottom:var(--bal-space-xxx-large)}@media screen and (min-width: 769px),print{.bal-stage .bal-stage-content .bal-stage-body{padding-top:calc(var(--bal-space-xxxx-large-tablet) + 4rem);padding-bottom:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stage .bal-stage-content .bal-stage-body{padding-top:calc(var(--bal-space-xxxx-large-desktop) + 3rem);padding-bottom:var(--bal-space-xx-large-desktop)}}.bal-stage .bal-stage-content .bal-stage-back-link--shadow{text-shadow:var(--bal-text-shadow-normal)}@media screen and (max-width: 1023px){.bal-stage .bal-stage-content .bal-stage-back-link{display:none}}@media screen and (min-width: 1024px){.bal-stage .bal-stage-content .bal-stage-back-link a{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-family:var(--bal-stage-back-font-family);font-weight:var(--bal-stage-back-font-weight);text-decoration:none}.bal-stage .bal-stage-content .bal-stage-back-link a:hover{text-decoration:underline}.bal-stage .bal-stage-content .bal-stage-back-link a:active{text-decoration:underline}}@media screen and (min-width: 1024px){.bal-stage--is-medium .bal-stage-content .bal-stage-body{min-height:25rem}}.bal-stage--is-large .bal-stage-content .bal-stage-body{min-height:23.438rem}@media screen and (min-width: 769px),print{.bal-stage--is-large .bal-stage-content .bal-stage-body{min-height:35rem}}@media screen and (min-width: 1024px){.bal-stage--is-large .bal-stage-content .bal-stage-body{min-height:52.5rem}}.bal-stage--has-shape .bal-stage-content{margin-bottom:1.375rem}@media screen and (min-width: 769px),print{.bal-stage--has-shape .bal-stage-content{margin-bottom:2.5rem}}@media screen and (min-width: 1024px){.bal-stage--has-shape .bal-stage-content{margin-bottom:4.125rem}}@media screen and (min-width: 769px),print{.bal-stage--has-shape .bal-stage-content .bal-stage-body>*{max-width:calc(100% - 7.5rem)}}@media screen and (min-width: 1024px){.bal-stage--has-shape .bal-stage-content .bal-stage-body>*{max-width:calc(100% - 12.375rem)}}.bal-stage--has-shape .bal-stage-content .bal-shape{position:absolute;bottom:-1.375rem;right:0}@media screen and (min-width: 769px),print{.bal-stage--has-shape .bal-stage-content .bal-shape{bottom:-2.5rem}}@media screen and (min-width: 1024px){.bal-stage--has-shape .bal-stage-content .bal-shape{bottom:-4.125rem}}";
 const BalStageStyle0 = balStageCss;
@@ -47,7 +51,7 @@ const Stage = class {
     render() {
         const block = BEM.block('stage');
         const element = BEM.block('stage-content');
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.size === '' ? 'medium' : this.size}`).class()), block.modifier(`is-${this.color}`).class(!!this.color)), block.modifier('has-shape').class(!!this.shape)), style: { '--bal-stage-container-width': this.getContainerWidth() } }, h("section", { class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, h("slot", null), this.shape && (h("div", { class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, h("bal-shape", { color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
+        return (h(Host, { key: 'e24550c75ccbc228367fcfec8a24f1cc55101fc8', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.size === '' ? 'medium' : this.size}`).class()), block.modifier(`is-${this.color}`).class(!!this.color)), block.modifier('has-shape').class(!!this.shape)), style: { '--bal-stage-container-width': this.getContainerWidth() } }, h("section", { key: 'd925080116d60d4891ac4e141e3d6fa68338aaa8', class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, h("slot", { key: 'f4d2eb4d16600695f336b076c07518d553a93cdf' }), this.shape && (h("div", { key: 'cf059b309141555194945d62124437a3d90145f0', class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, h("bal-shape", { key: '99b25f746ad8858c885b6bf15df6246492b26b84', color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
     }
 };
 Stage.style = BalStageStyle0;
@@ -61,10 +65,10 @@ const StageBackLink = class {
     }
     render() {
         const block = BEM.block('stage-back-link');
-        return (h(Host, { class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { class: {
+        return (h(Host, { key: 'bc5906c288b5be99aba87a5c8b24773f8e980fe5', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: 'd3ee0d9c434e58bcfbf6b70355dfd5b96b5a0d4d', class: {
                 'link': true,
                 'is-inverted': this.inverted,
-            }, href: this.href }, h("bal-icon", { class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", null))));
+            }, href: this.href }, h("bal-icon", { key: '9ea9ce3b98138878573dd43f43e174da381a5cf2', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: '95ad39a717f47a0d02940a6b6f609ae90226cd76' }))));
     }
     get el() { return getElement(this); }
 };
@@ -75,7 +79,7 @@ const StageBody = class {
     }
     render() {
         const block = BEM.block('stage-body');
-        return (h(Host, { class: Object.assign({}, block.class()) }, h("slot", null)));
+        return (h(Host, { key: '8d78c9777215c84373e246ae0495512137620d0c', class: Object.assign({}, block.class()) }, h("slot", { key: 'e866a1e129ad6c87567018a3538e526cc432bdcc' })));
     }
     get el() { return getElement(this); }
 };
@@ -85,7 +89,7 @@ const StageFoot = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { class: "hero-foot" }, h("slot", null)));
+        return (h(Host, { key: '77f405fb5a84be341f5709ea9451fd5b01eae1a5', class: "hero-foot" }, h("slot", { key: '7b93751fe0fd796422cdf0d669404bf22f1312c8' })));
     }
     get el() { return getElement(this); }
 };
@@ -95,7 +99,7 @@ const StageHead = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { class: "hero-head" }, h("slot", null)));
+        return (h(Host, { key: '1d3ba006d2d6aafe5795cdb2f59d9cb02822c927', class: "hero-head" }, h("slot", { key: '2c24fa40d9505b5b7b673d99d7b831161372e35b' })));
     }
     get el() { return getElement(this); }
 };
@@ -104,15 +108,22 @@ const StageImage = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.imageInheritAttributes = {};
+        this.isLargestContentfulPaintDone = false;
         this.srcSet = undefined;
         this.fallback = undefined;
     }
+    componentDidLoad() {
+        rLCP(() => {
+            this.isLargestContentfulPaintDone = true;
+        });
+    }
     componentWillLoad() {
         this.imageInheritAttributes = inheritAttributes(this.el, ['alt']);
     }
     render() {
         const block = BEM.block('stage-image');
-        return (h(Host, { class: Object.assign({}, block.class()) }, h("img", Object.assign({ loading: "lazy", src: this.fallback ? this.fallback : this.srcSet.split(',')[0], srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))));
+        const imageSrc = this.fallback ? this.fallback : this.srcSet.split(',')[0];
+        return (h(Host, { key: '5e50cf626868a688afd1ae52bc4d3bbee8985e6f', class: Object.assign({}, block.class()) }, this.isLargestContentfulPaintDone ? (h("img", Object.assign({ src: imageSrc, srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))) : ('')));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bal-step-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { a as inheritTrackingAttributes } from './attributes-4fa7040f.js';
 
 const StepItem = class {
@@ -51,10 +51,10 @@ const StepItem = class {
         };
     }
     render() {
-        return (h(Host, { role: "tabpanel", class: {
+        return (h(Host, { key: '8ee5cc145653a031dd60e10cd8e15a5cea413ded', role: "tabpanel", class: {
                 'bal-step-item': true,
                 'bal-step-item--active': this.isActive,
-            } }, h("slot", null)));
+            } }, h("slot", { key: 'e424db22122910323793ae2b93c4dd8dcf9f2c31' })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bal-steps.entry.js

@@ -1,22 +1,23 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-b6003bc7.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { m as debounceEvent } from './helpers-c201154e.js';
+import { o as debounceEvent } from './helpers-72ae7307.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
-import { o as areArraysEqual } from './index.esm-cc299511.js';
-import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
+import { a as areArraysEqual } from './array-4c09dfe3.js';
+import { s as stopEventBubbling } from './form-input-264ad739.js';
 import { n as newBalStepOption } from './bal-step.util-3905ad56.js';
-import { b as balBreakpoints } from './breakpoints.subject-d2b4fd79.js';
-import { L as ListenToMutation } from './mutation.decorator-c7b24839.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-f08ad280.js';
+import { b as balBreakpoints } from './breakpoints.subject-781dc67c.js';
+import { L as ListenToMutation } from './mutation.decorator-985cc0a1.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-ba46b8c8.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 import './index-82aff103.js';
+import './index-95ee0c4b.js';
 import './_commonjsHelpers-1c8beb5f.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-cada8a2a.js';
+import './tokens.esm-88409a35.js';
 
 const StepIcon = ({ item, isMobile }) => {
     const bemEl = BEM.block('steps').element('nav').element('item').element('icon');

package/dist/esm/bal-tab-item_2.entry.js

@@ -1,26 +1,28 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { a as inheritTrackingAttributes } from './attributes-4fa7040f.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { o as areArraysEqual } from './index.esm-cc299511.js';
-import { l as raf, e as deepReady, t as transitionEndAsync, m as debounceEvent, n as hasParent, o as isChildOfEventTarget, i as isDescendant, b as waitAfterFramePaint } from './helpers-c201154e.js';
+import { a as areArraysEqual } from './array-4c09dfe3.js';
+import { n as raf, f as deepReady, t as transitionEndAsync, j as debounce, o as debounceEvent, p as hasParent, l as rLCP, q as isChildOfEventTarget, i as isDescendant, b as waitAfterFramePaint } from './helpers-72ae7307.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { n as newBalTabOption } from './bal-tab.util-933315fe.js';
-import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
+import { s as stopEventBubbling } from './form-input-264ad739.js';
 import { b as balBrowser } from './browser-a8073d92.js';
 import { a as getComputedPadding } from './style-ca1bd202.js';
-import { b as balBreakpoints } from './breakpoints.subject-d2b4fd79.js';
-import { L as ListenToMutation } from './mutation.decorator-c7b24839.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-f08ad280.js';
-import { L as ListenToResize } from './resize.decorator-f70563b5.js';
+import { L as ListenTo } from './listen-d1712e70.js';
+import { b as balBreakpoints } from './breakpoints.subject-781dc67c.js';
+import { L as ListenToMutation } from './mutation.decorator-985cc0a1.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-ba46b8c8.js';
+import { L as ListenToResize } from './resize.decorator-f2d8461d.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import './index-82aff103.js';
+import './index-95ee0c4b.js';
 import './_commonjsHelpers-1c8beb5f.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-cada8a2a.js';
+import './tokens.esm-88409a35.js';
 
 const TabItem = class {
     constructor(hostRef) {
@@ -80,10 +82,10 @@ const TabItem = class {
     render() {
         const hasPanel = !this.noPanel;
         const noPanelOrInactive = !this.isActive || this.noPanel;
-        return (h(Host, { id: this.tabPanelID, class: {
+        return (h(Host, { key: '403ef9c6f4195a72139922232b759847a698a5d8', id: this.tabPanelID, class: {
                 'bal-tab-item': true,
                 'bal-tab-item--active': this.isActive,
-            }, role: hasPanel ? 'tabpanel' : undefined, "aria-label": hasPanel ? this.label : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", null)));
+            }, role: hasPanel ? 'tabpanel' : undefined, "aria-label": hasPanel ? this.label : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: 'ff4a802972dadebf7240c41c03a233cc17dba24c' })));
     }
     get el() { return getElement(this); }
 };
@@ -413,16 +415,19 @@ const Tabs = class {
          * EVENT BINDING
          * ------------------------------------------------------
          */
-        this.onOptionChange = async () => {
-            try {
-                const options = await this.getOptions();
-                this.updateStore(options);
-                this.setActiveItem();
-                this.setActiveContent();
-                this.animateLine();
-            }
-            catch (e) {
-                console.warn('[WARN] - Could not read tab options');
+        this.onOptionChange = debounce(() => this.onOptionChangeInternal(), 100);
+        this.onOptionChangeInternal = async () => {
+            if (this.isLargestContentfulPaintDone) {
+                try {
+                    const options = await this.getOptions();
+                    this.updateStore(options);
+                    this.setActiveItem();
+                    this.setActiveContent();
+                    this.animateLine();
+                }
+                catch (e) {
+                    console.warn('[WARN] - Could not read tab options');
+                }
             }
         };
         this.onSelectTab = async (ev, tab) => {
@@ -453,6 +458,7 @@ const Tabs = class {
         this.isNavbarOpen = false;
         this.inNavbar = false;
         this.inNavbarLight = false;
+        this.isLargestContentfulPaintDone = false;
         this.isMobile = balBreakpoints.isMobile;
         this.isTablet = balBreakpoints.isTablet;
         this.store = [];
@@ -522,7 +528,10 @@ const Tabs = class {
         }
     }
     componentDidLoad() {
-        this.onOptionChange();
+        rLCP(() => {
+            this.onOptionChange();
+            this.isLargestContentfulPaintDone = true;
+        });
     }
     mutationListener() {
         this.onOptionChange();
@@ -739,20 +748,20 @@ const Tabs = class {
         const isTouch = isMobile || isTablet;
         const isInverted = (this.inNavbar && !isTouch && !this.inNavbarLight) || (!this.inNavbar && this.inverted);
         const isVertical = this.isVertical();
-        const hasCarousel = !isVertical && this.overflow && !this.expanded;
-        const isSelect = isMobile && this.selectOnMobile;
+        const hasCarousel = this.isLargestContentfulPaintDone && !isVertical && this.overflow && !this.expanded;
+        const isSelect = this.isLargestContentfulPaintDone && isMobile && this.selectOnMobile;
         const tabs = this.store.map(tab => (Object.assign(Object.assign({}, tab), { active: tab.value === this.value })));
         const expanded = this.accordionState === 4 /* AccordionState.Expanded */ || this.accordionState === 8 /* AccordionState.Expanding */;
         const contentPart = expanded ? 'content expanded' : 'content';
         const valueExists = this.value !== undefined && !!this.store.find(o => o.value === this.value);
         const isLinkList = !this.isTabList;
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('navbar').class(this.inNavbar)), block.modifier('vertical').class(isVertical)), block.modifier('fullwidth').class(this.expanded || this.fullwidth)), block.modifier('accordion').class(this.accordion)), block.modifier('animated').class(this.animated)), block.modifier('expanding').class(this.accordionState === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.accordionState === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.accordionState === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.accordionState === 1 /* AccordionState.Collapsed */)), "data-value": this.store
+        return (h(Host, { key: '5cf2cfcf105000a24aabdb6bec167155bfe64d91', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('navbar').class(this.inNavbar)), block.modifier('vertical').class(isVertical)), block.modifier('fullwidth').class(this.expanded || this.fullwidth)), block.modifier('accordion').class(this.accordion)), block.modifier('animated').class(this.animated)), block.modifier('expanding').class(this.accordionState === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.accordionState === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.accordionState === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.accordionState === 1 /* AccordionState.Collapsed */)), "data-value": this.store
                 .filter(t => this.isTabActive(t))
                 .map(t => t.value)
                 .join(','), "data-label": this.store
                 .filter(t => this.isTabActive(t))
                 .map(t => t.label)
-                .join(',') }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, inverted: isInverted, animated: this.animated, context: this.context, border: this.border, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, hasCarousel: hasCarousel, iconPosition: this.iconPosition, verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab })), h("div", { part: contentPart, ref: contentEl => (this.contentEl = contentEl), class: Object.assign({}, block.element('tabs').element('content').class()) }, h("div", { id: this.tabsId, class: Object.assign({}, block.element('tabs').element('content').element('wrapper').class()), ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", null)))));
+                .join(',') }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, inverted: isInverted, animated: this.animated, context: this.context, border: this.border, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, hasCarousel: hasCarousel, iconPosition: this.iconPosition, verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab })), h("div", { key: '9b07748ace351ce78cd552229f2694e349592d3d', part: contentPart, ref: contentEl => (this.contentEl = contentEl), class: Object.assign({}, block.element('tabs').element('content').class()) }, h("div", { key: '099b85a0205426e163c8b43320cb007c7ea1afc9', id: this.tabsId, class: Object.assign({}, block.element('tabs').element('content').element('wrapper').class()), ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '6262221556c0f514b4c42138796b7d92097887d0' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -785,6 +794,24 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], Tabs.prototype, "resizeListener", null);
+__decorate([
+    ListenTo('balWillAnimate', { target: 'window' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Tabs.prototype, "listenToWillAnimate", null);
+__decorate([
+    ListenTo('balDidAnimate', { target: 'window' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Tabs.prototype, "listenToDidAnimate", null);
+__decorate([
+    ListenTo('keydown'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], Tabs.prototype, "listenToKeyDown", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),

package/dist/esm/bal-table.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 
 const balTableCss = ".bal-table{display:block;position:static}.bal-table--is-fullwidth{display:-ms-flexbox;display:flex;width:100%}bal-checkbox .bal-radio-checkbox__label::before{top:0}bal-checkbox .bal-radio-checkbox__label::after{margin-top:0px}";
@@ -13,7 +13,7 @@ const Table = class {
         const block = BEM.block('table');
         const fullwidthClass = 'is-fullwidth';
         const hasFullwidth = this.expanded;
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), { 'ag-theme-alpine': true }), block.modifier(fullwidthClass).class(hasFullwidth)) }, h("slot", null)));
+        return (h(Host, { key: '1059612d6670d6a8c333a6903dfa1ffff7150964', class: Object.assign(Object.assign(Object.assign({}, block.class()), { 'ag-theme-alpine': true }), block.modifier(fullwidthClass).class(hasFullwidth)) }, h("slot", { key: '22d1e47908682547a1d22d17348bfb66dfd81e7a' })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bal-tag_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 
@@ -35,7 +35,7 @@ const Tag = class {
         const hasDisabled = this.disabled;
         const positionClass = `is-${this.position}`;
         const hasPosition = this.position !== undefined;
-        return (h(Host, Object.assign({ "aria-disabled": this.disabled ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(sizeClass).class(hasSize)), block.modifier(colorClass).class(hasColor)), block.modifier(disabledClass).class(hasDisabled)), block.modifier(positionClass).class(hasPosition)), block.modifier('is-invalid').class(this.invalid)) }, this.inheritedAttributes), h("span", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, elLabel.class()), elLabel.modifier(sizeClass).class(hasSize)), elLabel.modifier(colorClass).class(hasColor)), elLabel.modifier(disabledClass).class(hasDisabled)), elLabel.modifier('is-invalid').class(this.invalid)), "data-testid": "bal-tag-label" }, h("slot", null)), h("bal-close", Object.assign({ class: Object.assign({}, block.element('close').class()), style: {
+        return (h(Host, Object.assign({ key: 'fcb28709fa01ca31a2ae98d59bacfb356e28fd0c', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(sizeClass).class(hasSize)), block.modifier(colorClass).class(hasColor)), block.modifier(disabledClass).class(hasDisabled)), block.modifier(positionClass).class(hasPosition)), block.modifier('is-invalid').class(this.invalid)) }, this.inheritedAttributes), h("span", { key: 'e82b7f7b34add1277872fc105a327f50b305b2f8', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, elLabel.class()), elLabel.modifier(sizeClass).class(hasSize)), elLabel.modifier(colorClass).class(hasColor)), elLabel.modifier(disabledClass).class(hasDisabled)), elLabel.modifier('is-invalid').class(this.invalid)), "data-testid": "bal-tag-label" }, h("slot", { key: '9a29590870327840f6bbf0c9bedebbcb1be51ba8' })), h("bal-close", Object.assign({ key: 'a236adc61866d6ba1080780813b75806c93ec657', class: Object.assign({}, block.element('close').class()), style: {
                 display: this.closable && !this.disabled ? 'flex' : 'none',
             }, size: this.size === 'small' ? 'small' : '', inverted: (['blue', 'primary', 'info', 'success', 'warning', 'danger', 'red', 'purple', 'yellow', 'green'].includes(this.color) &&
                 !this.light) ||
@@ -50,7 +50,7 @@ const TagGroup = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { class: "bal-tag-group" }, h("slot", null)));
+        return (h(Host, { key: 'd1f82919080730fd2555d25e4e5adda071f0c6a2', class: "bal-tag-group" }, h("slot", { key: '2f0ce67b5870beb486f86341214f5f32f234ae47' })));
     }
 };
 

package/dist/esm/bal-textarea.entry.js

@@ -1,9 +1,11 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
-import { g as getInputTarget, i as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, h as inputHandleClick, a as inputHandleHostClick, b as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-a8fdaaef.js';
-import { m as debounceEvent } from './helpers-c201154e.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
+import { g as getInputTarget, a as inputHandleFocus, b as inputHandleBlur, e as inputHandleChange, f as inputHandleClick, i as inputHandleHostClick, h as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-264ad739.js';
+import { o as debounceEvent } from './helpers-72ae7307.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
+import { L as ListenTo } from './listen-d1712e70.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
@@ -118,13 +120,25 @@ const Textarea = class {
         const value = this.getValue();
         const block = BEM.block('textarea');
         const elNative = block.element('native');
-        return (h(Host, { onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ class: Object.assign(Object.assign({}, elNative.class()), { 'textarea': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'clickable': this.clickable }), "data-testid": "bal-textarea-input", ref: inputEl => (this.nativeInput = inputEl), name: this.name, id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, readonly: this.readonly, required: this.required, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder, inputMode: this.inputmode, value: this.value, cols: this.cols, rows: this.rows, wrap: this.wrap, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes), value, h("slot", null))));
+        return (h(Host, { key: 'ad09331d104fcf7279b9cc2c403fa4d032b47c32', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: '00278cc7b951ca19e01dd9157506185782eb8ee4', class: Object.assign(Object.assign({}, elNative.class()), { 'textarea': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'clickable': this.clickable }), "data-testid": "bal-textarea-input", ref: inputEl => (this.nativeInput = inputEl), name: this.name, id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, readonly: this.readonly, required: this.required, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder, inputMode: this.inputmode, value: this.value, cols: this.cols, rows: this.rows, wrap: this.wrap, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes), value, h("slot", { key: '70ac340a5c61d29a355e115bdec0635eca4367dc' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
         "debounce": ["debounceChanged"]
     }; }
 };
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Textarea.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Textarea.prototype, "resetHandler", null);
 let TextareaIds = 0;
 Textarea.style = BalTextareaStyle0;
 

package/dist/esm/bal-time-input.entry.js

@@ -1,21 +1,22 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { l as lodash_isnil } from './index-82aff103.js';
-import { g as getInputTarget, i as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, s as stopEventBubbling, b as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-a8fdaaef.js';
-import { m as debounceEvent } from './helpers-c201154e.js';
+import { g as getInputTarget, a as inputHandleFocus, b as inputHandleBlur, e as inputHandleChange, s as stopEventBubbling, h as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-264ad739.js';
+import { o as debounceEvent } from './helpers-72ae7307.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
 import { i as isCtrlOrCommandKey, N as NUMBER_KEYS, A as ACTION_KEYS } from './keys.constant-0eb059e0.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { i as i18nBalTimeInput } from './bal-time-input.i18n-157c7092.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
 import { L as Logger } from './log-dfd1c19f.js';
+import { L as ListenTo } from './listen-d1712e70.js';
 import { d as defaultConfig } from './config.default-7efdc82d.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 
-const balTimeInputCss = ":root{--bal-time-input-native-placeholder-background-before:var(--bal-color-white);--bal-time-input-native-placeholder-background-disabled-before:var(--bal-color-grey-2);--bal-time-input-native-placeholder-background-danger-before:var(--bal-color-danger-1);--bal-time-input-native-placeholder-background-disabled-danger-before:var(--bal-color-grey-2);--bal-time-input-native-placeholder-background-hover-before:var(--bal-color-grey-1);--bal-time-input-native-text-color:var(--bal-color-primary-3);--bal-time-input-native-text-color-focus-value:var(--bal-color-primary);--bal-time-input-native-text-color-disabled:var(--bal-color-grey-5);--bal-time-input-native-text-color-disabled-value:var(--bal-color-grey-4);--bal-time-input-native-placeholder-text-color-disabled-before:var(--bal-color-grey-5);--bal-time-input-native-placeholder-text-color-before:var(--bal-color-primary-3)}.bal-time-input{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:relative;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;width:100%;padding:0;font-family:var(--bal-font-family-text)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper{display:flex}.bal-time-input__native::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-clear-button{display:none}.bal-time-input__native::-webkit-inner-spin-button{display:none}.bal-time-input__native::-webkit-calendar-picker-indicator{display:none;background:none}.bal-time-input__native::-webkit-datetime-edit-ampm-field{display:none}.bal-time-input__native.has-focus::-webkit-datetime-edit-text,.bal-time-input__native.has-value::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.has-focus::-webkit-datetime-edit-hour-field,.bal-time-input__native.has-value::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.has-focus::-webkit-datetime-edit-minute-field,.bal-time-input__native.has-value::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.show-placeholder.is-disabled::before{color:var(--bal-time-input-native-placeholder-text-color-disabled-before);background:var(--bal-time-input-native-placeholder-background-disabled-before)}.bal-time-input__native.show-placeholder.is-danger::before{background:var(--bal-time-input-native-placeholder-background-danger-before)}.bal-time-input__native.show-placeholder.is-disabled.is-danger::before{background:var(--bal-time-input-native-placeholder-background-disabled-danger-before)}.bal-time-input__native.show-placeholder:hover::before{background:var(--bal-time-input-native-placeholder-background-hover-before)}.bal-time-input__native.show-placeholder::before{color:var(--bal-time-input-native-placeholder-text-color-before);content:attr(placeholder);pointer-events:none;position:absolute;background:var(--bal-time-input-native-placeholder-background-before)}";
+const balTimeInputCss = ":root{--bal-time-input-native-placeholder-background-before:var(--bal-color-white);--bal-time-input-native-placeholder-background-disabled-before:var(--bal-color-grey-2);--bal-time-input-native-placeholder-background-danger-before:var(--bal-color-danger-1);--bal-time-input-native-placeholder-background-disabled-danger-before:var(--bal-color-grey-2);--bal-time-input-native-placeholder-background-hover-before:var(--bal-color-grey-1);--bal-time-input-native-text-color:var(--bal-color-primary-3);--bal-time-input-native-text-color-focus-value:var(--bal-color-primary);--bal-time-input-native-text-color-disabled:var(--bal-color-grey-5);--bal-time-input-native-text-color-disabled-value:var(--bal-color-grey-4);--bal-time-input-native-placeholder-text-color-disabled-before:var(--bal-color-grey-5);--bal-time-input-native-placeholder-text-color-before:var(--bal-color-primary-3)}.bal-time-input{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:relative;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;width:100%;padding:0;font-family:var(--bal-font-family-text)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper{display:flex}.bal-time-input__native::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-clear-button{display:none}.bal-time-input__native::-webkit-inner-spin-button{display:none}.bal-time-input__native::-webkit-calendar-picker-indicator{display:none;background:none}.bal-time-input__native.has-focus::-webkit-datetime-edit-text,.bal-time-input__native.has-value::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.has-focus::-webkit-datetime-edit-hour-field,.bal-time-input__native.has-value::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.has-focus::-webkit-datetime-edit-minute-field,.bal-time-input__native.has-value::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.show-placeholder.is-disabled::before{color:var(--bal-time-input-native-placeholder-text-color-disabled-before);background:var(--bal-time-input-native-placeholder-background-disabled-before)}.bal-time-input__native.show-placeholder.is-danger::before{background:var(--bal-time-input-native-placeholder-background-danger-before)}.bal-time-input__native.show-placeholder.is-disabled.is-danger::before{background:var(--bal-time-input-native-placeholder-background-disabled-danger-before)}.bal-time-input__native.show-placeholder:hover::before{background:var(--bal-time-input-native-placeholder-background-hover-before)}.bal-time-input__native.show-placeholder::before{color:var(--bal-time-input-native-placeholder-text-color-before);content:attr(placeholder);pointer-events:none;position:absolute;background:var(--bal-time-input-native-placeholder-background-before)}";
 const BalTimeInputStyle0 = balTimeInputCss;
 
 const TimeInput = class {
@@ -132,7 +133,7 @@ const TimeInput = class {
         this.ariaForm = Object.assign({}, ariaForm);
     }
     getAllowedKeys() {
-        return [...NUMBER_KEYS, ...ACTION_KEYS, ':'];
+        return [...NUMBER_KEYS, ...ACTION_KEYS, ':', 'A', 'M', 'P'];
     }
     getRawValue() {
         const value = (this.value || '').toString();
@@ -145,7 +146,7 @@ const TimeInput = class {
         const value = this.focused ? this.getRawValue() : this.getFormattedValue();
         const block = BEM.block('time-input');
         const native = block.element('native');
-        return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("bal-input-group", { disabled: this.disabled || this.readonly, invalid: this.invalid }, h("input", Object.assign({ type: "time", class: Object.assign({ 'input': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'has-focus': this.focused, 'show-placeholder': !this.focused && (this.value === '' || this.value === undefined), 'has-value': this.value !== '' && this.value !== undefined }, native.class()), ref: input => (this.nativeInput = input), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: `${i18nBalTimeInput[this.language].hours}:${i18nBalTimeInput[this.language].minutes}`, value: value, onInput: ev => this.onInput(ev), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes)), h("bal-icon", { "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', name: "clock" }))));
+        return (h(Host, { key: '67ec2306c4cf0a9e6b5cee8af80f930e5dc4ee33', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '1873f5acc2647eb4b4d4f2634693caafadb98341', disabled: this.disabled || this.readonly, invalid: this.invalid }, h("input", Object.assign({ key: '846d18705dd58f61a418cb4c25fab603e3c9264d', type: "time", class: Object.assign({ 'input': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'has-focus': this.focused, 'show-placeholder': !this.focused && (this.value === '' || this.value === undefined), 'has-value': this.value !== '' && this.value !== undefined }, native.class()), ref: input => (this.nativeInput = input), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: `${i18nBalTimeInput[this.language].hours}:${i18nBalTimeInput[this.language].minutes}`, value: value, onInput: ev => this.onInput(ev), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes)), h("bal-icon", { key: 'd34d154f6bafaa5fe925a9333796e5c2b1c41dfc', "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', name: "clock" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -158,6 +159,18 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], TimeInput.prototype, "createLogger", null);
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], TimeInput.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], TimeInput.prototype, "resetHandler", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),

package/dist/esm/bal-tooltip.entry.js

@@ -1,10 +1,13 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { b as balBrowser } from './browser-a8073d92.js';
 import { b as balDevice } from './device-8c6d2881.js';
-import { a as autoUpdate, c as computePosition, s as shift, f as flip, o as offset, b as arrow } from './floating-ui.dom.esm-f1cf1077.js';
+import { b as balFloatingUi } from './floating-ui-82413f23.js';
+import './helpers-72ae7307.js';
+import './icons.constant-a7885631.js';
+import './config.utils-6ac6c9bd.js';
 
 const showContainerElement = (containerEl) => {
     if (containerEl) {
@@ -135,7 +138,8 @@ const Tooltip = class {
             showArrowElement(this.arrowEl);
             this.trigger.classList.add('bal-tooltip-trigger');
             this.presented = true;
-            this.cleanup = autoUpdate(this.trigger, this.containerEl, () => {
+            const lib = await balFloatingUi.load();
+            this.cleanup = lib.autoUpdate(this.trigger, this.containerEl, () => {
                 this.update();
             }, {
                 ancestorScroll: true,
@@ -177,18 +181,21 @@ const Tooltip = class {
             if (balBrowser.hasWindow) {
                 isInFrame = !!window.frameElement;
             }
-            computePosition(this.trigger, this.containerEl, {
+            const lib = await balFloatingUi.load();
+            lib
+                .computePosition(this.trigger, this.containerEl, {
                 placement: this.placement,
                 middleware: [
-                    isInFrame ? undefined : shift(),
-                    flip(),
-                    offset(8),
-                    arrow({
+                    isInFrame ? undefined : lib.shift(),
+                    lib.flip(),
+                    lib.offset(8),
+                    lib.arrow({
                         element: this.arrowEl,
                         padding: 4,
                     }),
                 ],
-            }).then(({ x, y, middlewareData, placement }) => {
+            })
+                .then(({ x, y, middlewareData, placement }) => {
                 const side = placement.split('-')[0];
                 const staticSide = {
                     top: 'bottom',
@@ -235,7 +242,7 @@ const Tooltip = class {
         const arrowBlock = block.element('arrow');
         const innerBlock = block.element('inner');
         const innerContentBlock = innerBlock.element('content');
-        return (h(Host, { class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}` }, h("div", { class: Object.assign({}, containerBlock.class()), ref: containerEl => (this.containerEl = containerEl) }, h("div", { class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { layout: "vertical", class: Object.assign({}, innerBlock.class()) }, h("div", { class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-tooltip-content" }, h("slot", null))))));
+        return (h(Host, { key: 'be527a1b6a3bc6c4958692998c35a935ec529484', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}` }, h("div", { key: '1ef5d833c3796839e5f265651867d2a3d17c0251', class: Object.assign({}, containerBlock.class()), ref: containerEl => (this.containerEl = containerEl) }, h("div", { key: '0f29a68c79453bbde28ed48464e91b49caf46ada', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '71509e320a90d1e5e8fd92fc689352bd352a5557', layout: "vertical", class: Object.assign({}, innerBlock.class()) }, h("div", { key: '56628c0fce715db27e5a39385d7b698aabc070e1', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-tooltip-content" }, h("slot", { key: 'a303a3a3b414eaddd6cba0a3ee585451a29be532' }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {