@baloise/ds-core 19.2.0 → 19.3.0-nightly.20250630

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

@@ -1,23 +1,17 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-84f42282.js');
-const tslib_es6 = require('./tslib.es6-a680968e.js');
-const index$1 = require('./index-e6a233be.js');
-const aria = require('./aria-7672033f.js');
-const array = require('./array-ae164ca3.js');
-const bem = require('./bem-81bc6a2d.js');
-const form = require('./form-17c98ac2.js');
-const formInput = require('./form-input-e9974433.js');
-const helpers = require('./helpers-debb881a.js');
-const log = require('./log-33398c2a.js');
-const utils = require('./utils-9ea175af.js');
-const keyboard_helpers = require('./keyboard.helpers-2093e793.js');
-require('./index-3b7f8988.js');
-require('./_commonjsHelpers-68cdf74f.js');
-require('./browser-1d542d0f.js');
-require('./config.utils-df30e424.js');
+var index = require('./index-D4vG8k57.js');
+var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
+var index$1 = require('./index-BZ67Dcnb.js');
+var aria = require('./aria-BzkqcV7W.js');
+var array = require('./array-Db63Hhl1.js');
+var bem = require('./bem-p0PWVN8n.js');
+var form = require('./form-BSlIiqcR.js');
+var formInput = require('./form-input-B660-bjw.js');
+var keyboard_helpers = require('./keyboard.helpers-BkZpVT-9.js');
+var utils = require('./utils-Bl0u6rg1.js');
+require('./_commonjsHelpers-BJu3ubxk.js');
+require('./index-BobQkZjn.js');
 
 const watchForOptions = (containerEl, tagName, onChange) => {
     /* tslint:disable-next-line */
@@ -40,23 +34,110 @@ const watchForOptions = (containerEl, tagName, onChange) => {
 };
 
 const balSelectCss = ":root{--bal-select-control-background:var(--bal-color-white);--bal-select-control-background-hover:var(--bal-form-field-control-background-hover);--bal-select-control-background-invalid:var(--bal-form-field-control-danger-background);--bal-select-control-background-disabled:var(--bal-form-field-control-disabled-background);--bal-select-control-input-background:var(--bal-color-grey-1);--bal-select-control-native-input-background:transparent;--bal-select-control-native-input-background-hover:transparent;--bal-select-control-input-inverted-footer-background:transparent;--bal-select-control-input-inverted-footer-background-hover:transparent;--bal-select-control-input-multiple-background:transparent;--bal-select-control-input-multiple-background-read-only-selection:transparent;--bal-select-control-input-option-background:transparent;--bal-select-control-input-option-background-selected:var(--bal-color-primary-1);--bal-select-control-input-option-background-focused:var(--bal-color-grey-3);--bal-select-control-input-option-background-hover:var(--bal-color-grey-3);--bal-select-control-border-radius:var(--bal-form-field-control-radius);--bal-select-popover-border-color:var(--bal-color-grey-2);--bal-select-control-border-color:var(--bal-form-field-control-border-color);--bal-select-control-border-color-focused:var(--bal-color-primary);--bal-select-control-border-color-hover:var(--bal-form-field-control-border-color-hover);--bal-select-control-border-color-invalid:var(--bal-form-field-control-danger-border-color);--bal-select-control-border-color-disabled:var(--bal-form-field-control-disabled-border-color);--bal-select-control-border-color-focus-within:var(--bal-color-primary);--bal-select-option-border-top-color:var(--bal-color-grey-2);--bal-select-popover-empty-text-color:var(--bal-form-field-control-color);--bal-select-control-text-color:var(--bal-form-field-control-color);--bal-select-control-text-color-focused:var(--bal-color-primary);--bal-select-input-text-color-disabled:var(--bal-form-field-label-disabled-color);--bal-select-control-inverted-footer-native-input-text-color:var(--bal-color-text-white);--bal-select-option-content-label-text-color:var(--bal-form-field-control-color)}bal-select-option{display:none !important}.bal-select{display:block;position:relative;width:100%;-ms-flex:1;flex:1;font-family:var(--bal-font-family-text)}.bal-select__popover{border:.125rem solid var(--bal-select-popover-border-color)}.bal-select__popover__empty{padding:.5rem 1rem;font-family:var(--bal-font-family-text);color:var(--bal-select-popover-empty-text-color)}.bal-select__popover__empty--hidden{display:none}.bal-select__native{position:absolute !important;left:0;top:0;margin:0;padding:0;opacity:0;outline:0;border:none;width:1px;height:1px;clip:rect(1px, 1px, 1px, 1px);overflow:hidden}.bal-select__control{display:-ms-flexbox;display:flex;border-width:.125rem;border-style:solid;border-color:var(--bal-select-control-border-color);border-radius:var(--bal-select-control-border-radius);background:var(--bal-select-control-background);font-size:var(--bal-font-weight-regular);font-family:var(--bal-font-family-text);color:var(--bal-select-control-text-color);outline:none;-webkit-box-shadow:none;box-shadow:none;padding-right:1rem;min-height:3rem}.bal-select__control--focused{border-color:var(--bal-select-control-border-color-focused)}.bal-select__control:not(.bal-select__control--disabled):not(.bal-select__control--invalid):not(.bal-select__control--inverted-footer):hover{border-color:var(--bal-select-control-border-color-hover);background-color:var(--bal-select-control-background-hover)}.bal-select__control:not(.bal-select__control--disabled):not(.bal-select__control--invalid):not(.bal-select__control--inverted-footer):hover .bal-select__control__input{background-color:var(--bal-select-control-input-background)}.bal-select__control--invalid:not(.bal-select__control--disabled){border-color:var(--bal-select-control-border-color-invalid) !important;background:var(--bal-select-control-background-invalid) !important}.bal-select__control:focus-within{border-color:var(--bal-select-control-border-color-focus-within) !important}.bal-select__control--disabled{background-color:var(--bal-select-control-background-disabled) !important;border-color:var(--bal-select-control-border-color-disabled) !important}.bal-select__control--disabled,.bal-select__control--disabled input{cursor:default !important;-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;pointer-events:none !important;color:var(--bal-select-input-text-color-disabled)}.bal-select__control--inverted-footer{border:none;background-color:var(--bal-select-control-input-inverted-footer-background) !important;padding-right:0}.bal-select__control--inverted-footer:hover{background-color:var(--bal-select-control-input-inverted-footer-background-hover) !important}.bal-select__control--inverted-footer .input{color:var(--bal-select-control-inverted-footer-native-input-text-color);background-color:var(--bal-select-control-native-input-background) !important}.bal-select__control--inverted-footer .input:hover{background-color:var(--bal-select-control-native-input-background-hover) !important}.bal-select__control__icon{min-height:100% !important;max-height:100% !important}.bal-select__control__icon--loading{display:none}.bal-select__control__icon--clickable{cursor:pointer}.bal-select__control__selections{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1 1;flex:1 1;-ms-flex-wrap:wrap;flex-wrap:wrap;line-height:1.125rem;max-width:100%;min-width:0;gap:0;padding-left:.375rem}.bal-select__control__selections .bal-tag{margin-left:.25rem;margin-top:.375rem;margin-bottom:.375rem}.bal-select__control__selections .bal-tag+.input{padding-left:.625rem}.bal-select__control__input{border:none !important;outline:none !important;outline-width:0 !important;height:2.75rem !important;-webkit-box-shadow:none !important;box-shadow:none !important;background:var(--bal-select-control-input-multiple-background);-ms-flex:1;flex:1;min-height:2.75rem !important;padding-left:.25rem !important;padding-right:.625rem !important;text-overflow:ellipsis}.bal-select__control__input:-moz-read-only{-moz-user-select:none !important;user-select:none !important;-webkit-tap-highlight-color:rgba(0,0,0,0)}.bal-select__control__input:read-only{-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;-webkit-tap-highlight-color:rgba(0,0,0,0)}.bal-select__control__input:read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:-moz-read-only::selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:read-only::selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:-moz-read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__option{visibility:visible;font-family:var(--bal-font-family-text);background:var(--bal-select-control-input-option-background);border:none;cursor:pointer;outline:none;min-height:3rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0;margin:0;border-top:.125rem solid var(--bal-select-option-border-top-color);text-align:inherit;white-space:nowrap;width:100%}.bal-select__option:first-child{border-top:none}.bal-select__option::-moz-focus-inner{border:none}.bal-select__option--selected{background:var(--bal-select-control-input-option-background-selected)}.bal-select__option--selected .bal-select__option__content__label{font-weight:var(--bal-font-weight-bold)}.bal-select__option--focused{background:var(--bal-select-control-input-option-background-focused)}.bal-select__option:hover{background:var(--bal-select-control-input-option-background-hover)}.bal-select__option__content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;min-height:3rem;padding:.75rem 1rem;gap:.75rem}.bal-select__option__content__checkbox{margin:0;padding:0}.bal-select__option__content__label{margin:0;padding:0;font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-select-option-content-label-text-color);line-height:1.125rem;word-break:break-word;white-space:normal;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}";
-const BalSelectStyle0 = balSelectCss;
 
 const isHuman = true;
 const isNotHuman = false;
 const Select = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.balChange = index.createEvent(this, "balChange", 7);
-        this.balInputClick = index.createEvent(this, "balInputClick", 7);
-        this.balInput = index.createEvent(this, "balInput", 7);
-        this.balBlur = index.createEvent(this, "balBlur", 7);
-        this.balFocus = index.createEvent(this, "balFocus", 7);
-        this.balCancel = index.createEvent(this, "balCancel", 7);
-        this.balKeyPress = index.createEvent(this, "balKeyPress", 7);
+        this.balChange = index.createEvent(this, "balChange");
+        this.balInputClick = index.createEvent(this, "balInputClick");
+        this.balInput = index.createEvent(this, "balInput");
+        this.balBlur = index.createEvent(this, "balBlur");
+        this.balFocus = index.createEvent(this, "balFocus");
+        this.balCancel = index.createEvent(this, "balCancel");
+        this.balKeyPress = index.createEvent(this, "balKeyPress");
         this.didInit = false;
         this.inputId = `bal-select-${selectIds++}`;
         this.initialValue = [];
+        this.hasFocus = false;
+        this.inputValue = '';
+        this.focusIndex = -1;
+        this.isPopoverOpen = false;
+        this.options = new Map();
+        this.labelToScrollTo = '';
+        this.labelToSelectTo = '';
+        this.ariaForm = form.defaultBalAriaForm;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true` the component gets a invalid style.
+         */
+        this.invalid = false;
+        /**
+         * If `true` the component gets a invalid style.
+         */
+        this.filter = 'includes';
+        /**
+         * The tabindex of the control.
+         */
+        this.balTabindex = 0;
+        /**
+         * If `true` there will be no trigger icon visible, so no UX indicator for a popup
+         */
+        this.freeSolo = false;
+        /**
+         * If `true` multiple option can be selected
+         */
+        this.multiple = false;
+        /**
+         * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        this.autocomplete = 'off';
+        /**
+         * If `true` the user can search by typing into the input field.
+         */
+        this.typeahead = false;
+        /**
+         * If `true` the options are a proposal and the user can also create his
+         * own value. Can only be used with the typeahead property.
+         */
+        this.selectionOptional = false;
+        /**
+         * 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 = false;
+        /**
+         * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = false;
+        /**
+         * @internal
+         * Set this to `true` when the component is placed on a dark background.
+         * Set this to `true` when the component is placed on a dark background.
+         */
+        this.inverted = false;
+        /**
+         * Defines the height of the popover list.
+         */
+        this.scrollable = 250;
+        /**
+         * Defines if the select is in a loading state.
+         */
+        this.loading = false;
+        /**
+         * If `true` the filtering is done outside the component.
+         */
+        this.remote = false;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
+        /**
+         * Selected option values. Could also be passed as a string, which gets transformed.
+         */
+        this.value = [];
+        this.rawValue = [];
         this.removeValue = (value) => {
             if (!this.disabled) {
                 this.updateRawValue(utils.removeValue(this.rawValue, value), isHuman);
@@ -72,7 +153,7 @@ const Select = class {
          */
         this.fireBlur = (ev = new CustomEvent('blur')) => {
             if (!this.isPopoverOpen && !this.hasFocus) {
-                helpers.rIC(() => this.balBlur.emit(ev));
+                index.rIC(() => this.balBlur.emit(ev));
             }
         };
         this.handleClick = (ev) => {
@@ -169,36 +250,6 @@ const Select = class {
         this.handleOptionMouseEnter = (index) => {
             this.focusIndex = index;
         };
-        this.hasFocus = false;
-        this.inputValue = '';
-        this.focusIndex = -1;
-        this.isPopoverOpen = false;
-        this.options = new Map();
-        this.labelToScrollTo = '';
-        this.labelToSelectTo = '';
-        this.ariaForm = form.defaultBalAriaForm;
-        this.name = this.inputId;
-        this.invalid = false;
-        this.filter = 'includes';
-        this.balTabindex = 0;
-        this.freeSolo = false;
-        this.multiple = false;
-        this.maxLength = undefined;
-        this.noDataLabel = undefined;
-        this.autocomplete = 'off';
-        this.typeahead = false;
-        this.selectionOptional = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-        this.inverted = false;
-        this.placeholder = undefined;
-        this.scrollable = 250;
-        this.loading = false;
-        this.remote = false;
-        this.autoInvalidOff = false;
-        this.value = [];
-        this.rawValue = [];
     }
     createLogger(log) {
         this.log = log;
@@ -212,7 +263,7 @@ const Select = class {
             this.syncNativeInput(isHuman);
             if (this.didInit && isHuman === true) {
                 if (this.multiple) {
-                    if (index$1.lodash_isnil(this.rawValue)) {
+                    if (index$1.isNil(this.rawValue)) {
                         this.emitChangeEvent([]);
                     }
                     else {
@@ -220,7 +271,7 @@ const Select = class {
                     }
                 }
                 else {
-                    if (index$1.lodash_isnil(this.rawValue) || utils.length(this.rawValue) === 0) {
+                    if (index$1.isNil(this.rawValue) || utils.length(this.rawValue) === 0) {
                         this.emitChangeEvent(undefined);
                     }
                     else {
@@ -238,7 +289,7 @@ const Select = class {
      * ------------------------------------------------------
      */
     connectedCallback() {
-        const debounceUpdateOptions = helpers.debounce(() => this.updateOptions(), 0);
+        const debounceUpdateOptions = index.debounce(() => this.updateOptions(), 0);
         this.initialValue = this.value;
         debounceUpdateOptions();
         this.mutationO = watchForOptions(this.el, 'bal-select-option', () => {
@@ -248,9 +299,9 @@ const Select = class {
     componentWillLoad() {
         this.waitForOptionsAndThenUpdateRawValues();
         this.isInsideOfFooter();
-        if (!index$1.lodash_isnil(this.rawValue) && this.options.size > 0 && utils.length(this.rawValue) === 1) {
+        if (!index$1.isNil(this.rawValue) && this.options.size > 0 && utils.length(this.rawValue) === 1) {
             const firstOption = this.options.get(this.rawValue[0]);
-            if (!index$1.lodash_isnil(firstOption)) {
+            if (!index$1.isNil(firstOption)) {
                 this.inputValue = firstOption.label;
             }
         }
@@ -342,7 +393,7 @@ const Select = class {
      */
     async setFocus() {
         if (this.inputElement && !this.disabled) {
-            await helpers.waitAfterIdleCallback();
+            await index.waitAfterIdleCallback();
             this.inputElement.focus();
         }
     }
@@ -367,7 +418,7 @@ const Select = class {
      * Opens the popover
      */
     async open() {
-        if (!this.disabled && !this.readonly && !index$1.lodash_isnil(this.popoverElement)) {
+        if (!this.disabled && !this.readonly && !index$1.isNil(this.popoverElement)) {
             await this.popoverElement.present();
         }
     }
@@ -375,7 +426,7 @@ const Select = class {
      * Closes the popover
      */
     async close() {
-        if (!this.disabled && !this.readonly && !index$1.lodash_isnil(this.popoverElement)) {
+        if (!this.disabled && !this.readonly && !index$1.isNil(this.popoverElement)) {
             this.blurSelect();
         }
     }
@@ -393,7 +444,7 @@ const Select = class {
      */
     async select(value) {
         const option = this.options.get(value);
-        if (!index$1.lodash_isnil(option)) {
+        if (!index$1.isNil(option)) {
             this.optionSelected(option);
         }
     }
@@ -405,12 +456,10 @@ const Select = class {
     }
     async waitForOptionsAndThenUpdateRawValues() {
         clearTimeout(this.waitForOptionsAndThenUpdateRawValuesTimer);
-        await helpers.deepReady(this.el);
+        await index.deepReady(this.el);
         const hasOptions = this.options.size > 0;
         if (hasOptions) {
-            if (!this.remote) {
-                this.syncRawValue(isNotHuman);
-            }
+            this.syncRawValue(isNotHuman);
         }
         else {
             this.waitForOptionsAndThenUpdateRawValuesTimer = setTimeout(() => this.waitForOptionsAndThenUpdateRawValues(), 10);
@@ -471,7 +520,7 @@ const Select = class {
             return undefined;
         }
         else {
-            if (!index$1.lodash_isnil(this.rawValue) && utils.length(this.rawValue) > 0) {
+            if (!index$1.isNil(this.rawValue) && utils.length(this.rawValue) > 0) {
                 return undefined;
             }
         }
@@ -569,9 +618,9 @@ const Select = class {
     async selectLabel(label) {
         if (label !== ' ') {
             const option = this.optionArray.find(o => utils.startsWith(o.label || '', label));
-            if (!index$1.lodash_isnil(option) && option.id) {
+            if (!index$1.isNil(option) && option.id) {
                 const optionElement = this.el.querySelector(`button#${option.id}`);
-                if (!index$1.lodash_isnil(optionElement)) {
+                if (!index$1.isNil(optionElement)) {
                     const index = this.optionArray.indexOf(option);
                     this.focusIndex = index;
                     this.select(option.value);
@@ -583,9 +632,9 @@ const Select = class {
     async scrollToLabel(label) {
         if (label !== ' ') {
             const option = this.optionArray.find(o => utils.startsWith(o.label || '', label));
-            if (!index$1.lodash_isnil(option) && option.id) {
+            if (!index$1.isNil(option) && option.id) {
                 const optionElement = this.el.querySelector(`button#${option.id}`);
-                if (!index$1.lodash_isnil(optionElement)) {
+                if (!index$1.isNil(optionElement)) {
                     const index = this.optionArray.indexOf(option);
                     this.focusIndex = index;
                     this.scrollTo(optionElement.offsetTop);
@@ -599,9 +648,9 @@ const Select = class {
      ********************************************************/
     syncRawValue(isHuman = true) {
         let newValue = [];
-        if (!index$1.lodash_isnil(this.value) && this.value !== '') {
+        if (!index$1.isNil(this.value) && this.value !== '') {
             if (Array.isArray(this.value)) {
-                newValue = [...this.value.filter(v => !index$1.lodash_isnil(v))];
+                newValue = [...this.value.filter(v => !index$1.isNil(v))];
             }
             else {
                 if (this.value.split('').includes(',')) {
@@ -692,7 +741,7 @@ const Select = class {
                 clearTimeout(this.updateInputValueTimer);
             }
             this.updateInputValueTimer = setTimeout(() => {
-                if (!index$1.lodash_isnil(this.inputElement)) {
+                if (!index$1.isNil(this.inputElement)) {
                     this.inputElement.value = value;
                     this.inputValue = value;
                     resolve();
@@ -706,7 +755,7 @@ const Select = class {
             const chips = this.selectionEl.querySelectorAll('bal-tag');
             const target = ev.target;
             chips.forEach(chip => {
-                const isChip = helpers.isDescendant(chip, target) || chip === target;
+                const isChip = index.isDescendant(chip, target) || chip === target;
                 if (isChip) {
                     isChipClicked = isChip;
                 }
@@ -723,7 +772,7 @@ const Select = class {
      */
     render() {
         var _a;
-        const Chip = (props) => (index.h("bal-tag", { key: 'a348dae32f7f0638b66dc2ceda8a26763fe18c07', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, utils.findLabelByValue(this.options, props.value) || props.value));
+        const Chip = (props) => (index.h("bal-tag", { key: '69e00b5d661f1917fb6cbcf8919a8ce9670a25dd', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, utils.findLabelByValue(this.options, props.value) || props.value));
         const valuesArray = utils.getValues(this.rawValue);
         const block = bem.BEM.block('select');
         const nativeEl = block.element('native');
@@ -737,19 +786,19 @@ const Select = class {
         const optionContentEl = optionEl.element('content');
         const optionContentCheckboxEl = optionContentEl.element('checkbox');
         const optionContentLabelEl = optionContentEl.element('label');
-        return (index.h(index.Host, { key: '126edf5ce107f3bd0c1e98ca7ec51382f5f93a8b', role: "listbox", onClick: this.handleClick, "aria-disabled": aria.ariaBooleanToString(this.disabled), "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => utils.findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, index.h("select", { key: '561e175063c2886f99fdef91d0e11c1c38affb4b', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (index.h("option", { key: value, value: value, selected: true }, value)))), index.h("bal-popover", { key: '5ce86ac980b73f01227edaba951299f2c7caa1a3', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, index.h("div", { key: '7fdaed7cbf590c937e67de98bf5c54e0ca62083a', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, index.h("div", { key: '3837bb760eaba758fe087195e9ca80ec298ae3f6', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
+        return (index.h(index.Host, { key: '3d670b9aa3467ee96c65e2b1a98beda836cac095', role: "listbox", onClick: this.handleClick, "aria-disabled": aria.ariaBooleanToString(this.disabled), "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => utils.findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, index.h("select", { key: '1d438d1034af395d0f99bed2443bb66de288bb0a', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (index.h("option", { key: value, value: value, selected: true }, value)))), index.h("bal-popover", { key: '8dc177324409d7bfdd75e3f375acd00c41ac11e8', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, index.h("div", { key: 'eaa30ce518119e5ced60fc093e887167c4e83c69', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, index.h("div", { key: '4c6b0c807a1c25712d128216909e137af0d3cbf8', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
                 .modifier('clickable')
                 .class(!this.isPopoverOpen && !this.disabled && !this.readonly)), onClick: this.handleInputClick, ref: el => (this.selectionEl = el) }, valuesArray
             .filter(_ => this.multiple)
-            .map((value) => (index.h(Chip, { value: value }))), index.h("input", { key: 'd1134c3c0459c89b0952e47f5fac67e3753f3c75', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": aria.ariaBooleanToString(this.disabled), "data-testid": "bal-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) })), !this.freeSolo && !this.loading ? (index.h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
+            .map((value) => (index.h(Chip, { value: value }))), index.h("input", { key: '1d7fb70f81b7c0ae5fad2f77089ba2a8b04da050', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": aria.ariaBooleanToString(this.disabled), "data-testid": "bal-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) })), !this.freeSolo && !this.loading ? (index.h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
                 ? 'grey-light'
                 : this.inverted
                     ? 'white'
                     : this.invalid
                         ? 'danger'
-                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), index.h("bal-popover-content", { key: '36cdae574c4b7588c1f8c2816b0b872a9c4cc2bd', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index$1) => (index.h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
+                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), index.h("bal-popover-content", { key: '756cb6d1ff62300a2b7b7d6c1250195da8fa3849', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index$1) => (index.h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
                 .modifier('selected')
-                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index$1)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index$1), onClick: () => this.optionSelected(option) }, index.h("div", { class: Object.assign({}, optionContentEl.class()) }, index.h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, index.h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: utils.preventDefault })), index.h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), index.h("div", { key: '70eb78a2d378401f173ee8e62f37fbc602827fba', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
+                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index$1)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index$1), onClick: () => this.optionSelected(option) }, index.h("div", { class: Object.assign({}, optionContentEl.class()) }, index.h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, index.h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: utils.preventDefault })), index.h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), index.h("div", { key: '7f49f62da3e7a1edd769f41e43fddda83a50f52b', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
                 .modifier('hidden')
                 .class(this.noDataLabel === undefined || this.hasOptions() || !this.typeahead || this.selectionOptional)) }, this.noDataLabel)))));
     }
@@ -759,20 +808,25 @@ const Select = class {
     }; }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-select'),
+    index.Logger('bal-select'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], Select.prototype, "createLogger", null);
 let selectIds = 0;
-Select.style = BalSelectStyle0;
+Select.style = balSelectCss;
 
 const SelectOption = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.label = undefined;
+        /**
+         * If `true`, the user cannot interact with the option.
+         */
         this.disabled = false;
-        this.value = undefined;
+        /**
+         * @internal
+         * ID of the option.
+         */
         this.for = `bal-selopt-${selectOptionIds++}`;
     }
     createLogger(log) {
@@ -783,7 +837,7 @@ const SelectOption = class {
     }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-select-option'),
+    index.Logger('bal-select-option'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)

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

@@ -1,17 +1,26 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-84f42282.js');
-const bem = require('./bem-81bc6a2d.js');
-const tokens_esm = require('./tokens.esm-b4bf229a.js');
+var index = require('./index-D4vG8k57.js');
+var bem = require('./bem-p0PWVN8n.js');
+var tokens_esm = require('./tokens.esm-BPYitgVY.js');
 
 const balShapeCss = ".bal-shape{display:block;overflow:hidden;border-radius:var(--bal-radius-normal);width:66px;height:66px}@media screen and (min-width: 769px),print{.bal-shape{width:120px;height:120px}}@media screen and (min-width: 1024px){.bal-shape{width:198px;height:198px;border-radius:unset}}.bal-shape--is-rotation-0{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.bal-shape--is-rotation-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.bal-shape--is-rotation-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.bal-shape--is-rotation-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}";
-const BalShapeStyle0 = balShapeCss;
 
 const Shape = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * The shape variation
+         */
+        this.variation = '1';
+        /**
+         * The shape color
+         */
+        this.color = 'green';
+        /**
+         * The shape rotation
+         */
+        this.rotation = '0';
         this.getHex = () => {
             let color;
             switch (this.color) {
@@ -44,9 +53,6 @@ const Shape = class {
             }
             return color;
         };
-        this.variation = '1';
-        this.color = 'green';
-        this.rotation = '0';
     }
     render() {
         const block = bem.BEM.block('shape');
@@ -59,6 +65,6 @@ const Shape = class {
     }
     get el() { return index.getElement(this); }
 };
-Shape.style = BalShapeStyle0;
+Shape.style = balShapeCss;
 
 exports.bal_shape = Shape;

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

@@ -1,16 +1,16 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-84f42282.js');
-const bem = require('./bem-81bc6a2d.js');
+var index = require('./index-D4vG8k57.js');
+var bem = require('./bem-p0PWVN8n.js');
 
 const balSheetCss = ":root{--bal-sheet-radius:var(--bal-radius-large);--bal-sheet-background:var(--bal-color-white);--bal-sheet-shadow:var(--bal-shadow-normal);--bal-sheet-position-bottom:.5rem}.bal-sheet{display:block;position:fixed;bottom:var(--bal-sheet-position-bottom);left:0;right:0;width:100%;z-index:var(--bal-z-index-sticky);font-weight:var(--bal-font-weight-regular);font-family:var(--bal-font-family-text);font-size:var(--bal-text-size-normal)}.bal-sheet__container .bal-sheet__container__inner,.bal-sheet__container.container .bal-sheet__container__inner{border-radius:var(--bal-sheet-radius);background:var(--bal-sheet-background);-webkit-box-shadow:var(--bal-sheet-shadow);box-shadow:var(--bal-sheet-shadow);padding:1rem}@media screen and (min-width: 769px),print{.bal-sheet__container .bal-sheet__container__inner,.bal-sheet__container.container .bal-sheet__container__inner{padding:1rem 1.5rem}}";
-const BalSheetStyle0 = balSheetCss;
 
 const Sheet = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Defines content width of the stage
+         */
         this.containerSize = '';
     }
     render() {
@@ -21,6 +21,6 @@ const Sheet = class {
         return (index.h(index.Host, { key: 'e38d3e613314a1502b6b1a6eb77e212de467af3c', class: Object.assign({}, block.class()) }, index.h("div", { key: '7d71e2959eb213f6cc243d9b8e91d1c69a5f9e1a', class: Object.assign(Object.assign({}, container.class()), { container: true, [containerModifier]: true }) }, index.h("div", { key: '7712cfd94666fc628912db7b7f786bab530030e3', class: Object.assign({}, containerInner.class()) }, index.h("slot", { key: '0eebab4aa2bc379b4c7dd4fa0cd5a9f0ad2b76eb' })))));
     }
 };
-Sheet.style = BalSheetStyle0;
+Sheet.style = balSheetCss;
 
 exports.bal_sheet = Sheet;