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

package/components/bal-notification.js

@@ -2,14 +2,23 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { B as BEM } from './bem.js';
 
 const balNotificationCss = ":root{--bal-notification-font-size:var(--bal-text-size-normal);--bal-notification-font-family:var(--bal-font-family-text);--bal-notification-title-font-family:var(--bal-font-family-title);--bal-notification-title-font-size:var(--bal-text-size-medium);--bal-notification-title-font-size-tablet:var(--bal-text-size-medium-tablet);--bal-notification-title-font-size-desktop:var(--bal-text-size-medium-desktop);--bal-notification-background:var(--bal-color-grey-2);--bal-notification-background-primary:var(--bal-color-grey-2);--bal-notification-background-info:var(--bal-color-info-2);--bal-notification-background-success:var(--bal-color-success-2);--bal-notification-background-warning:var(--bal-color-warning-2);--bal-notification-background-danger:var(--bal-color-danger-2);--bal-notification-background-light:var(--bal-color-grey-1);--bal-notification-background-light-primary:var(--bal-color-purple-1);--bal-notification-background-light-info:var(--bal-color-info-1);--bal-notification-background-light-success:var(--bal-color-green-1);--bal-notification-background-light-warning:var(--bal-color-yellow-1);--bal-notification-background-light-danger:var(--bal-color-red-1);--bal-notification-border:var(--bal-color-grey-4);--bal-notification-border-primary:var(--bal-color-purple-3);--bal-notification-border-info:var(--bal-color-info-3);--bal-notification-border-success:var(--bal-color-green-5);--bal-notification-border-warning:var(--bal-color-yellow-4);--bal-notification-border-danger:var(--bal-color-red-4);--bal-notification-radius:var(--bal-radius-large);--bal-notification-light-radius:var(--bal-radius-normal);--bal-notification-color:var(--bal-color-text-primary);--bal-notification-color-primary:var(--bal-color-text-primary);--bal-notification-color-info:var(--bal-color-text-primary);--bal-notification-color-success:var(--bal-color-text-primary);--bal-notification-color-warning:var(--bal-color-text-primary);--bal-notification-color-danger:var(--bal-color-text-primary)}.bal-notification{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;gap:.125rem;position:relative;min-height:3.5rem;border-radius:var(--bal-notification-radius);font-family:var(--bal-notification-font-family);font-size:var(--bal-notification-font-size);font-weight:var(--bal-font-weight-regular);background:var(--bal-notification-background);color:var(--bal-notification-color);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;padding:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-notification{padding:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-notification{padding:var(--bal-space-medium-desktop)}}.bal-notification>strong,.bal-notification>b,.bal-notification>h2{font-family:var(--bal-notification-title-font-family);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-notification-title-font-size);line-height:var(--bal-text-line-height-title)}@media screen and (min-width: 769px),print{.bal-notification>strong,.bal-notification>b,.bal-notification>h2{font-size:var(--bal-notification-title-font-size-tablet)}}@media screen and (min-width: 1024px){.bal-notification>strong,.bal-notification>b,.bal-notification>h2{font-size:var(--bal-notification-title-font-size-desktop)}}.bal-notification>span,.bal-notification>p{font-family:var(--bal-notification-font-family);font-size:var(--bal-notification-font-size);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text)}.bal-notification--color-light{border:2px solid var(--bal-notification-border-primary);background:var(--bal-notification-background-light-primary);color:var(--bal-notification-color-primary);border-radius:var(--bal-notification-light-radius)}.bal-notification--color-primary{background:var(--bal-notification-background-primary);color:var(--bal-notification-color-primary)}.bal-notification--color-primary-light{border:2px solid var(--bal-notification-border-primary);background:var(--bal-notification-background-light-primary);color:var(--bal-notification-color-primary);border-radius:var(--bal-notification-light-radius)}.bal-notification--color-info{background:var(--bal-notification-background-info);color:var(--bal-notification-color-info)}.bal-notification--color-info-light{border:2px solid var(--bal-notification-border-info);background:var(--bal-notification-background-light-info);color:var(--bal-notification-color-info);border-radius:var(--bal-notification-light-radius)}.bal-notification--color-danger{background:var(--bal-notification-background-danger);color:var(--bal-notification-color-danger)}.bal-notification--color-danger-light{border:2px solid var(--bal-notification-border-danger);background:var(--bal-notification-background-light-danger);color:var(--bal-notification-color-danger);border-radius:var(--bal-notification-light-radius)}.bal-notification--color-warning{background:var(--bal-notification-background-warning);color:var(--bal-notification-color-warning)}.bal-notification--color-warning-light{border:2px solid var(--bal-notification-border-warning);background:var(--bal-notification-background-light-warning);color:var(--bal-notification-color-warning);border-radius:var(--bal-notification-light-radius)}.bal-notification--color-success{background:var(--bal-notification-background-success);color:var(--bal-notification-color-success)}.bal-notification--color-success-light{border:2px solid var(--bal-notification-border-success);background:var(--bal-notification-background-light-success);color:var(--bal-notification-color-success);border-radius:var(--bal-notification-light-radius)}.bal-notification:not(.bal-notification--no-icon){padding-left:3rem}.bal-notification:not(.bal-notification--no-icon):before{background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;position:absolute;height:1.5rem;width:1.5rem;left:.825rem;top:1.5rem;content:\"\";display:block;background-color:var(--bal-color-primary);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z\" fill=\"black\"/></svg>');-webkit-mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z\" fill=\"black\"/></svg>')}.bal-notification--color-primary:not(.bal-notification--no-icon):before,.bal-notification--color-primary-light:not(.bal-notification--no-icon):before{mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z\" fill=\"black\"/></svg>');-webkit-mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z\" fill=\"black\"/></svg>')}.bal-notification--color-info:not(.bal-notification--no-icon):before,.bal-notification--color-info-light:not(.bal-notification--no-icon):before{mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M6.176 13.705c-0.65 0-1.176 0.514-1.176 1.147 0 0.635 0.526 1.149 1.176 1.149h2.824h2.824c0.65 0 1.176-0.514 1.176-1.149 0-0.633-0.526-1.147-1.176-1.147h-1.647V8.426c0-0.634-0.526-1.147-1.176-1.147H7.118C6.468 7.279 5.941 7.792 5.941 8.426c0 0.633 0.526 1.147 1.176 1.147h0.706v4.132H6.176zM10.882 3.836c0 1.014-0.843 1.836-1.882 1.836S7.118 4.85 7.118 3.836C7.118 2.822 7.96 2 9 2s1.882 0.822 1.882 1.836z\" fill=\"black\"/></svg>');-webkit-mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M6.176 13.705c-0.65 0-1.176 0.514-1.176 1.147 0 0.635 0.526 1.149 1.176 1.149h2.824h2.824c0.65 0 1.176-0.514 1.176-1.149 0-0.633-0.526-1.147-1.176-1.147h-1.647V8.426c0-0.634-0.526-1.147-1.176-1.147H7.118C6.468 7.279 5.941 7.792 5.941 8.426c0 0.633 0.526 1.147 1.176 1.147h0.706v4.132H6.176zM10.882 3.836c0 1.014-0.843 1.836-1.882 1.836S7.118 4.85 7.118 3.836C7.118 2.822 7.96 2 9 2s1.882 0.822 1.882 1.836z\" fill=\"black\"/></svg>')}.bal-notification--color-success:not(.bal-notification--no-icon):before,.bal-notification--color-success-light:not(.bal-notification--no-icon):before{mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M15.637 3.247c0.426 0.379 0.486 1.059 0.134 1.518L7.73 15.251l-0.002 0.003c-0.183 0.237-0.413 0.426-0.672 0.555-0.26 0.13-0.543 0.195-0.829 0.191-0.291-0.004-0.577-0.08-0.837-0.219-0.259-0.14-0.485-0.341-0.662-0.588l-2.517-3.488c-0.339-0.47-0.261-1.147 0.175-1.512 0.436-0.365 1.064-0.28 1.403 0.19l2.463 3.414 7.976-10.403c0.352-0.459 0.982-0.524 1.408-0.144z\" fill=\"black\"/></svg>');-webkit-mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M15.637 3.247c0.426 0.379 0.486 1.059 0.134 1.518L7.73 15.251l-0.002 0.003c-0.183 0.237-0.413 0.426-0.672 0.555-0.26 0.13-0.543 0.195-0.829 0.191-0.291-0.004-0.577-0.08-0.837-0.219-0.259-0.14-0.485-0.341-0.662-0.588l-2.517-3.488c-0.339-0.47-0.261-1.147 0.175-1.512 0.436-0.365 1.064-0.28 1.403 0.19l2.463 3.414 7.976-10.403c0.352-0.459 0.982-0.524 1.408-0.144z\" fill=\"black\"/></svg>')}.bal-notification--color-warning:not(.bal-notification--no-icon):before,.bal-notification--color-warning-light:not(.bal-notification--no-icon):before{mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z\" fill=\"black\"/></svg>');-webkit-mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z\" fill=\"black\"/></svg>')}.bal-notification--color-danger:not(.bal-notification--no-icon):before,.bal-notification--color-danger-light:not(.bal-notification--no-icon):before{mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z\" fill=\"black\"/></svg>');-webkit-mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z\" fill=\"black\"/></svg>')}";
