@baloise/ds-core 16.0.3 → 16.1.0

package/dist/collection/components/bal-field/bal-field.js

@@ -21,6 +21,7 @@ export class Field {
             'bal-input-stepper',
             'bal-input-slider',
             'bal-file-upload',
+            'bal-dropdown',
         ];
         this.formElements = [...this.formControlElement, 'bal-field-label', 'bal-field-message'];
         this.isDirectChild = (el) => {
@@ -39,18 +40,26 @@ export class Field {
             }
             return this.isDirectChild(parent);
         };
+        this.isVisible = (el) => {
+            if (!el) {
+                return false;
+            }
+            return el.ariaHidden !== 'true';
+        };
         this.findDirectChild = (selectors) => {
             const element = this.el.querySelector(selectors);
             const isDirectChild = this.isDirectChild(element);
             if (isDirectChild) {
-                return element;
+                if (this.isVisible(element)) {
+                    return element;
+                }
             }
             return undefined;
         };
         this.findDirectChildren = (selectors) => {
             return selectors
                 .map(selector => {
-                return Array.from(this.el.querySelectorAll(selector)).filter(this.isDirectChild);
+                return Array.from(this.el.querySelectorAll(selector)).filter(this.isDirectChild).filter(this.isVisible);
             })
                 .flat();
         };
