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

package/dist/collection/components/checkbox/checkbox.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { Logger, inheritAttributes, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { Logger, inheritAttributes, hasValue, OneOf, Required, Type } from "../../utils/index";
 import { CHECKBOX_LABEL_POSITIONS, CHECKBOX_TILE_COLORS, } from "./checkbox.interfaces";
 /**
  * Checkbox renders a checkbox form control for selecting multiple options from a group with optional label and help text.
@@ -126,7 +126,6 @@ export class Checkbox {
      * ------------------------------------------------------
      */
     connectedCallback() {
-        setupValidation(this);
         this.initialValue = this.checked;
         this.internals.setFormValue(this.checked ? this.value : null);
     }
@@ -149,18 +148,18 @@ export class Checkbox {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: 'af814fa8a0e3a8ca8adac7322764993aa2f35c49', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, "aria-invalid": this.invalid ? 'true' : null, class: {
+        return (h(Host, { key: '9dc7b43b7b6596219932a53d76fe9f3972da8b73', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, "aria-invalid": this.invalid ? 'true' : null, class: {
                 'is-disabled': this.disabled || this.readonly,
                 'is-invalid': this.invalid,
                 'is-checked': this.checked,
                 'is-tile': this.tile,
-                [`has-tile-${this.tileColor}`]: this.tile && !!this.tileColor,
+                [`has-tile-${this.tileColor}`]: this.tile && hasValue(this.tileColor),
                 'has-label-left': this.labelPosition === 'left',
                 'has-label-top': this.labelPosition === 'top',
                 [`has-cols-${this.cols}`]: this.tile && this.cols > 1,
                 [`has-cols-${this.colsTablet}-tablet`]: this.tile && this.colsTablet > 1,
                 [`has-cols-${this.colsMobile}-mobile`]: this.tile && this.colsMobile > 1,
-            } }, h("label", { key: '04956294bb277d5739742462f60a04e86ecc7744', id: "label", part: "label" }, h("input", Object.assign({ key: '42d8a780685abba59aa847fb7606cbd70c760bfa', type: "checkbox", part: "input", id: this.inputId, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, "aria-invalid": this.invalid ? 'true' : null, onChange: ev => this.handleChange(ev), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: inputEl => (this.nativeInput = inputEl) }, this.inheritAttributes)), h("div", { key: 'f2a1260e135c5c350ba02394a8bb32f6669b2a8d', id: "slot", part: "slot" }, h("slot", { key: 'ed851c133b9133b609d90360b91bb40e6e7dfa7d' }, this.label)))));
+            } }, h("label", { key: '64ddcb92ac97b7dfe1c71141ded03c61e1915b3a', id: "label", part: "label" }, h("input", Object.assign({ key: 'a5eb2c1c881e5ae3d95e8b7bc844a47793709c5c', type: "checkbox", part: "input", id: this.inputId, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, "aria-invalid": this.invalid ? 'true' : null, onChange: ev => this.handleChange(ev), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: inputEl => (this.nativeInput = inputEl) }, this.inheritAttributes)), h("div", { key: 'ba535ca3a7dcd0e623ba68ae2882ed27822d9244', id: "slot", part: "slot" }, h("slot", { key: 'df42decc580239904011604b349e0cfd47539682' }, this.label)))));
     }
     static get is() { return "ds-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -193,7 +192,7 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name",
                 "defaultValue": "this.inputId"
             },
@@ -616,51 +615,52 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Checkbox.prototype, "createLogger", null);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Checkbox.prototype, "name", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Checkbox.prototype, "label", void 0);
 __decorate([
-    ValidateOneOf(...CHECKBOX_LABEL_POSITIONS),
+    Required(),
+    OneOf(CHECKBOX_LABEL_POSITIONS),
     __metadata("design:type", String)
 ], Checkbox.prototype, "labelPosition", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", Object)
 ], Checkbox.prototype, "value", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Checkbox.prototype, "checked", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Checkbox.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Checkbox.prototype, "readonly", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Checkbox.prototype, "required", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Checkbox.prototype, "autoInvalidOff", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Checkbox.prototype, "invalid", void 0);
 __decorate([
-    ValidateOneOf(...CHECKBOX_TILE_COLORS),
+    OneOf(CHECKBOX_TILE_COLORS),
     __metadata("design:type", String)
 ], Checkbox.prototype, "tileColor", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Checkbox.prototype, "tile", void 0);
 let checkboxIds = 0;

