@baloise/ds-core 19.3.0 → 19.4.0

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

@@ -1,28 +1,62 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
-import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { a as ariaBooleanToString } from './aria-ea150568.js';
-import { B as BEM } from './bem-8c7d2eb0.js';
-import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator-d99dc83c.js';
-import { s as stopEventBubbling } from './form-input-1ebdb905.js';
-import { L as Logger } from './log-dfd1c19f.js';
-import { l as lodash_isnil } from './index-82aff103.js';
-import { i as inheritAttributes } from './attributes-a3e70948.js';
-import { b as waitAfterFramePaint, o as raf } from './helpers-51d51cc5.js';
-import { s as startsWith, i as includes } from './utils-9fbab1d3.js';
-import { d as defaultBalAriaForm } from './form-841232ff.js';
-import './listener-04842ae9.js';
-import './browser-a8073d92.js';
-import './config.utils-f3793464.js';
+import { L as Logger, H as registerInstance, P as createEvent, M as h, N as Host, O as getElement, x as waitAfterFramePaint, Q as raf } from './index-pkPHUz5e.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
+import { a as ariaBooleanToString } from './aria-DBsOHTWj.js';
+import { B as BEM } from './bem-ByiN-QjD.js';
+import { L as ListenToElementStates, B as BalElementStateListener } from './element-states.decorator-DH5waKVu.js';
+import { s as stopEventBubbling } from './form-input-CGW38ndP.js';
+import { i as isNil } from './index-zWZxKBfo.js';
+import { i as inheritAttributes } from './attributes-C4sZQbkT.js';
+import { i as includes, s as startsWith } from './utils-C_qktPg7.js';
+import { d as defaultBalAriaForm } from './form-FCLKfv6B.js';
+import './listener-tzACU3qe.js';
+import './_commonjsHelpers-BFTU3MAI.js';
 
 const balOptionCss = ":root{--bal-option-padding-x:var(--bal-space-small);--bal-option-min-height:1.5rem;--bal-option-background:var(--bal-color-white);--bal-option-background-hovered:var(--bal-color-grey-3);--bal-option-background-selected:var(--bal-color-primary-1);--bal-option-background-selected-hovered:#dddfeb;--bal-option-background-invalid:var(--bal-color-danger-1);--bal-option-background-invalid-hovered:#fbe0de;--bal-option-border-width:var(--bal-border-width-normal);--bal-option-border-color:var(--bal-color-grey-2);--bal-option-font-family:var(--bal-font-family-text);--bal-option-font-weight:var(--bal-font-weight-regular);--bal-option-line-height:1.125rem;--bal-option-text-hovered:var(--bal-color-text-primary-hovered);--bal-option-text-pressed:var(--bal-color-text-primary-pressed);--bal-option-text-disabled:var(--bal-color-text-grey-light)}.bal-option{font-size:16px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block;list-style:none;cursor:pointer;border-bottom-width:var(--bal-option-border-width);border-bottom-color:var(--bal-option-border-color);border-bottom-style:solid;background:var(--bal-option-background);padding-left:var(--bal-option-padding-x);padding-right:var(--bal-option-padding-x);min-height:var(--bal-option-min-height)}.bal-option>bal-stack{min-height:var(--bal-option-min-height)}.bal-option:last-child{border-bottom:none}.bal-option::-moz-focus-inner{border:none}.bal-option--hidden{display:none;visibility:hidden}.bal-option__inner{font-family:var(--bal-option-font-family);font-weight:var(--bal-option-font-weight);line-height:var(--bal-option-line-height);word-break:break-word;white-space:normal;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-ms-flex:1;flex:1}.bal-option__inner--multiline{white-space:normal}.bal-option--focused{background:var(--bal-option-background-hovered)}@media (hover: hover)and (pointer: fine){.bal-option:hover{background:var(--bal-option-background-hovered);color:var(--bal-option-text-hovered)}}.bal-option:active{background:var(--bal-option-background-hovered);color:var(--bal-option-text-pressed)}.bal-option--selected{background:var(--bal-option-background-selected)}@media (hover: hover)and (pointer: fine){.bal-option--selected:hover{background:var(--bal-option-background-selected-hovered)}}.bal-option--selected:active{background:var(--bal-option-background-selected-hovered)}.bal-option--selected .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--selected.bal-option--focused{background:var(--bal-option-background-selected-hovered)}.bal-option--selected.bal-option--focused .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--invalid{background:var(--bal-option-background-invalid)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover{background:var(--bal-option-background-invalid-hovered)}}.bal-option--invalid:active{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid.bal-option--focused{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid .bal-option__inner{color:var(--bal-color-text-danger-hovered)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover .bal-option__inner{color:var(--bal-color-text-danger-hovered)}}.bal-option--invalid:active .bal-option__inner{color:var(--bal-color-text-danger-pressed)}.bal-option--disabled,.bal-option--disabled.bal-option--focused{background:var(--bal-option-background) !important;color:var(--bal-option-text-disabled) !important;cursor:default !important}.bal-option--disabled:hover,.bal-option--disabled.bal-option--focused:hover{background:var(--bal-option-background) !important}.bal-option{--bal-check-size:1.25rem}";
