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

package/dist/cjs/ds-data-item.cjs.entry.js

@@ -0,0 +1,146 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+var type = require('./type-hmc4CJcO.js');
+var config_decorator = require('./config.decorator-ThGLtT-3.js');
+require('./create-validator-decorator-BIgFqrMJ.js');
+require('./config.utils-MhZvq4Qm.js');
+
+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',
+    },
+};
+
+const dataItemHostCss = () => `: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;-ms-flex-align:start;align-items:start;padding:.5rem 0;min-height:auto}.item-container{display:contents}.label-container{display:-ms-flexbox;display:flex;gap:.25rem;font-weight:var(--_data-item-font-weight-label);color:var(--_data-item-color-text-label);margin:0;padding:0;-ms-flex-item-align:center;align-self:center}.label-container>span{color:var(--_data-item-color-text-required)}.value-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:1rem;color:var(--_data-item-color-text);-ms-flex:1;flex:1;min-width:0;word-break:break-word}.value-container>:not(.edit-button){min-width:0;-ms-flex:1;flex:1}.value-container textarea,.value-container select,.value-container input{width:100%}.value-container .edit-button{-ms-flex-negative:0;flex-shrink:0;margin-left:auto}:host(.is-disabled) .value-container{color:var(--_data-item-color-text-disabled)}:host(.is-multiline) .value-container{-ms-flex-align:start;align-items:flex-start}:host(.is-multiline) .value-container>:not(.edit-button){-ms-flex-item-align:start;align-self:flex-start}:host-context(ds-data[horizontal]){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:.5rem;padding:.5rem;border:none;-ms-flex-align:start;align-items:flex-start;-ms-flex:1;flex:1;min-height:48px}:host-context(ds-data[horizontal]) .label-container{display:-ms-flexbox;display:flex;-ms-flex-item-align:auto;align-self:auto}:host-context(ds-data[horizontal]) .value-container{display:-ms-flexbox;display:flex}@media (max-width: 767px){:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:.5rem;padding:.5rem;-ms-flex-align:start;align-items:flex-start;-ms-flex:1;flex:1}.label-container{display:-ms-flexbox;display:flex;-ms-flex-item-align:auto;align-self:auto}.value-container{display:-ms-flexbox;display:flex}}`;
+
+const DataItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.innerEditLabel = 'Edit';
+        this.language = index.defaultConfig.language;
+        this.region = index.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 (index.h(index.Host, { key: '41172b7c9c39ae12af12f35acd89bea1b291d5f0', class: {
+                'is-disabled': this.disabled,
+                'is-multiline': this.multiline,
+                'is-editable': this.editable,
+            } }, index.h("div", { key: 'ebd58ede50e42c963a98806d0e34edc24cc37347', class: "item-container" }, this.hasCustomLabel ? (index.h("div", { class: "label-container" }, index.h("slot", { name: "label" }))) : (index.h("label", { id: this.labelId, class: "label-container" }, index.h("slot", { name: "label" }))), index.h("div", { key: 'f1834037e850e569d6adb6512e6de945ef307f3f', id: this.valueId, class: "value-container", "aria-labelledby": this.hasCustomLabel ? undefined : this.labelId }, index.h("slot", { key: 'eae351330191525eb62b97a0cfb1c279f5475c09' }), this.editable && (index.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 }))))));
+    }
+    get el() { return index.getElement(this); }
+};
+tslib_es6.__decorate([
+    tslib_es6.Logger('data-item'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], DataItem.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], DataItem.prototype, "disabled", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], DataItem.prototype, "multiline", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], DataItem.prototype, "editable", void 0);
+tslib_es6.__decorate([
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", Object)
+], DataItem.prototype, "editLabel", void 0);
+tslib_es6.__decorate([
+    config_decorator.ListenToConfig(),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Object]),
+    tslib_es6.__metadata("design:returntype", Promise)
+], DataItem.prototype, "configChanged", null);
+DataItem.style = dataItemHostCss();
+
+exports.ds_data_item = DataItem;

package/dist/cjs/ds-data-label.cjs.entry.js

@@ -0,0 +1,41 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+var type = require('./type-hmc4CJcO.js');
+require('./create-validator-decorator-BIgFqrMJ.js');
+
+const dataLabelHostCss = () => `:host{display:contents}`;
+
+const DataLabel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * If `true` an asterisk is added after the label.
+         */
+        this.required = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    render() {
+        return (index.h(index.Host, { key: '605cf2c6c7d1c6f87dd8a2b8193dd0cdfa3e0280' }, index.h("slot", { key: '283a1682ea8a8c062978fceb7438a8aa70c8359b' }), this.required ? index.h("span", null, "*") : ''));
+    }
+    get el() { return index.getElement(this); }
+};
+tslib_es6.__decorate([
+    tslib_es6.Logger('data-label'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], DataLabel.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], DataLabel.prototype, "required", void 0);
+DataLabel.style = dataLabelHostCss();
+
+exports.ds_data_label = DataLabel;

package/dist/cjs/ds-data-value.cjs.entry.js

@@ -0,0 +1,31 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+
+const dataValueHostCss = () => `:host{display:contents}`;
+
+const DataValue = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    render() {
+        return (index.h(index.Host, { key: '123fe49b6436403ace13f8e2974898472bdc1618' }, index.h("slot", { key: 'a86bde096c9af8a10c90365cef142d4edd5665be' })));
+    }
+    get el() { return index.getElement(this); }
+};
+tslib_es6.__decorate([
+    tslib_es6.Logger('data-value'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], DataValue.prototype, "createLogger", null);
+DataValue.style = dataValueHostCss();
+
+exports.ds_data_value = DataValue;

package/dist/cjs/ds-data.cjs.entry.js

@@ -0,0 +1,43 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+var type = require('./type-hmc4CJcO.js');
+require('./create-validator-decorator-BIgFqrMJ.js');
+
+const dataHostCss = () => `:host{display:block}.data-container{display:grid;grid-template-columns:1fr;width:100%}:host(.is-horizontal) .data-container{gap:1rem}@media screen and (min-width: 769px){:host(.is-horizontal) .data-container{grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))}}`;
+
+const Data = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * If `true` the data list is horizontal instead of vertical.
+         */
+        this.horizontal = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    render() {
+        return (index.h(index.Host, { key: '5a1f5b93e705edeb124c790623da2829d19a0b5b', class: {
+                'is-horizontal': this.horizontal,
+            } }, index.h("div", { key: 'aadbae5d22739f3e0c73402d18a9d855a4ab18d3', class: "data-container" }, index.h("slot", { key: '1bedd3928a17e0a159369dd60d7b0ad61ac552e2' }))));
+    }
+    get el() { return index.getElement(this); }
+};
+tslib_es6.__decorate([
+    tslib_es6.Logger('data'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Data.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Data.prototype, "horizontal", void 0);
+Data.style = dataHostCss();
+
+exports.ds_data = Data;