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

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

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { Logger, ValidateType, setupValidation } from "../../utils/index";
+import { Logger, Type } from "../../utils/index";
 /**
  * List renders semantic HTML list elements (ordered or unordered) for grouping related items.
  *
@@ -24,20 +24,13 @@ export class List {
     createLogger(log) {
         this.log = log;
     }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        setupValidation(this);
-    }
     /**
      * RENDER
      * ------------------------------------------------------
      */
     render() {
         const ListTag = this.ordered ? 'ol' : 'ul';
-        return (h(Host, { key: '18629843f974b02e26afe29cd7d5278584edc245' }, h(ListTag, { key: '060b9f41ace665ea569587301490133ade7445f8', id: "list", part: "list" }, h("slot", { key: '97b6992fb146d134db8ade31bd580d9fd6955253' }))));
+        return (h(Host, { key: '915a10d31287e37f5c441d3717d724f654030415' }, h(ListTag, { key: '8d9813dde9199fc414bdc05878a4f6ba54553eb8', id: "list", part: "list" }, h("slot", { key: '523bc1c0172e9ed3af963610e417bc522672ded5' }))));
     }
     static get is() { return "ds-list"; }
     static get encapsulation() { return "shadow"; }
@@ -84,6 +77,6 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], List.prototype, "createLogger", null);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], List.prototype, "ordered", void 0);

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