-const BalOptionStyle0 = balOptionCss;
 
 const Option = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.balOptionChange = createEvent(this, "balOptionChange", 7);
-        this.balOptionFocus = createEvent(this, "balOptionFocus", 7);
+        this.balOptionChange = createEvent(this, "balOptionChange");
+        this.balOptionFocus = createEvent(this, "balOptionFocus");
         this.inputId = `bal-option-${balOptionIds++}`;
+        this.checkbox = false;
+        this.interactionState = BalElementStateListener.DefaultState;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Label will be shown in the input element when it got selected
+         */
+        this.label = '';
+        /**
+         * The value of the select option. This value will be returned by the parent `<bal-select>` element.
+         */
+        this.value = '';
+        /**
+         * If `true`, the user cannot interact with the option.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the option can present in more than one line.
+         */
+        this.multiline = false;
+        /**
+         * If `true`, the option is shown in red.
+         */
+        this.invalid = false;
+        /**
+         * If `true`, the option is selected.
+         */
+        this.selected = false;
+        /**
+         * If `true`, the option is focused.
+         */
+        this.focused = false;
+        /**
+         * If `true`, the option is hidden.
+         */
+        this.hidden = false;
         /**
          * EVENT BINDING
          * ------------------------------------------------------
@@ -43,16 +77,6 @@ const Option = class {
                 }
             }
         };
-        this.checkbox = false;
-        this.interactionState = BalElementStateListener.DefaultState;
-        this.label = '';
-        this.value = '';
-        this.disabled = false;
-        this.multiline = false;
-        this.invalid = false;
-        this.selected = false;
-        this.focused = false;
-        this.hidden = false;
     }
     createLogger(log) {
         this.log = log;
@@ -127,10 +151,9 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Option.prototype, "elementStateListener", null);
 let balOptionIds = 0;
-Option.style = BalOptionStyle0;
+Option.style = balOptionCss;
 
 const balOptionListCss = ".bal-option-list{display:block;position:relative;width:100%;list-style:none;margin:0;outline:0;max-height:var(--bal-option-list-max-height);border-radius:var(--bal-radius-normal);overflow:hidden auto}";
-const BalOptionListStyle0 = balOptionListCss;
 
 const OptionList = class {
     constructor(hostRef) {
@@ -138,12 +161,33 @@ const OptionList = class {
         this.inputId = `bal-option-list-${balOptionListIds++}`;
         this.inheritAttributes = {};
         this.ariaForm = defaultBalAriaForm;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true` the list supports multiple selections
+         */
         this.multiple = false;
+        /**
+         * If `true`, the user cannot interact with the option.
+         */
         this.disabled = false;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
         this.required = false;
+        /**
+         * Defines the focused option with his index value
+         */
         this.focusIndex = -1;
-        this.labelledby = undefined;
+        /**
+         * Defines the filter logic of the list
+         */
         this.filter = 'includes';
+        /**
+         * Defines the max height of the list element
+         */
         this.contentHeight = 262;
     }
     createLogger(log) {
@@ -523,7 +567,7 @@ const OptionList = class {
             return this.focusIndex;
         }
         const option = options.find(o => startsWith(o.label || '', label));
-        if (!lodash_isnil(option) && option.id) {
+        if (!isNil(option) && option.id) {
             return options.indexOf(option);
         }
         return this.focusIndex;
@@ -554,6 +598,6 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], OptionList.prototype, "createLogger", null);
 let balOptionListIds = 0;
