@baloise/ds-core 20.0.0-next.10 → 20.0.0-next.11

package/dist/collection/components/counter/test/counter.a11y.play.js

@@ -1,44 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import { test } from "../../../../../../playwright/src/index";
-test('default', async ({ page, a11y }) => {
-    await page.mount(`<ds-counter label="Label" description="Description"></ds-counter>`);
-    await a11y('ds-counter');
-});
-test('with value', async ({ page, a11y }) => {
-    await page.mount(`<ds-counter label="Label" value="5"></ds-counter>`);
-    await a11y('ds-counter');
-});
-test('at min', async ({ page, a11y }) => {
-    await page.mount(`<ds-counter label="Label" value="0" min="0" max="10"></ds-counter>`);
-    await a11y('ds-counter');
-});
-test('at max', async ({ page, a11y }) => {
-    await page.mount(`<ds-counter label="Label" value="10" min="0" max="10"></ds-counter>`);
-    await a11y('ds-counter');
-});
-test('disabled', async ({ page, a11y }) => {
-    await page.mount(`<ds-counter label="Label" value="5" disabled></ds-counter>`);
-    await a11y('ds-counter');
-});
-test('readonly', async ({ page, a11y }) => {
-    await page.mount(`<ds-counter label="Label" value="5" readonly></ds-counter>`);
-    await a11y('ds-counter');
-});
-test('invalid', async ({ page, a11y }) => {
-    await page.mount(`<ds-counter label="Label" value="5" invalid invalid-text="Validation Error"></ds-counter>`);
-    await a11y('ds-counter');
-});
-test('success', async ({ page, a11y }) => {
-    await page.mount(`<ds-counter label="Label" value="5" color="success"></ds-counter>`);
-    await a11y('ds-counter');
-});
-test('warning', async ({ page, a11y }) => {
-    await page.mount(`<ds-counter label="Label" value="5" color="warning"></ds-counter>`);
-    await a11y('ds-counter');
-});
-test('with min/max/step', async ({ page, a11y }) => {
-    await page.mount(`<ds-counter label="Label" min="0" max="10" step="1" value="5"></ds-counter>`);
-    await a11y('ds-counter');
-});

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