@@ -0,0 +1,30 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { expectScreenshot, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'list';
+const VARIANTS = ['basic', 'ordered', 'linked', 'download', 'accordion', 'nested-accordion'];
+const image = screenshot(TAG);
+test.describe('style', () => {
+    test.beforeEach('Setup', async ({ page }) => {
+        await page.setupVisualTest(`/components/${TAG}/test/${TAG}.style.html`);
+    });
+    VARIANTS.forEach(variant => {
+        test(variant, async ({ page }) => {
+            const el = page.getByTestId(variant);
+            await expectScreenshot(el, image(`style-${variant}`));
+        });
+    });
+});
+const VARIANTS_HOST = ['basic', 'ordered', 'linked', 'download', 'accordion', 'nested-accordion'];
+test.describe('host', () => {
+    test.beforeEach('Setup', async ({ page }) => {
+        await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+    });
+    VARIANTS_HOST.forEach(variant => {
+        test(variant, async ({ page }) => {
+            const el = page.getByTestId(variant);
+            await expectScreenshot(el, image(variant));
+        });
+    });
+});

package/dist/collection/components/logo/logo.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { dsBreakpoints, ListenToBreakpoints, rOnLoad, normalizeDeprecatedTShirtSize, Logger, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { dsBreakpoints, ListenToBreakpoints, rOnLoad, normalizeDeprecatedTShirtSize, Logger, OneOf, Type, } from "../../utils/index";
 import { ListenToConfig } from "../../global/index";
 import { LogoBaloise, LogoHelvetia } from "./logo.icons";
 import { LOGO_BRANDS, LOGO_COLORS, LOGO_SIZES } from "./logo.interfaces";
@@ -47,16 +47,11 @@ export class Logo {
             this.destroyAnimation();
         }
     }
-    sizeChanged(newValue) {
-        this.size = normalizeDeprecatedTShirtSize(newValue);
-    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
     connectedCallback() {
-        setupValidation(this);
-        this.size = normalizeDeprecatedTShirtSize(this.size);
         this.animatedChanged();
     }
     componentDidUpdate() {
@@ -143,13 +138,14 @@ export class Logo {
      * ------------------------------------------------------
      */
     render() {
+        const size = normalizeDeprecatedTShirtSize(this.size) || '';
         const LogoElement = this.brand === 'helvetia' || (this.brand === '' && this.configBrand === 'helvetia') ? (h(LogoHelvetia, { onlyText: this.animated, height: this.getHeight() })) : (h(LogoBaloise, { onlyText: this.animated, height: this.getHeight() }));
-        return (h(Host, { key: 'ac324310cb087df2dab4ae68f10b29750d51f4da', class: {
+        return (h(Host, { key: '549891bcf54e833cc226fecd178f6aabbfd8bcfa', class: {
                 'is-animated': this.isAnimated,
                 'is-white': this.color === 'white',
-                'is-sm': this.size === 'sm',
-                'is-lg': this.size === 'lg',
-            } }, h("div", { key: '91aac5fbf1a66d6706be717f514fc62ac9cfc1b3', id: "animated", part: "animated", ref: el => (this.animatedLogoElement = el), "aria-hidden": "true", style: {
+                'is-sm': size === 'sm',
+                'is-lg': size === 'lg',
+            } }, h("div", { key: '91dd1d3eb07ee2b0da7396558137dde63bcde0da', id: "animated", part: "animated", ref: el => (this.animatedLogoElement = el), "aria-hidden": "true", style: {
                 display: this.isAnimated ? 'block' : 'none',
                 width: this.getHeight() + 'px',
                 height: this.getHeight() + 'px',
@@ -245,7 +241,7 @@ export class Logo {
             },
             "size": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "LogoSize",
                     "resolved": "\"\" | \"large\" | \"lg\" | \"sm\" | \"small\"",
@@ -318,9 +314,6 @@ export class Logo {
         return [{
                 "propName": "animated",
                 "methodName": "animatedChanged"
-            }, {
-                "propName": "size",
-                "methodName": "sizeChanged"
             }];
     }
 }
@@ -331,19 +324,19 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Logo.prototype, "createLogger", null);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Logo.prototype, "animated", void 0);
 __decorate([
-    ValidateOneOf(...LOGO_BRANDS),
+    OneOf(LOGO_BRANDS),
     __metadata("design:type", String)
 ], Logo.prototype, "brand", void 0);
 __decorate([
-    ValidateOneOf(...LOGO_COLORS),
+    OneOf(LOGO_COLORS),
     __metadata("design:type", String)
 ], Logo.prototype, "color", void 0);
 __decorate([
-    ValidateOneOf(...LOGO_SIZES),
+    OneOf(LOGO_SIZES),
     __metadata("design:type", String)
 ], Logo.prototype, "size", void 0);
 __decorate([

package/dist/collection/components/modal/modal-body/modal-body.host.css

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

package/dist/collection/components/modal/modal-body/modal-body.js

@@ -0,0 +1,41 @@
+/*!
+ * (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";
+/**
+ * Modal Body renders the content area of a ds-modal. Place it as a direct child of ds-modal.
+ *
+ * @slot - The modal body content.
+ */
+export class ModalBody {
+    createLogger(log) {
+        this.log = log;
+    }
+    connectedCallback() {
+        this.el.slot = 'body';
+    }
+    render() {
+        return (h(Host, { key: '2e1c21ff62b36dc89b1589174b3ede2979eeb384' }, h("slot", { key: 'd1bb0237d1ac252c645da88b7375500b01c14ae1' })));
+    }
+    static get is() { return "ds-modal-body"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["modal-body.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["modal-body.host.css"]
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+__decorate([
+    Logger('modal-body'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], ModalBody.prototype, "createLogger", null);

package/dist/collection/components/modal/modal-header/modal-header.js

@@ -0,0 +1,32 @@
+/*!
+ * (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";
+/**
+ * Modal Header renders the title area of a ds-modal. Place it as a direct child of ds-modal.
+ * Intentionally uses light DOM (no shadow) so that ds-modal's aria-labelledby can resolve
+ * the heading text through the slot chain without crossing shadow boundaries.
+ *
+ * @slot - The modal title text.
+ */
+export class ModalHeader {
+    createLogger(log) {
+        this.log = log;
+    }
+    connectedCallback() {
+        this.el.slot = 'header';
+    }
+    render() {
+        return (h(Host, { key: '05b088ad50f8c43b72b855cb240d0c2ca2b9466c', style: { display: 'contents' } }, h("slot", { key: '729c1b5a1891548bb0fe4436ae3d04c7cc7f1c10' })));
+    }
+    static get is() { return "ds-modal-header"; }
+    static get elementRef() { return "el"; }
+}
+__decorate([
+    Logger('modal-header'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], ModalHeader.prototype, "createLogger", null);

package/dist/collection/components/modal/modal.controller.js

@@ -0,0 +1,31 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { dsBrowser, getAppRoot } from "../../utils/index";
+class ModalControllerImpl {
+    async create(options = {}) {
+        const element = document.createElement('ds-modal');
+        if (options.modalWidth !== undefined)
+            element.modalWidth = options.modalWidth;
+        if (options.closable !== undefined)
+            element.closable = options.closable;
+        const root = getAppRoot(document);
+        root.appendChild(element);
+        await element.present();
+        return element;
+    }
+    async dismiss(id) {
+        if (!dsBrowser.hasDocument)
+            return;
+        const selector = id ? `ds-modal#${id}` : 'ds-modal[open]';
+        const modal = document.querySelector(selector);
+        await (modal === null || modal === void 0 ? void 0 : modal.dismiss());
+    }
+    async dismissAll() {
+        if (!dsBrowser.hasDocument)
+            return;
+        const modals = Array.from(document.querySelectorAll('ds-modal[open]'));
+        await Promise.all(modals.map(m => m.dismiss()));
+    }
+}
+export const dsModalController = new ModalControllerImpl();

package/dist/collection/components/modal/modal.host.css

@@ -0,0 +1 @@
+:host{--_modal-background: var(--modal-background, var(--mod-modal-background, var(--ds-modal-color-base-background)));--_modal-radius: var(--modal-radius, var(--mod-modal-radius, var(--ds-modal-radius-base)));--_modal-backdrop-opacity: var(--modal-backdrop-opacity, var(--mod-modal-backdrop-opacity, var(--ds-backdrop-opacity)));--_modal-heading-family: var(--modal-heading-family, var(--mod-modal-heading-family, var(--ds-modal-heading-family)));--_modal-heading-weight: var(--modal-heading-weight, var(--mod-modal-heading-weight, var(--ds-modal-heading-weight)));--_modal-heading-size: var(--modal-heading-size, var(--mod-modal-heading-size, var(--ds-modal-heading-size-device)));--_modal-heading-line-height: var(--modal-heading-line-height, var(--mod-modal-heading-line-height, var(--ds-modal-heading-line-height)));--_modal-width: var(--modal-width, var(--mod-modal-width, var(--ds-modal-width)));display:contents}:host dialog{all:unset;box-sizing:border-box;position:fixed;top:50%;left:50%;display:flex;flex-direction:column;width:calc(100% - 1rem);max-height:calc(100vh - 1rem);overflow:hidden;background:var(--_modal-background);border-radius:var(--_modal-radius);padding:1rem;opacity:0;transform:translate(-50%, calc(-50% - 1rem));pointer-events:none}@media screen and (min-width: 769px){:host dialog{width:var(--_modal-width);max-height:calc(100vh - 6rem);padding:1.5rem}}@media screen and (min-width: 1024px){:host dialog{padding:2.5rem}}:host(.is-open) dialog{opacity:1;transform:translate(-50%, -50%);pointer-events:auto}:host(.is-animated) dialog{transition:opacity 300ms ease,transform 300ms ease}@media(prefers-reduced-motion: reduce){:host dialog{transition:none !important}}:host dialog::backdrop{background-color:rgba(0,7,57,.5);backdrop-filter:blur(4px);opacity:var(--_modal-backdrop-opacity)}:host(.is-fullscreen) dialog{top:0;left:0;width:100%;max-height:100%;height:100%;border-radius:0;transform:translateY(1rem)}:host(.is-fullscreen.is-open) dialog{transform:translateY(0)}:host ds-close{position:absolute;top:1rem;right:1rem}@media screen and (min-width: 769px){:host ds-close{top:1.5rem;right:1.5rem}}@media screen and (min-width: 1024px){:host ds-close{top:2.5rem;right:2.5rem}}:host #modal-title{padding-right:3rem;margin:0 0 1rem;font-family:var(--_modal-heading-family);font-weight:var(--_modal-heading-weight);font-size:var(--_modal-heading-size);line-height:var(--_modal-heading-line-height)}@media screen and (min-width: 769px){:host #modal-title{padding-right:3.5rem;margin-bottom:1.5rem}}@media screen and (min-width: 1024px){:host #modal-title{padding-right:4.5rem;margin-bottom:2.5rem}}:host #modal-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px){:host #modal-body{margin-left:-1.5rem;margin-right:-1.5rem;padding-left:1.5rem;padding-right:1.5rem}}@media screen and (min-width: 1024px){:host #modal-body{margin-left:-2.5rem;margin-right:-2.5rem;padding-left:2.5rem;padding-right:2.5rem}}:host #modal-actions{display:flex;justify-content:flex-end;gap:.5rem;flex-wrap:wrap;margin-top:1rem}@media screen and (min-width: 769px){:host #modal-actions{margin-top:1.5rem}}@media screen and (min-width: 1024px){:host #modal-actions{margin-top:2.5rem}}:host #modal-actions:empty{display:none}::slotted(*){display:block}

package/dist/collection/components/modal/modal.interfaces.js

@@ -0,0 +1 @@
+export {};