@baloise/ds-core 19.3.0 → 19.4.0-nightly.20250721

package/components/bal-dropdown.js

@@ -1,21 +1,21 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { n as rIC, a as waitAfterFramePaint, o as addEventListener, p as removeEventListener, b as waitAfterIdleCallback } from './helpers.js';
+import { b as balBrowser } from './browser.js';
+import { b as isArrowDownKey, c as isArrowUpKey, i as isEnterKey, d as isEscapeKey, a as isSpaceKey } from './keyboard.helpers.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { i as inheritAttributes } from './attributes.js';
-import { d as defaultBalAriaForm } from './form.js';
-import { p as rIC, b as waitAfterFramePaint, l as addEventListener, r as removeEventListener, e as waitAfterIdleCallback } from './helpers.js';
-import { b as balBrowser } from './browser.js';
 import { a as areArraysEqual } from './array.js';
-import { l as lodash_isnil } from './index3.js';
 import { F as FOCUS_KEYS } from './focus-visible.js';
-import { b as balFloatingUi } from './floating-ui.js';
 import { D as DropdownOptionUtil } from './option.js';
-import { c as isArrowDownKey, d as isArrowUpKey, i as isEnterKey, e as isEscapeKey, a as isSpaceKey } from './keyboard.helpers.js';
+import { b as balFloatingUi } from './floating-ui.js';
+import { i as isNil } from './index2.js';
 import { a as ariaBooleanToString } from './aria.js';
 import { d as defaultConfig } from './config.default.js';
 import { L as ListenToConfig } from './config.decorator.js';
