@baloise/ds-core 19.3.0 → 19.4.0

package/components/bal-select2.js

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, 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 { a as ariaBooleanToString } from './aria.js';
 import { a as areArraysEqual } from './array.js';
 import { B as BEM } from './bem.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { s as stopEventBubbling } from './form-input.js';
-import { p as rIC, e as waitAfterIdleCallback, d as deepReady, i as isDescendant, k as debounce } from './helpers.js';
+import { m as rIC, l as debounce, e as waitAfterIdleCallback, d as deepReady, i as isDescendant } from './helpers.js';
+import { a as isSpaceKey, b as isArrowDownKey, c as isArrowUpKey, i as isEnterKey, d as isEscapeKey, f as isBackspaceKey } from './keyboard.helpers.js';
 import { L as Logger } from './log.js';
 import { r as removeValue, p as preventDefault, l as length, g as getValues, i as includes, s as startsWith, a as addValue, f as findLabelByValue, b as findOptionByLabel, v as validateAfterBlur } from './utils.js';
 import { d as defineCustomElement$6 } from './bal-checkbox2.js';
@@ -15,7 +16,6 @@ import { d as defineCustomElement$4 } from './bal-icon2.js';
 import { d as defineCustomElement$3 } from './bal-popover2.js';
 import { d as defineCustomElement$2 } from './bal-popover-content2.js';
 import { d as defineCustomElement$1 } from './bal-tag2.js';
