@baloise/ds-core 19.3.0 → 19.4.0

package/dist/cjs/bal-pagination.cjs.entry.js

@@ -1,21 +1,57 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-COfbtsc7.js');
+var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
+var bem = require('./bem-p0PWVN8n.js');
+var breakpoints_subject = require('./breakpoints.subject-CidQD5zH.js');
+var breakpoints_decorator = require('./breakpoints.decorator-DLXGwQpP.js');
+var config_decorator = require('./config.decorator-CDkNZ1Fo.js');
+require('./device-CoI0V6AY.js');
+require('./listener-t3ifJtK5.js');
+require('./tokens.esm-DU04pfsc.js');
 
-const index = require('./index-84f42282.js');
-const tslib_es6 = require('./tslib.es6-a680968e.js');
-const bem = require('./bem-81bc6a2d.js');
-const breakpoints_subject = require('./breakpoints.subject-485cf660.js');
-const config_default = require('./config.default-7e96eb95.js');
-const breakpoints_decorator = require('./breakpoints.decorator-881dd92d.js');
-const config_decorator = require('./config.decorator-de244188.js');
-require('./helpers-debb881a.js');
-require('./browser-1d542d0f.js');
-require('./config.utils-df30e424.js');
-require('./device-9f97a845.js');
-require('./listener-52d2e5fd.js');
-require('./tokens.esm-e14cedac.js');
-require('./log-33398c2a.js');
+const i18nControlLabel = {
+    de: {
+        left: 'Vorherige Seite',
+        right: 'Nächste Seite',
+    },
+    en: {
+        left: 'Previous Page',
+        right: 'Next Page',
+    },
+    fr: {
+        left: 'Page précédente',
+        right: 'Page suivante',
+    },
+    it: {
+        left: 'Pagina precedente',
+        right: 'Pagina successiva',
+    },
+    nl: {
+        left: 'Vorige pagina',
+        right: 'Volgende pagina',
+    },
+    es: {
+        left: 'Página anterior',
+        right: 'Página siguiente',
+    },
+    pl: {
+        left: 'Poprzednia strona',
+        right: 'Następna strona',
+    },
+    pt: {
+        left: 'Página anterior',
+        right: 'Próxima página',
+    },
+    sv: {
+        left: 'Föregående sida',
+        right: 'Nästa sida',
+    },
+    fi: {
+        left: 'Edellinen sivu',
+        right: 'Seuraava sivu',
+    },
+};
 
 function generatePaginationControl(value, totalPages, pageRange) {
     const paginationArray = [];
@@ -95,67 +131,50 @@ function generatePaginationControl(value, totalPages, pageRange) {
     return paginationArray;
 }
 
-const i18nControlLabel = {
-    de: {
-        left: 'Vorherige Seite',
-        right: 'Nächste Seite',
-    },
-    en: {
-        left: 'Previous Page',
-        right: 'Next Page',
-    },
-    fr: {
-        left: 'Page précédente',
-        right: 'Page suivante',
-    },
-    it: {
-        left: 'Pagina precedente',
-        right: 'Pagina successiva',
-    },
-    nl: {
-        left: 'Vorige pagina',
-        right: 'Volgende pagina',
-    },
-    es: {
-        left: 'Página anterior',
-        right: 'Página siguiente',
-    },
-    pl: {
-        left: 'Poprzednia strona',
-        right: 'Następna strona',
-    },
-    pt: {
-        left: 'Página anterior',
-        right: 'Próxima página',
-    },
-    sv: {
-        left: 'Föregående sida',
-        right: 'Nästa sida',
-    },
-    fi: {
-        left: 'Edellinen sivu',
-        right: 'Seuraava sivu',
-    },
-};
-
-const balPaginationCss = ":root{--bal-pagination-small-background:var(--bal-color-grey);--bal-pagination-small-radius:var(--bal-radius-normal);--bal-pagination-tabs-background:var(--bal-color-white);--bal-pagination-tabs-shadow:var(--bal-shadow-normal);--bal-pagination-tabs-radius:var(--bal-radius-large);--bal-pagination-dot-radius:var(--bal-radius-rounded);--bal-pagination-dot-background-active:var(--bal-color-primary);--bal-pagination-dot-background-inactive:var(--bal-color-white)}.bal-pagination{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block}.bal-pagination--is-sticky{position:-webkit-sticky;position:sticky;z-index:var(--bal-z-index-sticky)}.bal-pagination__nav{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;text-align:center}.bal-pagination__nav--align-start{-ms-flex-pack:start;justify-content:flex-start}.bal-pagination__nav--align-end{-ms-flex-pack:end;justify-content:flex-end}.bal-pagination__nav--context-small{padding-top:1rem}.bal-pagination__nav__pagination-previous{-ms-flex-order:1;order:1}.bal-pagination__nav__pagination-previous--context-small[disabled] button:hover{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.bal-pagination__nav__pagination-next{-ms-flex-order:3;order:3}.bal-pagination__nav__pagination-next--context-small[disabled] button:hover{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.bal-pagination__nav__pagination-list{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:4px;padding-left:8px;padding-right:8px;-ms-flex-order:2;order:2;width:unset;text-align:center}.bal-pagination__nav__pagination-list>span{font-weight:var(--bal-font-weight-bold)}@media screen and (min-width: 769px),print{.bal-pagination__nav__pagination-list{gap:8px}}@media screen and (min-width: 1024px){.bal-pagination__nav__pagination-list{gap:8px}}.bal-pagination__nav__pagination-list--context-small{gap:8px;max-width:88px;min-width:63px;min-height:1.25rem;margin:0 20px 0 !important;background:var(--bal-pagination-small-background);border-radius:var(--bal-pagination-small-radius)}.bal-pagination__nav__pagination-list--context-tabs{-ms-flex-positive:1;flex-grow:1;padding:8px;background:var(--bal-pagination-tabs-background);-webkit-box-shadow:var(--bal-pagination-tabs-shadow);box-shadow:var(--bal-pagination-tabs-shadow);border-radius:var(--bal-pagination-tabs-radius)}.bal-pagination__nav__pagination-list__dot{cursor:pointer;height:8px;width:8px;gap:30px;border-radius:var(--bal-pagination-dot-radius);display:block}.bal-pagination__nav__pagination-list__dot--active{background-color:var(--bal-pagination-dot-background-active)}.bal-pagination__nav__pagination-list__dot--inactive{background-color:var(--bal-pagination-dot-background-inactive)}.bal-pagination__nav__pagination-list--more{width:2rem}@media screen and (min-width: 769px),print{.bal-pagination__nav__pagination-list--more{width:2rem}}@media screen and (min-width: 1024px){.bal-pagination__nav__pagination-list--more{width:3rem}}.bal-pagination__nav__pagination-list__tab{-ms-flex:1;flex:1}.bal-pagination__nav__pagination-list.is-disabled li{pointer-events:none}";
-const BalPaginationStyle0 = balPaginationCss;
+const balPaginationCss = ":root{--bal-pagination-small-background:var(--bal-color-grey);--bal-pagination-small-radius:var(--bal-radius-normal);--bal-pagination-tabs-background:var(--bal-color-white);--bal-pagination-tabs-shadow:var(--bal-shadow-normal);--bal-pagination-tabs-radius:var(--bal-radius-large);--bal-pagination-dot-radius:var(--bal-radius-rounded);--bal-pagination-dot-background-active:var(--bal-color-primary);--bal-pagination-dot-background-inactive:var(--bal-color-white)}.bal-pagination{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block}.bal-pagination--is-sticky{position:-webkit-sticky;position:sticky;z-index:var(--bal-z-index-sticky)}.bal-pagination__nav{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;text-align:center}.bal-pagination__nav--align-start{-ms-flex-pack:start;justify-content:flex-start}.bal-pagination__nav--align-end{-ms-flex-pack:end;justify-content:flex-end}.bal-pagination__nav--context-small{padding-top:1rem}.bal-pagination__nav__pagination-previous{-ms-flex-order:1;order:1}.bal-pagination__nav__pagination-previous--context-small[disabled] button:hover{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.bal-pagination__nav__pagination-next{-ms-flex-order:3;order:3}.bal-pagination__nav__pagination-next--context-small[disabled] button:hover{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.bal-pagination__nav__pagination-list{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:4px;padding-left:8px;padding-right:8px;-ms-flex-order:2;order:2;width:unset;text-align:center}.bal-pagination__nav__pagination-list>span{font-weight:var(--bal-font-weight-bold)}@media screen and (min-width: 769px),print{.bal-pagination__nav__pagination-list{gap:8px}}@media screen and (min-width: 1024px){.bal-pagination__nav__pagination-list{gap:8px}}.bal-pagination__nav__pagination-list--context-small{gap:8px;max-width:88px;min-width:63px;min-height:1.25rem;margin:0 20px 0 !important;background:var(--bal-pagination-small-background);border-radius:var(--bal-pagination-small-radius)}.bal-pagination__nav__pagination-list--context-tabs{-ms-flex-positive:1;flex-grow:1;padding:8px;background:var(--bal-pagination-tabs-background);-webkit-box-shadow:var(--bal-pagination-tabs-shadow);box-shadow:var(--bal-pagination-tabs-shadow);border-radius:var(--bal-pagination-tabs-radius)}.bal-pagination__nav__pagination-list__dot{cursor:pointer;height:8px;width:8px;gap:30px;border-radius:var(--bal-pagination-dot-radius);display:block}.bal-pagination__nav__pagination-list__dot--active{background-color:var(--bal-pagination-dot-background-active)}.bal-pagination__nav__pagination-list__dot--inactive{background-color:var(--bal-pagination-dot-background-inactive)}.bal-pagination__nav__pagination-list--more{width:2rem}@media screen and (min-width: 769px),print{.bal-pagination__nav__pagination-list--more{width:2rem}}@media screen and (min-width: 1024px){.bal-pagination__nav__pagination-list--more{width:3rem}}.bal-pagination__nav__pagination-list--more>span{display:inline;font-family:var(--bal-text-line-height-title);font-weight:700}.bal-pagination__nav__pagination-list__tab{-ms-flex:1;flex:1}.bal-pagination__nav__pagination-list.is-disabled li{pointer-events:none}";
 
 const Pagination = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.balChangeEventEmitter = index.createEvent(this, "balChange", 7);
+        this.balChangeEventEmitter = index.createEvent(this, "balChange");
         this._value = 1;
         this.isMobile = breakpoints_subject.balBreakpoints.isMobile;
-        this.language = config_default.defaultConfig.language;
+        this.language = index.defaultConfig.language;
+        /**
+         * Align the buttons to start, center or end
+         */
         this.align = '';
+        /**
+         * Size of the buttons
+         */
         this.size = '';
+        /**
+         * Defines the layout of the pagination
+         */
         this.interface = '';
+        /**
+         * Disables component
+         */
         this.disabled = false;
+        /**
+         * Current selected page
+         */
         this.value = 1;
+        /**
+         * The total amount of pages
+         */
         this.totalPages = 1;
+        /**
+         * Specify the max visible pages before and after the selected page
+         */
         this.pageRange = 2;
+        /**
+         * If 'true, the pagination will be sticky to the top
+         */
         this.sticky = false;
+        /**
+         * If sticky, the top position will be determined by this value
+         */
         this.top = 0;
     }
     valueChanged(newValue) {
@@ -214,7 +233,7 @@ const Pagination = class {
     }
     renderEllipsisElement() {
         const more = bem.BEM.block('pagination').element('nav').element('pagination-list').modifier('more');
-        return (index.h("li", { "aria-hidden": 'true' }, index.h("div", { class: Object.assign({}, more.class()) }, index.h("bal-text", { bold: true, heading: true, inline: true, space: "none" }, "\u2026"))));
+        return (index.h("li", { "aria-hidden": 'true' }, index.h("div", { class: Object.assign({}, more.class()) }, index.h("span", null, "\u2026"))));
     }
     renderPageElement(pageNumber) {
         const isActive = this._value === pageNumber;
@@ -239,10 +258,10 @@ const Pagination = class {
         const leftControlTitle = i18nControlLabel[this.language].left;
         const rightControlTitle = i18nControlLabel[this.language].right;
         const hasBasicNavigationButtons = this.interface === '' || (isSmall && this.totalPages <= 5);
-        const SmallWithText = () => (index.h("span", { key: '80f6ab1b5075ab3bd88046ec5b97574bf0c79ed5', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, index.h("span", { key: '1e4313d171625773d8d234a8c45642bc6685e37a' }, this._value), ' / ' + this.totalPages));
-        const PaginationTablet = () => (index.h("ul", { key: '3f7dce2e4c8ca26728744fdc6707d187f624d7b6', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, tabletItems));
-        const PaginationMobile = () => (index.h("ul", { key: 'bd3506ca35fe0aeec0fdad4b3ee273426be63ed1', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, mobileItems));
-        return (index.h(index.Host, { key: '4402b36d447508550b265fbd7b9d019a0b991021', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, index.h("nav", { key: 'fab886ec2da35d0d6e39cff8c624bd69de5da2a2', class: Object.assign(Object.assign(Object.assign({}, elNav.class()), elNav.modifier(`context-${this.interface}`).class(this.interface !== '')), elNav.modifier(`align-${this.align}`).class(this.align !== '')), role: "navigation", "aria-label": "pagination" }, index.h("bal-button", { key: 'b482e3df263b4d068f3ff563466a6438de032256', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2 || this.disabled, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, index.h("bal-icon", { key: 'b15a56d746b21747cd35de104ba9858b3afc2998', name: "nav-go-left", size: "small" })), index.h("bal-button", { key: '16e0e1aa9e827ef3f273417ee79d9aa6750e4ccf', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages || this.disabled, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, index.h("bal-icon", { key: '4cad894cb58baa3d089f12aad0a6ea41aa67d3c7', name: "nav-go-right", size: "small" })), hasBasicNavigationButtons && this.isMobile ? index.h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? index.h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? index.h(SmallWithText, null) : '')));
+        const SmallWithText = () => (index.h("span", { key: '72b06a925f5f6426a566d7601f86b44bb15d7d72', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, index.h("span", { key: '7acae623617276ddd63c9590dd4bb6ec97232439' }, this._value), ' / ' + this.totalPages));
+        const PaginationTablet = () => (index.h("ul", { key: '9fa2231ceb94c3d0b485cffe9f183b1109036c89', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, tabletItems));
+        const PaginationMobile = () => (index.h("ul", { key: '97a556a62bd7780cc4b22fa4e67e6f8544c87827', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, mobileItems));
+        return (index.h(index.Host, { key: 'e14d06849d97aa3cb16a8d516d430086d4b9c006', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, index.h("nav", { key: '385a40f56e018ba35444d88f724caa3fe28c5620', class: Object.assign(Object.assign(Object.assign({}, elNav.class()), elNav.modifier(`context-${this.interface}`).class(this.interface !== '')), elNav.modifier(`align-${this.align}`).class(this.align !== '')), role: "navigation", "aria-label": "pagination" }, index.h("bal-button", { key: '3f4f56456f43bdce207a733103dc3c766f9378da', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2 || this.disabled, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, index.h("bal-icon", { key: '5f446caf456c0ed02f56f5d454d00b57e8632d20', name: "nav-go-left", size: "small" })), index.h("bal-button", { key: '536c51f2ab51f8d5636e366f7555b1a8046dd542', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages || this.disabled, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, index.h("bal-icon", { key: 'c56892b6e6e853c0c03f201429f408cc5ba740a5', name: "nav-go-right", size: "small" })), hasBasicNavigationButtons && this.isMobile ? index.h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? index.h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? index.h(SmallWithText, null) : '')));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -262,6 +281,6 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", [Object]),
     tslib_es6.__metadata("design:returntype", Promise)
 ], Pagination.prototype, "configChanged", null);
-Pagination.style = BalPaginationStyle0;
+Pagination.style = balPaginationCss;
 
 exports.bal_pagination = Pagination;

package/dist/cjs/bal-popup.cjs.entry.js

@@ -1,17 +1,11 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-84f42282.js');
-const tslib_es6 = require('./tslib.es6-a680968e.js');
-const bem = require('./bem-81bc6a2d.js');
-const browser = require('./browser-1d542d0f.js');
-const formInput = require('./form-input-e9974433.js');
-const helpers = require('./helpers-debb881a.js');
-const log = require('./log-33398c2a.js');
-const floatingUi = require('./floating-ui-4a4a1aed.js');
-const keyboard_helpers = require('./keyboard.helpers-2093e793.js');
-require('./config.utils-df30e424.js');
+var index = require('./index-COfbtsc7.js');
+var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
+var bem = require('./bem-p0PWVN8n.js');
+var formInput = require('./form-input-BUGd2Bkz.js');
+var keyboard_helpers = require('./keyboard.helpers-BkZpVT-9.js');
+var floatingUi = require('./floating-ui-BEMfzblh.js');
 
 class AbstractVariantRenderer {
     showContainerElement(component) {
@@ -148,7 +142,7 @@ class PopoverVariantRenderer extends AbstractVariantRenderer {
         const lib = await floatingUi.balFloatingUi.load();
         //
         // identify trigger element or the the closest trigger available
-        if (!component.trigger && browser.balBrowser.hasDocument) {
+        if (!component.trigger && index.balBrowser.hasDocument) {
             const firstTrigger = Array.from(document.querySelectorAll(`[bal-popup="${component.el.id}"]`))[0];
             component.trigger = firstTrigger;
         }
@@ -159,7 +153,7 @@ class PopoverVariantRenderer extends AbstractVariantRenderer {
             this.reference = component.getValue(component.trigger, 'bal-popup-reference', component.reference);
             this.offset = component.getNumberValue(component.trigger, 'bal-popup-offset', component.offset);
             this.triggerEl = component.trigger;
-            if (this.reference && browser.balBrowser.hasDocument) {
+            if (this.reference && index.balBrowser.hasDocument) {
                 const referenceEl = document.getElementById(this.reference);
                 this.triggerEl = referenceEl ? referenceEl : component.trigger;
             }
@@ -196,7 +190,7 @@ class PopoverVariantRenderer extends AbstractVariantRenderer {
             const referenceRect = (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
             const triggerRect = (_b = component.trigger) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
             let isInFrame = false;
-            if (browser.balBrowser.hasWindow) {
+            if (index.balBrowser.hasWindow) {
                 isInFrame = !!window.frameElement;
             }
             lib
@@ -234,7 +228,7 @@ class PopoverVariantRenderer extends AbstractVariantRenderer {
                                 left: '',
                                 top: y != null && arrowPosition.y != null ? `${arrowPosition.y}px` : '',
                                 bottom: '',
-                                [staticSide]: `${-4}px`,
+                                [staticSide]: `${ -4}px`,
                             });
                         }
                         else {
@@ -243,7 +237,7 @@ class PopoverVariantRenderer extends AbstractVariantRenderer {
                                 top: y != null && arrowPosition.y != null ? `${arrowPosition.y}px` : '',
                                 right: '',
                                 bottom: '',
-                                [staticSide]: `${-4}px`,
+                                [staticSide]: `${ -4}px`,
                             });
                         }
                     }
@@ -301,14 +295,13 @@ class VariantRenderer {
 }
 
 const balPopupCss = ":root{--bal-popup-backdrop-background:rgba(0,7,57,.8);--bal-popup-container-padding-top:0;--bal-popup-container-padding-bottom:0;--bal-popup-container-background:var(--bal-color-white);--bal-popup-variant-popover-max-width:auto;--bal-popup-variant-popover-radius:var(--bal-radius-large);--bal-popup-variant-popover-shadow:var(--bal-shadow-normal);--bal-popup-variant-drawer-radius:var(--bal-radius-large);--bal-popup-arrow-background:var(--bal-color-white)}.bal-popup{position:static;display:inline;z-index:var(--bal-z-index-popup)}.bal-popup__container{background:var(--bal-popup-container-background);display:none;visibility:hidden;padding-top:var(--bal-popup-container-padding-top);padding-bottom:var(--bal-popup-container-padding-bottom);-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto}.bal-popup__container--variant-popover{border-radius:var(--bal-popup-variant-popover-radius);-webkit-box-shadow:var(--bal-popup-variant-popover-shadow);box-shadow:var(--bal-popup-variant-popover-shadow);width:var(--bal-popup-variant-popover-max-width);position:absolute;top:0;left:0}.bal-popup__container--variant-fullscreen{position:fixed;margin:0;width:100%;min-width:100%;max-width:100% !important;min-height:var(--bal-app-height, 100%)}.bal-popup__container--variant-fullscreen .bal-popup__inner{padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-popup__container--variant-drawer{position:fixed;border-top-left-radius:var(--bal-popup-variant-drawer-radius);border-top-right-radius:var(--bal-popup-variant-drawer-radius);padding-left:var(--bal-container-space);padding-right:var(--bal-container-space);width:100%}.bal-popup__inner{overflow-y:auto;max-height:calc(var(--bal-app-height, 100%) - 4rem)}.bal-popup__inner__head{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bal-popup__inner__content{width:100%}.bal-popup__arrow{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;width:8px;height:8px;background:var(--bal-popup-arrow-background);-webkit-transform:rotate(45deg);transform:rotate(45deg);display:none;visibility:hidden}.bal-popup__backdrop{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:fixed;bottom:0;left:0;right:0;top:0;background-color:var(--bal-popup-backdrop-background);width:100vw;height:100vh;display:none;visibility:hidden}.bal-popup-variant-popover-trigger,.bal-popup-permanent-trigger{z-index:calc(var(--bal-z-index-popup) + 1) !important;position:relative !important}";
-const BalPopupStyle0 = balPopupCss;
 
 const Popup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.balChange = index.createEvent(this, "balChange", 7);
-        this.balWillAnimate = index.createEvent(this, "balWillAnimate", 7);
-        this.balDidAnimate = index.createEvent(this, "balDidAnimate", 7);
+        this.balChange = index.createEvent(this, "balChange");
+        this.balWillAnimate = index.createEvent(this, "balWillAnimate");
+        this.balDidAnimate = index.createEvent(this, "balDidAnimate");
         this.popupId = `bal-pu-${popupIds++}`;
         this.isClickedOutsideOnMouseDown = false;
         this.isClickedOutsideOnMouseUp = false;
@@ -316,12 +309,64 @@ const Popup = class {
         this.fullscreenVariantRenderer = new VariantRenderer(new FullscreenVariantRenderer());
         this.drawerVariantRenderer = new VariantRenderer(new DrawerVariantRenderer());
         this.lastVariant = 'popover';
+        this.activeClosable = false;
+        this.activeBackdropDismiss = false;
+        this.activeVariant = 'popover';
+        this.minContainerWidth = '16.25rem';
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Label or title of the popup element
+         */
+        this.label = '';
+        /**
+         * Defines the variant / type of popup
+         */
+        this.variant = 'popover';
+        /**
+         * If set it turns a popover into a fullscreen or a drawer on touch devices
+         */
+        this.placement = 'bottom';
+        /**
+         * If `true`, it shows a little indicator to the trigger element.
+         */
+        this.arrow = false;
+        /**
+         * If `true`, a backdrop will be displayed behind the modal.
+         */
+        this.backdrop = false;
+        /**
+         * Offset form trigger to popup.
+         */
+        this.offset = 0;
+        /**
+         * If `true`, the modal can be closed with the escape key or the little close button.
+         */
+        this.closable = false;
+        /**
+         * If `true`, the modal can be closed with the click outside of the modal
+         */
+        this.backdropDismiss = false;
+        /**
+         * If `true` the popup is open.
+         */
+        this.active = false;
+        /**
+         * Internal active state
+         */
+        this.presented = false;
         this.initialActive = this.active;
+        /**
+         * @internal
+         */
+        this.demo = false;
         /**
          * LISTENERS
          * ------------------------------------------------------
          */
-        this.debouncedGlobalClick = helpers.debounce((trigger) => this.notifyGlobalClick(trigger), 10);
+        this.debouncedGlobalClick = index.debounce((trigger) => this.notifyGlobalClick(trigger), 10);
         /**
          * EVENT BINDING
          * ------------------------------------------------------
@@ -338,25 +383,6 @@ const Popup = class {
                 this.dismiss();
             }
         };
-        this.activeClosable = false;
-        this.activeBackdropDismiss = false;
-        this.activeVariant = 'popover';
-        this.trigger = undefined;
-        this.lastTrigger = undefined;
-        this.minContainerWidth = '16.25rem';
-        this.label = '';
-        this.reference = undefined;
-        this.variant = 'popover';
-        this.placement = 'bottom';
-        this.arrow = false;
-        this.backdrop = false;
-        this.offset = 0;
-        this.closable = false;
-        this.backdropDismiss = false;
-        this.active = false;
-        this.presented = false;
-        this.contentWidth = undefined;
-        this.demo = false;
     }
     createLogger(log) {
         this.log = log;
@@ -411,7 +437,7 @@ const Popup = class {
         var _a;
         const target = ev.target;
         const trigger = target.closest('[bal-popup]');
-        if (trigger && browser.balBrowser.hasWindow) {
+        if (trigger && index.balBrowser.hasWindow) {
             const popupId = ((_a = trigger.attributes.getNamedItem('bal-popup')) === null || _a === void 0 ? void 0 : _a.nodeValue) || '';
             if (this.el.id === popupId) {
                 this.debouncedGlobalClick(trigger);
@@ -492,7 +518,7 @@ const Popup = class {
      * @internal
      */
     async _present() {
-        if (browser.balBrowser.hasDocument) {
+        if (index.balBrowser.hasDocument) {
             this.lastFocus = document.activeElement || undefined;
         }
         if (this.lastVariantRenderer) {
@@ -577,7 +603,7 @@ const Popup = class {
         this.lastVariant = this.activeVariant;
     }
     async dismissAllOtherPopups() {
-        if (browser.balBrowser.hasDocument) {
+        if (index.balBrowser.hasDocument) {
             const popups = Array.from(document.getElementsByTagName('bal-popup')).filter(el => el.id !== this.el.id && el.ariaHidden !== 'true');
             for (let index = 0; index < popups.length; index++) {
                 const popup = popups[index];
@@ -614,12 +640,12 @@ const Popup = class {
     }; }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-popup'),
+    index.Logger('bal-popup'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], Popup.prototype, "createLogger", null);
 let popupIds = 0;
-Popup.style = BalPopupStyle0;
+Popup.style = balPopupCss;
 
 exports.bal_popup = Popup;

package/dist/cjs/bal-progress-bar.cjs.entry.js

@@ -1,30 +1,38 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-84f42282.js');
-const tslib_es6 = require('./tslib.es6-a680968e.js');
-const bem = require('./bem-81bc6a2d.js');
-const helpers = require('./helpers-debb881a.js');
-const breakpoints_subject = require('./breakpoints.subject-485cf660.js');
-const breakpoints_decorator = require('./breakpoints.decorator-881dd92d.js');
-const windowResize_decorator = require('./window-resize.decorator-56853e4c.js');
-require('./browser-1d542d0f.js');
-require('./config.utils-df30e424.js');
-require('./device-9f97a845.js');
-require('./listener-52d2e5fd.js');
-require('./tokens.esm-e14cedac.js');
+var index = require('./index-COfbtsc7.js');
+var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
+var bem = require('./bem-p0PWVN8n.js');
+var breakpoints_subject = require('./breakpoints.subject-CidQD5zH.js');
+var breakpoints_decorator = require('./breakpoints.decorator-DLXGwQpP.js');
+var windowResize_decorator = require('./window-resize.decorator-4PWq713L.js');
+require('./window-resize.subject-GSXXkOcC.js');
+require('./device-CoI0V6AY.js');
+require('./listener-t3ifJtK5.js');
+require('./tokens.esm-DU04pfsc.js');
 
 const balProgressBarCss = ":root{--bal-progress-bar-background-white:var(--bal-color-white);--bal-progress-bar-background-grey:var(--bal-color-grey-3);--bal-progress-bar-background-purple:var(--bal-color-purple-2);--bal-progress-bar-background-yellow:var(--bal-color-yellow-2);--bal-progress-bar-background-red:var(--bal-color-red-2);--bal-progress-bar-background-green:var(--bal-color-green-2);--bal-progress-bar-line-color-primary:var(--bal-color-primary);--bal-progress-bar-line-color-purple:var(--bal-color-purple-6);--bal-progress-bar-line-color-yellow:var(--bal-color-yellow-6);--bal-progress-bar-line-color-red:var(--bal-color-red-6);--bal-progress-bar-line-color-green:var(--bal-color-green-6);--bal-progress-bar-line-radius:var(--bal-radius-rounded)}.bal-progress-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;min-width:0;height:.25rem}.bal-progress-bar--background-white-of-primary,.bal-progress-bar--background-white-of-purple,.bal-progress-bar--background-white-of-red,.bal-progress-bar--background-white-of-green,.bal-progress-bar--background-white-of-yellow{background:var(--bal-progress-bar-background-white)}.bal-progress-bar--background-grey-of-primary{background:var(--bal-progress-bar-background-grey)}.bal-progress-bar--background-grey-of-purple{background:var(--bal-progress-bar-background-purple)}.bal-progress-bar--background-grey-of-red{background:var(--bal-progress-bar-background-red)}.bal-progress-bar--background-grey-of-green{background:var(--bal-progress-bar-background-green)}.bal-progress-bar--background-grey-of-yellow{background:var(--bal-progress-bar-background-yellow)}.bal-progress-bar__line{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;height:.25rem;width:0;background:var(--bal-progress-bar-line-color-primary);border-top-right-radius:var(--bal-progress-bar-line-radius);border-bottom-right-radius:var(--bal-progress-bar-line-radius)}.bal-progress-bar__line--animated{will-change:width;-webkit-transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-progress-bar__line--full{border-top-right-radius:0;border-bottom-right-radius:0}.bal-progress-bar__line--color-purple{background:var(--bal-progress-bar-line-color-purple)}.bal-progress-bar__line--color-yellow{background:var(--bal-progress-bar-line-color-yellow)}.bal-progress-bar__line--color-red{background:var(--bal-progress-bar-line-color-red)}.bal-progress-bar__line--color-green{background:var(--bal-progress-bar-line-color-green)}";
-const BalProgressBarStyle0 = balProgressBarCss;
 
 const ProgressBar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.animated = true;
         this.isTouch = breakpoints_subject.balBreakpoints.isTouch; // need this part to improve a none side effect import
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The value of the bar in percentage. So min is 0 and 100 would be the max value.
+         */
         this.value = 0;
+        /**
+         * The background color
+         */
         this.background = 'white';
+        /**
+         * The progress bar color
+         */
         this.color = 'primary';
     }
     /**
@@ -53,7 +61,7 @@ const ProgressBar = class {
      */
     updateProgress() {
         if (this.lineEl) {
-            helpers.raf(() => {
+            index.raf(() => {
                 const maxWidth = this.el.clientWidth;
                 const value = Math.max(0, Math.min(100, this.value));
                 const lineWidth = (maxWidth / 100) * value;
@@ -90,6 +98,6 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", []),
     tslib_es6.__metadata("design:returntype", void 0)
 ], ProgressBar.prototype, "windowResizeListener", null);
-ProgressBar.style = BalProgressBarStyle0;
+ProgressBar.style = balProgressBarCss;
 
 exports.bal_progress_bar = ProgressBar;

package/dist/cjs/bal-radio-icon.cjs.entry.js

@@ -1,21 +1,40 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-84f42282.js');
-const bem = require('./bem-81bc6a2d.js');
+var index = require('./index-COfbtsc7.js');
+var bem = require('./bem-p0PWVN8n.js');
 
 const balRadioIconCss = ":root{--bal-radio-icon-size:1.5rem;--bal-radio-icon-border-width:2px;--bal-radio-icon-border-radius:var(--bal-radius-rounded);--bal-radio-icon-color-inverted:var(--bal-color-white);--bal-radio-icon-border-color:var(--bal-color-primary);--bal-radio-icon-border-color-hovered:var(--bal-color-border-primary-hovered);--bal-radio-icon-border-color-pressed:var(--bal-color-border-primary-pressed);--bal-radio-icon-border-color-checked:var(--bal-color-primary);--bal-radio-icon-border-color-checked-hovered:var(--bal-color-border-primary-hovered);--bal-radio-icon-border-color-checked-pressed:var(--bal-color-border-primary-pressed);--bal-radio-icon-background:transparent;--bal-radio-icon-background-hovered:var(--bal-color-grey-2);--bal-radio-icon-background-pressed:var(--bal-color-grey-2);--bal-radio-icon-background-checked:var(--bal-color-primary);--bal-radio-icon-background-checked-hovered:var(--bal-color-border-primary-hovered);--bal-radio-icon-background-checked-pressed:var(--bal-color-border-primary-pressed);--bal-radio-icon-border-color-invalid:var(--bal-color-border-danger);--bal-radio-icon-border-color-invalid-hovered:var(--bal-color-border-danger-hovered);--bal-radio-icon-border-color-invalid-pressed:var(--bal-color-border-danger-pressed);--bal-radio-icon-border-color-invalid-checked:var(--bal-color-border-danger);--bal-radio-icon-border-color-invalid-checked-hovered:var(--bal-color-border-danger-hovered);--bal-radio-icon-border-color-invalid-checked-pressed:var(--bal-color-border-danger-pressed);--bal-radio-icon-background-invalid:transparent;--bal-radio-icon-background-invalid-hovered:var(--bal-color-danger-1);--bal-radio-icon-background-invalid-pressed:var(--bal-color-danger-1);--bal-radio-icon-background-invalid-checked:var(--bal-color-border-danger);--bal-radio-icon-background-invalid-checked-hovered:var(--bal-color-border-danger-hovered);--bal-radio-icon-background-invalid-checked-pressed:var(--bal-color-border-danger-pressed);--bal-radio-icon-background-disabled:var(--bal-color-grey-2);--bal-radio-icon-border-color-disabled:var(--bal-color-border-grey-dark);--bal-radio-icon-background-checked-disabled:var(--bal-color-border-grey-dark);--bal-radio-icon-border-color-checked-disabled:var(--bal-color-border-grey-dark)}.bal-radio-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:var(--bal-radio-icon-size);max-width:var(--bal-radio-icon-size);height:var(--bal-radio-icon-size);max-height:var(--bal-radio-icon-size);border-radius:var(--bal-radio-icon-border-radius);overflow:hidden;border:var(--bal-radio-icon-border-width) solid var(--bal-radio-icon-border-color);background-color:var(--bal-radio-icon-background)}@media (hover: hover)and (pointer: fine){.bal-radio-icon--hovered,.bal-radio-icon:hover{background:var(--bal-radio-icon-background-hovered);border-color:var(--bal-radio-icon-border-color-hovered)}}.bal-radio-icon--pressed,.bal-radio-icon:active{background:var(--bal-radio-icon-background-pressed);border-color:var(--bal-radio-icon-border-color-pressed)}.bal-radio-icon:after{display:block;content:\"\";background-color:rgba(0,0,0,0);border-radius:var(--bal-radio-icon-border-radius);width:.375rem;height:.375rem}.bal-radio-icon bal-icon{opacity:0}.bal-radio-icon--checked:after{background-color:#fff}.bal-radio-icon--checked{background-color:var(--bal-radio-icon-background-checked);border-color:var(--bal-radio-icon-border-color-checked)}.bal-radio-icon--checked bal-icon{opacity:1}@media (hover: hover)and (pointer: fine){.bal-radio-icon--checked.bal-radio-icon--hovered,.bal-radio-icon--checked:hover{background:var(--bal-radio-icon-background-checked-hovered);border-color:var(--bal-radio-icon-border-color-checked-hovered)}}.bal-radio-icon--checked.bal-radio-icon--pressed,.bal-radio-icon--checked:active{background:var(--bal-radio-icon-background-checked-pressed);border-color:var(--bal-radio-icon-border-color-checked-pressed)}.bal-radio-icon--checked.bal-radio-icon--inverted{border-color:var(--bal-radio-icon-color-inverted)}.bal-radio-icon--invalid{border-color:var(--bal-radio-icon-border-color-invalid);background-color:var(--bal-radio-icon-background-invalid)}@media (hover: hover)and (pointer: fine){.bal-radio-icon--invalid.bal-radio-icon--hovered,.bal-radio-icon--invalid:hover{background-color:var(--bal-radio-icon-background-invalid-hovered);border-color:var(--bal-radio-icon-border-color-invalid-hovered)}}.bal-radio-icon--invalid.bal-radio-icon--pressed,.bal-radio-icon--invalid:active{background-color:var(--bal-radio-icon-background-invalid-pressed);border-color:var(--bal-radio-icon-border-color-invalid-pressed)}.bal-radio-icon--invalid.bal-radio-icon--checked{border-color:var(--bal-radio-icon-border-color-invalid);background:var(--bal-radio-icon-background-invalid-checked)}@media (hover: hover)and (pointer: fine){.bal-radio-icon--invalid.bal-radio-icon--checked.bal-radio-icon--hovered,.bal-radio-icon--invalid.bal-radio-icon--checked:hover{background-color:var(--bal-radio-icon-background-invalid-checked-hovered);border-color:var(--bal-radio-icon-border-color-invalid-hovered)}}.bal-radio-icon--invalid.bal-radio-icon--checked.bal-radio-icon--pressed,.bal-radio-icon--invalid.bal-radio-icon--checked:active{background-color:var(--bal-radio-icon-background-invalid-checked-pressed);border-color:var(--bal-radio-icon-border-color-invalid-pressed)}.bal-radio-icon--invalid.bal-radio-icon--checked.bal-radio-icon--inverted{border-color:var(--bal-radio-icon-color-inverted)}.bal-radio-icon--disabled{cursor:default !important;background:var(--bal-radio-icon-background-disabled) !important;border-color:var(--bal-radio-icon-border-color-disabled) !important}.bal-radio-icon--disabled.bal-radio-icon--checked{background-color:var(--bal-radio-icon-background-checked-disabled) !important;border-color:var(--bal-radio-icon-border-color-checked-disabled) !important}.bal-radio-icon--disabled.bal-radio-icon--checked.bal-radio-icon--inverted{border-color:var(--bal-radio-icon-color-inverted) !important}";
-const BalRadioIconStyle0 = balRadioIconCss;
 
 const RadioIcon = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true`, the checkbox is selected.
+         */
         this.checked = false;
+        /**
+         * If `true` the component gets a invalid red style.
+         */
         this.invalid = undefined;
+        /**
+         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
         this.disabled = undefined;
+        /**
+         * If `true`, the checkbox is inverted and works on dark backgrounds.
+         */
         this.inverted = undefined;
+        /**
+         * @internal
+         */
         this.hovered = false;
+        /**
+         * @internal
+         */
         this.pressed = false;
     }
     /**
@@ -31,6 +50,6 @@ const RadioIcon = class {
         return (index.h(index.Host, { key: '903ec682257c7182c7e611b7f950eb95aa27498e', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checked').class(checked)), block.modifier('disabled').class(disabled)), block.modifier('invalid').class(invalid)), block.modifier('inverted').class(inverted)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) }));
     }
 };
-RadioIcon.style = BalRadioIconStyle0;
+RadioIcon.style = balRadioIconCss;
 
 exports.bal_radio_icon = RadioIcon;