+import { d as defaultBalAriaForm } from './form.js';
 
 class DropdownAutoFillUtil {
     constructor() {
@@ -329,9 +329,9 @@ class DropdownValueUtil {
     }
     parseValueString(newValue = []) {
         let newRawValue = [];
-        if (!lodash_isnil(newValue) && newValue !== '') {
+        if (!isNil(newValue) && newValue !== '') {
             if (Array.isArray(newValue)) {
-                newRawValue = [...newValue.filter(v => !lodash_isnil(v))];
+                newRawValue = [...newValue.filter(v => !isNil(v))];
             }
             else {
                 if (newValue.split('').includes(',')) {
@@ -401,7 +401,6 @@ const DropdownInput = ({ inputId, httpFormSubmit, ariaForm, rawValue, autocomple
 };
 
 const balDropdownCss = ":root{--bal-dropdown-control-background:var(--bal-color-white);--bal-dropdown-control-background-hover:var(--bal-form-field-control-background-hover);--bal-dropdown-control-background-invalid:var(--bal-form-field-control-danger-background);--bal-dropdown-control-background-disabled:var(--bal-form-field-control-disabled-background);--bal-dropdown-control-input-background:var(--bal-color-grey-1);--bal-dropdown-control-native-input-background:transparent;--bal-dropdown-control-native-input-background-hover:transparent;--bal-dropdown-control-input-inverted-footer-background:transparent;--bal-dropdown-control-input-inverted-footer-background-hover:transparent;--bal-dropdown-control-input-multiple-background:transparent;--bal-dropdown-control-input-multiple-background-read-only-selection:transparent;--bal-dropdown-control-input-option-background:transparent;--bal-dropdown-control-input-option-background-selected:var(--bal-color-primary-1);--bal-dropdown-control-input-option-background-focused:var(--bal-color-grey-3);--bal-dropdown-control-input-option-background-hover:var(--bal-color-grey-3);--bal-dropdown-control-border-radius:var(--bal-form-field-control-radius);--bal-dropdown-popover-border-color:var(--bal-color-grey-2);--bal-dropdown-control-border-color:var(--bal-form-field-control-border-color);--bal-dropdown-control-border-color-focused:var(--bal-color-primary);--bal-dropdown-control-border-color-hover:var(--bal-form-field-control-border-color-hover);--bal-dropdown-control-border-color-invalid:var(--bal-form-field-control-danger-border-color);--bal-dropdown-control-border-color-disabled:var(--bal-form-field-control-disabled-border-color);--bal-dropdown-control-border-color-focus-within:var(--bal-color-primary);--bal-dropdown-option-border-top-color:var(--bal-color-grey-2);--bal-dropdown-popover-empty-text-color:var(--bal-form-field-control-color);--bal-dropdown-control-text-color:var(--bal-form-field-control-color);--bal-dropdown-control-text-color-focused:var(--bal-color-primary);--bal-dropdown-input-text-color-disabled:var(--bal-form-field-label-disabled-color);--bal-dropdown-control-inverted-footer-native-input-text-color:var(--bal-color-text-white);--bal-dropdown-option-content-label-text-color:var(--bal-form-field-control-color)}.bal-dropdown{display:block;position:relative;-ms-flex:1;flex:1;width:100%}.bal-dropdown__root{border-width:.125rem;border-style:solid;border-color:var(--bal-dropdown-control-border-color);border-radius:var(--bal-dropdown-control-border-radius);background:var(--bal-dropdown-control-background);font-weight:var(--bal-font-weight-regular);font-size:var(--bal-text-size-normal);font-family:var(--bal-font-family-text);color:var(--bal-dropdown-control-text-color);outline:none;-webkit-box-shadow:var(--bal-shadow-none);box-shadow:var(--bal-shadow-none);padding-right:1rem;height:auto;min-height:3rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:-ms-flexbox;display:flex;width:100%;text-align:left;gap:1rem;padding-left:calc(.75em - var(--bal-border-width-normal));padding-right:calc(.75em - var(--bal-border-width-normal));-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.bal-dropdown__root--autofill{background:#faffbd !important;background:light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important}.bal-dropdown__root>span{-ms-flex:1;flex:1;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bal-dropdown__root--focused{border-color:var(--bal-dropdown-control-border-color-focused)}.bal-dropdown__root--invalid{border-color:var(--bal-dropdown-control-border-color-invalid);background:var(--bal-dropdown-control-background-invalid)}.bal-dropdown__root--disabled{border-color:var(--bal-dropdown-control-border-color-disabled);background:var(--bal-dropdown-control-background-disabled)}.bal-dropdown__root__content--placeholder{color:var(--bal-form-field-control-placeholder-color)}.bal-dropdown__root__content--disabled{color:var(--bal-dropdown-input-text-color-disabled)}@media (hover: hover)and (pointer: fine){.bal-dropdown__root:not(.bal-dropdown__root--disabled):not(.bal-dropdown__root--invalid):not(.bal-dropdown__root--theme-purple):not(.bal-dropdown__root--theme-purple-expanded):hover{background:var(--bal-dropdown-control-background-hover)}}.bal-dropdown__root__content__chips{--bal-tag-size-small-font-size:var(--bal-text-size-normal);display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--bal-space-xx-small);padding-top:var(--bal-space-x-small);padding-bottom:var(--bal-space-x-small)}.bal-dropdown__root__content__chips>bal-tag{z-index:1}.bal-dropdown__root__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:rgba(0,0,0,0);position:absolute;right:var(--bal-border-width-normal);left:var(--bal-border-width-normal);top:var(--bal-border-width-normal);bottom:var(--bal-border-width-normal);opacity:0;padding-left:calc(.75em - var(--bal-border-width-normal));padding-right:calc(.75em - var(--bal-border-width-normal));cursor:pointer}.bal-dropdown__root__input:disabled{cursor:default}.bal-dropdown__root__input:-webkit-autofill{opacity:1}.bal-dropdown__root__input:autofill{opacity:1}.bal-dropdown__root__input:-internal-autofill-selected{opacity:0}.bal-dropdown__root__select{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-dropdown__root--autofill .bal-dropdown__root__input{opacity:0}.bal-dropdown__list{display:none;visibility:hidden;opacity:0;width:100vw;position:absolute;top:0;left:0;will-change:left,top,opacity;background:var(--bal-color-white);border-radius:var(--bal-radius-normal);-webkit-box-shadow:var(--bal-shadow-normal);box-shadow:var(--bal-shadow-normal);z-index:var(--bal-z-index-popup)}@media screen and (min-width: 769px),print{.bal-dropdown__list{max-width:100vw;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;min-width:100%}}.bal-dropdown__list--expanded{display:block;visibility:visible;opacity:1}.bal-dropdown__native{bottom:0;left:0;position:absolute;opacity:0;pointer-events:none;width:100%}.bal-dropdown__clear{background:rgba(0,0,0,0);border:none;padding:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer}.bal-dropdown__clear--theme-purple{height:2rem;width:2rem;border-top-right-radius:2px;border-bottom-right-radius:2px;margin-right:-10px}.bal-dropdown__clear--theme-purple::before{content:\"\";position:absolute;right:32px;background:var(--bal-color-white);width:2px;height:100%}.bal-dropdown__rear{z-index:1}.bal-dropdown__root--size-small{min-height:2rem}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--disabled) .bal-dropdown__root__content--placeholder{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded){border:none;background:var(--bal-color-background-grey-light)}@media (hover: hover)and (pointer: fine){.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover{background:var(--bal-color-purple-1)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner circle{fill:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active{background:var(--bal-color-purple-2)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner g,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner path,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded){border:none;background:var(--bal-color-purple-2)}@media (hover: hover)and (pointer: fine){.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover{background:var(--bal-color-purple-3)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__content{color:var(--bal-color-text-primary-pressed)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner circle{fill:var(--bal-color-text-primary-pressed)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active{background:var(--bal-color-purple-3)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner g,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner path,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}}.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled),.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active{border:none;background:var(--bal-color-purple-2)}.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-dropdown__root__content,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__content,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-icon__inner circle,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-icon__inner circle,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}.bal-dropdown__root--focused.bal-dropdown__root--theme-purple:before{content:\"\";border-width:var(--bal-border-width-normal);border-style:solid;border-color:var(--bal-focus-shadow);position:absolute;background:rgba(0,0,0,0);border-radius:var(--bal-radius-normal);top:-0.25rem;bottom:-0.25rem;left:-0.25rem;right:-0.25rem}.bal-dropdown__root__content--size-small{font-size:var(--bal-text-size-small);font-weight:var(--bal-font-weight-bold)}.bal-dropdown__clear--theme-purple{height:2rem;width:2rem;border-top-right-radius:2px;border-bottom-right-radius:2px;margin-right:-10px}.bal-dropdown__clear--theme-purple::before{content:\"\";position:absolute;right:32px;background:var(--bal-color-white);width:2px;height:100%}";
-const BalDropdownStyle0 = balDropdownCss;
 
 const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLElement {
     constructor() {
@@ -414,6 +413,19 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         this.inheritedAttributes = {};
         this.initialValue = [];
         this.nativeOptions = [];
+        this.rawOptions = [];
+        this.choices = [];
+        this.rawValue = [];
+        this.hasFocus = false;
+        this.isExpanded = false;
+        this.isAutoFilled = false;
+        this.isKeyboardMode = false;
+        this.inputLabel = '';
+        this.ariaForm = defaultBalAriaForm;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.httpFormSubmit = defaultConfig.httpFormSubmit;
+        this.labelToFocus = '';
         this.valueUtil = new DropdownValueUtil();
         this.eventsUtil = new DropdownEventsUtil();
         this.popupUtil = new DropdownPopupUtil();
@@ -421,6 +433,91 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         this.formSubmitUtil = new DropdownFormSubmitUtil();
         this.focusUtil = new DropdownFocusUtil();
         this.autoFillUtil = new DropdownAutoFillUtil();
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        this.autocomplete = 'off';
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * Defines the placeholder of the component. Only shown when the value is empty
+         */
+        this.placeholder = '';
+        /**
+         * Defines a inline label to be shown before the value
+         */
+        this.inlineLabel = '';
+        /**
+         * If `true` there will be on trigger icon visible
+         */
+        this.icon = 'caret-down';
+        /**
+         * Defines the size of the control.
+         */
+        this.size = '';
+        /**
+         * Defines the color style of the control
+         */
+        this.theme = '';
+        /**
+         * If `true`, the user cannot interact with the option.
+         */
+        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 can select multiple options.
+         */
+        this.multiple = false;
+        /**
+         * If `true`, the selected options are shown as chips
+         */
+        this.chips = false;
+        /**
+         * If `true`, a cross at the end is visible to clear the selection
+         */
+        this.clearable = false;
+        /**
+         * If `true`, the component will be shown as invalid
+         */
+        this.invalid = false;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = false;
+        /**
+         * Defines if the select is in a loading state.
+         */
+        this.loading = false;
+        /**
+         * Defines the filter logic of the list
+         */
+        this.filter = 'includes';
+        /**
+         * Defines the max height of the list element
+         */
+        this.contentHeight = 262;
+        /**
+         * @internal
+         * Set this to `true` when the component is placed on a dark background.
+         */
+        this.inverted = false;
+        /**
+         * Steps can be passed as a property or through HTML markup.
+         */
+        this.options = [];
+        /**
+         * The value of the selected options.
+         */
+        this.value = [];
         /**
          * LIFECYCLE
          * ------------------------------------------------------
@@ -518,39 +615,6 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
                 }
             }
         };
-        this.rawOptions = [];
-        this.choices = [];
-        this.rawValue = [];
-        this.hasFocus = false;
-        this.isExpanded = false;
-        this.isAutoFilled = false;
-        this.isKeyboardMode = false;
-        this.inputLabel = '';
-        this.ariaForm = defaultBalAriaForm;
-        this.language = defaultConfig.language;
-        this.region = defaultConfig.region;
-        this.httpFormSubmit = defaultConfig.httpFormSubmit;
-        this.labelToFocus = '';
-        this.autocomplete = 'off';
-        this.name = this.inputId;
-        this.placeholder = '';
-        this.inlineLabel = '';
-        this.icon = 'caret-down';
-        this.size = '';
-        this.theme = '';
-        this.disabled = false;
-        this.readonly = false;
-        this.multiple = false;
-        this.chips = false;
-        this.clearable = false;
-        this.invalid = false;
-        this.required = false;
-        this.loading = false;
-        this.filter = 'includes';
-        this.contentHeight = 262;
-        this.inverted = false;
-        this.options = [];
-        this.value = [];
     }
     createLogger(log) {
         this.log = log;
@@ -696,7 +760,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         "options": ["optionChanged"],
         "value": ["valueChanged"]
     }; }
-    static get style() { return BalDropdownStyle0; }
+    static get style() { return balDropdownCss; }
 }, [4, "bal-dropdown", {
         "autocomplete": [1],
         "name": [1],

package/components/bal-field-control.js

@@ -5,9 +5,23 @@ const FieldControl = /*@__PURE__*/ proxyCustomElement(class FieldControl extends
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * @deprecated
+         * Baloise icon for the right side of the input
+         */
         this.iconRight = '';
+        /**
+         * @deprecated
+         * Baloise icon for the left side of the input
+         */
         this.iconLeft = '';
+        /**
+         * If `true` on mobile devices the form control children are aligned verticaly and expanded to the full width
+         */
         this.expandedOnMobile = undefined;
+        /**
+         * If `true` a loading spinner is visible at the end of the input
+         */
         this.loading = false;
     }
     get buildIconLeftTemplate() {

package/components/bal-field-hint.js

@@ -16,8 +16,17 @@ const FieldHint = /*@__PURE__*/ proxyCustomElement(class FieldHint extends HTMLE
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * Text of the inputs label
+         */
         this.subject = '';
+        /**
+         * Text for the close button.
+         */
         this.closeLabel = 'Close';
+        /**
+         * Disables the close button for tablet and desktop
+         */
         this.small = false;
     }
     render() {

package/components/bal-field-label.js

@@ -5,13 +5,45 @@ const FieldLabel = /*@__PURE__*/ proxyCustomElement(class FieldLabel extends HTM
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The value of the for attribute must be a single id for a labeled
+         * form-related element in the same document as the <label> element.
+         * So, any given label element can be associated with only one form control.
+         */
         this.htmlFor = undefined;
+        /**
+         * If `true` the form control needs to be filled. If it is set to
+         * `false` an optional label is added to the label..
+         */
         this.required = true;
+        /**
+         * If `true` the component gets a valid green style.
+         */
         this.valid = undefined;
+        /**
+         * If `true` the component gets a invalid red style.
+         */
         this.invalid = undefined;
+        /**
+         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
         this.disabled = undefined;
+        /**
+         * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
         this.readonly = undefined;
+        /**
+         * Defines the size of the font. Default is like a heading 5 and small is used
+         * with the form fields.
+         */
         this.size = 'small';
+        /**
+         * Defines the font weight of the label.
+         */
         this.weight = 'bold';
     }
     /**

package/components/bal-field-message.js

@@ -6,10 +6,25 @@ const FieldMessage = /*@__PURE__*/ proxyCustomElement(class FieldMessage extends
         super();
         this.__registerHost();
         this.ariaForm = defaultBalAriaForm;
+        /**
+         * Defines the color of the message.
+         */
         this.color = '';
+        /**
+         * If `true` the component gets a invalid red style.
+         */
         this.invalid = false;
+        /**
+         * If `true` the component gets a valid green style.
+         */
         this.valid = 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;
     }
     /**

package/components/bal-field.js

@@ -1,11 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { d as deepReady, b as waitAfterFramePaint } from './helpers.js';
-import { d as defaultBalAriaForm } from './form.js';
 import { L as ListenToMutation } from './mutation.decorator.js';
+import { d as deepReady, a as waitAfterFramePaint } from './helpers.js';
+import { d as defaultBalAriaForm } from './form.js';
 
 const balFieldCss = ":root{--bal-field-label-horizontal-width:33.3333%;--bal-field-label-column-gap:.5rem}.bal-field,.bal-field-label,.bal-field-control,.bal-field-message,.bal-field-hint{display:block;position:relative;font-family:var(--bal-font-family-text)}.bal-field-label{display:inline}.bal-field-label~.bal-field-control{margin-top:.25rem}.bal-field-hint{display:inline-block;margin-left:.25rem;height:1rem;width:1rem}.bal-field-hint__hint{position:absolute;top:2px;left:0}.bal-field-message{line-height:var(--bal-line-height-normal)}.bal-field-hidden{display:none !important;visibility:hidden !important}.bal-field-control{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;gap:.5rem}.bal-field-control .bal-input{-ms-flex:1;flex:1}@media screen and (max-width: 768px){.bal-field-control--expanded-on-mobile{-ms-flex-direction:column;flex-direction:column}.bal-field-control--expanded-on-mobile .bal-button,.bal-field-control--expanded-on-mobile .bal-button .button{width:100%}}.bal-field-message{margin-top:0 !important}.bal-field-control+.bal-field-message{min-height:1.375rem;line-height:1.375rem}.bal-field-control:not(:has(+.bal-field-message)){padding-bottom:1.375rem}.bal-field--horizontal{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:var(--bal-field-label-column-gap);-moz-column-gap:var(--bal-field-label-column-gap);column-gap:var(--bal-field-label-column-gap);-ms-flex-align:center;align-items:center}.bal-field--horizontal .bal-field-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-width:var(--bal-field-label-horizontal-width);max-width:var(--bal-field-label-horizontal-width);-ms-flex-pack:end;justify-content:flex-end;text-align:right;margin-bottom:0}.bal-field--horizontal .bal-field-control{-ms-flex:1;flex:1;padding-bottom:0;-ms-flex-item-align:end;align-self:flex-end}.bal-field--horizontal .bal-field-message{-ms-flex-preferred-size:100%;flex-basis:100%;margin-top:0 !important;margin-left:calc(var(--bal-field-label-horizontal-width) + var(--bal-field-label-column-gap))}.bal-field--horizontal .bal-field-hint{margin-left:0}.bal-field--horizontal .bal-field-hint .bal-hint{top:0}.bal-field--horizontal .bal-field-hint~.bal-field-message{margin-left:calc(var(--bal-field-label-horizontal-width) + var(--bal-field-label-column-gap)*2 + 1.125rem)}.bal-field--horizontal .bal-field-label~.bal-field-control{margin-top:0}";
-const BalFieldStyle0 = balFieldCss;
 
 const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
     constructor() {
@@ -31,6 +30,35 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
             'bal-segment',
         ];
         this.formElements = [...this.formControlElement, 'bal-field-label', 'bal-field-message'];
+        /**
+         * If `true` the form control needs to be filled. If it is set to
+         * `false` an optional label is added to the label..
+         */
+        this.required = undefined;
+        /**
+         * If true, label and input are aligned horizontally within the field component, with the message positioned in a new line below.
+         */
+        this.horizontal = false;
+        /**
+         * If `true` the component gets a invalid red style.
+         */
+        this.invalid = undefined;
+        /**
+         * If `true` the component gets a valid green style.
+         */
+        this.valid = 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 = undefined;
+        /**
+         * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        this.readonly = undefined;
+        /**
+         * If `true` a loading spinner is visible at the end of the input
+         */
+        this.loading = undefined;
         this.isDirectChild = (el) => {
             if (!el) {
                 return false;
@@ -71,13 +99,6 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
                 .flat();
         };
         this.mutationObserverActive = true;
-        this.required = undefined;
-        this.horizontal = false;
-        this.invalid = undefined;
-        this.valid = false;
-        this.disabled = undefined;
-        this.readonly = undefined;
-        this.loading = undefined;
     }
     requiredHandler() {
         this.updateProps([...this.inputElements, 'bal-field-label'], 'required');
@@ -189,7 +210,7 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
         "readonly": ["readonlyHandler"],
         "loading": ["loadingHandler"]
     }; }
-    static get style() { return BalFieldStyle0; }
+    static get style() { return balFieldCss; }
 }, [4, "bal-field", {
         "required": [4],
         "horizontal": [4],

package/components/bal-file-upload.js

@@ -3,6 +3,7 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { a as areArraysEqual } from './array.js';
 import { s as stopEventBubbling, b as inputHandleHostClick, c as inputHandleFocus, d as inputHandleBlur, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
 import { L as Logger } from './log.js';
+import { g as getDefaultExportFromCjs } from './_commonjsHelpers.js';
 import { B as BEM } from './bem.js';
 import { F as FileUploadRejectionReason } from './bal-file-upload.type.js';
 import { d as defaultBalAriaForm } from './form.js';
@@ -22,37 +23,56 @@ var lib = {};
 
 var spec = {};
 
-Object.defineProperty(spec, "__esModule", { value: true });
-var si = { radix: 1e3, unit: ['b', 'kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb'] };
-var iec = { radix: 1024, unit: ['b', 'Kib', 'Mib', 'Gib', 'Tib', 'Pib', 'Eib', 'Zib', 'Yib'] };
-var jedec = { radix: 1024, unit: ['b', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb'] };
-spec.SPECS = {
-    si: si,
-    iec: iec,
-    jedec: jedec,
-};
+var hasRequiredSpec;
 
-Object.defineProperty(lib, "__esModule", { value: true });
-var spec_1 = spec;
-/**
- * file size
- * @param bytes
- * @param fixed
- * @param spec
- */
-function default_1(bytes, fixed, spec) {
-    if (fixed === void 0) { fixed = 1; }
-    bytes = Math.abs(bytes);
-    var _a = spec_1.SPECS[spec] || spec_1.SPECS['jedec'], radix = _a.radix, unit = _a.unit;
-    var loop = 0;
-    // calculate
-    while (bytes >= radix) {
-        bytes /= radix;
-        ++loop;
-    }
-    return bytes.toFixed(fixed) + " " + unit[loop];
+function requireSpec () {
+	if (hasRequiredSpec) return spec;
+	hasRequiredSpec = 1;
+	Object.defineProperty(spec, "__esModule", { value: true });
+	var si = { radix: 1e3, unit: ['b', 'kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb'] };
+	var iec = { radix: 1024, unit: ['b', 'Kib', 'Mib', 'Gib', 'Tib', 'Pib', 'Eib', 'Zib', 'Yib'] };
+	var jedec = { radix: 1024, unit: ['b', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb'] };
+	spec.SPECS = {
+	    si: si,
+	    iec: iec,
+	    jedec: jedec,
+	};
+	
+	return spec;
 }
-var _default = lib.default = default_1;
+
+var hasRequiredLib;
+
+function requireLib () {
+	if (hasRequiredLib) return lib;
+	hasRequiredLib = 1;
+	Object.defineProperty(lib, "__esModule", { value: true });
+	var spec_1 = requireSpec();
+	/**
+	 * file size
+	 * @param bytes
+	 * @param fixed
+	 * @param spec
+	 */
+	function default_1(bytes, fixed, spec) {
+	    if (fixed === void 0) { fixed = 1; }
+	    bytes = Math.abs(bytes);
+	    var _a = spec_1.SPECS[spec] || spec_1.SPECS['jedec'], radix = _a.radix, unit = _a.unit;
+	    var loop = 0;
+	    // calculate
+	    while (bytes >= radix) {
+	        bytes /= radix;
+	        ++loop;
+	    }
+	    return bytes.toFixed(fixed) + " " + unit[loop];
+	}
+	lib.default = default_1;
+	
+	return lib;
+}
+
+var libExports = requireLib();
+var fileSize = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 
 const bemListEl = BEM.block('file-upload').element('list');
 const FileListComponent = ({ files, disabled, subTitle, onRemoveFile, }) => {
@@ -62,7 +82,7 @@ const FileListComponent = ({ files, disabled, subTitle, onRemoveFile, }) => {
                 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) : _default(file.size))),
+                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,
@@ -135,7 +155,6 @@ const validateFileArray = (state, files, fileOptions) => {
 };
 
 const balFileUploadCss = ".bal-file-upload{display:block;position:static;width:100%}.bal-file-upload .file-label{word-break:break-word;white-space:normal}.bal-file-upload .bal-heading{word-break:break-all}.bal-file-upload__card{margin-top:var(--bal-space-normal)}.bal-file-upload__list{padding:0 !important}";
-const BalFileUploadStyle0 = balFileUploadCss;
 
 const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTMLElement {
     constructor() {
@@ -149,7 +168,58 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
         this.balBlur = createEvent(this, "balBlur", 7);
         this.balFocus = createEvent(this, "balFocus", 7);
         this.fileUploadId = `bal-file-upload-${FileUploadIds++}`;
+        this.files = [];
+        this.focused = false;
+        this.ariaForm = defaultBalAriaForm;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.fileUploadId;
+        /**
+         * Input value.
+         */
+        this.value = [];
         this.initialValue = this.value || [];
+        /**
+         * Label of the drop area.
+         */
+        this.label = 'Choose or drop a file...';
+        /**
+         * If `true` multiple file upload is possible.
+         */
+        this.multiple = true;
+        /**
+         * 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 file upload is disabled and shows a spinner
+         */
+        this.loading = false;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = false;
+        /**
+         * If `true` below the drop-down area it generates a file list.
+         */
+        this.hasFileList = true;
+        /**
+         * If `true` the component gets a invalid style.
+         */
+        this.invalid = false;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
         /**
          * PRIVATE METHODS
          * ------------------------------------------------------
@@ -239,25 +309,6 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
             }
             this.balInputClick.emit(ev);
         };
-        this.files = [];
-        this.focused = false;
-        this.ariaForm = defaultBalAriaForm;
-        this.name = this.fileUploadId;
-        this.value = [];
-        this.label = 'Choose or drop a file...';
-        this.multiple = true;
-        this.disabled = false;
-        this.readonly = false;
-        this.loading = false;
-        this.required = false;
-        this.accept = undefined;
-        this.maxFiles = undefined;
-        this.maxFileSize = undefined;
-        this.maxBundleSize = undefined;
-        this.hasFileList = true;
-        this.invalid = false;
-        this.subTitle = undefined;
-        this.autoInvalidOff = false;
     }
     createLogger(log) {
         this.log = log;
@@ -355,7 +406,7 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
     static get watchers() { return {
         "value": ["onValueChange"]
     }; }
-    static get style() { return BalFileUploadStyle0; }
+    static get style() { return balFileUploadCss; }
 }, [0, "bal-file-upload", {
         "name": [1],
         "value": [16],
@@ -371,7 +422,7 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
         "maxBundleSize": [2, "max-bundle-size"],
         "hasFileList": [4, "has-file-list"],
         "invalid": [4],
-        "subTitle": [16],
+        "subTitle": [16, "sub-title"],
         "autoInvalidOff": [516, "auto-invalid-off"],
         "files": [32],
         "focused": [32],