@@ -99,6 +108,7 @@ export class Field {
             'bal-field-control bal-input',
             'bal-field-control bal-select',
             'bal-field-control bal-input-date',
+            'bal-field-control bal-dropdown',
             'bal-field-control bal-checkbox',
             'bal-field-control bal-radio',
             'bal-field-control bal-checkbox-group',

package/dist/collection/components/bal-file-upload/components/file-list.js

@@ -3,7 +3,7 @@ import fileSize from "filesize.js";
 import { BEM } from "../../../utils/bem";
 const bemListEl = BEM.block('file-upload').element('list');
 export const FileListComponent = ({ files, disabled, subTitle, onRemoveFile, }) => {
-    return (h("bal-card", { class: Object.assign({}, bemListEl.class()), flat: true }, h("bal-list", { disabled: disabled, border: true, size: "large" }, files.map((file, index) => (h("bal-list-item", { disabled: disabled }, h("bal-list-item-icon", null, h("bal-icon", { name: "document" })), h("bal-list-item-content", null, h("bal-list-item-title", null, file.name), h("bal-list-item-subtitle", null, subTitle ? subTitle(file) : fileSize(file.size))), h("bal-list-item-icon", { right: true, class: {
+    return (h("bal-card", { class: Object.assign({}, bemListEl.class()), flat: true }, h("bal-list", { disabled: disabled, border: true, size: "large" }, files.map((file, index) => (h("bal-list-item", { key: file.name, disabled: disabled }, h("bal-list-item-icon", null, h("bal-icon", { name: "document" })), h("bal-list-item-content", null, h("bal-list-item-title", null, file.name), h("bal-list-item-subtitle", null, subTitle ? subTitle(file) : fileSize(file.size))), h("bal-list-item-icon", { right: true, class: {
             'file-remove': true,
             'is-clickable': !disabled,
         }, onClick: event => onRemoveFile(event, index) }, h("bal-icon", { name: "trash", color: disabled ? 'grey' : 'danger' }))))))));

package/dist/collection/components/bal-footer/bal-footer.js

@@ -87,12 +87,12 @@ export class Footer {
         const elSocialMediaLinks = elLinksContainer.element('social-media-links');
         return (h(Host, { class: Object.assign({}, block.class()) }, h("footer", { class: Object.assign({}, elInner.class()) }, h("div", { class: Object.assign({}, elInnerWrapper.class()) }, h("div", { class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { class: Object.assign({}, elLogo.class()) }, h("bal-logo", { color: "white" })), h("div", { class: Object.assign({}, elLanguage.class()), style: {
                 display: this.hideLanguageSelection || this.allowedLanguages.length <= 1 ? 'none' : 'flex',
-            } }, h("div", { class: Object.assign({}, elWrapper.class()) }, h("bal-input-group", null, h("bal-icon", { class: Object.assign({}, elIcon.class()), name: "web", color: "white" }), h("bal-select", { value: this.language, onBalChange: event => this.changeLanguage(event.detail), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("bal-select-option", { label: language.toLocaleUpperCase(), value: language }, language.toLocaleUpperCase())))))))), h("slot", null), h("div", { class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { class: Object.assign({}, elSocialMediaLinks.class()), style: {
+            } }, h("div", { class: Object.assign({}, elWrapper.class()) }, h("bal-input-group", null, h("bal-icon", { class: Object.assign({}, elIcon.class()), name: "web", color: "white" }), h("bal-select", { value: this.language, onBalChange: event => this.changeLanguage(event.detail), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("bal-select-option", { key: language, label: language.toLocaleUpperCase(), value: language }, language.toLocaleUpperCase())))))))), h("slot", null), h("div", { class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { class: Object.assign({}, elSocialMediaLinks.class()), style: {
                 display: !this.showSocialMedia ? 'none' : 'flex',
-            } }, this.socialMediaLinks.map(link => (h("a", { href: link.link, target: "_blank", class: {
+            } }, this.socialMediaLinks.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                 'link': true,
                 'is-inverted': true,
-            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links.map(link => (h("a", { href: link.link, target: "_blank", class: {
+            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                 'link': true,
                 'is-light': true,
             } }, link.label)))))))));

package/dist/collection/components/bal-input-slider/bal-input-slider.js

@@ -149,7 +149,7 @@ export class InputSlider {
                 width: this.cssWidth(),
             } }, h("div", { class: Object.assign({}, backgroundUpperInnerEl.class()) })), h("div", { class: Object.assign({}, backgroundLowerEl.class()), style: {
                 width: this.cssWidth(true),
-            } }, h("div", { class: Object.assign({}, backgroundLowerInnerEl.class()) }))), h("div", { class: Object.assign({}, inputEl.class()) }, h("div", { class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), h("input", { type: "range", class: Object.assign(Object.assign({}, inputNativeEl.class()), inputNativeEl.modifier('disabled').class(this.disabled || this.readonly)), ref: inputEl => (this.nativeInput = inputEl), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": this.disabled ? 'true' : null, "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, readonly: this.readonly, name: this.name, required: this.required, tabIndex: this.balTabindex, step: this.step, min: this.min, max: this.max, value: this.value !== '' && this.value !== undefined ? this.value : 0, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyPress: e => this.balKeyPress.emit(e), "data-testid": "bal-input-slider" }), h("div", { class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), h("div", { class: Object.assign({}, stepsEl.class()), style: { display: this.hasTicks ? 'flex' : 'none' } }, this.getNumberOfSteps().map(step => (h("div", { class: Object.assign(Object.assign({}, stepsItemEl.class()), stepsItemEl.modifier('disabled').class(this.disabled || this.readonly)), "data-step-id": step }))))));
+            } }, h("div", { class: Object.assign({}, backgroundLowerInnerEl.class()) }))), h("div", { class: Object.assign({}, inputEl.class()) }, h("div", { class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), h("input", { type: "range", class: Object.assign(Object.assign({}, inputNativeEl.class()), inputNativeEl.modifier('disabled').class(this.disabled || this.readonly)), ref: inputEl => (this.nativeInput = inputEl), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": this.disabled ? 'true' : null, "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, readonly: this.readonly, name: this.name, required: this.required, tabIndex: this.balTabindex, step: this.step, min: this.min, max: this.max, value: this.value !== '' && this.value !== undefined ? this.value : 0, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyPress: e => this.balKeyPress.emit(e), "data-testid": "bal-input-slider" }), h("div", { class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), h("div", { class: Object.assign({}, stepsEl.class()), style: { display: this.hasTicks ? 'flex' : 'none' } }, this.getNumberOfSteps().map(step => (h("div", { key: step, class: Object.assign(Object.assign({}, stepsItemEl.class()), stepsItemEl.modifier('disabled').class(this.disabled || this.readonly)), "data-step-id": step }))))));
     }
     static get is() { return "bal-input-slider"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-label/bal-label.js

@@ -5,7 +5,7 @@ import { defaultConfig, ListenToConfig, } from "../../utils/config";
 import { Logger } from "../../utils/log";
 import { i18nBalLabel } from "./bal-label.i18n";
 import { defaultBalAriaForm } from "../../utils/form";
-export class BalLabel {
+export class Label {
     constructor() {
         this.inputId = `bal-lbl-${labelIds++}`;
         this.language = defaultConfig.language;
@@ -391,11 +391,11 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
-], BalLabel.prototype, "createLogger", null);
+], Label.prototype, "createLogger", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", Promise)
-], BalLabel.prototype, "configChanged", null);
+], Label.prototype, "configChanged", null);
 let labelIds = 0;

package/dist/collection/components/bal-nav/bal-nav-link/bal-nav-link.js

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
 import { Logger } from "../../../utils/log";
 import { BEM } from "../../../utils/bem";
-export class NavigationLink {
+export class NavLink {
     constructor() {
         this.variant = '';
         this.selected = false;
@@ -152,4 +152,4 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
-], NavigationLink.prototype, "createLogger", null);
+], NavLink.prototype, "createLogger", null);

package/dist/collection/components/bal-nav/bal-nav-link-grid/bal-nav-link-grid.js

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
 import { Logger } from "../../../utils/log";
 import { BEM } from "../../../utils/bem";
-export class NavigationLinkGrid {
+export class NavLinkGrid {
     createLogger(log) {
         this.log = log;
     }
@@ -31,4 +31,4 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
-], NavigationLinkGrid.prototype, "createLogger", null);
+], NavLinkGrid.prototype, "createLogger", null);

package/dist/collection/components/bal-nav/bal-nav-link-grid-col/bal-nav-link-grid-col.js

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
 import { Logger } from "../../../utils/log";
 import { BEM } from "../../../utils/bem";
-export class NavigationLinkGridCol {
+export class NavLinkGridCol {
     constructor() {
         this.staticCol = false;
     }
@@ -62,4 +62,4 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
-], NavigationLinkGridCol.prototype, "createLogger", null);
+], NavLinkGridCol.prototype, "createLogger", null);