package/dist/collection/components/close/close.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { Host, h } from "@stencil/core";
-import { normalizeDeprecatedTShirtSize, Logger, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { normalizeDeprecatedTShirtSize, Logger, hasValue, OneOf, Type } from "../../utils/index";
 import { ListenToConfig, defaultConfig, } from "../../global/index";
 import { i18nDsClose } from "./close.i18n";
 import { BUTTON_COLORS } from "../button/button.interfaces";
@@ -42,9 +42,6 @@ export class Close {
     createLogger(log) {
         this.log = log;
     }
-    sizeChanged(newValue) {
-        this.size = normalizeDeprecatedTShirtSize(newValue);
-    }
     /**
      * @internal define config for the component
      */
@@ -52,16 +49,14 @@ export class Close {
         this.language = state.language;
         this.region = state.region;
     }
-    connectedCallback() {
-        setupValidation(this);
-    }
     render() {
         const label = i18nDsClose[this.language].close;
+        const size = normalizeDeprecatedTShirtSize(this.size) || '';
         if (this.button) {
-            return (h(Host, null, h("ds-button", { id: "close", part: "button", disabled: this.disabled, inverted: this.inverted, color: this.buttonColor, size: this.size === 'sm' ? 'sm' : this.size === 'md' ? 'lg' : '' }, label)));
+            return (h(Host, null, h("ds-button", { id: "close", part: "button", disabled: this.disabled, inverted: this.inverted, color: this.buttonColor, size: size === 'sm' ? 'sm' : size === 'md' ? 'lg' : '' }, label)));
         }
         return (h(Host, { class: {
-                [`is-${this.size}`]: !!this.size,
+                [`is-${size}`]: hasValue(this.size),
                 'is-inverted': this.inverted,
                 'is-disabled': this.disabled,
             } }, h("button", { id: "close", part: "button", type: "button", "aria-label": label, title: label, tabindex: "0", disabled: this.disabled })));
@@ -82,7 +77,7 @@ export class Close {
         return {
             "size": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "CloseSize",
                     "resolved": "\"\" | \"md\" | \"medium\" | \"sm\" | \"small\"",
@@ -237,12 +232,6 @@ export class Close {
         };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "size",
-                "methodName": "sizeChanged"
-            }];
-    }
 }
 __decorate([
     Logger('close'),
@@ -251,23 +240,23 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Close.prototype, "createLogger", null);
 __decorate([
-    ValidateOneOf(...CLOSE_SIZES),
+    OneOf(CLOSE_SIZES),
     __metadata("design:type", String)
 ], Close.prototype, "size", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Close.prototype, "inverted", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Close.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Close.prototype, "button", void 0);
 __decorate([
-    ValidateOneOf(...BUTTON_COLORS),
+    OneOf(BUTTON_COLORS),
     __metadata("design:type", String)
 ], Close.prototype, "buttonColor", void 0);
 __decorate([

package/dist/collection/components/content/content.js

@@ -3,8 +3,8 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { Logger, normalizeDeprecatedTShirtSize, ValidateOneOf, setupValidation } from "../../utils/index";
-import { STACK_LAYOUTS } from "../stack/stack.interfaces";
+import { Logger, normalizeDeprecatedTShirtSize, hasValue, OneOf } from "../../utils/index";
+import { STACK_ALIGNMENTS, STACK_LAYOUTS } from "../stack/stack.interfaces";
 import { CONTENT_DIRECTIONS, CONTENT_ALIGNMENTS, CONTENT_SPACES, } from "./content.interfaces";
 /**
  * Content arranges content with flexible layout, alignment, and spacing options for structural layouts.
@@ -49,51 +49,42 @@ export class Content {
     createLogger(log) {
         this.log = log;
     }
-    layoutChanged(newValue) {
-        if (newValue !== '') {
-            if (newValue === 'horizontal') {
-                this.direction = 'row';
-            }
-            else if (newValue === 'vertical') {
-                this.direction = 'column';
-            }
-            else if (newValue === 'vertical-reverse') {
-                this.direction = 'column-reverse';
-            }
-            else if (newValue === 'horizontal-reverse') {
-                this.direction = 'row-reverse';
-            }
-        }
-    }
-    spaceChanged(newValue) {
-        this.space = normalizeDeprecatedTShirtSize(newValue);
-    }
-    connectedCallback() {
-        setupValidation(this);
-        this.layoutChanged(this.layout);
-        this.spaceChanged(this.space);
-    }
     /**
      * RENDER
      * ------------------------------------------------------
      */
     render() {
         var _a;
-        const alignment = !!this.alignment;
-        const align = !!this.align;
-        const space = !!this.space;
+        const alignment = hasValue(this.alignment);
+        const align = hasValue(this.align);
+        const space = normalizeDeprecatedTShirtSize(this.space) || '';
         let alignValue = (_a = this.align) === null || _a === void 0 ? void 0 : _a.split(' ').join('-');
-        if (this.alignment) {
+        if (hasValue(this.alignment)) {
             alignValue = this.alignment.split(' ').join('-');
         }
-        return (h(Host, { key: '7749f99e93cfd289509e77411aca498eec508477', class: {
+        let direction = this.direction;
+        if (hasValue(this.layout)) {
+            if (this.layout === 'horizontal') {
+                direction = 'row';
+            }
+            else if (this.layout === 'vertical') {
+                direction = 'column';
+            }
+            else if (this.layout === 'vertical-reverse') {
+                direction = 'column-reverse';
+            }
+            else if (this.layout === 'horizontal-reverse') {
+                direction = 'row-reverse';
+            }
+        }
+        return (h(Host, { key: '5e1dd2f21df711ad1be750936272efbc08ff3523', class: {
                 'stack-content': true,
-                'as-row': this.direction === 'row',
-                'as-col': this.direction === 'column',
+                'as-row': direction === 'row',
+                'as-col': direction === 'column',
                 [`align-${alignValue}`]: align || alignment,
-                [`text-${this.textAlign}`]: this.textAlign !== undefined,
-                [`has-space-${this.space}`]: space,
-            } }, h("slot", { key: '2d522a40ed22bfaebd0d3162fd94e97bf2da5ac1' })));
+                [`text-${this.textAlign}`]: hasValue(this.textAlign),
+                [`has-space-${space}`]: hasValue(this.space),
+            } }, h("slot", { key: '551c92899f3580cc78643957fdfe7dad302927a4' })));
     }
     static get is() { return "ds-content"; }
     static get originalStyleUrls() {
@@ -137,7 +128,7 @@ export class Content {
             },
             "direction": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "StackDirection",
                     "resolved": "\"\" | \"column\" | \"column-reverse\" | \"row\" | \"row-reverse\"",
@@ -218,7 +209,7 @@ export class Content {
             },
             "space": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "ContentSpace",
                     "resolved": "\"\" | \"2xs\" | \"3xs\" | \"base\" | \"none\" | \"normal\" | \"sm\" | \"small\" | \"x-small\" | \"xs\" | \"xx-small\" | \"xxx-small\"",
@@ -276,15 +267,6 @@ export class Content {
         };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "layout",
-                "methodName": "layoutChanged"
-            }, {
-                "propName": "space",
-                "methodName": "spaceChanged"
-            }];
-    }
 }
 __decorate([
     Logger('content'),
@@ -293,22 +275,26 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Content.prototype, "createLogger", null);
 __decorate([
-    ValidateOneOf(...STACK_LAYOUTS),
+    OneOf(STACK_LAYOUTS),
     __metadata("design:type", String)
 ], Content.prototype, "layout", void 0);
 __decorate([
-    ValidateOneOf(...CONTENT_DIRECTIONS),
+    OneOf(CONTENT_DIRECTIONS),
     __metadata("design:type", String)
 ], Content.prototype, "direction", void 0);
 __decorate([
-    ValidateOneOf(...CONTENT_ALIGNMENTS),
+    OneOf(CONTENT_ALIGNMENTS),
     __metadata("design:type", String)
 ], Content.prototype, "align", void 0);
 __decorate([
-    ValidateOneOf(...CONTENT_ALIGNMENTS),
+    OneOf(CONTENT_ALIGNMENTS),
     __metadata("design:type", String)
 ], Content.prototype, "textAlign", void 0);
 __decorate([
-    ValidateOneOf(...CONTENT_SPACES),
+    OneOf(CONTENT_SPACES),
     __metadata("design:type", String)
 ], Content.prototype, "space", void 0);
+__decorate([
+    OneOf(STACK_ALIGNMENTS),
+    __metadata("design:type", String)
+], Content.prototype, "alignment", void 0);

package/dist/collection/components/data/data-item.host.css

@@ -0,0 +1 @@
+:host{--_data-item-position: var(--data-item-position, var(--mod-data-item-position, static));--_data-item-top: var(--data-item-top, var(--mod-data-item-top));--_data-item-right: var(--data-item-right, var(--mod-data-item-right));--_data-item-bottom: var(--data-item-bottom, var(--mod-data-item-bottom));--_data-item-left: var(--data-item-left, var(--mod-data-item-left));position:var(--_data-item-position);top:var(--_data-item-top);right:var(--_data-item-right);bottom:var(--_data-item-bottom);left:var(--_data-item-left);--_data-item-m: var(--data-item-m, var(--mod-data-item-m, 0));--_data-item-my: var(--data-item-my, var(--mod-data-item-my));--_data-item-mx: var(--data-item-mx, var(--mod-data-item-mx));--_data-item-ml: var(--data-item-ml, var(--mod-data-item-ml));--_data-item-mr: var(--data-item-mr, var(--mod-data-item-mr));--_data-item-mt: var(--data-item-mt, var(--mod-data-item-mt));--_data-item-mb: var(--data-item-mb, var(--mod-data-item-mb));margin:var(--_data-item-m);margin-inline:var(--_data-item-mx);margin-block:var(--_data-item-my);margin-left:var(--_data-item-ml);margin-right:var(--_data-item-mr);margin-top:var(--_data-item-mt);margin-bottom:var(--_data-item-mb);--_data-item-font-weight-label: var(--data-item-font-weight-label, var(--mod-data-item-font-weight-label, var(--ds-global-font-weight-700)));--_data-item-color-text: var(--data-item-color-text, var(--mod-data-item-color-text, var(--ds-alias-text-color-primary)));--_data-item-color-text-label: var(--data-item-color-text-label, var(--mod-data-item-color-text-label, var(--ds-alias-text-color-primary)));--_data-item-color-text-required: var(--data-item-color-text-required, var(--mod-data-item-color-text-required, var(--ds-alias-text-color-danger)));--_data-item-color-text-disabled: var(--data-item-color-text-disabled, var(--mod-data-item-color-text-disabled, var(--ds-alias-text-color-disabled)));--_data-item-border-width: var(--data-item-border-width, var(--mod-data-item-border-width, var(--ds-global-size-border-2)));--_data-item-border-color: var(--data-item-border-color, var(--mod-data-item-border-color, var(--ds-global-color-grey-3)))}:host{border-bottom:var(--_data-item-border-width) solid var(--_data-item-border-color)}:host(:last-child){border-bottom:none}:host(.is-disabled){opacity:.6;color:var(--_data-item-color-text-disabled)}:host{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start;padding:.5rem 0;min-height:auto}.item-container{display:contents}.label-container{display:flex;gap:.25rem;font-weight:var(--_data-item-font-weight-label);color:var(--_data-item-color-text-label);margin:0;padding:0;align-self:center}.label-container>span{color:var(--_data-item-color-text-required)}.value-container{display:flex;align-items:center;gap:1rem;color:var(--_data-item-color-text);flex:1;min-width:0;word-break:break-word}.value-container>:not(.edit-button){min-width:0;flex:1}.value-container textarea,.value-container select,.value-container input{width:100%}.value-container .edit-button{flex-shrink:0;margin-left:auto}:host(.is-disabled) .value-container{color:var(--_data-item-color-text-disabled)}:host(.is-multiline) .value-container{align-items:flex-start}:host(.is-multiline) .value-container>:not(.edit-button){align-self:flex-start}:host-context(ds-data[horizontal]){display:flex;flex-direction:column;gap:.5rem;padding:.5rem;border:none;align-items:flex-start;flex:1;min-height:48px}:host-context(ds-data[horizontal]) .label-container{display:flex;align-self:auto}:host-context(ds-data[horizontal]) .value-container{display:flex}@media(max-width: 767px){:host{display:flex;flex-direction:column;gap:.5rem;padding:.5rem;align-items:flex-start;flex:1}.label-container{display:flex;align-self:auto}.value-container{display:flex}}

package/dist/collection/components/data/data-item.i18n.js

@@ -0,0 +1,35 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+export const i18nDsDataItem = {
+    de: {
+        editLabel: 'Bearbeiten',
+    },
+    en: {
+        editLabel: 'Edit',
+    },
+    fr: {
+        editLabel: 'Modifier',
+    },
+    it: {
+        editLabel: 'Modifica',
+    },
+    nl: {
+        editLabel: 'Bewerken',
+    },
+    es: {
+        editLabel: 'Editar',
+    },
+    pl: {
+        editLabel: 'Edytuj',
+    },
+    pt: {
+        editLabel: 'Editar',
+    },
+    sv: {
+        editLabel: 'Redigera',
+    },
+    fi: {
+        editLabel: 'Muokkaa',
+    },
+};

package/dist/collection/components/data/data-item.js

@@ -0,0 +1,244 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { ListenToConfig, defaultConfig, } from "../../global/index";
+import { Logger, Type } from "../../utils/index";
+import { i18nDsDataItem } from "./data-item.i18n";
+/**
+ * DataItem is a container for label-value pairs within ds-data.
+ * Provides separate slots for label and value for semantic linking.
+ *
+ * @slot label - The label content (ds-data-label or text).
+ * @slot - The value content (ds-data-value or other elements).
+ */
+export class DataItem {
+    constructor() {
+        this.innerEditLabel = 'Edit';
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.labelId = `data-item-label-${Math.random().toString(36).slice(2, 9)}`;
+        this.valueId = `data-item-value-${Math.random().toString(36).slice(2, 9)}`;
+        this.hasCustomLabel = false;
+        /**
+         * If `true` the item gets a lighter font color.
+         */
+        this.disabled = false;
+        /**
+         * If `true` the text will break and the height of the item increases.
+         */
+        this.multiline = false;
+        /**
+         * If `true` a small button with an edit icon is shown on the right.
+         */
+        this.editable = false;
+        /**
+         * Label for the edit button.
+         * When omitted the label is localised from the language config.
+         */
+        this.editLabel = undefined;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    connectedCallback() {
+        this.assignSlotsToComponents();
+    }
+    async configChanged(state) {
+        var _a;
+        this.language = state.language;
+        this.region = state.region;
+        if (!this.editLabel) {
+            const label = ((_a = i18nDsDataItem[state.language]) === null || _a === void 0 ? void 0 : _a.editLabel) || i18nDsDataItem.en.editLabel;
+            this.innerEditLabel = label;
+        }
+    }
+    assignSlotsToComponents() {
+        // For backward compatibility: assign slot names to sub-components if no explicit slot is set
+        const label = this.el.querySelector('ds-data-label');
+        const value = this.el.querySelector('ds-data-value');
+        if (label && !label.getAttribute('slot')) {
+            label.slot = 'label';
+        }
+        if (value && !value.getAttribute('slot')) {
+            value.slot = '';
+        }
+        this.detectCustomLabel();
+    }
+    detectCustomLabel() {
+        // Check if slot="label" contains a custom label element instead of ds-data-label
+        const labelSlotContent = this.el.querySelector('[slot="label"]');
+        this.hasCustomLabel = (labelSlotContent === null || labelSlotContent === void 0 ? void 0 : labelSlotContent.tagName) === 'LABEL';
+    }
+    render() {
+        return (h(Host, { key: '41172b7c9c39ae12af12f35acd89bea1b291d5f0', class: {
+                'is-disabled': this.disabled,
+                'is-multiline': this.multiline,
+                'is-editable': this.editable,
+            } }, h("div", { key: 'ebd58ede50e42c963a98806d0e34edc24cc37347', class: "item-container" }, this.hasCustomLabel ? (h("div", { class: "label-container" }, h("slot", { name: "label" }))) : (h("label", { id: this.labelId, class: "label-container" }, h("slot", { name: "label" }))), h("div", { key: 'f1834037e850e569d6adb6512e6de945ef307f3f', id: this.valueId, class: "value-container", "aria-labelledby": this.hasCustomLabel ? undefined : this.labelId }, h("slot", { key: 'eae351330191525eb62b97a0cfb1c279f5475c09' }), this.editable && (h("ds-button", { key: '22e07967a920b0fc2498d2a0950b5ceb741f1172', class: "edit-button", color: "tertiary", size: "sm", icon: "edit", square: true, a11yLabel: this.editLabel || this.innerEditLabel, a11yTitle: this.editLabel || this.innerEditLabel }))))));
+    }
+    static get is() { return "ds-data-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["data-item.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["data-item.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the item gets a lighter font color."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "multiline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the text will break and the height of the item increases."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "multiline",
+                "defaultValue": "false"
+            },
+            "editable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` a small button with an edit icon is shown on the right."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "editable",
+                "defaultValue": "false"
+            },
+            "editLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the edit button.\nWhen omitted the label is localised from the language config."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "edit-label",
+                "defaultValue": "undefined"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "innerEditLabel": {},
+            "language": {},
+            "region": {}
+        };
+    }
+    static get methods() {
+        return {
+            "configChanged": {
+                "complexType": {
+                    "signature": "(state: DsConfigState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "DsConfigState",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DsConfigState": {
+                            "location": "import",
+                            "path": "@global",
+                            "id": "src/global/index.ts::DsConfigState",
+                            "referenceLocation": "DsConfigState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+__decorate([
+    Logger('data-item'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], DataItem.prototype, "createLogger", null);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DataItem.prototype, "disabled", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DataItem.prototype, "multiline", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DataItem.prototype, "editable", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], DataItem.prototype, "editLabel", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], DataItem.prototype, "configChanged", null);

package/dist/collection/components/data/data-label.host.css

@@ -0,0 +1 @@
+:host{display:contents}