-const BalNotificationStyle0 = balNotificationCss;
 
 const Notification = /*@__PURE__*/ proxyCustomElement(class Notification extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * Defines the color of the element
+         * Color type primary is deprecated, please use info instead.
+         */
         this.color = '';
+        /**
+         * If `true` the notifications are presented in a light variant
+         */
         this.light = false;
+        /**
+         * If `true` there will be no icon provided
+         */
         this.noIcon = false;
     }
     render() {
@@ -17,7 +26,7 @@ const Notification = /*@__PURE__*/ proxyCustomElement(class Notification extends
         block.element('inner');
         return (h(Host, { key: '25a9149c4bb693ebf3c1b1a863e72f7727b8d046', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`no-icon`).class(this.noIcon)), block.modifier(`color-${this.color}${this.light ? '-light' : ''}`).class(!!this.color)), block.modifier(`color-light`).class(!this.color && this.light)), "data-testid": "bal-notification-content" }, h("slot", { key: '6254964fe9f247d75cb102a80c7a251a233bf2d9' })));
     }
-    static get style() { return BalNotificationStyle0; }
+    static get style() { return balNotificationCss; }
 }, [4, "bal-notification", {
         "color": [1],
         "light": [4],

package/components/bal-number-input.js

@@ -1,136 +1,26 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { f as inputHandleClick, b as inputHandleHostClick, c as inputHandleFocus, d as inputHandleBlur, e as inputHandleChange, l as getNativeInputValue, m as getUpcomingValue, s as stopEventBubbling, j as inputListenOnClick, k as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
-import { o as debounceEvent } from './helpers.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToConfig } from './config.decorator.js';
+import { f as inputHandleClick, b as inputHandleHostClick, c as inputHandleFocus, d as inputHandleBlur, e as inputHandleChange, l as getUpcomingValue, s as stopEventBubbling, j as inputListenOnClick, k as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
+import { k as debounceEvent } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
 import { g as getNegativeSymbol, a as getDecimalSeparator, b as getThousandSeparator, f as formatLocaleNumber } from './number.js';
 import { B as BEM } from './bem.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { L as Logger } from './log.js';
-import { l as lodash_isnil } from './index3.js';
+import { i as isNil } from './index2.js';
 import { N as NUMBER_KEYS, A as ACTION_KEYS } from './keys.constant.js';
-import { i as isEmpty } from './index2.js';
+import { i as isNaN } from './index6.js';
+import { i as isEmpty } from './index4.js';
 import { a as ariaBooleanToString } from './aria.js';
-import { d as defaultConfig } from './config.default.js';
-import { L as ListenToConfig } from './config.decorator.js';
-
-/**
- * lodash 3.0.2 (Custom Build) <https://lodash.com/>
- * Build: `lodash modularize exports="npm" -o ./`
- * Copyright 2012-2016 The Dojo Foundation <http://dojofoundation.org/>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright 2009-2016 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- * Available under MIT license <https://lodash.com/license>
- */
-
-/** `Object#toString` result references. */
-var numberTag = '[object Number]';
-
-/** Used for built-in method references. */
-var objectProto = Object.prototype;
-
-/**
- * Used to resolve the [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring)
- * of values.
- */
-var objectToString = objectProto.toString;
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-function isObjectLike(value) {
-  return !!value && typeof value == 'object';
-}
-
-/**
- * Checks if `value` is `NaN`.
- *
- * **Note:** This method is not the same as [`isNaN`](https://es5.github.io/#x15.1.2.4)
- * which returns `true` for `undefined` and other non-numeric values.
- *
- * @static
- * @memberOf _
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is `NaN`, else `false`.
- * @example
- *
- * _.isNaN(NaN);
- * // => true
- *
- * _.isNaN(new Number(NaN));
- * // => true
- *
- * isNaN(undefined);
- * // => true
- *
- * _.isNaN(undefined);
- * // => false
- */
-function isNaN(value) {
-  // An `NaN` primitive is the only value that is not equal to itself.
-  // Perform the `toStringTag` check first to avoid errors with some ActiveX objects in IE.
-  return isNumber$1(value) && value != +value;
-}
-
-/**
- * Checks if `value` is classified as a `Number` primitive or object.
- *
- * **Note:** To exclude `Infinity`, `-Infinity`, and `NaN`, which are classified
- * as numbers, use the `_.isFinite` method.
- *
- * @static
- * @memberOf _
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is correctly classified, else `false`.
- * @example
- *
- * _.isNumber(3);
- * // => true
- *
- * _.isNumber(Number.MIN_VALUE);
- * // => true
- *
- * _.isNumber(Infinity);
- * // => true
- *
- * _.isNumber('3');
- * // => false
- */
-function isNumber$1(value) {
-  return typeof value == 'number' ||
-    (isObjectLike(value) && objectToString.call(value) == numberTag);
-}
-
-var lodash_isnan = isNaN;
 
 function checkIfValueIsStringAndDoesNotHaveGermanFormat(val) {
     return typeof val === 'string' && getThousandSeparator() !== '.';
 }
 function isNumber(value) {
     const num = parseFloat(value);
-    return typeof num === 'number' && !lodash_isnan(num);
+    return typeof num === 'number' && !isNaN(num);
 }
 function isNotNumber(value) {
     return !isNumber(value) && value !== '' && value !== getNegativeSymbol() && value !== getDecimalSeparator();
@@ -140,7 +30,7 @@ function toNumber(value, decimalPoints = 0) {
     if (val === '' ||
         val === undefined ||
         val === null ||
-        lodash_isnan(val) ||
+        isNaN(val) ||
         val === getNegativeSymbol() ||
         val === getDecimalSeparator() ||
         !isNumber(val)) {
@@ -156,7 +46,7 @@ function toNumber(value, decimalPoints = 0) {
 }
 function toFixedNumber(value, decimalPoints = 0) {
     let val = value;
-    if (lodash_isnil(val)) {
+    if (isNil(val)) {
         return '';
     }
     if (checkIfValueIsStringAndDoesNotHaveGermanFormat(val)) {
@@ -166,13 +56,13 @@ function toFixedNumber(value, decimalPoints = 0) {
         val = `0${val}`;
     }
     const num = decimalPoints === 0 ? parseInt(val, 10) : parseFloat(val.replace(getDecimalSeparator(), '.'));
-    return lodash_isnan(num) ? '' : num.toFixed(decimalPoints);
+    return isNaN(num) ? '' : num.toFixed(decimalPoints);
 }
 function mapDecimalSeparator(value) {
     return value.replace('.', getDecimalSeparator());
 }
 function toUserFormattedNumber(value, decimalPoints = 0, suffix = '') {
-    if (lodash_isnil(value)) {
+    if (isNil(value)) {
         return '';
     }
     if (value.charAt(0) === getDecimalSeparator()) {
@@ -180,7 +70,7 @@ function toUserFormattedNumber(value, decimalPoints = 0, suffix = '') {
     }
     const num = decimalPoints === 0 ? parseInt(value, 10) : parseFloat(value);
     const formattedSuffix = suffix !== '' ? ` ${suffix.trim()}` : '';
-    return lodash_isnan(num) ? '' : formatLocaleNumber(num, decimalPoints) + formattedSuffix;
+    return isNaN(num) ? '' : formatLocaleNumber(num, decimalPoints) + formattedSuffix;
 }
 const countDecimalSeparators = (value) => (value.split(getDecimalSeparator()) || []).length - 1 || 0;
 function validateKeyDown({ key, ctrlKey, metaKey, selectionStart, selectionEnd, newValue, decimal, }) {
@@ -222,7 +112,6 @@ function validateKeyDown({ key, ctrlKey, metaKey, selectionStart, selectionEnd,
 }
 
 const balNumberInputCss = ".bal-number-input{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:relative;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;width:100%;padding:0;font-family:var(--bal-font-family-text)}";
-const BalNumberInputStyle0 = balNumberInputCss;
 
 const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends HTMLElement {
     constructor() {
@@ -238,6 +127,56 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
         this.lastValue = '';
         this.inputValue = this.value;
         this.initialValue = undefined;
+        this.focused = false;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.ariaForm = defaultBalAriaForm;
+        this.nativeInputValue = '';
+        this.inputPattern = this.createPattern();
+        /**
+         * 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;
+        /**
+         * Defines the allowed decimal points for the `number-input`.
+         */
+        this.decimal = 0;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = 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 input value has 0 as default value
+         */
+        this.exactNumber = false;
+        /**
+         * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
+         */
+        this.debounce = 0;
+        /**
+         * The value of the input.
+         */
+        this.value = undefined;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
         /**
          * EVENT BINDING
          * ------------------------------------------------------
@@ -282,7 +221,6 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
             inputHandleChange(this);
         };
         this.onKeydown = (ev) => {
-            const oldValue = getNativeInputValue(this);
             const newValue = getUpcomingValue(this, ev);
             const input = ev === null || ev === void 0 ? void 0 : ev.target;
             if (input &&
@@ -292,34 +230,12 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
                     metaKey: ev.metaKey,
                     decimal: this.decimal,
                     newValue,
-                    oldValue,
                     selectionStart: input.selectionStart,
                     selectionEnd: input.selectionEnd,
                 })) {
                 return stopEventBubbling(ev);
             }
         };
-        this.focused = false;
-        this.language = defaultConfig.language;
-        this.region = defaultConfig.region;
-        this.ariaForm = defaultBalAriaForm;
-        this.nativeInputValue = '';
-        this.inputPattern = this.createPattern();
-        this.name = this.inputId;
-        this.invalid = false;
-        this.decimal = 0;
-        this.suffix = undefined;
-        this.pattern = undefined;
-        this.placeholder = undefined;
-        this.required = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.exactNumber = false;
-        this.max = undefined;
-        this.min = undefined;
-        this.debounce = 0;
-        this.value = undefined;
-        this.autoInvalidOff = false;
     }
     createLogger(log) {
         this.log = log;
@@ -330,7 +246,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
     valueChanged(newValue, oldValue) {
         const newValueAsNumber = toNumber(newValue, this.decimal);
         if (newValueAsNumber !== oldValue) {
-            const isValueNotDefined = newValueAsNumber === '' || lodash_isnil(newValueAsNumber) || lodash_isnan(newValueAsNumber);
+            const isValueNotDefined = newValueAsNumber === '' || isNil(newValueAsNumber) || isNaN(newValueAsNumber);
             const emptyValue = this.exactNumber ? '0' : '';
             const value = isValueNotDefined ? emptyValue : newValueAsNumber.toString();
             this.inputValue = toNumber(toFixedNumber(value, this.decimal), this.decimal);
@@ -440,7 +356,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
         return `-?\\d{1,3}(?:${thousandSeparator}\\d{3})*(?:\\${decimalSeparator}\\d{1,2})?(?:${suffix})?`;
     }
     get lastValueGetter() {
-        if (this.exactNumber && (lodash_isnil(this.lastValue) || isEmpty(this.lastValue))) {
+        if (this.exactNumber && (isNil(this.lastValue) || isEmpty(this.lastValue))) {
             return '0';
         }
         return this.lastValue;
@@ -462,7 +378,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
         "debounce": ["debounceChanged"],
         "value": ["valueChanged"]
     }; }
-    static get style() { return BalNumberInputStyle0; }
+    static get style() { return balNumberInputCss; }
 }, [0, "bal-number-input", {
         "name": [1],
         "invalid": [4],

package/components/bal-option-list.js

@@ -1,16 +1,15 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { l as lodash_isnil } from './index3.js';
+import { i as isNil } from './index2.js';
 import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
-import { b as waitAfterFramePaint, n as raf } from './helpers.js';
+import { a as waitAfterFramePaint, r as raf } from './helpers.js';
 import { L as Logger } from './log.js';
-import { s as startsWith, i as includes } from './utils.js';
+import { i as includes, s as startsWith } from './utils.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { a as ariaBooleanToString } from './aria.js';
 
 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 = /*@__PURE__*/ proxyCustomElement(class OptionList extends HTMLElement {
     constructor() {
@@ -19,12 +18,33 @@ const OptionList = /*@__PURE__*/ proxyCustomElement(class OptionList extends HTM
         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) {
@@ -404,7 +424,7 @@ const OptionList = /*@__PURE__*/ proxyCustomElement(class OptionList extends HTM
             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;
@@ -427,7 +447,7 @@ const OptionList = /*@__PURE__*/ proxyCustomElement(class OptionList extends HTM
     static get watchers() { return {
         "contentHeight": ["contentHeightChanged"]
     }; }
-    static get style() { return BalOptionListStyle0; }
+    static get style() { return balOptionListCss; }
 }, [4, "bal-option-list", {
         "multiple": [4],
         "disabled": [4],

package/components/bal-option.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { a as ariaBooleanToString } from './aria.js';
 import { B as BEM } from './bem.js';
-import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator.js';
+import { L as ListenToElementStates, B as BalElementStateListener } from './element-states.decorator.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { L as Logger } from './log.js';
 import { d as defineCustomElement$4 } from './bal-check2.js';
@@ -10,7 +10,6 @@ import { d as defineCustomElement$3 } from './bal-icon2.js';
 import { d as defineCustomElement$2 } from './bal-stack2.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 = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement {
     constructor() {
@@ -19,6 +18,44 @@ const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement
         this.balOptionChange = createEvent(this, "balOptionChange", 7);
         this.balOptionFocus = createEvent(this, "balOptionFocus", 7);
         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
          * ------------------------------------------------------
@@ -39,16 +76,6 @@ const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement
                 }
             }
         };
-        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;
@@ -109,7 +136,7 @@ const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement
         return (h(Host, { key: 'a9b567396356b31dc5dacf1115b538eb6f0229e9', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: 'bc7b02be2431b89e05a16df87b2ef5e7e828577a', py: "small", space: "x-small" }, this.checkbox ? (h("bal-check", { checked: this.selected, disabled: this.disabled, invalid: this.invalid, hovered: this.interactionState.hovered, pressed: this.interactionState.pressed, tabindex: -1 })) : (''), h("div", { key: 'dd0f4a8143bcff57bcfd578073fc5c13fc947b64', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: '49d60c90205cc0181cfc61eac50e2de14bc1dc80' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
     }
     get el() { return this; }
-    static get style() { return BalOptionStyle0; }
+    static get style() { return balOptionCss; }
 }, [4, "bal-option", {
         "label": [1],
         "value": [1],