package/dist/collection/components/bal-nav/bal-nav-link-group/bal-nav-link-group.js

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
 import { Logger } from "../../../utils/log";
 import { BEM } from "../../../utils/bem";
-export class NavigationLinkGroup {
+export class NavLinkGroup {
     constructor() {
         this.color = '';
     }
@@ -62,4 +62,4 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
-], NavigationLinkGroup.prototype, "createLogger", null);
+], NavLinkGroup.prototype, "createLogger", null);

package/dist/collection/components/bal-nav/bal-nav.js

@@ -11,7 +11,7 @@ import { ListenToConfig, defaultConfig, } from "../../utils/config";
 import { i18nNavBars } from "./bal-nav.i18n";
 import { balBrowser } from "../../utils/browser";
 import { waitAfterIdleCallback, waitForComponent } from "../../utils/helpers";
-export class NavMetaBar {
+export class Nav {
     constructor() {
         this.navId = `bal-nav-${NavIds++}`;
         this.bodyScrollHandler = new BalScrollHandler();
@@ -299,7 +299,7 @@ export class NavMetaBar {
     renderTouchMenuAccordions(metaItem) {
         return (h("bal-list", { "accordion-one-level": true, class: "pt-xxx-small pb-normal" }, metaItem.mainLinkItems.map(menuItem => {
             var _a, _b, _c;
-            return menuItem.isLink ? (h("bal-list-item", { "sub-accordion-item": true, href: menuItem.href, target: menuItem.target }, h("bal-list-item-content", null, h("bal-list-item-title", { "visual-level": "medium", level: "span" }, menuItem.label)))) : (h("bal-list-item", { accordion: true, "sub-accordion-item": true }, h("bal-list-item-accordion-head", { icon: "nav-go-down", "accordion-open": menuItem.active }, h("bal-list-item-content", null, h("bal-list-item-title", { "visual-level": "medium", level: "span" }, menuItem.label))), h("bal-list-item-accordion-body", null, h("div", { style: { width: '100%' } }, h("bal-nav-link", { role: "listitem", variant: "overview", href: (_a = menuItem.overviewLink) === null || _a === void 0 ? void 0 : _a.href, target: (_b = menuItem.overviewLink) === null || _b === void 0 ? void 0 : _b.target, onClick: () => this.linkItemClickListener(menuItem.overviewLink) }, (_c = menuItem.overviewLink) === null || _c === void 0 ? void 0 : _c.label), h("div", { class: "pt-normal" }, this.renderGridLinks(menuItem))))));
+            return menuItem.isLink ? (h("bal-list-item", { key: menuItem.label, "sub-accordion-item": true, href: menuItem.href, target: menuItem.target }, h("bal-list-item-content", null, h("bal-list-item-title", { "visual-level": "medium", level: "span" }, menuItem.label)))) : (h("bal-list-item", { key: menuItem.label, accordion: true, "sub-accordion-item": true }, h("bal-list-item-accordion-head", { icon: "nav-go-down", "accordion-open": menuItem.active }, h("bal-list-item-content", null, h("bal-list-item-title", { "visual-level": "medium", level: "span" }, menuItem.label))), h("bal-list-item-accordion-body", null, h("div", { style: { width: '100%' } }, h("bal-nav-link", { role: "listitem", variant: "overview", href: (_a = menuItem.overviewLink) === null || _a === void 0 ? void 0 : _a.href, target: (_b = menuItem.overviewLink) === null || _b === void 0 ? void 0 : _b.target, onClick: () => this.linkItemClickListener(menuItem.overviewLink) }, (_c = menuItem.overviewLink) === null || _c === void 0 ? void 0 : _c.label), h("div", { class: "pt-normal" }, this.renderGridLinks(menuItem))))));
         })));
     }
     renderLogo() {
@@ -492,23 +492,23 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
-], NavMetaBar.prototype, "createLogger", null);
+], Nav.prototype, "createLogger", null);
 __decorate([
     ListenToMutation({ tags: ['bal-popup'], waitAfterFramePrint: true }),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
-], NavMetaBar.prototype, "mutationListener", null);
+], Nav.prototype, "mutationListener", null);
 __decorate([
     ListenToBreakpoints(),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
-], NavMetaBar.prototype, "breakpointListener", null);
+], Nav.prototype, "breakpointListener", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", Promise)
-], NavMetaBar.prototype, "configChanged", null);
+], Nav.prototype, "configChanged", null);
 let NavIds = 0;

