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

package/dist/collection/components/icon/icon.js

@@ -1,481 +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 camelCase from "lodash/camelCase";
-import upperFirst from "lodash/upperFirst";
-import { sanitizeSvg, fetchSvg, normalizeDeprecatedTShirtSize, Logger, hasValue, OneOf, Type, } from "../../utils/index";
-import { defaultConfig, ListenToConfig } from "../../global/index";
-import { ICON_COLORS, ICON_SIZES } from "./icon.interfaces";
-/**
- * Icon displays SVG icons with customizable color, size, rotation, and optional tile background.
- *
- * @part icon - The SVG icon element wrapper.
- */
-export class Icon {
-    constructor() {
-        this._fetchedSrc = '';
-        this.icons = defaultConfig.icons;
-        this.svgContent = '';
-        /**
-         * PUBLIC API
-         * ------------------------------------------------------
-         */
-        /**
-         * Name of the baloise icon.
-         */
-        this.name = '';
-        /**
-         * Svg content.
-         */
-        this.svg = '';
-        /**
-         * URL of an SVG file to fetch and display.
-         */
-        this.src = '';
-        /**
-         * If `true` the icon has display inline style
-         */
-        this.inline = false;
-        /**
-         * If `true` the icon is inverted
-         */
-        this.inverted = false;
-        /**
-         * If `true` the icon is rotated 180deg
-         */
-        this.turn = false;
-        /**
-         * If `true` adds a box shadow to improve readability on image background
-         * */
-        this.shadow = false;
-        /**
-         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
-         */
-        this.disabled = false;
-        /**
-         * If `true` the component gets a invalid red style.
-         */
-        this.invalid = false;
-        /**
-         * PRIVATE METHODS
-         * ------------------------------------------------------
-         */
-        this.generateSvgContent = async (iconName) => {
-            const hasIcons = Object.keys(this.icons).length > 0;
-            if (hasIcons && iconName && iconName.length > 0) {
-                const icon = this.icons[`Icon${upperFirst(camelCase(iconName))}`];
-                if (icon) {
-                    if (icon !== this.svgContent) {
-                        this.svgContent = icon;
-                    }
-                    return;
-                }
-                else {
-                    console.error(`Icon "${iconName}" not found in design system configuration.`, '\n\nCheck out the documentation on how to import icons during initialization.', '\nhttps://design.baloise.dev/?path=/docs/components-data-display-icon--documentation&globals=framework:angular#import-during-initialization');
-                }
-            }
-            if (this.src && this.src !== this._fetchedSrc) {
-                this._fetchedSrc = this.src;
-                this.svgContent = await fetchSvg(this.src);
-                return;
-            }
-            if (this.svg) {
-                const sanitized = sanitizeSvg(this.svg);
-                if (sanitized !== this.svgContent) {
-                    this.svgContent = sanitized;
-                }
-            }
-        };
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    /**
-     * LIFE CYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        // generateSvgContent is async; for src-based icons the first render shows nothing
-        // while the fetch is in flight. The @State update triggers a follow-up render.
-        this.generateSvgContent(this.name);
-    }
-    async componentWillRender() {
-        await this.generateSvgContent(this.name);
-    }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    /**
-     * @internal define config for the component
-     */
-    async configChanged(state) {
-        this.icons = state.icons;
-        await this.generateSvgContent(this.name);
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const size = normalizeDeprecatedTShirtSize(this.size) || '';
-        return (h(Host, { key: '72b9d71b2cb222fd9e0f0bd32f493cc72bd0e443', "aria-hidden": "true", class: {
-                'is-filled': !this.svg && !this.src,
-                [`is-${this.color}`]: hasValue(this.color),
-                [`is-${size}`]: hasValue(this.size),
-                [`turn-${this.name}`]: this.turn,
-                'is-inverted': this.inverted,
-                'is-inline': this.inline,
-                'has-shadow': this.shadow,
-                'is-disabled': this.disabled,
-                'is-invalid': this.invalid,
-            } }, h("div", { key: '3eacfe777c17e5ab80e66ccd60341e31eba11839', id: "inner", part: "inner", innerHTML: this.svgContent })));
-    }
-    static get is() { return "ds-icon"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["icon.host.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["icon.host.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Name of the baloise icon."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "name",
-                "defaultValue": "''"
-            },
-            "svg": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Svg content."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "svg",
-                "defaultValue": "''"
-            },
-            "src": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "URL of an SVG file to fetch and display."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "src",
-                "defaultValue": "''"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconSize",
-                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | undefined",
-                    "references": {
-                        "IconSize": {
-                            "location": "import",
-                            "path": "./icon.interfaces",
-                            "id": "src/components/icon/icon.interfaces.ts::IconSize",
-                            "referenceLocation": "IconSize"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Defines the size of the icon."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "size"
-            },
-            "color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconColor",
-                    "resolved": "\"danger\" | \"grey\" | \"info\" | \"primary\" | \"success\" | \"warning\" | undefined",
-                    "references": {
-                        "IconColor": {
-                            "location": "import",
-                            "path": "./icon.interfaces",
-                            "id": "src/components/icon/icon.interfaces.ts::IconColor",
-                            "referenceLocation": "IconColor"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The theme type of the button."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "color"
-            },
-            "inline": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the icon has display inline style"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "inline",
-                "defaultValue": "false"
-            },
-            "inverted": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the icon is inverted"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "inverted",
-                "defaultValue": "false"
-            },
-            "turn": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the icon is rotated 180deg"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "turn",
-                "defaultValue": "false"
-            },
-            "shadow": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` adds a box shadow to improve readability on image background"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "shadow",
-                "defaultValue": "false"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "invalid": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the component gets a invalid red style."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "invalid",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "icons": {},
-            "svgContent": {}
-        };
-    }
-    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": [{
-                            "name": "internal",
-                            "text": "define config for the component"
-                        }]
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-}
-__decorate([
-    Logger('icon'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], Icon.prototype, "createLogger", null);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Icon.prototype, "name", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Icon.prototype, "svg", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Icon.prototype, "src", void 0);
-__decorate([
-    OneOf(ICON_SIZES),
-    __metadata("design:type", Object)
-], Icon.prototype, "size", void 0);
-__decorate([
-    OneOf(ICON_COLORS),
-    __metadata("design:type", Object)
-], Icon.prototype, "color", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Icon.prototype, "inline", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Icon.prototype, "inverted", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Icon.prototype, "turn", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Icon.prototype, "shadow", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Icon.prototype, "disabled", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Icon.prototype, "invalid", void 0);
-__decorate([
-    ListenToConfig(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Promise)
-], Icon.prototype, "configChanged", null);

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

@@ -1,8 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import { test } from "../../../../../../playwright/src/index";
-test('basic', async ({ page, a11y }) => {
-    await page.mount(`<ds-icon name="check"></ds-icon>`);
-    await a11y('ds-icon');
-});

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

@@ -1,35 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import { DsIcon, expect, test } from "../../../../../../playwright/src/index";
-test.describe('component', () => {
-    test('should be visible', async ({ page }) => {
-        await page.mount(`
-      <ds-icon name="plus"></ds-icon>
-    `);
-        const dsIcon = new DsIcon(page.locator('ds-icon'));
-        await dsIcon.assertToBeVisible();
-    });
-    test('renders SVG fetched from src URL', async ({ page }) => {
-        const svgBody = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>';
-        await page.route('**/test-brand-icon.svg', async (route) => {
-            await route.fulfill({ contentType: 'image/svg+xml', body: svgBody });
-        });
-        await page.mount(`<ds-icon src="/test-brand-icon.svg"></ds-icon>`);
-        const dsIcon = new DsIcon(page.locator('ds-icon'));
-        await dsIcon.assertToBeVisible();
-        await expect(page.locator('ds-icon')).not.toHaveClass(/is-filled/);
-        const inner = page.locator('ds-icon').locator('[part="inner"]');
-        await expect(inner.locator('circle')).toBeVisible();
-    });
-    test('renders nothing when src fetch fails', async ({ page }) => {
-        await page.route('**/missing-icon.svg', async (route) => {
-            await route.fulfill({ status: 404, body: 'Not Found' });
-        });
-        await page.mount(`<ds-icon src="/missing-icon.svg"></ds-icon>`);
-        // eslint-disable-next-line playwright/no-networkidle
-        await page.waitForLoadState('networkidle');
-        const inner = page.locator('ds-icon').locator('[part="inner"]');
-        await expect(inner).toBeEmpty();
-    });
-});

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

@@ -1,16 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import { expectScreenshot, screenshot, test } from "../../../../../../playwright/src/index";
-const TAG = 'icon';
-const VARIANTS = ['basic', 'override', 'inline', 'svg-content', 'shadow', 'turn', 'colors', 'states', 'sizes'];
-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/input/field.util.js

@@ -1,14 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import { h, Host } from "@stencil/core";
-import { ariaBooleanToString } from "../../utils/index";
-import { I18nDsLabel } from "../label/label.i18n";
-export const Field = (props, children) => {
-    var _a;
-    const inputId = (_a = props.inputId) !== null && _a !== void 0 ? _a : 'input';
-    const role = props.role === 'fieldset' ? 'group' : undefined;
-    const RoleTag = props.role === 'fieldset' ? 'fieldset' : 'div';
-    return (h(Host, { class: Object.assign({ 'ds-field ': true, 'is-disabled': !!props.disabled, 'is-danger': props.color === 'danger' || !!props.invalid, 'is-success': props.color === 'success' && !props.invalid, 'is-warning': props.color === 'warning' && !props.invalid }, props.cssClasses) }, h(RoleTag, { id: "inner", part: "inner", role: role, "aria-disabled": ariaBooleanToString(props.disabled), "aria-invalid": ariaBooleanToString(props.invalid), "aria-labelledby": "label", "aria-describedby": "description", onClick: (ev) => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, ev); } }, props.label &&
-        (props.role === 'fieldset' ? (h("legend", { part: "label", id: "label" }, h("slot", { name: "label" }, props.label), !props.required && h("span", null, I18nDsLabel[props.language].optional || ''))) : (h("label", { htmlFor: inputId, part: "label", id: "label" }, h("slot", { name: "label" }, props.label), !props.required && h("span", null, I18nDsLabel[props.language].optional || '')))), h("div", { id: "container", part: "control" }, h("slot", { name: "start" }), children, h("slot", { name: "end" }), props.loading === true && (h("ds-spinner", { size: "sm", variation: "circle", color: props.disabled ? 'inverted' : 'primary' }))), props.label && (h("span", { id: "description", part: "description", role: props.invalid && props.invalidText ? 'alert' : undefined }, props.invalid && props.invalidText && h("ds-icon", { name: "alert" }), props.invalid ? (h("slot", { name: "invalid-text" }, props.invalidText || props.description)) : (h("slot", { name: "description" }, props.description)))))));
-};