@lmvz-ds/components 0.11.4

package/dist/collection/components/lmvz-chip/lmvz-chip.js

@@ -0,0 +1,42 @@
+import { Host, h } from "@stencil/core";
+export class LmvzChip {
+    text;
+    render() {
+        return h(Host, { key: 'b247f41d22bcf77998bf5a49669f1aa8d7fd3a63' }, this.text);
+    }
+    static get is() { return "lmvz-chip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lmvz-chip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-chip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text"
+            }
+        };
+    }
+}

package/dist/collection/components/lmvz-header/lmvz-header.css

@@ -0,0 +1,49 @@
+/* @import url('../../styles/internal/define-layers.css'); */
+
+:host {
+  display: flex;
+  /* TODO: why does it overflow on smaller screens? */
+  width: 100vw;
+  flex-direction: row;
+  align-items: center;
+  box-sizing: border-box;
+
+  background-color: var(--lmvz-semantic-color-surface-primary, #ffffff);
+
+  --lmvz-header-x-spacing-level-1: var(--lmvz-dimension-8-28, clamp(0.5rem, 0.2rem + 1.29vw, 1.75rem));
+  --lmvz-header-x-spacing-level-2: var(--lmvz-component-buttongroup-wrapper-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
+
+  padding: var(--lmvz-dimension-8-16, clamp(0.5rem, 0.38rem + 0.52vw, 1rem)) var(--lmvz-header-x-spacing-level-1);
+  gap: var(--lmvz-header-x-spacing-level-1);
+
+  .brand {
+    /* min-width: var(--lmvz-dimension-48-96); */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  #fallback-logo-lmvz {
+    height: 34px;
+    width: auto;
+  }
+
+  nav {
+    flex-grow: 1;
+  }
+
+  .primary-menubar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .secondary-menubar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    /* gap: var(--lmvz-component-buttongroup-wrapper-gap-x); */
+    margin-left: var(--lmvz-header-x-spacing-level-2);
+    padding-left: var(--lmvz-header-x-spacing-level-2);
+    border-left: 1px solid var(--lmvz-semantic-color-border-default, #e0e0e0);
+  }
+}

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

@@ -0,0 +1,138 @@
+import { h, Host } from "@stencil/core";
+import { ListKeyboardNavigationController } from "../../utils/list-keyboard-controller";
+import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+import { AriaValidationController } from "../../utils/validation/aria-validation-controller";
+export class LmvzHeader extends ReactiveControllerHost {
+    el;
+    primarySlot;
+    secondarySlot;
+    secondaryNav;
+    keyboardNavigationController = new ListKeyboardNavigationController(this);
+    get primaryMenuitems() {
+        return this.primarySlot.assignedElements({ flatten: false });
+    }
+    get secondaryMenuitems() {
+        return this.secondarySlot.assignedElements({ flatten: true });
+    }
+    get role() {
+        return 'banner';
+    }
+    lmvzActiveNav;
+    get secondarySlotName() {
+        return `connect-nav-${this.lmvzActiveNav}`;
+    }
+    constructor() {
+        super();
+        this.addController(new AriaValidationController(this, { reValidateOnPropChanges: true }));
+        this.addController(this.keyboardNavigationController);
+    }
+    handleActiveNavChange() {
+        this.updateElementsActive();
+    }
+    componentDidLoad() {
+        this.primarySlot.addEventListener('slotchange', this.handlePrimaryNavChange.bind(this));
+        this.handlePrimaryNavChange();
+        this.secondarySlot.addEventListener('slotchange', this.handleSecondaryNavChange.bind(this));
+    }
+    handlePrimaryNavChange() {
+        const items = this.primaryMenuitems;
+        if (!items.length) {
+            console.warn('Primary slot has no assigned elements. Please add navigation items to the primary slot.');
+            return;
+        }
+        items.forEach(el => {
+            el.setAttribute('aria-haspopup', 'true');
+            el.setAttribute('aria-controls', `nav-secondary`);
+        });
+        this.updateElementsActive();
+    }
+    handleSecondaryNavChange() {
+        const items = this.secondaryMenuitems;
+        if (!items.length) {
+            return;
+        }
+        this.keyboardNavigationController.updateElements([...this.primaryMenuitems, ...this.secondaryMenuitems]);
+    }
+    updateElementsActive() {
+        const items = this.primaryMenuitems;
+        let label;
+        items.forEach(el => {
+            const isActive = el.id === this.lmvzActiveNav;
+            if (isActive)
+                label = el.textContent || el.id;
+            el.setAttribute('aria-expanded', isActive ? 'true' : 'false');
+        });
+        this.secondaryNav.setAttribute('aria-label', `Untermenü für ${label}`);
+    }
+    delegateFocus() {
+        const firstFocusable = this.primaryMenuitems[0];
+        if (firstFocusable) {
+            firstFocusable.focus();
+        }
+    }
+    render() {
+        return (h(Host, { key: '58934683ff442801eb34f025ac809631f93a27e8', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '35d3eadfabb70f83b313f946c8d31f9c223e8344', class: "brand" }, h("slot", { key: '5ce98314d980d63e1c87f508d96119aca2e702a9', name: "brand" }, h("lmvz-icon", { key: 'b24e61a9071d81948d506a8c545e012d3f0e5dd2', id: "fallback-logo-lmvz", icon: "Logo", size: "inherit", "aria-label": "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '1d5cc9010ef90e6cebc8a7b054db595f35f9e040', "aria-label": "Hauptnavigation" }, h("div", { key: '488a1b1544242562b57d76169f1988d84c611de4', role: "menubar", class: "primary-menubar" }, h("slot", { key: '59c6dd1442290931ed9a55f7bacc65ea4bb9ff6d', name: "nav-primary", ref: el => (this.primarySlot = el) }), h("separator", { key: '2729f0e8b115614c50c4a16b6684a3bdb21856b8' }), h("div", { key: '6b5bed5951bad9173fefdc78039e71c4ccc120b2', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: el => (this.secondaryNav = el) }, h("slot", { key: '02f5a13e8851372c1698e3f786a8757a0a09c32f', name: this.secondarySlotName, ref: el => (this.secondarySlot = el) })))), h("div", { key: '53aafe8139bcea27d3039f64a48974cdb5aac5f9', class: "actions" }, h("slot", { key: 'f12ee19831073253e6ba8e251ba31ec403c21035', name: "actions" }))));
+    }
+    static get is() { return "lmvz-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./lmvz-header.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "role": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": true,
+                "setter": false,
+                "reflect": true,
+                "attribute": "role",
+                "defaultValue": "'banner'"
+            },
+            "lmvzActiveNav": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lmvz-active-nav"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "lmvzActiveNav",
+                "methodName": "handleActiveNavChange"
+            }];
+    }
+}

package/dist/collection/components/lmvz-icon/icons.js

@@ -0,0 +1,36 @@
+import { Cache, Duration, Effect } from "effect";
+import { httpClient, responseAsText } from "../../utils/http";
+import { createAssetUrlWithBasePath } from "../../utils/url";
+import { createValidSVGString, SVGString } from "../../utils/validation/svg";
+export const emptyDefaultSvg = () => SVGString(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>`);
+const createIconCache = () => Cache.make({
+    capacity: 200,
+    timeToLive: Duration.infinity,
+    lookup: (key) => Effect.gen(function* () {
+        const name = key;
+        const assetPath = yield* createAssetUrlWithBasePath(`./icons/${name}.svg`);
+        const res = yield* httpClient(assetPath);
+        const responseString = yield* responseAsText(res);
+        return yield* createValidSVGString(responseString);
+    }),
+});
+let cacheInstance = null;
+export function fetchIconSvg(name) {
+    const key = name;
+    return Effect.gen(function* () {
+        if (!cacheInstance) {
+            cacheInstance = yield* createIconCache();
+        }
+        return yield* cacheInstance.get(key);
+    });
+}
+export function clearIconCache() {
+    return Effect.gen(function* () {
+        if (cacheInstance) {
+            yield* cacheInstance.invalidateAll;
+        }
+        else {
+            Effect.logWarning('Attempted to clear icon cache before it was initialized');
+        }
+    });
+}

package/dist/collection/components/lmvz-icon/lmvz-icon.css

@@ -0,0 +1,82 @@
+:host {
+  /**
+   * @prop --lmvz-icon-color: The icon's color. This is inferred from the context (e.g. button) but can be overridden if needed, or when the icon is used standalone.
+   */
+  --lmvz-icon-color: var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));
+
+  display: inline-block;
+
+  /* prevent additional whitespace */
+  line-height: 0;
+
+  svg {
+    display: block;
+  }
+
+  svg > path {
+    stroke: var(--lmvz-icon-color);
+    fill: none;
+  }
+}
+
+:host([size='xs']) {
+  svg {
+    width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+    height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+  }
+}
+
+:host([size='sm']) {
+  svg {
+    width: var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.81rem + 0.26vw, 1.13rem));
+    height: var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.81rem + 0.26vw, 1.13rem));
+  }
+}
+
+:host([size='md']) {
+  svg {
+    width: var(--lmvz-component-icon-size-md, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
+    height: var(--lmvz-component-icon-size-md, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
+  }
+}
+
+:host([size='lg']) {
+  svg {
+    width: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.38rem + 0.52vw, 2rem));
+    height: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.38rem + 0.52vw, 2rem));
+  }
+}
+
+:host([size='inherit']) {
+  svg {
+    width: inherit;
+    height: inherit;
+  }
+}
+
+:host([weight='light']) {
+  svg > path {
+    stroke-width: 1;
+  }
+}
+
+:host([weight='medium']) {
+  svg > path {
+    /* TODO: use semantic token */
+    stroke-width: 1.5;
+  }
+}
+
+:host([weight='bold']) {
+  svg > path {
+    /* TODO: use semantic token */
+    stroke-width: 2;
+  }
+}
+
+:host([weight='filled']) {
+  svg > path {
+    stroke-width: 2;
+    fill: var(--lmvz-icon-color);
+  }
+}

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

@@ -0,0 +1,191 @@
+import { Build, h, Host } from "@stencil/core";
+import { Effect } from "effect";
+import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+import { AriaValidationController } from "../../utils/validation/aria-validation-controller";
+import { emptyDefaultSvg, fetchIconSvg } from "./icons";
+export class LmvzIcon extends ReactiveControllerHost {
+    intersectionObserver;
+    el;
+    icon;
+    weight = 'medium';
+    size = 'md';
+    iconData;
+    visible = false;
+    ariaLabel;
+    get ariaHidden() {
+        return !this.ariaLabel;
+    }
+    constructor() {
+        super();
+        this.addController(new AriaValidationController(this));
+    }
+    connectedCallback() {
+        this.waitUntilVisible(() => {
+            this.visible = true;
+            this.loadIconPathData();
+        });
+    }
+    disconnectedCallback() {
+        if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+            this.intersectionObserver = null;
+        }
+    }
+    async loadIconPathData() {
+        const { icon, visible } = this;
+        if (!Build.isBrowser || !icon || !visible) {
+            return;
+        }
+        this.iconData = await Effect.runPromise(fetchIconSvg(this.icon).pipe(Effect.tapError(error => Effect.logError(`Error loading icon "${icon}":`, error.message, error.cause, error.stack)), Effect.catchAll(() => Effect.succeed(emptyDefaultSvg()))));
+    }
+    render() {
+        return h(Host, { key: '50d0f96ec5085a47ca7783e5232dfb503fa32d29', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
+    }
+    waitUntilVisible(callback, rootMargin = 50) {
+        if (!Build.isBrowser || typeof window === 'undefined' || !window.IntersectionObserver) {
+            callback();
+            return;
+        }
+        this.intersectionObserver = new IntersectionObserver(entries => {
+            entries.some(entry => {
+                if (entry.isIntersecting) {
+                    this.intersectionObserver.disconnect();
+                    this.intersectionObserver = null;
+                    callback();
+                    return true;
+                }
+                return false;
+            });
+        }, { rootMargin: `${rootMargin}px` });
+        this.intersectionObserver.observe(this.el);
+    }
+    static get is() { return "lmvz-icon"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lmvz-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-icon.css"]
+        };
+    }
+    static get assetsDirs() { return ["../../assets/icons"]; }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Icon.IconName",
+                    "resolved": "\"Logo\" | \"actions\" | \"adduser\" | \"alert\" | \"apple\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"book\" | \"bookmark\" | \"checkmark\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"close-l\" | \"close-sm\" | \"cog\" | \"computer\" | \"dashboard\" | \"delete\" | \"download\" | \"edit\" | \"external\" | \"facebook\" | \"favorite\" | \"filter\" | \"group\" | \"hide\" | \"home\" | \"info\" | \"instagram\" | \"letter\" | \"linkedin\" | \"logout\" | \"map\" | \"minus\" | \"navigation\" | \"plus\" | \"qr-scan\" | \"question\" | \"reader\" | \"reset\" | \"school\" | \"search\" | \"send\" | \"settings\" | \"share\" | \"shopping-cart\" | \"show\" | \"snapchat\" | \"sort\" | \"speech-bubble\" | \"star\" | \"student\" | \"upload\" | \"user\" | \"warn-circle\" | \"warn-triangle\" | \"whatsapp\" | \"world\" | \"x\" | \"youtube\"",
+                    "references": {
+                        "Icon": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::Icon",
+                            "referenceLocation": "Icon"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the icon to display (required)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "icon"
+            },
+            "weight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Icon.IconWeight",
+                    "resolved": "\"bold\" | \"filled\" | \"medium\" | \"thin\"",
+                    "references": {
+                        "Icon": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::Icon",
+                            "referenceLocation": "Icon"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The weight/style of the icon (optional, default is 'medium')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "weight",
+                "defaultValue": "'medium'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Icon.Size",
+                    "resolved": "\"inherit\" | \"lg\" | \"md\" | \"sm\" | \"xs\"",
+                    "references": {
+                        "Icon": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::Icon",
+                            "referenceLocation": "Icon"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the icon (optional, default is 'md')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "aria-label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "iconData": {},
+            "visible": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "icon",
+                "methodName": "loadIconPathData"
+            }];
+    }
+}

package/dist/collection/components/lmvz-icon/public.js

@@ -0,0 +1 @@
+export { clearIconCache } from './icons';

package/dist/collection/components/lmvz-icon/test/icons.unit.js

@@ -0,0 +1,89 @@
+import { Effect } from "effect";
+import { FetchError, ResponseTextError } from "../../../utils/http";
+import { BrandValidationError, SVGString } from "../../../utils/validation/svg";
+import { clearIconCache, emptyDefaultSvg, fetchIconSvg } from "../icons";
+describe('icon utils:', () => {
+    beforeAll(() => {
+        global.DOMParser = class {
+            parseFromString(str, type) {
+                return {
+                    documentElement: {
+                        nodeName: str.includes('<svg') ? 'svg' : 'not-svg',
+                    },
+                };
+            }
+        };
+    });
+    beforeEach(() => {
+        jest.resetAllMocks();
+        global.fetch = jest.fn();
+        return Effect.runPromise(clearIconCache());
+    });
+    const validSvg = '<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"></svg>';
+    const invalidSvg = '<div>not an svg</div>';
+    const iconName = 'actions';
+    function mockFetchSuccess(svg = validSvg) {
+        global.fetch.mockResolvedValueOnce({
+            text: () => Promise.resolve(svg),
+        });
+    }
+    function mockFetchFailure() {
+        global.fetch.mockRejectedValueOnce(new Error('fail'));
+    }
+    test('fetchIcon returns valid SVGString when fetch succeeds with valid SVG', async () => {
+        mockFetchSuccess(validSvg);
+        const result = await Effect.runPromise(fetchIconSvg(iconName));
+        expect(result).toContain('<svg');
+        expect(result).not.toBe(emptyDefaultSvg());
+    });
+    test('fetchIcon throws a specific FetchError when fetch fails', async () => {
+        mockFetchFailure();
+        const res = await Effect.runPromise(fetchIconSvg(iconName).pipe(Effect.flip));
+        expect(res).toBeInstanceOf(FetchError);
+    });
+    test('fetchIcon throws a specific InvalidSvgError when SVG is invalid', async () => {
+        mockFetchSuccess(invalidSvg);
+        const result = await Effect.runPromise(fetchIconSvg(iconName).pipe(Effect.flip));
+        expect(result).toBeInstanceOf(BrandValidationError);
+        expect(result.message).toContain('SVGString');
+    });
+    test('fetchIcon throws specific NotFoundError when icon is missing', async () => {
+        global.fetch.mockResolvedValueOnce({
+            text: () => Promise.reject(new Error('not found')),
+        });
+        const result = await Effect.runPromise(fetchIconSvg('missing').pipe(Effect.flip));
+        expect(result).toBeInstanceOf(ResponseTextError);
+    });
+    test('fetchIcon throws specific BrandValidationError for empty SVG string', async () => {
+        mockFetchSuccess('');
+        const result = await Effect.runPromise(fetchIconSvg(iconName).pipe(Effect.flip));
+        expect(result).toBeInstanceOf(BrandValidationError);
+    });
+    test('fetchIcon throws specific BrandValidationError for non-string SVG', async () => {
+        mockFetchSuccess(123);
+        const result = await Effect.runPromise(fetchIconSvg(iconName).pipe(Effect.flip));
+        expect(result).toBeInstanceOf(BrandValidationError);
+    });
+    test('SVGString branding enforces valid SVG', () => {
+        expect(() => SVGString(validSvg)).not.toThrow();
+        expect(() => SVGString(invalidSvg)).toThrow();
+        expect(() => SVGString('')).toThrow();
+        expect(() => SVGString(123)).toThrow();
+    });
+    test('emptyDefaultSvg is a valid branded SVGString', () => {
+        expect(() => SVGString(emptyDefaultSvg())).not.toThrow();
+        expect(emptyDefaultSvg()).toContain('<svg');
+    });
+    test('fetchIcon uses default weight if not provided', async () => {
+        mockFetchSuccess(validSvg);
+        const result = await Effect.runPromise(fetchIconSvg(iconName));
+        expect(result).toContain('<svg');
+    });
+    test('fetchIcon handles multiple calls and caches result', async () => {
+        mockFetchSuccess(validSvg);
+        const result1 = await Effect.runPromise(fetchIconSvg(iconName));
+        const result2 = await Effect.runPromise(fetchIconSvg(iconName));
+        expect(result1).toContain('<svg');
+        expect(result2).toBe(result1);
+    });
+});