package/dist/collection/components/bal-nav/components/section-list.js

@@ -8,8 +8,8 @@ export const SectionList = ({ items }) => {
     }
     return (h("ul", { class: Object.assign({}, block.element('mobile-section-list').class()) }, items === null || items === void 0 ? void 0 : items.map(itemGroup => {
         var _a;
-        return (h("li", null, h("a", { class: Object.assign({}, block.element('mobile-section-item').class()), href: itemGroup.href, target: itemGroup.target }, itemGroup.label), itemGroup.linkItems && itemGroup.linkItems.length > 0 ? (h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, (_a = itemGroup.linkItems) === null || _a === void 0 ? void 0 : _a.map(item => {
-            return (h("li", null, h("a", { class: Object.assign({}, block.element('mobile-links').class()), href: item.href, target: item.target }, item.label)));
+        return (h("li", { key: itemGroup.id }, h("a", { class: Object.assign({}, block.element('mobile-section-item').class()), href: itemGroup.href, target: itemGroup.target }, itemGroup.label), itemGroup.linkItems && itemGroup.linkItems.length > 0 ? (h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, (_a = itemGroup.linkItems) === null || _a === void 0 ? void 0 : _a.map(item => {
+            return (h("li", { key: item.id }, h("a", { class: Object.assign({}, block.element('mobile-links').class()), href: item.href, target: item.target }, item.label)));
         }))) : ('')));
     })));
 };

package/dist/collection/components/bal-nav/components/service-list.js

@@ -8,8 +8,8 @@ export const ServiceList = ({ items }) => {
     }
     return (h("ul", { class: Object.assign({}, block.element('mobile-section-list').class()) }, items === null || items === void 0 ? void 0 : items.map(serviceGroup => {
         var _a;
-        return (h("li", null, h("a", { class: Object.assign({}, block.element('mobile-section-item').class()), href: serviceGroup.href, target: serviceGroup.target }, serviceGroup.label), h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, (_a = serviceGroup.linkItems) === null || _a === void 0 ? void 0 : _a.map(item => {
-            return (h("li", null, h("a", { class: Object.assign({}, block.element('mobile-links').class()), href: item.href, target: item.target }, item.label)));
+        return (h("li", { key: serviceGroup.id }, h("a", { class: Object.assign({}, block.element('mobile-section-item').class()), href: serviceGroup.href, target: serviceGroup.target }, serviceGroup.label), h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, (_a = serviceGroup.linkItems) === null || _a === void 0 ? void 0 : _a.map(item => {
+            return (h("li", { key: item.id }, h("a", { class: Object.assign({}, block.element('mobile-links').class()), href: item.href, target: item.target }, item.label)));
         }))));
     })));
 };

package/dist/collection/components/bal-notices/bal-notices.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class BalNotices {
+export class Notices {
     constructor() {
         this.interface = 'toast';
     }

package/dist/collection/components/bal-number-input/bal-number-input.js

@@ -46,6 +46,8 @@ export class NumberInput {
             // restore the input with the last user value without the formatting
             if (this.nativeInput) {
                 this.nativeInputValue = mapDecimalSeparator(this.lastValue || '');
+                clearTimeout(this.selectTimeout);
+                this.selectTimeout = setTimeout(() => this.nativeInput.select());
             }
         };
         this.onBlur = (ev) => {
@@ -55,6 +57,7 @@ export class NumberInput {
             if (this.nativeInput) {
                 this.lastValue = toFixedNumber(this.lastValueGetter, this.decimal);
                 this.nativeInputValue = toUserFormattedNumber(this.lastValueGetter, this.decimal, this.suffix);
+                this.nativeInput.value = this.nativeInputValue;
             }
             this.inputValue = toNumber(this.lastValueGetter, this.decimal);
             inputHandleChange(this);
@@ -66,6 +69,8 @@ export class NumberInput {
             if (input &&
                 !validateKeyDown({
                     key: ev.key,
+                    ctrlKey: ev.ctrlKey,
+                    metaKey: ev.metaKey,
                     decimal: this.decimal,
                     newValue,
                     oldValue,

package/dist/collection/components/bal-number-input/bal-number-input.utils.js

@@ -1,6 +1,6 @@
 import isNil from "lodash.isnil";
 import { ACTION_KEYS, NUMBER_KEYS } from "../../utils/constants/keys.constant";
-import { formatLocaleNumber, getDecimalSeparator, getNegativeSymbol } from "../../utils/number";
+import { formatLocaleNumber, getDecimalSeparator, getNegativeSymbol, getThousandSeparator } from "../../utils/number";
 import isNaN from "lodash.isnan";
 export function isNumber(value) {
     const num = parseFloat(value);
@@ -10,25 +10,33 @@ export function isNotNumber(value) {
     return !isNumber(value) && value !== '' && value !== getNegativeSymbol() && value !== getDecimalSeparator();
 }
 export function toNumber(value, decimalPoints = 0) {
-    if (value === '' ||
-        value === undefined ||
-        value === null ||
-        isNaN(value) ||
-        value === getNegativeSymbol() ||
-        value === getDecimalSeparator() ||
-        !isNumber(value)) {
+    let val = value;
+    if (val === '' ||
+        val === undefined ||
+        val === null ||
+        isNaN(val) ||
+        val === getNegativeSymbol() ||
+        val === getDecimalSeparator() ||
+        !isNumber(val)) {
         return undefined;
     }
-    return decimalPoints === 0 ? parseInt(value, 10) : parseFloat(value);
+    if (typeof val === 'string') {
+        val = val.split(getThousandSeparator()).join('').split('`').join('').split("'").join('');
+    }
+    return decimalPoints === 0 ? parseInt(val, 10) : parseFloat(val);
 }
 export function toFixedNumber(value, decimalPoints = 0) {
-    if (isNil(value)) {
+    let val = value;
+    if (isNil(val)) {
         return '';
     }
-    if (value.charAt(0) === getDecimalSeparator()) {
-        value = `0${value}`;
+    if (typeof val === 'string') {
+        val = val.split(getThousandSeparator()).join('').split('`').join('').split("'").join('');
     }
-    const num = decimalPoints === 0 ? parseInt(value, 10) : parseFloat(value.replace(getDecimalSeparator(), '.'));
+    if (val.charAt(0) === getDecimalSeparator()) {
+        val = `0${val}`;
+    }
+    const num = decimalPoints === 0 ? parseInt(val, 10) : parseFloat(val.replace(getDecimalSeparator(), '.'));
     return isNaN(num) ? '' : num.toFixed(decimalPoints);
 }
 export function mapDecimalSeparator(value) {
@@ -46,7 +54,12 @@ export function toUserFormattedNumber(value, decimalPoints = 0, suffix = '') {
     return isNaN(num) ? '' : formatLocaleNumber(num, decimalPoints) + formattedSuffix;
 }
 export const countDecimalSeparators = (value) => (value.split(getDecimalSeparator()) || []).length - 1 || 0;
-export function validateKeyDown({ key, selectionStart, selectionEnd, newValue, decimal, }) {
+export function validateKeyDown({ key, ctrlKey, metaKey, selectionStart, selectionEnd, newValue, decimal, }) {
+    //
+    // allow select all, copy and paste
+    if (['a', 'c', 'v'].includes(key) && (ctrlKey || metaKey)) {
+        return true;
+    }
     //
     // only allow negative symbols at the start of the input
     if (key === getNegativeSymbol() && selectionStart && selectionStart > 0 && selectionEnd && selectionEnd > 0) {

package/dist/collection/components/bal-number-input/bal-number-input.utils.spec.js

@@ -13,6 +13,8 @@ describe('bal-number-input', () => {
             expect(isNumber('0.1')).toBeTruthy();
             expect(isNumber('42')).toBeTruthy();
             expect(isNumber('-42')).toBeTruthy();
+            expect(isNumber("40'000")).toBeTruthy();
+            expect(isNumber('40`000')).toBeTruthy();
         });
     });
     describe('isNotNumber', () => {
@@ -28,6 +30,8 @@ describe('bal-number-input', () => {
             expect(isNotNumber('0.1')).toBeFalsy();
             expect(isNotNumber('42')).toBeFalsy();
             expect(isNotNumber('-42')).toBeFalsy();
+            expect(isNumber("40'000")).toBeTruthy();
+            expect(isNumber('40`000')).toBeTruthy();
         });
     });
     describe('countDecimalSeparators', () => {
@@ -74,6 +78,14 @@ describe('bal-number-input', () => {
             const result = toNumber('.');
             expect(result).toBeUndefined();
         });
+        it('should return number and ignore separator', () => {
+            const result = toNumber("42'000");
+            expect(result).toBe(42000);
+        });
+        it('should return number and ignore autofill separator', () => {
+            const result = toNumber('42`000');
+            expect(result).toBe(42000);
+        });
     });
     describe('toFixedNumber', () => {
         it('should convert positive integer correctly', () => {
@@ -151,6 +163,8 @@ describe('bal-number-input', () => {
         test('should accept a basic number like 42', () => {
             expect(validateKeyDown({
                 key: '4',
+                ctrlKey: false,
+                metaKey: false,
                 newValue: '4',
                 oldValue: '',
                 selectionStart: 0,
@@ -159,6 +173,8 @@ describe('bal-number-input', () => {
             })).toBeTruthy();
             expect(validateKeyDown({
                 key: '2',
+                ctrlKey: false,
+                metaKey: false,
                 newValue: '42',
                 oldValue: '4',
                 selectionStart: 1,
@@ -170,6 +186,8 @@ describe('bal-number-input', () => {
     test('should accept a negative number like 42', () => {
         expect(validateKeyDown({
             key: '-',
+            ctrlKey: false,
+            metaKey: false,
             newValue: '-',
             oldValue: '',
             selectionStart: 0,
@@ -178,6 +196,8 @@ describe('bal-number-input', () => {
         })).toBeTruthy();
         expect(validateKeyDown({
             key: '2',
+            ctrlKey: false,
+            metaKey: false,
             newValue: '-2',
             oldValue: '-',
             selectionStart: 1,
@@ -186,6 +206,8 @@ describe('bal-number-input', () => {
         })).toBeTruthy();
         expect(validateKeyDown({
             key: '.',
+            ctrlKey: false,
+            metaKey: false,
             newValue: '2.',
             oldValue: '2',
             selectionStart: 2,
@@ -196,6 +218,8 @@ describe('bal-number-input', () => {
     test('should accept a decimal number like 4.2', () => {
         expect(validateKeyDown({
             key: '4',
+            ctrlKey: false,
+            metaKey: false,
             newValue: '4',
             oldValue: '',
             selectionStart: 0,
@@ -204,6 +228,8 @@ describe('bal-number-input', () => {
         })).toBeTruthy();
         expect(validateKeyDown({
             key: '.',
+            ctrlKey: false,
+            metaKey: false,
             newValue: '4.',
             oldValue: '4',
             selectionStart: 1,
@@ -212,6 +238,8 @@ describe('bal-number-input', () => {
         })).toBeTruthy();
         expect(validateKeyDown({
             key: '2',
+            ctrlKey: false,
+            metaKey: false,
             newValue: '4.2',
             oldValue: '4.',
             selectionStart: 2,
@@ -222,6 +250,8 @@ describe('bal-number-input', () => {
     test('should only accept a negative symbol at the start position', () => {
         expect(validateKeyDown({
             key: '-',
+            ctrlKey: false,
+            metaKey: false,
             newValue: '1-',
             oldValue: '1',
             selectionStart: 1,
@@ -230,6 +260,8 @@ describe('bal-number-input', () => {
         })).toBeFalsy();
         expect(validateKeyDown({
             key: '-',
+            ctrlKey: false,
+            metaKey: false,
             newValue: '--',
             oldValue: '-',
             selectionStart: 1,
@@ -240,6 +272,8 @@ describe('bal-number-input', () => {
     test('should only accept one decimal point', () => {
         expect(validateKeyDown({
             key: '.',
+            ctrlKey: false,
+            metaKey: false,
             newValue: '.2.',
             oldValue: '.2',
             selectionStart: 3,
@@ -248,6 +282,8 @@ describe('bal-number-input', () => {
         })).toBeFalsy();
         expect(validateKeyDown({
             key: '.',
+            ctrlKey: false,
+            metaKey: false,
             newValue: '..',
             oldValue: '.',
             selectionStart: 2,
@@ -258,6 +294,8 @@ describe('bal-number-input', () => {
     test('should not allow non number keys', () => {
         expect(validateKeyDown({
             key: 'a',
+            ctrlKey: false,
+            metaKey: false,
             newValue: 'a',
             oldValue: '',
             selectionStart: 1,
@@ -266,6 +304,8 @@ describe('bal-number-input', () => {
         })).toBeFalsy();
         expect(validateKeyDown({
             key: '!',
+            ctrlKey: false,
+            metaKey: false,
             newValue: '!',
             oldValue: '',
             selectionStart: 1,
@@ -276,6 +316,8 @@ describe('bal-number-input', () => {
     test('should not allow more digits as we can take', () => {
         expect(validateKeyDown({
             key: '9',
+            ctrlKey: false,
+            metaKey: false,
             newValue: '1.429',
             oldValue: '1.42',
             selectionStart: 5,
@@ -284,6 +326,8 @@ describe('bal-number-input', () => {
         })).toBeFalsy();
         expect(validateKeyDown({
             key: 'ArrowLeft',
+            ctrlKey: false,
+            metaKey: false,
             newValue: '1.42',
             oldValue: '1.42',
             selectionStart: 5,
@@ -294,6 +338,8 @@ describe('bal-number-input', () => {
     test('should allow navigation keys', () => {
         expect(validateKeyDown({
             key: 'ArrowLeft',
+            ctrlKey: false,
+            metaKey: false,
             newValue: '1.42',
             oldValue: '1.42',
             selectionStart: 3,
@@ -302,6 +348,8 @@ describe('bal-number-input', () => {
         })).toBeTruthy();
         expect(validateKeyDown({
             key: 'Escape',
+            ctrlKey: false,
+            metaKey: false,
             newValue: '1.4',
             oldValue: '1.42',
             selectionStart: 4,
@@ -310,6 +358,40 @@ describe('bal-number-input', () => {
         })).toBeTruthy();
         expect(validateKeyDown({
             key: 'Delete',
+            ctrlKey: false,
+            metaKey: false,
+            newValue: '1.2',
+            oldValue: '1.42',
+            selectionStart: 2,
+            selectionEnd: 2,
+            decimal: 2,
+        })).toBeTruthy();
+    });
+    test('should allow select all, copy and paste', () => {
+        expect(validateKeyDown({
+            key: 'a',
+            ctrlKey: false,
+            metaKey: true,
+            newValue: '1.42',
+            oldValue: '1.42',
+            selectionStart: 3,
+            selectionEnd: 3,
+            decimal: 2,
+        })).toBeTruthy();
+        expect(validateKeyDown({
+            key: 'c',
+            ctrlKey: true,
+            metaKey: false,
+            newValue: '1.4',
+            oldValue: '1.42',
+            selectionStart: 4,
+            selectionEnd: 4,
+            decimal: 2,
+        })).toBeTruthy();
+        expect(validateKeyDown({
+            key: 'v',
+            ctrlKey: false,
+            metaKey: true,
             newValue: '1.2',
             oldValue: '1.42',
             selectionStart: 2,

package/dist/collection/components/bal-option/bal-option.css

@@ -0,0 +1 @@
+: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-2);--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;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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-radio-checkbox-symbol-size: 1.125rem;--bal-radio-checkbox-symbol-width: calc(0.375rem - 1px);--bal-radio-checkbox-symbol-height: calc(0.656rem - 1px);--bal-radio-checkbox-symbol-left: calc(0.375rem + 1px);--bal-radio-checkbox-symbol-margin-top: 0.188rem;--bal-radio-checkbox-label-min-height: 1.125rem}

package/dist/collection/components/bal-option/bal-option.interfaces.js

@@ -0,0 +1,4 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../interfaces.d.ts" />