@baloise/ds-core 19.3.0 → 19.4.0

package/components/bal-input.js

@@ -1,15 +1,43 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { o as debounceEvent } from './helpers.js';
+import { i as isNil } from './index2.js';
+import { a as ariaBooleanToString } from './aria.js';
 import { i as inheritAttributes } from './attributes.js';
-import { g as getInputTarget, c as inputHandleFocus, d as inputHandleBlur, e as inputHandleChange, s as stopEventBubbling, f as inputHandleClick, b as inputHandleHostClick, j as inputListenOnClick, k as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
-import { l as lodash_isnil } from './index3.js';
-import { i as isCtrlOrCommandKey, A as ACTION_KEYS, N as NUMBER_KEYS } from './keys.constant.js';
 import { B as BEM } from './bem.js';
-import { L as Logger } from './log.js';
+import { i as isCtrlOrCommandKey, A as ACTION_KEYS, N as NUMBER_KEYS } from './keys.constant.js';
 import { d as defaultBalAriaForm } from './form.js';
-import { a as ariaBooleanToString } from './aria.js';
+import { g as getInputTarget, c as inputHandleFocus, d as inputHandleBlur, e as inputHandleChange, s as stopEventBubbling, f as inputHandleClick, b as inputHandleHostClick, j as inputListenOnClick, k as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
+import { k as debounceEvent } from './helpers.js';
+import { L as Logger } from './log.js';
 
+/**
+ *
+ * @param value - input number
+ * @output 123.456.789
+ * @private
+ */
+function formatVehicleRegistrationNumber(value) {
+    if (!value) {
+        return '';
+    }
+    const newValue = value.replace(/\D/g, '').trim();
+    const parts = [
+        newValue.substring(0, 3),
+        newValue.substring(3, 6),
+        newValue.substring(6, 9),
+        newValue.substring(9, 12),
+    ].filter(val => val.length > 0);
+    switch (parts.length) {
+        case 1:
+            return `${value}`;
+        case 2:
+            return `${parts[0]}.${parts[1]}`;
+        case 3:
+            return `${parts[0]}.${parts[1]}.${parts[2]}`;
+        default:
+            return `${parts[0]}.${parts[1]}.${parts[2]}.${parts[3]}`;
+    }
+}
 /**
  *
  * @param value - input number
@@ -131,6 +159,7 @@ function formatBeIBAN(value) {
     }
 }
 const MAX_LENGTH_CONTRACT_NUMBER = 10;
+const MAX_LENGTH_VEHICLE_REGISTRATION_NUMBER = 12;
 const MAX_LENGTH_BASIC_CONTRACT_NUMBER = 9;
 const MAX_LENGTH_OFFER_NUMBER = 9;
 const MAX_LENGTH_CLAIM_NUMBER = 11;
@@ -138,7 +167,6 @@ const MAX_LENGTH_BE_ENTERPRISE_NUMBER = 10;
 const MAX_LENGTH_BE_IBAN = 14;
 
 const balInputCss = ".bal-input{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:relative;width:100%;-ms-flex:1;flex:1;font-family:var(--bal-font-family-text);padding:0}";
-const BalInputStyle0 = balInputCss;
 
 const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
     constructor() {
@@ -153,6 +181,88 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         this.inheritedAttributes = {};
         this.inputValue = this.value;
         this.initialValue = this.value || '';
+        this.focused = false;
+        this.ariaForm = defaultBalAriaForm;
+        /**
+         * 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 text align of the input value.
+         */
+        this.textAlign = 'left';
+        /**
+         * Defines the type of the input (text, number, email ...).
+         */
+        this.type = 'text';
+        /**
+         * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
+         * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+         */
+        this.autocapitalize = 'off';
+        /**
+         * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        this.autocomplete = 'off';
+        /**
+         * Whether auto correction should be enabled when the user is entering/editing the text value.
+         */
+        this.autocorrect = 'off';
+        /**
+         * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+         */
+        this.autofocus = 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;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = false;
+        /**
+         * If `true`, the element will have its spelling and grammar checked.
+         */
+        this.spellcheck = 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 gets a clickable cursor style
+         */
+        this.clickable = false;
+        /**
+         * @internal
+         * If `true` the input will get some right padding.
+         */
+        this.hasIconRight = false;
+        /**
+         * The value of the input.
+         */
+        this.value = undefined;
+        /**
+         * Mask of the input field. It defines what the user can enter and how the format looks like. Currently, only for Switzerland formatted with addition of Belgian enterprisenumber and IBAN.
+         * Formatting for 'contract-number': '99/1.234.567-1'
+         * Formatting for 'basic-contract-number': '99/1.234.567'
+         * Formatting for 'claim-number': ('73/001217/16.9')
+         * Formatting for 'offer-number': ('98/7.654.321')
+         * Formatting for 'be-enterprise-number': ('1234.567.890')
+         * Formatting for 'be-iban': ('BE68 5390 0754 7034')
+         */
+        this.mask = undefined;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
         this.getInputValue = () => {
             var _a;
             const input = this.nativeInput;
@@ -170,6 +280,13 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
                 if (input.value) {
                     if (this.mask) {
                         switch (this.mask) {
+                            case 'vehicle-registration-number': {
+                                inputValue = input.value.replace(/\D/g, '');
+                                if (inputValue.length > MAX_LENGTH_VEHICLE_REGISTRATION_NUMBER) {
+                                    inputValue = inputValue.substring(0, MAX_LENGTH_VEHICLE_REGISTRATION_NUMBER);
+                                }
+                                return inputValue;
+                            }
                             case 'contract-number': {
                                 inputValue = input.value.replace(/\D/g, '');
                                 // Removing the leading zero if presented
@@ -255,6 +372,13 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
             if (input) {
                 if (input.value) {
                     switch (this.mask) {
+                        case 'vehicle-registration-number': {
+                            input.value = formatVehicleRegistrationNumber(this.inputValue);
+                            if (cursorPositionStart < this.inputValue.length) {
+                                input.setSelectionRange(cursorPositionStart, cursorPositionEnd);
+                            }
+                            break;
+                        }
                         case 'contract-number':
                         case 'basic-contract-number': {
                             input.value = formatPolicy(this.inputValue);
@@ -313,7 +437,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
             }
         };
         this.onKeydown = (ev) => {
-            if (this.mask !== undefined && !lodash_isnil(ev) && !isCtrlOrCommandKey(ev)) {
+            if (this.mask !== undefined && !isNil(ev) && !isCtrlOrCommandKey(ev)) {
                 let inputLength = 0;
                 if (this.inputValue) {
                     inputLength = this.inputValue.length;
@@ -326,7 +450,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
                     return stopEventBubbling(ev);
                 }
             }
-            if (this.allowedKeyPress && !this.mask && !lodash_isnil(ev) && !isCtrlOrCommandKey(ev)) {
+            if (this.allowedKeyPress && !this.mask && !isNil(ev) && !isCtrlOrCommandKey(ev)) {
                 const regex = new RegExp('^' + this.allowedKeyPress + '$');
                 if (!regex.test(ev.key) && ![...ACTION_KEYS].includes(ev.key)) {
                     return stopEventBubbling(ev);
@@ -335,37 +459,6 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         };
         this.onClick = (ev) => inputHandleClick(this, ev);
         this.handleClick = (ev) => inputHandleHostClick(this, ev);
-        this.focused = false;
-        this.ariaForm = defaultBalAriaForm;
-        this.name = this.inputId;
-        this.invalid = false;
-        this.textAlign = 'left';
-        this.type = 'text';
-        this.accept = undefined;
-        this.autocapitalize = 'off';
-        this.autocomplete = 'off';
-        this.autocorrect = 'off';
-        this.autofocus = false;
-        this.debounce = 0;
-        this.placeholder = undefined;
-        this.max = undefined;
-        this.maxLength = undefined;
-        this.min = undefined;
-        this.minLength = undefined;
-        this.multiple = undefined;
-        this.pattern = undefined;
-        this.allowedKeyPress = undefined;
-        this.required = false;
-        this.spellcheck = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.clickable = false;
-        this.suffix = undefined;
-        this.hasIconRight = false;
-        this.inputmode = undefined;
-        this.value = undefined;
-        this.mask = undefined;
-        this.autoInvalidOff = false;
     }
     createLogger(log) {
         this.log = log;
@@ -459,7 +552,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         }
         const block = BEM.block('input');
         const id = this.ariaForm.controlId || this.inputId;
-        return (h(Host, { key: 'c247683cd5ac331743d71c8872a59ccfacbcae83', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '992f567fd137664f50f73443fdc283ed7622297d', class: {
+        return (h(Host, { key: 'b38cc633916b8848286b2fb1f17f4b14fae5ca71', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'dc043f631ba56a767923b87ef13c370a2d93acbb', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
@@ -474,7 +567,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
     static get watchers() { return {
         "debounce": ["debounceChanged"]
     }; }
-    static get style() { return BalInputStyle0; }
+    static get style() { return balInputCss; }
 }, [0, "bal-input", {
         "name": [1],
         "invalid": [4],

package/components/bal-label2.js

@@ -1,14 +1,13 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToConfig } from './config.decorator.js';
 import { L as Logger } from './log.js';
 import { i as i18nBalLabel } from './bal-label.i18n.js';
 import { d as defaultBalAriaForm } from './form.js';
-import { d as defaultConfig } from './config.default.js';
-import { L as ListenToConfig } from './config.decorator.js';
 
 const balLabelCss = ".bal-label{display:inline;-webkit-box-sizing:content-box;box-sizing:content-box;position:static;word-break:break-word}.bal-label__native{display:inline;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:pre;min-width:0;font-family:var(--bal-form-field-label-font-family);font-weight:var(--bal-form-field-label-font-weight);font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal)}.bal-label__native--multiline{white-space:normal}.bal-label__native--no-wrap{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.bal-label__native--small{font-family:var(--bal-font-family-text);font-size:var(--bal-text-size-small);line-height:var(--bal-line-height-small)}@media screen and (min-width: 769px),print{.bal-label__native--small{font-size:var(--bal-text-size-small-tablet);line-height:var(--bal-line-height-tablet-small)}}@media screen and (min-width: 1024px){.bal-label__native--small{font-size:var(--bal-text-size-small-desktop);line-height:var(--bal-line-height-desktop-small)}}.bal-label__native--large{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-large);line-height:var(--bal-line-height-large)}@media screen and (min-width: 769px),print{.bal-label__native--large{font-size:var(--bal-text-size-large-tablet);line-height:var(--bal-line-height-tablet-large)}}@media screen and (min-width: 1024px){.bal-label__native--large{font-size:var(--bal-text-size-large-desktop);line-height:var(--bal-line-height-desktop-large)}}.bal-label__native--x-large{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-label__native--x-large{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-label__native--x-large{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}.bal-label__native--xx-large{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-xx-large);line-height:var(--bal-line-height-xx-large)}@media screen and (min-width: 769px),print{.bal-label__native--xx-large{font-size:var(--bal-text-size-xx-large-tablet);line-height:var(--bal-line-height-tablet-xx-large)}}@media screen and (min-width: 1024px){.bal-label__native--xx-large{font-size:var(--bal-text-size-xx-large-desktop);line-height:var(--bal-line-height-desktop-xx-large)}}.bal-label__native--xxx-large{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-xxx-large);line-height:var(--bal-line-height-xxx-large)}@media screen and (min-width: 769px),print{.bal-label__native--xxx-large{font-size:var(--bal-text-size-xxx-large-tablet);line-height:var(--bal-line-height-tablet-xxx-large)}}@media screen and (min-width: 1024px){.bal-label__native--xxx-large{font-size:var(--bal-text-size-xxx-large-desktop);line-height:var(--bal-line-height-desktop-xxx-large)}}.bal-label__native--success{color:var(--bal-form-field-label-success-color)}.bal-label__native--danger{color:var(--bal-form-field-label-danger-color)}.bal-label__native--disabled{color:var(--bal-form-field-label-disabled-color) !important}.bal-label__native--regular{font-weight:var(--bal-font-weight-regular)}.bal-label__native--hovered{color:var(--bal-form-field-label-color-hover)}.bal-label__native--pressed{color:var(--bal-form-field-label-color-active)}.bal-label__native--danger.bal-label__native--hovered{color:var(--bal-form-field-label-danger-color-hover)}.bal-label__native--danger.bal-label__native--pressed{color:var(--bal-form-field-label-danger-color-active)}";
-const BalLabelStyle0 = balLabelCss;
 
 const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
     constructor() {
@@ -17,18 +16,67 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
         this.ariaForm = defaultBalAriaForm;
+        /**
+         * 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;
+        /**
+         * Define the id of the native label element
+         */
         this.htmlId = `bal-lbl-${labelIds++}`;
+        /**
+         * 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;
+        /**
+         * When true, the text will be truncated with a text overflow ellipsis instead of wrapping.
+         * Please note that text overflow can only occur in block or inline-block level elements,
+         * as these elements require a width to overflow.
+         */
         this.noWrap = false;
+        /**
+         * When true, the text will is able to break on multiple lines.
+         */
         this.multiline = false;
+        /**
+         * 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 = '';
+        /**
+         * Defines the font weight of the label.
+         */
         this.weight = 'bold';
+        /**
+         * @internal
+         */
         this.hovered = false;
+        /**
+         * @internal
+         */
         this.pressed = false;
     }
     createLogger(log) {
@@ -76,7 +124,7 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
         return (h(Host, { key: 'e37870aea60fa79ccd0ed4c451168dc2d652cec5', class: Object.assign({}, block.class()) }, h("label", { key: '6c910f7122615d7308dd3825c18d1864aec939f8', id: id, htmlFor: htmlFor, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('multiline').class(this.multiline)), block.element('native').modifier('no-wrap').class(this.noWrap)), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('danger').class(danger)), block.element('native').modifier('success').class(success)), block.element('native').modifier('regular').class(regular)), block.element('native').modifier('small').class(small)), block.element('native').modifier('large').class(large)), block.element('native').modifier('x-large').class(xLarge)), block.element('native').modifier('xx-large').class(xxLarge)), block.element('native').modifier('xxx-large').class(xxxLarge)), block.element('native').modifier('hovered').class(this.hovered)), block.element('native').modifier('pressed').class(this.pressed)) }, h("slot", { key: '761ec8b3d47ea0822216af9e93cee3a1bdbb67bd' }), suffix)));
     }
     get el() { return this; }
-    static get style() { return BalLabelStyle0; }
+    static get style() { return balLabelCss; }
 }, [4, "bal-label", {
         "htmlFor": [1, "html-for"],
         "htmlId": [1, "html-id"],

package/components/bal-list-item-accordion-body2.js

@@ -1,10 +1,11 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { n as raf, k as debounce } from './helpers.js';
-import { L as Logger } from './log.js';
 import { b as balBreakpoints } from './breakpoints.subject.js';
-import { L as ListenToResize } from './resize.decorator.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
+import { r as raf, l as debounce } from './helpers.js';
+import { L as Logger } from './log.js';
+import './window-resize.subject.js';
+import { L as ListenToResize } from './resize.decorator.js';
 
 const ListItemAccordionBody = /*@__PURE__*/ proxyCustomElement(class ListItemAccordionBody extends HTMLElement {
     constructor() {
@@ -12,6 +13,15 @@ const ListItemAccordionBody = /*@__PURE__*/ proxyCustomElement(class ListItemAcc
         this.__registerHost();
         this.isMobile = balBreakpoints.isMobile;
         this.internalId = `bal-list-item-accordion-body-${ListItemAccordionBodyIds++}`;
+        this.ariaState = {};
+        /**
+         * Sets space to content of the accordion body
+         */
+        this.contentSpace = 'none';
+        /**
+         * Sets justify-content of the items to start, center, end, or space-between. Default is start
+         */
+        this.contentAlignment = 'start';
         this.setMinHeightForAnimation = () => {
             if (this.currentRaf !== undefined) {
                 cancelAnimationFrame(this.currentRaf);
@@ -35,10 +45,6 @@ const ListItemAccordionBody = /*@__PURE__*/ proxyCustomElement(class ListItemAcc
             });
         };
         this.debounceSetMinHeightForAnimation = debounce(this.setMinHeightForAnimation.bind(this), 100);
-        this.ariaState = {};
-        this.accordionGroup = undefined;
-        this.contentSpace = 'none';
-        this.contentAlignment = 'start';
     }
     createLogger(log) {
         this.log = log;

package/components/bal-list-item-accordion-head2.js

@@ -1,13 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.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 { s as stopEventBubbling } from './form-input.js';
+import { a as isSpaceKey, i as isEnterKey } from './keyboard.helpers.js';
 import { L as Logger } from './log.js';
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 import { d as defineCustomElement$1 } from './bal-list-item-icon2.js';
-import { a as isSpaceKey, i as isEnterKey } from './keyboard.helpers.js';
-import { d as defaultConfig } from './config.default.js';
-import { L as ListenToConfig } from './config.decorator.js';
 
 const i18nBalListItemAccordionHead = {
     de: {
@@ -58,6 +58,20 @@ const ListItemAccordionHead = /*@__PURE__*/ proxyCustomElement(class ListItemAcc
         this.__registerHost();
         this.balAccordionChange = createEvent(this, "balAccordionChange", 7);
         this.internalId = `bal-list-item-accordion-head-${ListItemAccordionHeadIds++}`;
+        this.ariaState = {};
+        this.language = defaultConfig.language;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true` the list accordion is open
+         */
+        this.accordionOpen = false;
+        /**
+         * Icon name string with value 'plus' on default
+         */
+        this.icon = 'plus';
         /**
          * EVENT BINDING
          * ------------------------------------------------------
@@ -73,10 +87,6 @@ const ListItemAccordionHead = /*@__PURE__*/ proxyCustomElement(class ListItemAcc
                 this.onClick();
             }
         };
-        this.ariaState = {};
-        this.language = defaultConfig.language;
-        this.accordionOpen = false;
-        this.icon = 'plus';
     }
     createLogger(log) {
         this.log = log;

package/components/bal-list-item-content2.js

@@ -4,7 +4,6 @@ const ListItemContent = /*@__PURE__*/ proxyCustomElement(class ListItemContent e
     constructor() {
         super();
         this.__registerHost();
-        this.contentAlignment = undefined;
     }
     render() {
         return (h(Host, { key: '753736cc273f562a957f83b78ddcf3c46d96c3c2', class: {

package/components/bal-list-item-icon2.js

@@ -4,6 +4,9 @@ const ListItemIcon = /*@__PURE__*/ proxyCustomElement(class ListItemIcon extends
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * If `true` the icon is on the right side of the list item. Default is the left side.
+         */
         this.right = false;
     }
     render() {

package/components/bal-list-item-title2.js

@@ -5,8 +5,10 @@ const ListItemTitle = /*@__PURE__*/ proxyCustomElement(class ListItemTitle exten
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * Heading level with value 'h4' on default
+         */
         this.level = 'h5';
-        this.visualLevel = undefined;
     }
     render() {
         return (h(Host, { key: 'b2afc2dad242ca699ed349d5767d66f2451486e1', class: "bal-list__item__title" }, h("bal-heading", { key: '38f5855e07ff971dc31ad56a6db20936f3825c02', level: this.level, visualLevel: this.visualLevel, space: "none" }, h("slot", { key: '032e327a6ad730378710bb8cd5ebe4ae0506665e' }))));

package/components/bal-list-item2.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
-import { n as raf, t as transitionEndAsync, p as rIC } from './helpers.js';
 import { L as Logger } from './log.js';
 import { L as ListenToConfig } from './config.decorator.js';
+import { r as raf, t as transitionEndAsync, m as rIC } from './helpers.js';
 
 const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLElement {
     constructor() {
@@ -15,6 +15,39 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         this.balDidAnimate = createEvent(this, "balDidAnimate", 7);
         this.accordionOpen = false;
         this.animated = true;
+        this.state = 1 /* AccordionState.Collapsed */;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true` the list item can be hovered
+         */
+        this.disabled = false;
+        /**
+         * If `true` the list item shows that it is clickable
+         */
+        this.clickable = false;
+        /**
+         * If `true` the list item has a selected theme
+         */
+        this.selected = false;
+        /**
+         * If `true` the list item can be used as a accordion
+         */
+        this.accordion = false;
+        /**
+         * If `true` the list item can be used as an accordion inside another accordion
+         */
+        this.subAccordionItem = false;
+        /**
+         * Specifies the URL of the page the link goes to
+         */
+        this.href = '';
+        /**
+         * Specifies where to open the linked document
+         */
+        this.target = '_self';
         /**
          * LISTENERS
          * ------------------------------------------------------
@@ -158,16 +191,6 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
                 this.balNavigate.emit(ev);
             }
         };
-        this.state = 1 /* AccordionState.Collapsed */;
-        this.disabled = false;
-        this.clickable = false;
-        this.selected = false;
-        this.accordion = false;
-        this.subAccordionItem = false;
-        this.href = '';
-        this.rel = undefined;
-        this.target = '_self';
-        this.download = undefined;
     }
     createLogger(log) {
         this.log = log;