@@ -1,177 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import { DsCounter, expect, test } from "../../../../../../playwright/src/index";
-test.describe('events', () => {
-    test('fires dsInput, dsChange, dsIncrease on increase click', async ({ page }) => {
-        await page.mount(`<ds-counter label="Label" value="3"></ds-counter>`);
-        const counter = new DsCounter(page.locator('ds-counter'));
-        const inputSpy = await counter.el.spyOnEvent('dsInput');
-        const changeSpy = await counter.el.spyOnEvent('dsChange');
-        const increaseSpy = await counter.el.spyOnEvent('dsIncrease');
-        const decreaseSpy = await counter.el.spyOnEvent('dsDecrease');
-        await counter.increase();
-        expect(inputSpy).toHaveReceivedEventTimes(1);
-        expect(inputSpy).toHaveReceivedEventDetail(4);
-        expect(changeSpy).toHaveReceivedEventTimes(1);
-        expect(changeSpy).toHaveReceivedEventDetail(4);
-        expect(increaseSpy).toHaveReceivedEventTimes(1);
-        expect(increaseSpy).toHaveReceivedEventDetail(4);
-        expect(decreaseSpy).toHaveReceivedEventTimes(0);
-    });
-    test('fires dsInput, dsChange, dsDecrease on decrease click', async ({ page }) => {
-        await page.mount(`<ds-counter label="Label" value="3"></ds-counter>`);
-        const counter = new DsCounter(page.locator('ds-counter'));
-        const inputSpy = await counter.el.spyOnEvent('dsInput');
-        const changeSpy = await counter.el.spyOnEvent('dsChange');
-        const decreaseSpy = await counter.el.spyOnEvent('dsDecrease');
-        const increaseSpy = await counter.el.spyOnEvent('dsIncrease');
-        await counter.decrease();
-        expect(inputSpy).toHaveReceivedEventTimes(1);
-        expect(inputSpy).toHaveReceivedEventDetail(2);
-        expect(changeSpy).toHaveReceivedEventTimes(1);
-        expect(changeSpy).toHaveReceivedEventDetail(2);
-        expect(decreaseSpy).toHaveReceivedEventTimes(1);
-        expect(decreaseSpy).toHaveReceivedEventDetail(2);
-        expect(increaseSpy).toHaveReceivedEventTimes(0);
-    });
-});
-test.describe('boundaries', () => {
-    test('does not emit when clicking increase at max', async ({ page }) => {
-        await page.mount(`<ds-counter label="Label" value="10" min="0" max="10"></ds-counter>`);
-        const counter = new DsCounter(page.locator('ds-counter'));
-        const changeSpy = await counter.el.spyOnEvent('dsChange');
-        await expect(counter.increaseButton).toHaveAttribute('disabled', '');
-        expect(changeSpy).toHaveReceivedEventTimes(0);
-        await counter.assertValue('10');
-    });
-    test('does not emit when clicking decrease at min', async ({ page }) => {
-        await page.mount(`<ds-counter label="Label" value="0" min="0" max="10"></ds-counter>`);
-        const counter = new DsCounter(page.locator('ds-counter'));
-        const changeSpy = await counter.el.spyOnEvent('dsChange');
-        await expect(counter.decreaseButton).toHaveAttribute('disabled', '');
-        expect(changeSpy).toHaveReceivedEventTimes(0);
-        await counter.assertValue('0');
-    });
-    test('clamps out-of-range value to max on connect', async ({ page }) => {
-        await page.mount(`<ds-counter label="Label" value="42" min="0" max="10"></ds-counter>`);
-        const counter = new DsCounter(page.locator('ds-counter'));
-        await counter.assertValue('10');
-    });
-    test('clamps an out-of-range value assigned at runtime to max', async ({ page }) => {
-        await page.mount(`<ds-counter label="Label" value="3" min="0" max="10"></ds-counter>`);
-        const counter = new DsCounter(page.locator('ds-counter'));
-        await counter.el.evaluate(el => {
-            ;
-            el.value = 9999;
-        });
-        await page.waitForChanges();
-        await counter.assertValue('10');
-    });
-});
-test.describe('empty value assigned at runtime', () => {
-    // A counter can never be empty (see the `value` prop doc): unlike the out-of-range-at-mount case above,
-    // this covers a framework binding writing an empty value onto an already-connected instance — e.g.
-    // Angular's `FormControl.reset()`, which calls `writeValue(null)` straight through onto the `value`
-    // property.
-    for (const emptyValue of ['null', 'undefined', 'NaN']) {
-        test(`resolves ${emptyValue} to min`, async ({ page }) => {
-            await page.mount(`<ds-counter label="Label" min="2" max="10" value="5"></ds-counter>`);
-            const counter = new DsCounter(page.locator('ds-counter'));
-            await counter.el.evaluate((el, value) => {
-                ;
-                el.value = value === 'null' ? null : value === 'undefined' ? undefined : Number.NaN;
-            }, emptyValue);
-            await page.waitForChanges();
-            await counter.assertValue('2');
-        });
-    }
-});
-test.describe('decimal precision', () => {
-    test('three increases of 0.1 from 0 land exactly on 0.3', async ({ page }) => {
-        await page.mount(`<ds-counter label="Label" value="0" min="0" max="1" step="0.1"></ds-counter>`);
-        const counter = new DsCounter(page.locator('ds-counter'));
-        await counter.increase();
-        await counter.increase();
-        await counter.increase();
-        await counter.assertValue('0.3');
-    });
-});
-test.describe('disabled', () => {
-    test('does not emit when disabled', async ({ page }) => {
-        await page.mount(`<ds-counter label="Label" value="5" disabled></ds-counter>`);
-        const counter = new DsCounter(page.locator('ds-counter'));
-        const changeSpy = await counter.el.spyOnEvent('dsChange');
-        await counter.assertToBeDisabled();
-        expect(changeSpy).toHaveReceivedEventTimes(0);
-    });
-});
-test.describe('readonly', () => {
-    test('does not emit when readonly', async ({ page }) => {
-        await page.mount(`<ds-counter label="Label" value="5" readonly></ds-counter>`);
-        const counter = new DsCounter(page.locator('ds-counter'));
-        const changeSpy = await counter.el.spyOnEvent('dsChange');
-        await counter.assertToBeDisabled();
-        expect(changeSpy).toHaveReceivedEventTimes(0);
-    });
-});
-test.describe('keyboard', () => {
-    test('ArrowUp increases the value', async ({ page }) => {
-        await page.mount(`<ds-counter label="Label" value="3"></ds-counter>`);
-        const counter = new DsCounter(page.locator('ds-counter'));
-        await counter.increaseButton.evaluate(el => { var _a, _b; return (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus(); });
-        await page.keyboard.press('ArrowUp');
-        await page.waitForChanges();
-        await counter.assertValue('4');
-    });
-    test('ArrowDown decreases the value', async ({ page }) => {
-        await page.mount(`<ds-counter label="Label" value="3"></ds-counter>`);
-        const counter = new DsCounter(page.locator('ds-counter'));
-        await counter.increaseButton.evaluate(el => { var _a, _b; return (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus(); });
-        await page.keyboard.press('ArrowDown');
-        await page.waitForChanges();
-        await counter.assertValue('2');
-    });
-});
-test.describe('focus coalescing', () => {
-    test('does not emit dsBlur when tabbing between the two buttons', async ({ page }) => {
-        await page.mount(`<ds-counter label="Label" value="3"></ds-counter>`);
-        const counter = new DsCounter(page.locator('ds-counter'));
-        const focusSpy = await counter.el.spyOnEvent('dsFocus');
-        const blurSpy = await counter.el.spyOnEvent('dsBlur');
-        await counter.decreaseButton.evaluate(el => { var _a, _b; return (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus(); });
-        await page.keyboard.press('Tab');
-        await page.waitForChanges();
-        expect(focusSpy).toHaveReceivedEventTimes(2);
-        expect(blurSpy).toHaveReceivedEventTimes(0);
-    });
-    test('emits dsBlur once when focus leaves the widget entirely', async ({ page }) => {
-        await page.mount(`
-      <ds-counter label="Label" value="3"></ds-counter>
-      <button data-testid="outside">Outside</button>
-    `);
-        const counter = new DsCounter(page.locator('ds-counter'));
-        const blurSpy = await counter.el.spyOnEvent('dsBlur');
-        await counter.increaseButton.evaluate(el => { var _a, _b; return (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus(); });
-        await page.getByTestId('outside').focus();
-        await page.waitForChanges();
-        expect(blurSpy).toHaveReceivedEventTimes(1);
-    });
-});
-test.describe('form reset', () => {
-    test('resets to initial value', async ({ page }) => {
-        await page.mount(`
-      <form>
-        <ds-counter name="quantity" label="Quantity" value="3"></ds-counter>
-        <button type="reset" data-testid="reset">Reset</button>
-      </form>
-    `);
-        const counter = new DsCounter(page.locator('ds-counter'));
-        await counter.increase();
-        await counter.increase();
-        await counter.assertValue('5');
-        await page.getByTestId('reset').click();
-        await page.waitForChanges();
-        await counter.assertValue('3');
-    });
-});

package/dist/collection/components/counter/test/counter.visual.play.js

@@ -1,30 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import { expectScreenshot, screenshot, test } from "../../../../../../playwright/src/index";
-const TAG = 'counter';
-const VARIANTS = [
-    'basic',
-    'at-min',
-    'at-max',
-    'disabled',
-    'readonly',
-    'invalid',
-    'valid',
-    'warning',
-    'min-max',
-    'decimal-step',
-    'large-range',
-    'optional',
-    'form-reset',
-];
-const image = screenshot(TAG);
-test.beforeEach('Setup', async ({ page }) => {
-    await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
-});
-VARIANTS.forEach(variant => {
-    test(variant, async ({ page }) => {
-        const el = page.getByTestId(variant);
-        await expectScreenshot(el, image(variant));
-    });
-});

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

@@ -1,244 +0,0 @@
-/*!
- * (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: '7a783034db37d63ddd29c575e7e88f5bf01e9d33', class: {
-                'is-disabled': this.disabled,
-                'is-multiline': this.multiline,
-                'is-editable': this.editable,
-            } }, h("div", { key: '00204b38b8416a5ca2dd25a5d910fc45720ee316', 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: '49116f2f45cfa264887203e4f4388e3236285b0f', id: this.valueId, class: "value-container", "aria-labelledby": this.hasCustomLabel ? undefined : this.labelId }, h("slot", { key: '1c1208ad99a9a123c6a9110c3cd976a502bc5cca' }), this.editable && (h("ds-button", { key: '436610d80c748a0cefd4467b4b249c379b7932e4', 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.js

@@ -1,72 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import { __decorate, __metadata } from "tslib";
-import { h, Host } from "@stencil/core";
-import { Logger, Type } from "../../utils/index";
-/**
- * DataLabel is a label element for use within ds-data-item.
- * It displays a label with optional required indicator.
- *
- * @slot - The label text content.
- */
-export class DataLabel {
-    constructor() {
-        /**
-         * If `true` an asterisk is added after the label.
-         */
-        this.required = false;
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    render() {
-        return (h(Host, { key: '1c48dad53f4aafa7c27ff943b011c881376ccf69' }, h("slot", { key: '74709b6412e015b3f126c527189f3efc4c4e5ed1' }), this.required ? h("span", null, "*") : ''));
-    }
-    static get is() { return "ds-data-label"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["data-label.host.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["data-label.host.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` an asterisk is added after the label."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "required",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-}
-__decorate([
-    Logger('data-label'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], DataLabel.prototype, "createLogger", null);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], DataLabel.prototype, "required", void 0);

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

@@ -1,38 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import { __decorate, __metadata } from "tslib";
-import { h, Host } from "@stencil/core";
-import { Logger } from "../../utils/index";
-/**
- * DataValue is a value element for use within ds-data-item.
- * Pass-through slot container for value content.
- *
- * @slot - The value content (text, HTML, or custom elements).
- */
-export class DataValue {
-    createLogger(log) {
-        this.log = log;
-    }
-    render() {
-        return (h(Host, { key: 'ccacc7d7ecfc5a0801f8886fa2a70f4ebf8bc7e9' }, h("slot", { key: '98fb7da83d032dfce1b8ef9c5af4291aa80502e2' })));
-    }
-    static get is() { return "ds-data-value"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["data-value.host.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["data-value.host.css"]
-        };
-    }
-    static get elementRef() { return "el"; }
-}
-__decorate([
-    Logger('data-value'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], DataValue.prototype, "createLogger", null);