-import { a as isSpaceKey, c as isArrowDownKey, d as isArrowUpKey, i as isEnterKey, e as isEscapeKey, f as isBackspaceKey } from './keyboard.helpers.js';
 
 const watchForOptions = (containerEl, tagName, onChange) => {
     /* tslint:disable-next-line */
@@ -38,7 +38,6 @@ const watchForOptions = (containerEl, tagName, onChange) => {
 };
 
 const balSelectCss = ":root{--bal-select-control-background:var(--bal-color-white);--bal-select-control-background-hover:var(--bal-form-field-control-background-hover);--bal-select-control-background-invalid:var(--bal-form-field-control-danger-background);--bal-select-control-background-disabled:var(--bal-form-field-control-disabled-background);--bal-select-control-input-background:var(--bal-color-grey-1);--bal-select-control-native-input-background:transparent;--bal-select-control-native-input-background-hover:transparent;--bal-select-control-input-inverted-footer-background:transparent;--bal-select-control-input-inverted-footer-background-hover:transparent;--bal-select-control-input-multiple-background:transparent;--bal-select-control-input-multiple-background-read-only-selection:transparent;--bal-select-control-input-option-background:transparent;--bal-select-control-input-option-background-selected:var(--bal-color-primary-1);--bal-select-control-input-option-background-focused:var(--bal-color-grey-3);--bal-select-control-input-option-background-hover:var(--bal-color-grey-3);--bal-select-control-border-radius:var(--bal-form-field-control-radius);--bal-select-popover-border-color:var(--bal-color-grey-2);--bal-select-control-border-color:var(--bal-form-field-control-border-color);--bal-select-control-border-color-focused:var(--bal-color-primary);--bal-select-control-border-color-hover:var(--bal-form-field-control-border-color-hover);--bal-select-control-border-color-invalid:var(--bal-form-field-control-danger-border-color);--bal-select-control-border-color-disabled:var(--bal-form-field-control-disabled-border-color);--bal-select-control-border-color-focus-within:var(--bal-color-primary);--bal-select-option-border-top-color:var(--bal-color-grey-2);--bal-select-popover-empty-text-color:var(--bal-form-field-control-color);--bal-select-control-text-color:var(--bal-form-field-control-color);--bal-select-control-text-color-focused:var(--bal-color-primary);--bal-select-input-text-color-disabled:var(--bal-form-field-label-disabled-color);--bal-select-control-inverted-footer-native-input-text-color:var(--bal-color-text-white);--bal-select-option-content-label-text-color:var(--bal-form-field-control-color)}bal-select-option{display:none !important}.bal-select{display:block;position:relative;width:100%;-ms-flex:1;flex:1;font-family:var(--bal-font-family-text)}.bal-select__popover{border:.125rem solid var(--bal-select-popover-border-color)}.bal-select__popover__empty{padding:.5rem 1rem;font-family:var(--bal-font-family-text);color:var(--bal-select-popover-empty-text-color)}.bal-select__popover__empty--hidden{display:none}.bal-select__native{position:absolute !important;left:0;top:0;margin:0;padding:0;opacity:0;outline:0;border:none;width:1px;height:1px;clip:rect(1px, 1px, 1px, 1px);overflow:hidden}.bal-select__control{display:-ms-flexbox;display:flex;border-width:.125rem;border-style:solid;border-color:var(--bal-select-control-border-color);border-radius:var(--bal-select-control-border-radius);background:var(--bal-select-control-background);font-size:var(--bal-font-weight-regular);font-family:var(--bal-font-family-text);color:var(--bal-select-control-text-color);outline:none;-webkit-box-shadow:none;box-shadow:none;padding-right:1rem;min-height:3rem}.bal-select__control--focused{border-color:var(--bal-select-control-border-color-focused)}.bal-select__control:not(.bal-select__control--disabled):not(.bal-select__control--invalid):not(.bal-select__control--inverted-footer):hover{border-color:var(--bal-select-control-border-color-hover);background-color:var(--bal-select-control-background-hover)}.bal-select__control:not(.bal-select__control--disabled):not(.bal-select__control--invalid):not(.bal-select__control--inverted-footer):hover .bal-select__control__input{background-color:var(--bal-select-control-input-background)}.bal-select__control--invalid:not(.bal-select__control--disabled){border-color:var(--bal-select-control-border-color-invalid) !important;background:var(--bal-select-control-background-invalid) !important}.bal-select__control:focus-within{border-color:var(--bal-select-control-border-color-focus-within) !important}.bal-select__control--disabled{background-color:var(--bal-select-control-background-disabled) !important;border-color:var(--bal-select-control-border-color-disabled) !important}.bal-select__control--disabled,.bal-select__control--disabled input{cursor:default !important;-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;pointer-events:none !important;color:var(--bal-select-input-text-color-disabled)}.bal-select__control--inverted-footer{border:none;background-color:var(--bal-select-control-input-inverted-footer-background) !important;padding-right:0}.bal-select__control--inverted-footer:hover{background-color:var(--bal-select-control-input-inverted-footer-background-hover) !important}.bal-select__control--inverted-footer .input{color:var(--bal-select-control-inverted-footer-native-input-text-color);background-color:var(--bal-select-control-native-input-background) !important}.bal-select__control--inverted-footer .input:hover{background-color:var(--bal-select-control-native-input-background-hover) !important}.bal-select__control__icon{min-height:100% !important;max-height:100% !important}.bal-select__control__icon--loading{display:none}.bal-select__control__icon--clickable{cursor:pointer}.bal-select__control__selections{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1 1;flex:1 1;-ms-flex-wrap:wrap;flex-wrap:wrap;line-height:1.125rem;max-width:100%;min-width:0;gap:0;padding-left:.375rem}.bal-select__control__selections .bal-tag{margin-left:.25rem;margin-top:.375rem;margin-bottom:.375rem}.bal-select__control__selections .bal-tag+.input{padding-left:.625rem}.bal-select__control__input{border:none !important;outline:none !important;outline-width:0 !important;height:2.75rem !important;-webkit-box-shadow:none !important;box-shadow:none !important;background:var(--bal-select-control-input-multiple-background);-ms-flex:1;flex:1;min-height:2.75rem !important;padding-left:.25rem !important;padding-right:.625rem !important;text-overflow:ellipsis}.bal-select__control__input:-moz-read-only{-moz-user-select:none !important;user-select:none !important;-webkit-tap-highlight-color:rgba(0,0,0,0)}.bal-select__control__input:read-only{-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;-webkit-tap-highlight-color:rgba(0,0,0,0)}.bal-select__control__input:read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:-moz-read-only::selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:read-only::selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:-moz-read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__option{visibility:visible;font-family:var(--bal-font-family-text);background:var(--bal-select-control-input-option-background);border:none;cursor:pointer;outline:none;min-height:3rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0;margin:0;border-top:.125rem solid var(--bal-select-option-border-top-color);text-align:inherit;white-space:nowrap;width:100%}.bal-select__option:first-child{border-top:none}.bal-select__option::-moz-focus-inner{border:none}.bal-select__option--selected{background:var(--bal-select-control-input-option-background-selected)}.bal-select__option--selected .bal-select__option__content__label{font-weight:var(--bal-font-weight-bold)}.bal-select__option--focused{background:var(--bal-select-control-input-option-background-focused)}.bal-select__option:hover{background:var(--bal-select-control-input-option-background-hover)}.bal-select__option__content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;min-height:3rem;padding:.75rem 1rem;gap:.75rem}.bal-select__option__content__checkbox{margin:0;padding:0}.bal-select__option__content__label{margin:0;padding:0;font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-select-option-content-label-text-color);line-height:1.125rem;word-break:break-word;white-space:normal;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}";
-const BalSelectStyle0 = balSelectCss;
 
 const isHuman = true;
 const isNotHuman = false;
@@ -56,6 +55,94 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         this.didInit = false;
         this.inputId = `bal-select-${selectIds++}`;
         this.initialValue = [];
+        this.hasFocus = false;
+        this.inputValue = '';
+        this.focusIndex = -1;
+        this.isPopoverOpen = false;
+        this.options = new Map();
+        this.labelToScrollTo = '';
+        this.labelToSelectTo = '';
+        this.ariaForm = defaultBalAriaForm;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true` the component gets a invalid style.
+         */
+        this.invalid = false;
+        /**
+         * If `true` the component gets a invalid style.
+         */
+        this.filter = 'includes';
+        /**
+         * The tabindex of the control.
+         */
+        this.balTabindex = 0;
+        /**
+         * If `true` there will be no trigger icon visible, so no UX indicator for a popup
+         */
+        this.freeSolo = false;
+        /**
+         * If `true` multiple option can be selected
+         */
+        this.multiple = false;
+        /**
+         * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        this.autocomplete = 'off';
+        /**
+         * If `true` the user can search by typing into the input field.
+         */
+        this.typeahead = false;
+        /**
+         * If `true` the options are a proposal and the user can also create his
+         * own value. Can only be used with the typeahead property.
+         */
+        this.selectionOptional = false;
+        /**
+         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
+        this.disabled = false;
+        /**
+         * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = false;
+        /**
+         * @internal
+         * Set this to `true` when the component is placed on a dark background.
+         * Set this to `true` when the component is placed on a dark background.
+         */
+        this.inverted = false;
+        /**
+         * Defines the height of the popover list.
+         */
+        this.scrollable = 250;
+        /**
+         * Defines if the select is in a loading state.
+         */
+        this.loading = false;
+        /**
+         * If `true` the filtering is done outside the component.
+         */
+        this.remote = false;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
+        /**
+         * Selected option values. Could also be passed as a string, which gets transformed.
+         */
+        this.value = [];
+        this.rawValue = [];
         this.removeValue = (value) => {
             if (!this.disabled) {
                 this.updateRawValue(removeValue(this.rawValue, value), isHuman);
@@ -168,36 +255,6 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         this.handleOptionMouseEnter = (index) => {
             this.focusIndex = index;
         };
-        this.hasFocus = false;
-        this.inputValue = '';
-        this.focusIndex = -1;
-        this.isPopoverOpen = false;
-        this.options = new Map();
-        this.labelToScrollTo = '';
-        this.labelToSelectTo = '';
-        this.ariaForm = defaultBalAriaForm;
-        this.name = this.inputId;
-        this.invalid = false;
-        this.filter = 'includes';
-        this.balTabindex = 0;
-        this.freeSolo = false;
-        this.multiple = false;
-        this.maxLength = undefined;
-        this.noDataLabel = undefined;
-        this.autocomplete = 'off';
-        this.typeahead = false;
-        this.selectionOptional = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-        this.inverted = false;
-        this.placeholder = undefined;
-        this.scrollable = 250;
-        this.loading = false;
-        this.remote = false;
-        this.autoInvalidOff = false;
-        this.value = [];
-        this.rawValue = [];
     }
     createLogger(log) {
         this.log = log;
@@ -211,7 +268,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             this.syncNativeInput(isHuman);
             if (this.didInit && isHuman === true) {
                 if (this.multiple) {
-                    if (lodash_isnil(this.rawValue)) {
+                    if (isNil(this.rawValue)) {
                         this.emitChangeEvent([]);
                     }
                     else {
@@ -219,7 +276,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                     }
                 }
                 else {
-                    if (lodash_isnil(this.rawValue) || length(this.rawValue) === 0) {
+                    if (isNil(this.rawValue) || length(this.rawValue) === 0) {
                         this.emitChangeEvent(undefined);
                     }
                     else {
@@ -247,9 +304,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     componentWillLoad() {
         this.waitForOptionsAndThenUpdateRawValues();
         this.isInsideOfFooter();
-        if (!lodash_isnil(this.rawValue) && this.options.size > 0 && length(this.rawValue) === 1) {
+        if (!isNil(this.rawValue) && this.options.size > 0 && length(this.rawValue) === 1) {
             const firstOption = this.options.get(this.rawValue[0]);
-            if (!lodash_isnil(firstOption)) {
+            if (!isNil(firstOption)) {
                 this.inputValue = firstOption.label;
             }
         }
@@ -366,7 +423,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
      * Opens the popover
      */
     async open() {
-        if (!this.disabled && !this.readonly && !lodash_isnil(this.popoverElement)) {
+        if (!this.disabled && !this.readonly && !isNil(this.popoverElement)) {
             await this.popoverElement.present();
         }
     }
@@ -374,7 +431,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
      * Closes the popover
      */
     async close() {
-        if (!this.disabled && !this.readonly && !lodash_isnil(this.popoverElement)) {
+        if (!this.disabled && !this.readonly && !isNil(this.popoverElement)) {
             this.blurSelect();
         }
     }
@@ -392,7 +449,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
      */
     async select(value) {
         const option = this.options.get(value);
-        if (!lodash_isnil(option)) {
+        if (!isNil(option)) {
             this.optionSelected(option);
         }
     }
@@ -468,7 +525,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             return undefined;
         }
         else {
-            if (!lodash_isnil(this.rawValue) && length(this.rawValue) > 0) {
+            if (!isNil(this.rawValue) && length(this.rawValue) > 0) {
                 return undefined;
             }
         }
@@ -566,9 +623,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     async selectLabel(label) {
         if (label !== ' ') {
             const option = this.optionArray.find(o => startsWith(o.label || '', label));
-            if (!lodash_isnil(option) && option.id) {
+            if (!isNil(option) && option.id) {
                 const optionElement = this.el.querySelector(`button#${option.id}`);
-                if (!lodash_isnil(optionElement)) {
+                if (!isNil(optionElement)) {
                     const index = this.optionArray.indexOf(option);
                     this.focusIndex = index;
                     this.select(option.value);
@@ -580,9 +637,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     async scrollToLabel(label) {
         if (label !== ' ') {
             const option = this.optionArray.find(o => startsWith(o.label || '', label));
-            if (!lodash_isnil(option) && option.id) {
+            if (!isNil(option) && option.id) {
                 const optionElement = this.el.querySelector(`button#${option.id}`);
-                if (!lodash_isnil(optionElement)) {
+                if (!isNil(optionElement)) {
                     const index = this.optionArray.indexOf(option);
                     this.focusIndex = index;
                     this.scrollTo(optionElement.offsetTop);
@@ -596,9 +653,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
      ********************************************************/
     syncRawValue(isHuman = true) {
         let newValue = [];
-        if (!lodash_isnil(this.value) && this.value !== '') {
+        if (!isNil(this.value) && this.value !== '') {
             if (Array.isArray(this.value)) {
-                newValue = [...this.value.filter(v => !lodash_isnil(v))];
+                newValue = [...this.value.filter(v => !isNil(v))];
             }
             else {
                 if (this.value.split('').includes(',')) {
@@ -689,7 +746,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                 clearTimeout(this.updateInputValueTimer);
             }
             this.updateInputValueTimer = setTimeout(() => {
-                if (!lodash_isnil(this.inputElement)) {
+                if (!isNil(this.inputElement)) {
                     this.inputElement.value = value;
                     this.inputValue = value;
                     resolve();
@@ -754,7 +811,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     static get watchers() { return {
         "value": ["valueWatcher"]
     }; }
-    static get style() { return BalSelectStyle0; }
+    static get style() { return balSelectCss; }
 }, [0, "bal-select", {
         "name": [1],
         "invalid": [4],

package/components/bal-shape2.js

@@ -3,12 +3,23 @@ import { B as BEM } from './bem.js';
 import { f as balColorGrey4, g as balColorYellow3, h as balColorYellow5, i as balColorPurple3, j as balColorPurple6, k as balColorRed3, l as balColorRed5, m as balColorGreen3, n as balColorGreen6 } from './tokens.esm.js';
 
 const balShapeCss = ".bal-shape{display:block;overflow:hidden;border-radius:var(--bal-radius-normal);width:66px;height:66px}@media screen and (min-width: 769px),print{.bal-shape{width:120px;height:120px}}@media screen and (min-width: 1024px){.bal-shape{width:198px;height:198px;border-radius:unset}}.bal-shape--is-rotation-0{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.bal-shape--is-rotation-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.bal-shape--is-rotation-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.bal-shape--is-rotation-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}";
-const BalShapeStyle0 = balShapeCss;
 
 const Shape = /*@__PURE__*/ proxyCustomElement(class Shape extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * The shape variation
+         */
+        this.variation = '1';
+        /**
+         * The shape color
+         */
+        this.color = 'green';
+        /**
+         * The shape rotation
+         */
+        this.rotation = '0';
         this.getHex = () => {
             let color;
             switch (this.color) {
@@ -41,9 +52,6 @@ const Shape = /*@__PURE__*/ proxyCustomElement(class Shape extends HTMLElement {
             }
             return color;
         };
-        this.variation = '1';
-        this.color = 'green';
-        this.rotation = '0';
     }
     render() {
         const block = BEM.block('shape');
@@ -55,7 +63,7 @@ const Shape = /*@__PURE__*/ proxyCustomElement(class Shape extends HTMLElement {
         return (h(Host, { key: '5aa4927f8682c07a13ab2fa9b56f1248141d7cd7', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-rotation-${this.rotation}`).class()) }, h("svg", { key: '99ee4d77c26e1cc4b84052907ef6d628f94b3937', version: "1.1", x: "0px", y: "0px", viewBox: "0 0 198 198", focusable: "false", "aria-hidden": "true", fill: this.getHex() }, shapes[parseInt(this.variation) - 1])));
     }
     get el() { return this; }
-    static get style() { return BalShapeStyle0; }
+    static get style() { return balShapeCss; }
 }, [0, "bal-shape", {
         "variation": [1],
         "color": [1],

package/components/bal-sheet.js

@@ -2,12 +2,14 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { B as BEM } from './bem.js';
 
 const balSheetCss = ":root{--bal-sheet-radius:var(--bal-radius-large);--bal-sheet-background:var(--bal-color-white);--bal-sheet-shadow:var(--bal-shadow-normal);--bal-sheet-position-bottom:.5rem}.bal-sheet{display:block;position:fixed;bottom:var(--bal-sheet-position-bottom);left:0;right:0;width:100%;z-index:var(--bal-z-index-sticky);font-weight:var(--bal-font-weight-regular);font-family:var(--bal-font-family-text);font-size:var(--bal-text-size-normal)}.bal-sheet__container .bal-sheet__container__inner,.bal-sheet__container.container .bal-sheet__container__inner{border-radius:var(--bal-sheet-radius);background:var(--bal-sheet-background);-webkit-box-shadow:var(--bal-sheet-shadow);box-shadow:var(--bal-sheet-shadow);padding:1rem}@media screen and (min-width: 769px),print{.bal-sheet__container .bal-sheet__container__inner,.bal-sheet__container.container .bal-sheet__container__inner{padding:1rem 1.5rem}}";
-const BalSheetStyle0 = balSheetCss;
 
 const Sheet = /*@__PURE__*/ proxyCustomElement(class Sheet extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * Defines content width of the stage
+         */
         this.containerSize = '';
     }
     render() {
@@ -17,7 +19,7 @@ const Sheet = /*@__PURE__*/ proxyCustomElement(class Sheet extends HTMLElement {
         const containerModifier = this.containerSize !== '' ? `is-${this.containerSize}` : '';
         return (h(Host, { key: 'e38d3e613314a1502b6b1a6eb77e212de467af3c', class: Object.assign({}, block.class()) }, h("div", { key: '7d71e2959eb213f6cc243d9b8e91d1c69a5f9e1a', class: Object.assign(Object.assign({}, container.class()), { container: true, [containerModifier]: true }) }, h("div", { key: '7712cfd94666fc628912db7b7f786bab530030e3', class: Object.assign({}, containerInner.class()) }, h("slot", { key: '0eebab4aa2bc379b4c7dd4fa0cd5a9f0ad2b76eb' })))));
     }
-    static get style() { return BalSheetStyle0; }
+    static get style() { return balSheetCss; }
 }, [4, "bal-sheet", {
         "containerSize": [1, "container-size"]
     }]);

package/components/bal-snackbar.js

@@ -6,7 +6,6 @@ import { d as defineCustomElement$3 } from './bal-icon2.js';
 import { d as defineCustomElement$2 } from './bal-spinner2.js';
 
 const balSnackbarCss = ":root{--bal-snackbar-font-size:var(--bal-text-size-small);--bal-snackbar-font-family:var(--bal-font-family-text);--bal-snackbar-title-font-size:var(--bal-text-size-medium);--bal-snackbar-title-font-family:var(--bal-font-family-title);--bal-snackbar-background:var(--bal-color-white);--bal-snackbar-background-primary:var(--bal-color-white);--bal-snackbar-background-info:var(--bal-color-info-2);--bal-snackbar-background-success:var(--bal-color-success-2);--bal-snackbar-background-warning:var(--bal-color-warning-2);--bal-snackbar-background-danger:var(--bal-color-danger-2);--bal-snackbar-radius:var(--bal-radius-large);--bal-snackbar-color:var(--bal-color-text-primary);--bal-snackbar-color-primary:var(--bal-color-text-primary);--bal-snackbar-color-info:var(--bal-color-text-primary);--bal-snackbar-color-success:var(--bal-color-text-primary);--bal-snackbar-color-warning:var(--bal-color-text-primary);--bal-snackbar-color-danger:var(--bal-color-text-primary)}.bal-snackbar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:0 !important;flex-grow:0 !important;gap:.5rem;padding:var(--bal-space-medium) var(--bal-space-normal);border-radius:var(--bal-snackbar-radius);background:var(--bal-snackbar-background);color:var(--bal-snackbar-color);-webkit-box-shadow:var(--bal-shadow-normal);box-shadow:var(--bal-shadow-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;min-height:3.5rem;width:18rem}@media screen and (min-width: 769px),print{.bal-snackbar{width:18rem}}@media screen and (min-width: 1024px){.bal-snackbar{width:27.5rem}}.bal-snackbar--color-primary{background:var(--bal-snackbar-background-primary);color:var(--bal-snackbar-color-primary)}.bal-snackbar--color-info{background:var(--bal-snackbar-background-info);color:var(--bal-snackbar-color-info)}.bal-snackbar--color-danger{background:var(--bal-snackbar-background-danger);color:var(--bal-snackbar-color-danger)}.bal-snackbar--color-warning{background:var(--bal-snackbar-background-warning);color:var(--bal-snackbar-color-warning)}.bal-snackbar--color-success{background:var(--bal-snackbar-background-success);color:var(--bal-snackbar-color-success)}.bal-snackbar__details{display:-ms-flexbox;display:flex;gap:1rem}.bal-snackbar__details__icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;width:1.5rem}.bal-snackbar__details__icon--masked{background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.bal-snackbar__details__icon--masked,.bal-snackbar__details__icon--color-primary{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-snackbar__details__icon--color-info{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-snackbar__details__icon--color-success{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-snackbar__details__icon--color-warning{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-snackbar__details__icon--color-danger{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-snackbar__details__close{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;width:2rem}.bal-snackbar__details__content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;gap:.125rem}.bal-snackbar__details__content h2{font-family:var(--bal-snackbar-title-font-family);font-size:var(--bal-snackbar-title-font-size);font-weight:var(--bal-font-weight-bold);line-height:var(--bal-text-line-height-title)}@media screen and (min-width: 769px),print{.bal-snackbar__details__content h2{font-size:var(--bal-text-size-medium-tablet)}}@media screen and (min-width: 1024px){.bal-snackbar__details__content h2{font-size:var(--bal-text-size-medium-desktop)}}.bal-snackbar__details__content span{font-family:var(--bal-snackbar-font-family);font-size:var(--bal-snackbar-font-size);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text)}.bal-snackbar__button-wrapper{display:-ms-flexbox;display:flex}.bal-snackbar__button-wrapper .bal-button{-webkit-margin-start:2.5rem;margin-inline-start:2.5rem;-webkit-margin-before:.5rem;margin-block-start:.5rem}";
-const BalSnackbarStyle0 = balSnackbarCss;
 
 const Snackbar = /*@__PURE__*/ proxyCustomElement(class Snackbar extends HTMLElement {
     constructor() {
@@ -15,20 +14,47 @@ const Snackbar = /*@__PURE__*/ proxyCustomElement(class Snackbar extends HTMLEle
         this.balClose = createEvent(this, "balClose", 7);
         this.balAction = createEvent(this, "balAction", 7);
         this.snackbarId = `bal-snackbar-${snackbarIds++}`;
-        this.onActionHandler = () => {
-            this.balAction.emit(this.snackbarId);
-            this.actionHandler();
-        };
+        /**
+         * The theme type of the snackbar.
+         */
         this.color = '';
+        /**
+         * The duration of the snackbar
+         */
         this.duration = 0;
+        /**
+         * The subject of the snackbar header
+         */
         this.subject = '';
+        /**
+         * The message of the snackbar as html content
+         */
         this.message = '';
+        /**
+         * The icon of the snackbar header
+         */
         this.icon = '';
+        /**
+         * Label text for the action button
+         */
         this.action = '';
+        /**
+         * @internal Handler for on close event
+         */
         this.closeHandler = () => void 0;
+        /**
+         * @internal Handler for on action button click event
+         */
         this.actionHandler = () => void 0;
-        this.href = undefined;
+        /**
+         * Specifies where to display the linked URL.
+         * Only applies when an `href` is provided.
+         */
         this.target = '_self';
+        this.onActionHandler = () => {
+            this.balAction.emit(this.snackbarId);
+            this.actionHandler();
+        };
     }
     async componentWillLoad() {
         if (this.duration > 0) {
@@ -83,7 +109,7 @@ const Snackbar = /*@__PURE__*/ proxyCustomElement(class Snackbar extends HTMLEle
         return (h(Host, { key: '4a1920c0a2bd21295fd3c8b6f14204f2cffd24fc', id: this.snackbarId, role: "alertdialog", class: Object.assign(Object.assign({}, block.class()), block.modifier(`color-${this.color}`).class(!!this.color)), "aria-labelledby": subjectId }, h("div", { key: '07e829354ae42deae93d2514e8a1705ed2324333', class: Object.assign({}, detailsEl.class()) }, h("div", { key: '33ea4a6d4c6571f5584a13b32dd0814ee532a4e0', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign({}, detailsEl.element('icon').class()), detailsEl.element('icon').modifier('masked').class(!isIconDefined)), detailsEl.element('icon').modifier(`color-${this.color}`).class(!isIconDefined)) }, isIconDefined ? h("bal-icon", { name: icon, color: 'primary', size: "medium" }) : ''), h("div", { key: 'b5f9973bc16038dd0b1911758072c001cfa5dcea', class: Object.assign({}, detailsEl.element('content').class()) }, h("h2", { key: '015bed1adb93c84e224b85d95247a1706554e73f', id: subjectId }, this.subject), h("span", Object.assign({ key: 'c7bf53d336633441bd4ed3abbdf978a4c1587b9d' }, messageAttributes), h("slot", { key: 'd197c12700d991181e17efb90fafa3569fab1dcc' }), h("span", { key: 'a913b6adc15cad8ecfd76905e6047e3e51cecbc4', class: "hidden" }))), h("div", { key: '6eaea877dafb35eb0bb5a4d9c29540be35ca23e6', class: Object.assign({}, detailsEl.element('close').class()) }, h("bal-close", { key: '0e2aaef462aba47274903b304ddf340ec9a40032', class: "bal-snackbar__close", "data-testid": "bal-snackbar-close", onClick: () => this.close() }))), this.action ? (h("div", { class: Object.assign({}, buttonWrapperEl.class()) }, h("bal-button", { color: "info", size: "small", href: this.href, target: this.target, onClick: () => this.onActionHandler(), "data-testid": "bal-snackbar-action" }, this.action))) : ('')));
     }
     get element() { return this; }
-    static get style() { return BalSnackbarStyle0; }
+    static get style() { return balSnackbarCss; }
 }, [4, "bal-snackbar", {
         "color": [1],
         "duration": [2],
@@ -91,8 +117,8 @@ const Snackbar = /*@__PURE__*/ proxyCustomElement(class Snackbar extends HTMLEle
         "message": [1],
         "icon": [1],
         "action": [1],
-        "closeHandler": [16],
-        "actionHandler": [16],
+        "closeHandler": [16, "close-handler"],
+        "actionHandler": [16, "action-handler"],
         "href": [1],
         "target": [1],
         "closeIn": [64],