@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

package/dist/collection/components/input/input.js

@@ -4,7 +4,7 @@
 import { __decorate, __metadata } from "tslib";
 import { h } from "@stencil/core";
 import isNil from "lodash/isNil";
-import { inheritAttributes, FormControl, stopEventBubbling, debounceEvent, Logger, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { inheritAttributes, FormControl, stopEventBubbling, debounceEvent, Logger, hasValue, OneOf, Type, } from "../../utils/index";
 import { ACTION_KEYS, isCtrlOrCommandKey } from "../../global/index";
 import { InputMaskUtil } from "./input.mask";
 import { getMask } from "./masks";
@@ -202,7 +202,6 @@ export class Input {
      * ------------------------------------------------------
      */
     connectedCallback() {
-        setupValidation(this);
         this.debounceChanged();
         this.maskChanged();
         this.control.connectedCallback();
@@ -248,7 +247,7 @@ export class Input {
     }
     getFormattedValue() {
         const value = this.getRawValue();
-        const suffix = this.suffix !== undefined && value !== undefined && value !== '' ? ' ' + this.suffix : '';
+        const suffix = hasValue(this.suffix) && hasValue(value) ? ' ' + this.suffix : '';
         return `${value}${suffix}`;
     }
     /**
@@ -258,17 +257,17 @@ export class Input {
     render() {
         var _a;
         let value;
-        if (this.mask) {
+        if (hasValue(this.mask)) {
             value = (_a = this.maskUtil.format(this.getRawValue())) !== null && _a !== void 0 ? _a : this.getRawValue();
         }
         else {
             value = this.focused ? this.getRawValue() : this.getFormattedValue();
         }
         let inputProps = {};
-        if (this.pattern) {
+        if (hasValue(this.pattern)) {
             inputProps = { pattern: this.pattern };
         }
-        return (h(Field, { key: '812474583ab9af7ac3156efe5bd7e44f904733e6', disabled: this.disabled, color: this.color, invalid: this.invalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("input", Object.assign({ key: '5c94b1ed5a483ccda801c984552a73c6f352cb1f', id: "input", part: "input", name: this.name, ref: inputEl => (this.control.nativeEl = inputEl), "aria-describedby": "description", "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, accept: this.accept, inputMode: this.inputmode, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autocorrect: this.autocorrect, autofocus: this.autofocus, min: this.min, max: this.max, minLength: this.minLength, maxLength: this.maxLength, multiple: this.multiple, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: value, onClick: ev => this.handleClick(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onInput: ev => this.handleInput(ev), onKeyDown: ev => this.handleKeydown(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, inputProps, this.inheritedAttributes))));
+        return (h(Field, { key: 'babef5825e546b7b80315ed7b83240d2b82562c0', disabled: this.disabled, color: this.color, invalid: this.invalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("input", Object.assign({ key: '57f52c5591d793be3c19ab144f497d793bffbeed', id: "input", part: "input", name: this.name, ref: inputEl => (this.control.nativeEl = inputEl), "aria-describedby": "description", "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, accept: this.accept, inputMode: this.inputmode, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autocorrect: this.autocorrect, autofocus: this.autofocus, min: this.min, max: this.max, minLength: this.minLength, maxLength: this.maxLength, multiple: this.multiple, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: value, onClick: ev => this.handleClick(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onInput: ev => this.handleInput(ev), onKeyDown: ev => this.handleKeydown(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, inputProps, this.inheritedAttributes))));
     }
     static get is() { return "ds-input"; }
     static get encapsulation() { return "shadow"; }
@@ -321,7 +320,7 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name",
                 "defaultValue": "this.inputId"
             },
@@ -1213,123 +1212,123 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Input.prototype, "createLogger", null);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", Object)
 ], Input.prototype, "value", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "name", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "label", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "description", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_COLORS),
+    OneOf(INPUT_COLORS),
     __metadata("design:type", String)
 ], Input.prototype, "color", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "loading", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "invalid", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "invalidText", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_INPUT_TYPES),
+    OneOf(INPUT_INPUT_TYPES),
     __metadata("design:type", String)
 ], Input.prototype, "type", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "accept", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "autocapitalize", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_AUTOCOMPLETES),
+    OneOf(INPUT_AUTOCOMPLETES),
     __metadata("design:type", String)
 ], Input.prototype, "autocomplete", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_AUTOCORRECTS),
+    OneOf(INPUT_AUTOCORRECTS),
     __metadata("design:type", String)
 ], Input.prototype, "autocorrect", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "autofocus", void 0);
 __decorate([
-    ValidateType('number'),
+    Type('number'),
     __metadata("design:type", Number)
 ], Input.prototype, "debounce", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "placeholder", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "max", void 0);
 __decorate([
-    ValidateType('number'),
+    Type('number'),
     __metadata("design:type", Number)
 ], Input.prototype, "maxLength", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "min", void 0);
 __decorate([
-    ValidateType('number'),
+    Type('number'),
     __metadata("design:type", Number)
 ], Input.prototype, "minLength", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "multiple", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "pattern", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "allowedKeyPress", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "required", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "spellcheck", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "readonly", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "suffix", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_INPUT_MODES),
+    OneOf(INPUT_INPUT_MODES),
     __metadata("design:type", String)
 ], Input.prototype, "inputmode", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_MASKS),
+    OneOf(INPUT_MASKS),
     __metadata("design:type", String)
 ], Input.prototype, "mask", void 0);
 __decorate([

package/dist/collection/components/input/test/input.component.play.js

@@ -38,7 +38,7 @@ test.describe('disabled', () => {
         expect(inputSpy).toHaveReceivedEventTimes(0);
     });
 });
-test.describe('form reset', () => {
+test.describe.skip('form reset', () => {
     test('should reset to initial value', async ({ page }) => {
         await page.mount(`
       <form>

package/dist/collection/components/input/trigger-button.i18n.js

@@ -0,0 +1,45 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+export const i18nDsTriggerButton = {
+    de: {
+        openCalendar: 'Kalender öffnen',
+        chooseDate: 'Datum auswählen',
+    },
+    en: {
+        openCalendar: 'Open calendar',
+        chooseDate: 'Choose date',
+    },
+    fr: {
+        openCalendar: 'Ouvrir le calendrier',
+        chooseDate: 'Choisir une date',
+    },
+    it: {
+        openCalendar: 'Apri il calendario',
+        chooseDate: 'Scegli una data',
+    },
+    nl: {
+        openCalendar: 'Kalender openen',
+        chooseDate: 'Datum kiezen',
+    },
+    es: {
+        openCalendar: 'Abrir calendario',
+        chooseDate: 'Elegir fecha',
+    },
+    pl: {
+        openCalendar: 'Otwórz kalendarz',
+        chooseDate: 'Wybierz datę',
+    },
+    pt: {
+        openCalendar: 'Abrir calendário',
+        chooseDate: 'Escolher data',
+    },
+    sv: {
+        openCalendar: 'Öppna kalender',
+        chooseDate: 'Välj datum',
+    },
+    fi: {
+        openCalendar: 'Avaa kalenteri',
+        chooseDate: 'Valitse päivämäärä',
+    },
+};

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

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { normalizeDeprecatedTShirtSize, Logger, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { normalizeDeprecatedTShirtSize, Logger, OneOf, Type, hasValue } from "../../utils/index";
 import { defaultConfig, ListenToConfig, } from "../../global/index";
 import { I18nDsLabel } from "./label.i18n";
 import { LABEL_SIZES } from "./label.interfaces";
@@ -66,17 +66,10 @@ export class Label {
     createLogger(log) {
         this.log = log;
     }
-    sizeChanged(newValue) {
-        this.size = normalizeDeprecatedTShirtSize(newValue);
-    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback() {
-        setupValidation(this);
-        this.size = normalizeDeprecatedTShirtSize(this.size);
-    }
     /**
      * PUBLIC LISTENERS
      * ------------------------------------------------------
@@ -96,15 +89,16 @@ export class Label {
         const suffix = this.required === false ? I18nDsLabel[this.language].optional || '' : '';
         const id = this.htmlId;
         const htmlFor = this.htmlFor;
-        return (h(Host, { key: '937c19a2183d9c56279e88e37395b4da1fbb7206', class: {
+        const size = normalizeDeprecatedTShirtSize(this.size) || '';
+        return (h(Host, { key: '9929eb29b4b0da3675aaa7e5506242fbd7627baf', class: {
                 'is-hovered': this.hovered,
                 'is-pressed': this.pressed,
                 'is-disabled': this.disabled,
                 'is-valid': this.valid,
                 'is-invalid': this.invalid,
                 'has-no-wrap': this.noWrap,
-                [`is-${this.size}`]: !!this.size,
-            } }, h("label", { key: 'b059b0022e370ce5b202b6c0cd432a3950e0e798', id: id, part: "label", htmlFor: htmlFor }, h("slot", { key: 'c5a1f6741d468abf8d48549aad8f2d43160684cb' }), suffix)));
+                [`is-${size}`]: hasValue(this.size),
+            } }, h("label", { key: '638694c2e0dfd40260adba2be2fd812e60a89b1f', id: id, part: "label", htmlFor: htmlFor }, h("slot", { key: 'e3acc2817068c655b9d9874591545c49b904e993' }), suffix)));
     }
     static get is() { return "ds-label"; }
     static get encapsulation() { return "shadow"; }
@@ -288,7 +282,7 @@ export class Label {
             },
             "size": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "LabelSize",
                     "resolved": "\"\" | \"2xl\" | \"3xl\" | \"large\" | \"lg\" | \"sm\" | \"small\" | \"x-large\" | \"xl\" | \"xx-large\" | \"xxx-large\" | undefined",
@@ -375,12 +369,6 @@ export class Label {
         };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "size",
-                "methodName": "sizeChanged"
-            }];
-    }
 }
 __decorate([
     Logger('label'),
@@ -389,43 +377,43 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Label.prototype, "createLogger", null);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Label.prototype, "htmlFor", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Label.prototype, "htmlId", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "hovered", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "invalid", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "noWrap", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "pressed", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "required", void 0);
 __decorate([
-    ValidateOneOf(...LABEL_SIZES),
+    OneOf(LABEL_SIZES),
     __metadata("design:type", String)
 ], Label.prototype, "size", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "valid", void 0);
 __decorate([

package/dist/collection/components/list/item/item.host.css

@@ -1 +1 @@
-:host{--_list-item-focus: var(--list-item-focus, var(--mod-list-item-focus, var(--ds-alias-interaction-focus-color-base)));--_list-item-grid-template-columns: var(--list-item-grid-template-columns, var(--mod-list-item-grid-template-columns, 1fr));--_list-item-min-height: var(--list-item-min-height, var(--mod-list-item-min-height, 3.5rem));--_list-item-gap: var(--list-item-gap, var(--mod-list-item-gap, 1rem));--_list-item-space: var(--list-item-space, var(--mod-list-item-space, 0.5rem));--_list-item-content-gap: var(--list-item-content-gap, var(--mod-list-item-content-gap, 1px));--_list-item-color: var(--list-item-color, var(--mod-list-item-color, inherit));--_list-item-border-color: var(--list-item-border-color, var(--mod-list-item-border-color, var(--ds-list-item-border-color)));--_list-item-border-width: var(--list-item-border-width, var(--mod-list-item-border-width, var(--ds-list-item-border-width, 2px)));--_list-item-border-radius: var(--list-item-border-radius, var(--mod-list-item-border-radius, 12px));--_list-item-accordion-py: var(--list-item-accordion-py, var(--mod-list-item-accordion-py, var(--ds-alias-space-base-device)));--_list-item-action-icon-size: var(--list-item-action-icon-size, var(--mod-list-item-action-icon-size, var(--ds-icon-size-xs)));--_list-item-title-size: var(--list-item-title-size, var(--mod-list-item-title-size, var(--ds-heading-5-size-device)));--_list-item-title-weight: var(--list-item-title-weight, var(--mod-list-item-title-weight, var(--ds-text-weight-bold)));--_list-item-title-family: var(--list-item-title-family, var(--mod-list-item-title-family, var(--ds-global-font-family-heading)));--_list-item-text-family: var(--list-item-text-family, var(--mod-list-item-text-family, var(--ds-global-font-family-body)));--_list-item-text-weight: var(--list-item-text-weight, var(--mod-list-item-text-weight, var(--ds-text-weight-regular)));--_list-item-text-size: var(--list-item-text-size, var(--mod-list-item-text-size, var(--ds-text-size-sm-device)))}:host{position:relative;display:grid;box-sizing:border-box;grid-template-columns:var(--_list-item-grid-template-columns)}:host ::slotted([slot=content]){min-height:46px}:host #item{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:var(--_list-item-gap);width:100%;color:var(--_list-item-color);background:inherit;border:none;align-self:stretch;text-align:left;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--_list-item-title-family);padding:var(--_list-item-space) 0;padding-bottom:calc(var(--_list-item-space) + 2px);min-height:var(--_list-item-min-height)}:host #item ds-icon{flex-shrink:0}:host #item #content+ds-icon{--icon-size: var(--_list-item-action-icon-size);--icon-inner-size: var(--_list-item-action-icon-size)}:host #item #content{flex:1;display:flex;flex-direction:column;gap:var(--_list-item-content-gap);font-family:var(--_list-item-text-family);font-weight:var(--_list-item-text-weight)}:host #item #label{font-family:var(--_list-item-title-family);font-weight:var(--_list-item-title-weight);font-size:var(--_list-item-title-size);margin:0}:host #item #description{font-family:var(--_list-item-text-family);font-weight:var(--_list-item-text-weight);font-size:var(--_list-item-text-size);margin:0}:host #item:after{content:"";border-radius:var(--_list-item-border-radius);width:100%;position:absolute;bottom:0;left:0;right:0;height:var(--_list-item-border-width);background:var(--_list-item-border-color)}:host(.has-label-h1){--mod-list-item-title-size: var(--ds-heading-1-size-device)}:host(.has-label-3xl){--mod-list-item-title-size: var(--ds-heading-1-size-device)}:host(.has-label-h2){--mod-list-item-title-size: var(--ds-heading-2-size-device)}:host(.has-label-2xl){--mod-list-item-title-size: var(--ds-heading-2-size-device)}:host(.has-label-h3){--mod-list-item-title-size: var(--ds-heading-3-size-device)}:host(.has-label-xl){--mod-list-item-title-size: var(--ds-heading-3-size-device)}:host(.has-label-h4){--mod-list-item-title-size: var(--ds-heading-4-size-device)}:host(.has-label-lg){--mod-list-item-title-size: var(--ds-heading-4-size-device)}:host(.has-label-h5){--mod-list-item-title-size: var(--ds-heading-5-size-device)}:host(.has-label-base){--mod-list-item-title-size: var(--ds-heading-5-size-device)}:host(.is-link) #item,:host(.is-button) #item{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;text-decoration:none;outline:none;cursor:pointer}:host(.is-link) #item::-moz-focus-inner,:host(.is-button) #item::-moz-focus-inner{border:0}:host(.is-link) #item #content,:host(.is-button) #item #content{hyphens:auto;overflow-wrap:break-word;font-family:var(--_list-item-title-family);font-weight:var(--_list-item-title-weight);font-size:var(--_list-item-title-size);color:var(--ds-link-color-base)}@media(hover: hover)and (pointer: fine){:host(.is-link) #item:hover:after,:host(.is-link) #item.is-hovered:after,:host(.is-button) #item:hover:after,:host(.is-button) #item.is-hovered:after{background:var(--ds-link-color-base-hover)}:host(.is-link) #item:hover,:host(.is-link) #item.is-hovered,:host(.is-button) #item:hover,:host(.is-button) #item.is-hovered{color:var(--ds-link-color-base-hover)}:host(.is-link) #item:hover #content,:host(.is-link) #item.is-hovered #content,:host(.is-button) #item:hover #content,:host(.is-button) #item.is-hovered #content{color:var(--ds-link-color-base-hover)}:host(.is-link) #item:hover ds-icon,:host(.is-link) #item:hover ::slotted(ds-icon),:host(.is-link) #item:hover ::slotted(ds-badge),:host(.is-link) #item.is-hovered ds-icon,:host(.is-link) #item.is-hovered ::slotted(ds-icon),:host(.is-link) #item.is-hovered ::slotted(ds-badge),:host(.is-button) #item:hover ds-icon,:host(.is-button) #item:hover ::slotted(ds-icon),:host(.is-button) #item:hover ::slotted(ds-badge),:host(.is-button) #item.is-hovered ds-icon,:host(.is-button) #item.is-hovered ::slotted(ds-icon),:host(.is-button) #item.is-hovered ::slotted(ds-badge){--icon-color: var(--ds-link-color-base-hover)}}:host(.is-link) #item:active:after,:host(.is-link) #item.is-pressed:after,:host(.is-button) #item:active:after,:host(.is-button) #item.is-pressed:after{background:var(--ds-link-color-base-active)}:host(.is-link) #item:active,:host(.is-link) #item.is-pressed,:host(.is-button) #item:active,:host(.is-button) #item.is-pressed{color:var(--ds-link-color-base-active)}:host(.is-link) #item:active #content,:host(.is-link) #item.is-pressed #content,:host(.is-button) #item:active #content,:host(.is-button) #item.is-pressed #content{color:var(--ds-link-color-base-active)}:host(.is-link) #item:active ds-icon,:host(.is-link) #item:active ::slotted(ds-icon),:host(.is-link) #item:active ::slotted(ds-badge),:host(.is-link) #item.is-pressed ds-icon,:host(.is-link) #item.is-pressed ::slotted(ds-icon),:host(.is-link) #item.is-pressed ::slotted(ds-badge),:host(.is-button) #item:active ds-icon,:host(.is-button) #item:active ::slotted(ds-icon),:host(.is-button) #item:active ::slotted(ds-badge),:host(.is-button) #item.is-pressed ds-icon,:host(.is-button) #item.is-pressed ::slotted(ds-icon),:host(.is-button) #item.is-pressed ::slotted(ds-badge){--icon-color: var(--ds-link-color-base-active)}:host(.is-link) #item:focus-visible:not(:active):before,:host(.is-link) #item.is-focused:not(:active):before,:host(.is-button) #item:focus-visible:not(:active):before,:host(.is-button) #item.is-focused:not(:active):before{box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_list-item-focus) 0 0 0 5px !important;content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;border-radius:var(--ds-alias-radius-base)}:host(.is-accordion) ::slotted(p){padding-block:var(--_list-item-accordion-py)}:host(.is-accordion) #accordion-content:after{content:"";border-radius:var(--_list-item-border-radius);width:100%;position:absolute;bottom:0;left:0;right:0;height:var(--_list-item-border-width);background:var(--_list-item-border-color)}:host(.is-disabled) #item{pointer-events:none !important;cursor:default !important;color:var(--ds-list-item-disabled)}:host(.is-disabled) #item #content{color:var(--ds-list-item-disabled)}:host(.is-disabled) #item ds-icon,:host(.is-disabled) #item ds-badge,:host(.is-disabled) #item ::slotted(ds-icon),:host(.is-disabled) #item ::slotted(ds-badge){--icon-color: var(--ds-list-item-disabled)}:host(.is-disabled) #item ds-badge,:host(.is-disabled) #item ::slotted(ds-badge){--badge-color-background: var(--ds-badge-color-grey-background);--badge-color-text: var(--ds-badge-color-grey-text)}
+:host{--_list-item-focus: var(--list-item-focus, var(--mod-list-item-focus, var(--ds-alias-interaction-focus-color-base)));--_list-item-grid-template-columns: var(--list-item-grid-template-columns, var(--mod-list-item-grid-template-columns, 1fr));--_list-item-min-height: var(--list-item-min-height, var(--mod-list-item-min-height, 3.5rem));--_list-item-gap: var(--list-item-gap, var(--mod-list-item-gap, 1rem));--_list-item-space: var(--list-item-space, var(--mod-list-item-space, 0.5rem));--_list-item-content-gap: var(--list-item-content-gap, var(--mod-list-item-content-gap, 1px));--_list-item-color: var(--list-item-color, var(--mod-list-item-color, inherit));--_list-item-border-color-base: var(--list-item-border-color-base, var(--mod-list-item-border-color-base, var(--ds-list-item-border-color)));--_list-item-border-color-hover: var(--list-item-border-color-hover, var(--mod-list-item-border-color-hover, var(--ds-link-color-base)));--_list-item-border-color-active: var(--list-item-border-color-active, var(--mod-list-item-border-color-active, var(--ds-link-color-base-active)));--_list-item-border-width: var(--list-item-border-width, var(--mod-list-item-border-width, var(--ds-list-item-border-width, 2px)));--_list-item-border-radius: var(--list-item-border-radius, var(--mod-list-item-border-radius, 12px));--_list-item-background-base: var(--list-item-background-base, var(--mod-list-item-background-base, transparent));--_list-item-background-hover: var(--list-item-background-hover, var(--mod-list-item-background-hover, var(--ds-alias-background-color-primary-lighter)));--_list-item-background-active: var(--list-item-background-active, var(--mod-list-item-background-active, var(--ds-alias-background-color-primary-lighter)));--_list-item-accordion-py: var(--list-item-accordion-py, var(--mod-list-item-accordion-py, var(--ds-alias-space-base-device)));--_list-item-action-icon-size: var(--list-item-action-icon-size, var(--mod-list-item-action-icon-size, var(--ds-icon-size-xs)));--_list-item-title-size: var(--list-item-title-size, var(--mod-list-item-title-size, var(--ds-heading-5-size-device)));--_list-item-title-weight: var(--list-item-title-weight, var(--mod-list-item-title-weight, var(--ds-alias-text-weight-bold)));--_list-item-title-family: var(--list-item-title-family, var(--mod-list-item-title-family, var(--ds-global-font-family-heading)));--_list-item-text-family: var(--list-item-text-family, var(--mod-list-item-text-family, var(--ds-global-font-family-body)));--_list-item-text-weight: var(--list-item-text-weight, var(--mod-list-item-text-weight, var(--ds-alias-text-weight-regular)));--_list-item-text-size: var(--list-item-text-size, var(--mod-list-item-text-size, var(--ds-text-size-sm-device)))}:host{position:relative;display:grid;box-sizing:border-box;grid-template-columns:var(--_list-item-grid-template-columns)}:host ::slotted([slot=content]){min-height:46px}:host #item{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:var(--_list-item-gap);width:100%;color:var(--_list-item-color);background:inherit;border:none;align-self:stretch;text-align:left;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--_list-item-title-family);padding:var(--_list-item-space) .25rem;padding-bottom:calc(var(--_list-item-space) + 2px);min-height:var(--_list-item-min-height)}:host #item ds-icon{flex-shrink:0}:host #item #content+ds-icon{--icon-size: var(--_list-item-action-icon-size);--icon-inner-size: var(--_list-item-action-icon-size)}:host #item #content{flex:1;display:flex;flex-direction:column;gap:var(--_list-item-content-gap);font-family:var(--_list-item-text-family);font-weight:var(--_list-item-text-weight)}:host #item #label{font-family:var(--_list-item-title-family);font-weight:var(--_list-item-title-weight);font-size:var(--_list-item-title-size);margin:0}:host #item #description{font-family:var(--_list-item-text-family);font-weight:var(--_list-item-text-weight);font-size:var(--_list-item-text-size);margin:0}:host #item:after{content:"";border-radius:var(--_list-item-border-radius);width:100%;position:absolute;bottom:0;left:0;right:0;height:var(--_list-item-border-width);background:var(--_list-item-border-color-base)}:host(.has-label-h1){--mod-list-item-title-size: var(--ds-heading-1-size-device)}:host(.has-label-3xl){--mod-list-item-title-size: var(--ds-heading-1-size-device)}:host(.has-label-h2){--mod-list-item-title-size: var(--ds-heading-2-size-device)}:host(.has-label-2xl){--mod-list-item-title-size: var(--ds-heading-2-size-device)}:host(.has-label-h3){--mod-list-item-title-size: var(--ds-heading-3-size-device)}:host(.has-label-xl){--mod-list-item-title-size: var(--ds-heading-3-size-device)}:host(.has-label-h4){--mod-list-item-title-size: var(--ds-heading-4-size-device)}:host(.has-label-lg){--mod-list-item-title-size: var(--ds-heading-4-size-device)}:host(.has-label-h5){--mod-list-item-title-size: var(--ds-heading-5-size-device)}:host(.has-label-base){--mod-list-item-title-size: var(--ds-heading-5-size-device)}:host(.is-link) #item,:host(.is-button) #item{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;text-decoration:none;outline:none;cursor:pointer;background:var(--_list-item-background-base)}:host(.is-link) #item::-moz-focus-inner,:host(.is-button) #item::-moz-focus-inner{border:0}:host(.is-link) #item #content,:host(.is-button) #item #content{hyphens:auto;overflow-wrap:break-word;font-family:var(--_list-item-title-family);font-weight:var(--_list-item-title-weight);font-size:var(--_list-item-title-size);color:var(--ds-link-color-base)}@media(hover: hover)and (pointer: fine){:host(.is-link) #item:hover,:host(.is-link) #item.is-hovered,:host(.is-button) #item:hover,:host(.is-button) #item.is-hovered{background:var(--_list-item-background-hover)}}:host(.is-link) #item:active,:host(.is-link) #item.is-pressed,:host(.is-button) #item:active,:host(.is-button) #item.is-pressed{background:var(--_list-item-background-active);color:var(--ds-link-color-base-active)}:host(.is-link) #item:active #content,:host(.is-link) #item.is-pressed #content,:host(.is-button) #item:active #content,:host(.is-button) #item.is-pressed #content{color:var(--ds-link-color-base-active)}:host(.is-link) #item:active ds-icon,:host(.is-link) #item:active ::slotted(ds-icon),:host(.is-link) #item:active ::slotted(ds-badge),:host(.is-link) #item.is-pressed ds-icon,:host(.is-link) #item.is-pressed ::slotted(ds-icon),:host(.is-link) #item.is-pressed ::slotted(ds-badge),:host(.is-button) #item:active ds-icon,:host(.is-button) #item:active ::slotted(ds-icon),:host(.is-button) #item:active ::slotted(ds-badge),:host(.is-button) #item.is-pressed ds-icon,:host(.is-button) #item.is-pressed ::slotted(ds-icon),:host(.is-button) #item.is-pressed ::slotted(ds-badge){--icon-color: var(--ds-link-color-base-active)}:host(.is-link) #item:before,:host(.is-button) #item:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;border-radius:var(--ds-alias-radius-base);touch-action:manipulation;transition-property:box-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host(.is-link) #item:focus-visible:not(:active):before,:host(.is-link) #item.is-focused:not(:active):before,:host(.is-button) #item:focus-visible:not(:active):before,:host(.is-button) #item.is-focused:not(:active):before{box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_list-item-focus) 0 0 0 5px !important}@media(hover: hover)and (pointer: fine){:host(.is-link) #item:hover:after,:host(.is-link) #item.is-hovered:after,:host(.is-button) #item:hover:after,:host(.is-button) #item.is-hovered:after,:host(.is-accordion) #item:hover:after,:host(.is-accordion) #item.is-hovered:after{background:var(--_list-item-border-color-hover)}}:host(.is-link) #item:active:after,:host(.is-link) #item.is-pressed:after,:host(.is-button) #item:active:after,:host(.is-button) #item.is-pressed:after,:host(.is-accordion) #item:active:after,:host(.is-accordion) #item.is-pressed:after{background:var(--_list-item-border-color-active)}:host(.is-accordion) ::slotted(p){padding-block:var(--_list-item-accordion-py)}:host(.is-accordion) ds-accordion{--accordion-summary-color-hover: var(--ds-link-color-base)}:host(.is-accordion) ds-accordion::part(header){background:var(--_list-item-background-base)}:host(.is-accordion) ds-accordion::part(summary){padding-right:.25rem}:host(.is-accordion) ds-accordion::part(summary):hover{background:var(--_list-item-background-hover)}:host(.is-accordion) ds-accordion::part(summary):active{background:var(--_list-item-background-active)}:host(.is-accordion) #accordion-content:after{content:"";border-radius:var(--_list-item-border-radius);width:100%;position:absolute;bottom:0;left:0;right:0;height:var(--_list-item-border-width);background:var(--_list-item-border-color-base)}:host(.is-disabled) #item{pointer-events:none !important;cursor:default !important;color:var(--ds-list-item-disabled)}:host(.is-disabled) #item #content{color:var(--ds-list-item-disabled)}:host(.is-disabled) #item ds-icon,:host(.is-disabled) #item ds-badge,:host(.is-disabled) #item ::slotted(ds-icon),:host(.is-disabled) #item ::slotted(ds-badge){--icon-color: var(--ds-list-item-disabled)}:host(.is-disabled) #item ds-badge,:host(.is-disabled) #item ::slotted(ds-badge){--badge-color-background: var(--ds-badge-color-grey-background);--badge-color-text: var(--ds-badge-color-grey-text)}

package/dist/collection/components/list/item/item.interfaces.js

@@ -2,6 +2,6 @@
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
 export const ITEM_VARIANTS = ['default', 'link', 'button', 'accordion'];
-export const ITEM_ACTION_ICONS = ['default', 'link', 'link-external', 'download'];
+export const ITEM_ACTION_ICONS = ['', 'default', 'link', 'link-external', 'download'];
 export const ITEM_LABEL_LEVELS = ['', 'h1', 'h2', 'h3', 'h4', 'h5'];
 export const ITEM_LABEL_SIZES = ['', 'h1', 'h2', 'h3', 'h4', 'h5', '3xl', '2xl', 'xl', 'lg', 'base'];

package/dist/collection/components/list/item/item.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { Logger, ValidateOneOf, ValidateType, setupValidation } from "../../../utils/index";
+import { Logger, OneOf, Type } from "../../../utils/index";
 import { ACCORDION_MARKERS, ACCORDION_MARKER_POSITIONS, } from "../../accordion/accordion.interfaces";
 import { BUTTON_TARGETS } from "../../button/button.interfaces";
 import { ITEM_VARIANTS, ITEM_ACTION_ICONS, ITEM_LABEL_LEVELS, ITEM_LABEL_SIZES, } from "./item.interfaces";
@@ -49,7 +49,7 @@ export class Item {
         /**
          * The action icon variant. Controls which icon is displayed for `link` and `button` variants.
          */
-        this.actionIcon = 'default';
+        this.actionIcon = '';
         /**
          * The description text displayed below the label.
          */
@@ -76,7 +76,7 @@ export class Item {
         /**
          * The semantic heading level of the label element.
          */
-        this.labelLevel = 'h5';
+        this.labelLevel = '';
         /**
          * The visual size of the label. Defaults to `labelLevel` if not set.
          */
@@ -90,7 +90,7 @@ export class Item {
          * Specifies where to display the linked URL.
          * Only applies when an `href` is provided.
          */
-        this.target = '_self';
+        this.target = '';
         /**
          * The visual and functional variant of the item.
          */
@@ -106,13 +106,6 @@ export class Item {
     createLogger(log) {
         this.log = log;
     }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        setupValidation(this);
-    }
     /**
      * RENDER
      * ------------------------------------------------------
@@ -127,13 +120,13 @@ export class Item {
             if (this.actionIcon === 'link') {
                 actionIconName = 'nav-go-right';
             }
-            if (this.actionIcon === 'link-external') {
+            else if (this.actionIcon === 'link-external') {
                 actionIconName = 'link';
             }
-            if (this.actionIcon === 'download') {
+            else if (this.actionIcon === 'download') {
                 actionIconName = 'download';
             }
-            if (this.actionIcon === 'default') {
+            else if (this.actionIcon === 'default' || this.actionIcon === '') {
                 if (this.variant === 'link' || this.variant === 'button') {
                     actionIconName = 'nav-go-right';
                 }
@@ -298,7 +291,7 @@ export class Item {
                 "mutable": false,
                 "complexType": {
                     "original": "ItemActionIcon",
-                    "resolved": "\"default\" | \"download\" | \"link\" | \"link-external\"",
+                    "resolved": "\"\" | \"default\" | \"download\" | \"link\" | \"link-external\"",
                     "references": {
                         "ItemActionIcon": {
                             "location": "import",
@@ -318,7 +311,7 @@ export class Item {
                 "setter": false,
                 "reflect": false,
                 "attribute": "action-icon",
-                "defaultValue": "'default'"
+                "defaultValue": "''"
             },
             "description": {
                 "type": "string",
@@ -445,7 +438,7 @@ export class Item {
                 "setter": false,
                 "reflect": false,
                 "attribute": "label-level",
-                "defaultValue": "'h5'"
+                "defaultValue": "''"
             },
             "labelSize": {
                 "type": "string",
@@ -499,7 +492,7 @@ export class Item {
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonTarget",
-                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "resolved": "\"\" | \"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
                     "references": {
                         "ButtonTarget": {
                             "location": "import",
@@ -519,7 +512,7 @@ export class Item {
                 "setter": false,
                 "reflect": false,
                 "attribute": "target",
-                "defaultValue": "'_self'"
+                "defaultValue": "''"
             },
             "variant": {
                 "type": "string",
@@ -650,62 +643,62 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Item.prototype, "createLogger", null);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Item.prototype, "accordionGroup", void 0);
 __decorate([
-    ValidateOneOf(...ACCORDION_MARKERS),
+    OneOf(ACCORDION_MARKERS),
     __metadata("design:type", String)
 ], Item.prototype, "accordionMarker", void 0);
 __decorate([
-    ValidateOneOf(...ACCORDION_MARKER_POSITIONS),
+    OneOf(ACCORDION_MARKER_POSITIONS),
     __metadata("design:type", String)
 ], Item.prototype, "accordionMarkerPosition", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Item.prototype, "accordionOpen", void 0);
 __decorate([
-    ValidateOneOf(...ITEM_ACTION_ICONS),
+    OneOf(ITEM_ACTION_ICONS),
     __metadata("design:type", String)
 ], Item.prototype, "actionIcon", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Item.prototype, "description", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Item.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Item.prototype, "download", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Item.prototype, "href", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Item.prototype, "label", void 0);
 __decorate([
-    ValidateOneOf(...ITEM_LABEL_LEVELS),
+    OneOf(ITEM_LABEL_LEVELS),
     __metadata("design:type", String)
 ], Item.prototype, "labelLevel", void 0);
 __decorate([
-    ValidateOneOf(...ITEM_LABEL_SIZES),
+    OneOf(ITEM_LABEL_SIZES),
     __metadata("design:type", String)
 ], Item.prototype, "labelSize", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Item.prototype, "rel", void 0);
 __decorate([
-    ValidateOneOf(...BUTTON_TARGETS),
+    OneOf(BUTTON_TARGETS),
     __metadata("design:type", String)
 ], Item.prototype, "target", void 0);
 __decorate([
-    ValidateOneOf(...ITEM_VARIANTS),
+    OneOf(ITEM_VARIANTS),
     __metadata("design:type", String)
 ], Item.prototype, "variant", void 0);