-OptionList.style = BalOptionListStyle0;
+OptionList.style = balOptionListCss;
 
 export { Option as bal_option, OptionList as bal_option_list };

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

@@ -1,17 +1,55 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
-import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { B as BEM } from './bem-8c7d2eb0.js';
-import { b as balBreakpoints } from './breakpoints.subject-2f68e834.js';
-import { d as defaultConfig } from './config.default-53a04699.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-4de4315f.js';
-import { L as ListenToConfig } from './config.decorator-6795d1fe.js';
-import './helpers-51d51cc5.js';
-import './browser-a8073d92.js';
-import './config.utils-f3793464.js';
-import './device-8c6d2881.js';
-import './listener-04842ae9.js';
-import './tokens.esm-4409ffbb.js';
-import './log-dfd1c19f.js';
+import { H as registerInstance, P as createEvent, f as defaultConfig, M as h, N as Host, O as getElement } from './index-pkPHUz5e.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
+import { B as BEM } from './bem-ByiN-QjD.js';
+import { b as balBreakpoints } from './breakpoints.subject-C7fjILif.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-SHkWCW_Y.js';
+import { L as ListenToConfig } from './config.decorator-T4wBa62Z.js';
+import './device-ClkcmLoi.js';
+import './listener-tzACU3qe.js';
+import './tokens.esm-BvmIi0Pf.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 = [];
@@ -91,67 +129,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) {
         registerInstance(this, hostRef);
-        this.balChangeEventEmitter = createEvent(this, "balChange", 7);
+        this.balChangeEventEmitter = createEvent(this, "balChange");
         this._value = 1;
         this.isMobile = balBreakpoints.isMobile;
         this.language = 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) {
@@ -210,7 +231,7 @@ const Pagination = class {
     }
     renderEllipsisElement() {
         const more = BEM.block('pagination').element('nav').element('pagination-list').modifier('more');
-        return (h("li", { "aria-hidden": 'true' }, h("div", { class: Object.assign({}, more.class()) }, h("bal-text", { bold: true, heading: true, inline: true, space: "none" }, "\u2026"))));
+        return (h("li", { "aria-hidden": 'true' }, h("div", { class: Object.assign({}, more.class()) }, h("span", null, "\u2026"))));
     }
     renderPageElement(pageNumber) {
         const isActive = this._value === pageNumber;
@@ -235,10 +256,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 = () => (h("span", { key: '80f6ab1b5075ab3bd88046ec5b97574bf0c79ed5', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: '1e4313d171625773d8d234a8c45642bc6685e37a' }, this._value), ' / ' + this.totalPages));
-        const PaginationTablet = () => (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 = () => (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 (h(Host, { key: '4402b36d447508550b265fbd7b9d019a0b991021', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, 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" }, 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 }, h("bal-icon", { key: 'b15a56d746b21747cd35de104ba9858b3afc2998', name: "nav-go-left", size: "small" })), 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 }, h("bal-icon", { key: '4cad894cb58baa3d089f12aad0a6ea41aa67d3c7', name: "nav-go-right", size: "small" })), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
+        const SmallWithText = () => (h("span", { key: '72b06a925f5f6426a566d7601f86b44bb15d7d72', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: '7acae623617276ddd63c9590dd4bb6ec97232439' }, this._value), ' / ' + this.totalPages));
+        const PaginationTablet = () => (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 = () => (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 (h(Host, { key: 'e14d06849d97aa3cb16a8d516d430086d4b9c006', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, 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" }, 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 }, h("bal-icon", { key: '5f446caf456c0ed02f56f5d454d00b57e8632d20', name: "nav-go-left", size: "small" })), 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 }, h("bal-icon", { key: 'c56892b6e6e853c0c03f201429f408cc5ba740a5', name: "nav-go-right", size: "small" })), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -258,6 +279,6 @@ __decorate([
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", Promise)
 ], Pagination.prototype, "configChanged", null);
-Pagination.style = BalPaginationStyle0;
+Pagination.style = balPaginationCss;
 
 export { Pagination as bal_pagination };

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

@@ -1,13 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
-import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { B as BEM } from './bem-8c7d2eb0.js';
-import { b as balBrowser } from './browser-a8073d92.js';
-import { s as stopEventBubbling } from './form-input-1ebdb905.js';
-import { k as debounce } from './helpers-51d51cc5.js';
-import { L as Logger } from './log-dfd1c19f.js';
-import { b as balFloatingUi } from './floating-ui-8ffbc979.js';
-import { c as isEscapeKey } from './keyboard.helpers-159e517d.js';
-import './config.utils-f3793464.js';
+import { a as balBrowser, L as Logger, H as registerInstance, P as createEvent, I as debounce, M as h, N as Host, O as getElement } from './index-pkPHUz5e.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
+import { B as BEM } from './bem-ByiN-QjD.js';
+import { s as stopEventBubbling } from './form-input-CGW38ndP.js';
+import { c as isEscapeKey } from './keyboard.helpers-D1VPLQ5z.js';
+import { b as balFloatingUi } from './floating-ui-CTp1F0dK.js';
 
 class AbstractVariantRenderer {
     showContainerElement(component) {
@@ -230,7 +226,7 @@ class PopoverVariantRenderer extends AbstractVariantRenderer {
                                 left: '',
                                 top: y != null && arrowPosition.y != null ? `${arrowPosition.y}px` : '',
                                 bottom: '',
-                                [staticSide]: `${-4}px`,
+                                [staticSide]: `${ -4}px`,
                             });
                         }
                         else {
@@ -239,7 +235,7 @@ class PopoverVariantRenderer extends AbstractVariantRenderer {
                                 top: y != null && arrowPosition.y != null ? `${arrowPosition.y}px` : '',
                                 right: '',
                                 bottom: '',
-                                [staticSide]: `${-4}px`,
+                                [staticSide]: `${ -4}px`,
                             });
                         }
                     }
@@ -297,14 +293,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) {
         registerInstance(this, hostRef);
-        this.balChange = createEvent(this, "balChange", 7);
-        this.balWillAnimate = createEvent(this, "balWillAnimate", 7);
-        this.balDidAnimate = createEvent(this, "balDidAnimate", 7);
+        this.balChange = createEvent(this, "balChange");
+        this.balWillAnimate = createEvent(this, "balWillAnimate");
+        this.balDidAnimate = createEvent(this, "balDidAnimate");
         this.popupId = `bal-pu-${popupIds++}`;
         this.isClickedOutsideOnMouseDown = false;
         this.isClickedOutsideOnMouseUp = false;
@@ -312,7 +307,59 @@ 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
          * ------------------------------------------------------
@@ -334,25 +381,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;
@@ -616,6 +644,6 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Popup.prototype, "createLogger", null);
 let popupIds = 0;
-Popup.style = BalPopupStyle0;
+Popup.style = balPopupCss;
 
 export { Popup as bal_popup };

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

@@ -1,26 +1,36 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
-import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { B as BEM } from './bem-8c7d2eb0.js';
-import { o as raf } from './helpers-51d51cc5.js';
-import { b as balBreakpoints } from './breakpoints.subject-2f68e834.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-4de4315f.js';
-import { L as ListenToWindowResize } from './window-resize.decorator-03b1ed50.js';
-import './browser-a8073d92.js';
-import './config.utils-f3793464.js';
-import './device-8c6d2881.js';
-import './listener-04842ae9.js';
-import './tokens.esm-4409ffbb.js';
+import { H as registerInstance, Q as raf, M as h, N as Host, O as getElement } from './index-pkPHUz5e.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
+import { B as BEM } from './bem-ByiN-QjD.js';
+import { b as balBreakpoints } from './breakpoints.subject-C7fjILif.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-SHkWCW_Y.js';
+import { L as ListenToWindowResize } from './window-resize.decorator-C4aZFmLU.js';
+import './window-resize.subject-DTS_9rk_.js';
+import './device-ClkcmLoi.js';
+import './listener-tzACU3qe.js';
+import './tokens.esm-BvmIi0Pf.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) {
         registerInstance(this, hostRef);
         this.animated = true;
         this.isTouch = 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';
     }
     /**
@@ -86,6 +96,6 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], ProgressBar.prototype, "windowResizeListener", null);
-ProgressBar.style = BalProgressBarStyle0;
+ProgressBar.style = balProgressBarCss;
 
 export { ProgressBar as bal_progress_bar };