@baloise/ds-core 19.0.1 → 19.1.0

package/components/bal-nav.js

@@ -1,10 +1,10 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
-import { L as Logger } from './log.js';
 import { b as balBrowser } from './browser.js';
-import { B as BalScrollHandler } from './scroll.js';
 import { w as waitForComponent, d as waitAfterIdleCallback } from './helpers.js';
+import { L as Logger } from './log.js';
+import { B as BalScrollHandler } from './scroll.js';
 import { d as defineCustomElement$t } from './bal-badge2.js';
 import { d as defineCustomElement$s } from './bal-button2.js';
 import { d as defineCustomElement$r } from './bal-checkbox2.js';
@@ -39,6 +39,79 @@ import { L as ListenToMutation } from './mutation.decorator.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
 import { L as ListenToConfig } from './config.decorator.js';
 
+const i18nNavBars = {
+    de: {
+        mainNavigation: 'Hauptnavigation',
+        navigation: 'Navigation',
+        subNavigation: 'Subnavigation',
+        open: 'Menü öffnen',
+        close: 'Menü schliessen',
+    },
+    en: {
+        mainNavigation: 'Main navigation',
+        navigation: 'Navigation',
+        subNavigation: 'Sub navigation',
+        open: 'Open Menu',
+        close: 'Close Menu',
+    },
+    fr: {
+        mainNavigation: 'Navigation principale',
+        navigation: 'Navigation',
+        subNavigation: 'Sous-navigation',
+        open: 'Ouvrir le menu',
+        close: 'Fermer le menu',
+    },
+    it: {
+        mainNavigation: 'Navigazione principale',
+        navigation: 'Navigazione',
+        subNavigation: 'Sottonavigazione',
+        open: 'Apri Menù',
+        close: 'Chiudi menù',
+    },
+    nl: {
+        mainNavigation: 'Hoofdnavigatie',
+        navigation: 'Navigatie',
+        subNavigation: 'Subnavigatie',
+        open: 'Menu openen',
+        close: 'Menu sluiten',
+    },
+    es: {
+        mainNavigation: 'Navegación principal',
+        navigation: 'Navegación',
+        subNavigation: 'Subnavegación',
+        open: 'Menú abierto',
+        close: 'Cerrar menú',
+    },
+    pl: {
+        mainNavigation: 'Nawigacja główna',
+        navigation: 'Nawigacja',
+        subNavigation: 'Nawigacja podrzędna',
+        open: 'Otwórz menu',
+        close: 'Zamknij menu',
+    },
+    pt: {
+        mainNavigation: 'Navegação principal',
+        navigation: 'Navegação',
+        subNavigation: 'Subnavegação',
+        open: 'Menu aberto',
+        close: 'Fechar menu',
+    },
+    sv: {
+        mainNavigation: 'Huvudnavigering',
+        navigation: 'Navigering',
+        subNavigation: 'Undernavigering',
+        open: 'Öppna menyn',
+        close: 'Stäng menyn',
+    },
+    fi: {
+        mainNavigation: 'Päänavigaatio',
+        navigation: 'Navigaatio',
+        subNavigation: 'Alinavigaatio',
+        open: 'Avaa valikko',
+        close: 'Sulje valikko',
+    },
+};
+
 class NavLinkItem {
     constructor(item, observer) {
         this.observer = observer;
@@ -94,6 +167,85 @@ class NavLinkItem {
 }
 let NavLinkItemIDs = 0;
 
+class NavMetaButton extends NavLinkItem {
+    constructor(item, observer) {
+        super(item, observer);
+        this.touchPlacement = 'top';
+        this.id = `nav-meta-button-${NavMetaButtonIDs++}`;
+        this.touchPlacement = item.touchPlacement || 'top';
+        this.value = item.value || this.id;
+        this.icon = item.icon;
+        this.popoverId = item.popupId;
+        this.ariaLabel = item.ariaLabel;
+        this.htmlTitle = item.htmlTitle;
+        this.href = item.href || '';
+        this.target = item.target || '_self';
+    }
+    get type() {
+        return 'NavMetaButton';
+    }
+    get isLink() {
+        return !!this.href;
+    }
+    renderAtMetaBar() {
+        if (this.isLink) {
+            return (h("bal-button", { id: this.value, color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, inverted: true, rel: this.rel, href: this.href, target: this.target, aria: {
+                    title: this.htmlTitle,
+                    label: this.ariaLabel || this.label,
+                } }, this.label));
+        }
+        return (h("bal-button", { id: this.value, class: "bal-popup-permanent-trigger bal-nav__popup--desktop", color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, aria: {
+                title: this.htmlTitle,
+                label: this.ariaLabel || this.label,
+            }, inverted: true, "bal-popup": this.popoverId, "bal-popup-variant": "popover", "bal-popup-arrow": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-closable": "true", "bal-popup-placement": "bottom-end", "bal-popup-reference": "bal-nav__meta-buttons" }, this.label));
+    }
+    renderAtTouchTopMetaBar() {
+        if (this.touchPlacement === 'top') {
+            if (this.isLink) {
+                return (h("bal-button", { id: this.value, color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, href: this.href, rel: this.rel, target: this.target, aria: {
+                        title: this.htmlTitle,
+                        label: this.ariaLabel || this.label,
+                    } }, this.icon ? '' : this.label));
+            }
+            return (h("bal-button", { id: this.value, class: "bal-nav__popup--touch-top", color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, inverted: false, aria: {
+                    title: this.htmlTitle,
+                    label: this.ariaLabel || this.label,
+                }, "bal-popup": this.popoverId, "bal-popup-variant": "fullscreen", "bal-popup-closable": "true", "bal-popup-offset": "64" }, this.icon ? '' : this.label));
+        }
+    }
+    renderAtTouchBottomMetaBar() {
+        if (this.touchPlacement === 'bottom') {
+            if (this.isLink) {
+                return (h("bal-button", { id: this.value, color: "info", inverted: false, icon: this.icon, square: !this.label || this.label.length < 3, aria: {
+                        title: this.htmlTitle,
+                        label: this.ariaLabel || this.label,
+                    }, href: this.href, target: this.target }, this.label));
+            }
+            return (h("bal-button", { id: this.value, class: "bal-nav__popup--touch-bottom", icon: this.icon, square: !this.label || this.label.length < 3, color: "info", inverted: false, aria: {
+                    title: this.htmlTitle,
+                    label: this.ariaLabel || this.label,
+                }, "bal-popup": this.popoverId, "bal-popup-variant": "drawer", "bal-popup-closable": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-offset": "64" }, this.label));
+        }
+    }
+    resetTouchBottomMetaBar() {
+        if (balBrowser.hasDocument && this.touchPlacement === 'bottom') {
+            const button = document.getElementById(this.value);
+            if (button && button.balPopupVariant === 'drawer') {
+                button.color = 'info';
+            }
+        }
+    }
+    resetDesktopMetaBar() {
+        if (balBrowser.hasDocument) {
+            const button = document.getElementById(this.value);
+            if (button && button.balPopupVariant === 'popover') {
+                button.color = 'info';
+            }
+        }
+    }
+}
+let NavMetaButtonIDs = 0;
+
 class NavSectionLinkItem extends NavLinkItem {
     constructor(item, observer) {
         super(item, observer);
@@ -258,158 +410,6 @@ class NavMetaLinkItem extends NavLinkItem {
 }
 let NavMetaLinkItemIDs = 0;
 
-class NavMetaButton extends NavLinkItem {
-    constructor(item, observer) {
-        super(item, observer);
-        this.touchPlacement = 'top';
-        this.id = `nav-meta-button-${NavMetaButtonIDs++}`;
-        this.touchPlacement = item.touchPlacement || 'top';
-        this.value = item.value || this.id;
-        this.icon = item.icon;
-        this.popoverId = item.popupId;
-        this.ariaLabel = item.ariaLabel;
-        this.htmlTitle = item.htmlTitle;
-        this.href = item.href || '';
-        this.target = item.target || '_self';
-    }
-    get type() {
-        return 'NavMetaButton';
-    }
-    get isLink() {
-        return !!this.href;
-    }
-    renderAtMetaBar() {
-        if (this.isLink) {
-            return (h("bal-button", { id: this.value, color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, inverted: true, rel: this.rel, href: this.href, target: this.target, aria: {
-                    title: this.htmlTitle,
-                    label: this.ariaLabel || this.label,
-                } }, this.label));
-        }
-        return (h("bal-button", { id: this.value, class: "bal-popup-permanent-trigger bal-nav__popup--desktop", color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, aria: {
-                title: this.htmlTitle,
-                label: this.ariaLabel || this.label,
-            }, inverted: true, "bal-popup": this.popoverId, "bal-popup-variant": "popover", "bal-popup-arrow": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-closable": "true", "bal-popup-placement": "bottom-end", "bal-popup-reference": "bal-nav__meta-buttons" }, this.label));
-    }
-    renderAtTouchTopMetaBar() {
-        if (this.touchPlacement === 'top') {
-            if (this.isLink) {
-                return (h("bal-button", { id: this.value, color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, href: this.href, rel: this.rel, target: this.target, aria: {
-                        title: this.htmlTitle,
-                        label: this.ariaLabel || this.label,
-                    } }, this.icon ? '' : this.label));
-            }
-            return (h("bal-button", { id: this.value, class: "bal-nav__popup--touch-top", color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, inverted: false, aria: {
-                    title: this.htmlTitle,
-                    label: this.ariaLabel || this.label,
-                }, "bal-popup": this.popoverId, "bal-popup-variant": "fullscreen", "bal-popup-closable": "true", "bal-popup-offset": "64" }, this.icon ? '' : this.label));
-        }
-    }
-    renderAtTouchBottomMetaBar() {
-        if (this.touchPlacement === 'bottom') {
-            if (this.isLink) {
-                return (h("bal-button", { id: this.value, color: "info", inverted: false, icon: this.icon, square: !this.label || this.label.length < 3, aria: {
-                        title: this.htmlTitle,
-                        label: this.ariaLabel || this.label,
-                    }, href: this.href, target: this.target }, this.label));
-            }
-            return (h("bal-button", { id: this.value, class: "bal-nav__popup--touch-bottom", icon: this.icon, square: !this.label || this.label.length < 3, color: "info", inverted: false, aria: {
-                    title: this.htmlTitle,
-                    label: this.ariaLabel || this.label,
-                }, "bal-popup": this.popoverId, "bal-popup-variant": "drawer", "bal-popup-closable": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-offset": "64" }, this.label));
-        }
-    }
-    resetTouchBottomMetaBar() {
-        if (balBrowser.hasDocument && this.touchPlacement === 'bottom') {
-            const button = document.getElementById(this.value);
-            if (button && button.balPopupVariant === 'drawer') {
-                button.color = 'info';
-            }
-        }
-    }
-    resetDesktopMetaBar() {
-        if (balBrowser.hasDocument) {
-            const button = document.getElementById(this.value);
-            if (button && button.balPopupVariant === 'popover') {
-                button.color = 'info';
-            }
-        }
-    }
-}
-let NavMetaButtonIDs = 0;
-
-const i18nNavBars = {
-    de: {
-        mainNavigation: 'Hauptnavigation',
-        navigation: 'Navigation',
-        subNavigation: 'Subnavigation',
-        open: 'Menü öffnen',
-        close: 'Menü schliessen',
-    },
-    en: {
-        mainNavigation: 'Main navigation',
-        navigation: 'Navigation',
-        subNavigation: 'Sub navigation',
-        open: 'Open Menu',
-        close: 'Close Menu',
-    },
-    fr: {
-        mainNavigation: 'Navigation principale',
-        navigation: 'Navigation',
-        subNavigation: 'Sous-navigation',
-        open: 'Ouvrir le menu',
-        close: 'Fermer le menu',
-    },
-    it: {
-        mainNavigation: 'Navigazione principale',
-        navigation: 'Navigazione',
-        subNavigation: 'Sottonavigazione',
-        open: 'Apri Menù',
-        close: 'Chiudi menù',
-    },
-    nl: {
-        mainNavigation: 'Hoofdnavigatie',
-        navigation: 'Navigatie',
-        subNavigation: 'Subnavigatie',
-        open: 'Menu openen',
-        close: 'Menu sluiten',
-    },
-    es: {
-        mainNavigation: 'Navegación principal',
-        navigation: 'Navegación',
-        subNavigation: 'Subnavegación',
-        open: 'Menú abierto',
-        close: 'Cerrar menú',
-    },
-    pl: {
-        mainNavigation: 'Nawigacja główna',
-        navigation: 'Nawigacja',
-        subNavigation: 'Nawigacja podrzędna',
-        open: 'Otwórz menu',
-        close: 'Zamknij menu',
-    },
-    pt: {
-        mainNavigation: 'Navegação principal',
-        navigation: 'Navegação',
-        subNavigation: 'Subnavegação',
-        open: 'Menu aberto',
-        close: 'Fechar menu',
-    },
-    sv: {
-        mainNavigation: 'Huvudnavigering',
-        navigation: 'Navigering',
-        subNavigation: 'Undernavigering',
-        open: 'Öppna menyn',
-        close: 'Stäng menyn',
-    },
-    fi: {
-        mainNavigation: 'Päänavigaatio',
-        navigation: 'Navigaatio',
-        subNavigation: 'Alinavigaatio',
-        open: 'Avaa valikko',
-        close: 'Sulje valikko',
-    },
-};
-
 const balNavCss = "@media (hover: hover)and (pointer: fine){.bal-nav__logo:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-nav-background:var(--bal-color-primary);--bal-nav-service-background-grey:var(--bal-color-grey);--bal-nav-service-background-purple:var(--bal-color-purple);--bal-nav-service-background-red:var(--bal-color-red);--bal-nav-service-background-yellow:var(--bal-color-yellow);--bal-nav-service-background-green:var(--bal-color-green)}.bal-nav{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%}.bal-nav__flyout{background:var(--bal-color-white);scroll-padding-top:1rem;padding-top:1rem;padding-bottom:1rem;height:calc(var(--bal-app-height, 100%) - 4rem - 4rem);overflow-y:auto}@media screen and (min-width: 1024px){.bal-nav__flyout{display:none;visibility:hidden}}.bal-nav__flyout__container{-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav__flyout__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav__flyout__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav__flyout__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav__flyout__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav__flyout__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav__flyout__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}.bal-nav__flyout:not(.bal-nav__flyout--visible){position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav .bal-nav-meta-bar,.bal-nav .bal-nav-menu-bar{z-index:auto !important}.bal-list__item__accordion-head:after{background:rgba(0,0,0,0) !important}.bal-nav-meta-bar-transform-touch{z-index:var(--bal-z-index-popup);position:relative}.bal-nav__mobile-meta-item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;padding:0;margin:0;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-x-large);line-height:var(--bal-line-heigh-x-large);cursor:pointer}.bal-nav__mobile-menu-item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;margin:0;padding:0 0 0 1rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-large);line-height:var(--bal-line-heigh-large);cursor:pointer}.bal-nav__mobile-section-item,.bal-nav__mobile-service-item>a{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-links{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-text);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li,.bal-nav__mobile-menu-list,.bal-nav__mobile-menu-list>li,.bal-nav__mobile-section-list,.bal-nav__mobile-service-list,.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li,.bal-nav__mobile-links-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-section-list,.bal-nav__mobile-service-list{gap:var(--bal-space-x-large)}.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li{gap:var(--bal-space-xx-small)}.bal-nav__mobile-links-list{gap:var(--bal-space-xx-small)}.bal-nav__mobile-section-list{padding-top:1rem}.bal-nav__mobile-service-list>li{border-radius:var(--bal-radius-normal);padding-top:1rem;padding-bottom:1rem}.bal-nav__mobile-section-list--invisible,.bal-nav__mobile-service-list--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-x-small);line-height:var(--bal-line-height-x-small)}.bal-nav__mobile-overview-link--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link--menu{padding:0 0 0 1rem}.bal-nav__line{background-color:var(--bal-color-border-grey-light);height:var(--bal-border-width-normal);border:none;display:block;border-radius:var(--bal-list-item-radius);width:100%;margin:0;padding:0}.bal-nav__mobile-links--clickable,.bal-nav__mobile-section-item--clickable,.bal-nav__mobile-service-item--clickable>a{cursor:pointer}.bal-nav__mobile-links--selected,.bal-nav__mobile-section-item--selected,.bal-nav__mobile-service-item--selected>a{text-decoration:underline}.bal-nav__mobile-service-item--color-grey{background:var(--bal-nav-service-background-grey)}.bal-nav__mobile-service-item--color-purple{background:var(--bal-nav-service-background-purple)}.bal-nav__mobile-service-item--color-red{background:var(--bal-nav-service-background-red)}.bal-nav__mobile-service-item--color-yellow{background:var(--bal-nav-service-background-yellow)}.bal-nav__mobile-service-item--color-green{background:var(--bal-nav-service-background-green)}";
 const BalNavStyle0 = balNavCss;
 

package/components/bal-number-input.js

@@ -149,6 +149,9 @@ function toNumber(value, decimalPoints = 0) {
     if (checkIfValueIsStringAndDoesNotHaveGermanFormat(val)) {
         val = val.split(getThousandSeparator()).join('').split('`').join('').split("'").join('');
     }
+    if (typeof val === 'string') {
+        val = val.replace(getDecimalSeparator(), '.');
+    }
     return decimalPoints === 0 ? parseInt(val, 10) : parseFloat(val);
 }
 function toFixedNumber(value, decimalPoints = 0) {

package/components/bal-popover2.js

@@ -3,8 +3,8 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
 import { b as balBrowser } from './browser.js';
 import { L as Logger } from './log.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
 import { b as balBreakpoints } from './breakpoints.subject.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
 
 var top = 'top';
 var bottom = 'bottom';