@lmvz-ds/components 0.25.0 → 0.27.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @lmvz-ds/components
 
+## 0.27.0
+
+### Minor Changes
+
+- 81f8e3e: Tabs und Tab Komponenten hinzugefügt
+- 7073812: Generierte ValueAccessors für Angular wurden durch Custom-Implementierung ersetzt
+
+### Patch Changes
+
+- 7127ead: Design Tokens aktualisiert
+- c891440: Design Tokens aktualisiert
+- c6f1f38: Checkbox a11y und Figma-Alignment verbessert
+
+## 0.26.0
+
+### Minor Changes
+
+- 80f5b7d: Snackbar Komponente und Controller hinzugefügt.
+
+### Patch Changes
+
+- 1c0f1e5: Design Tokens aktualisiert
+- 72c4ec5: Design Tokens aktualisiert
+
 ## 0.25.0
 
 ### Minor Changes

package/cjs/{reactive-controller-host-DrtMkMd7.js → aria-validation-controller-BMV2tv9-.js}

@@ -149,45 +149,4 @@ class AriaValidationController {
     }
 }
 
-class ReactiveControllerHost {
-    controllers = new Set();
-    addController(controller) {
-        this.controllers.add(controller);
-    }
-    removeController(controller) {
-        this.controllers.delete(controller);
-    }
-    get activeControllers() {
-        return Array.from(this.controllers).filter((controller) => !controller.disabled);
-    }
-    connectedCallback() {
-        if (!this.controllers.size) {
-            console.warn('ReactiveControllerHost connected with no controllers registered.', this);
-        }
-        this.activeControllers.forEach((controller) => controller.hostConnected?.());
-    }
-    disconnectedCallback() {
-        this.activeControllers.forEach((controller) => controller.hostDisconnected?.());
-    }
-    componentWillLoad() {
-        this.activeControllers.forEach((controller) => controller.hostWillLoad?.());
-    }
-    componentDidLoad() {
-        this.activeControllers.forEach((controller) => controller.hostDidLoad?.());
-    }
-    componentWillRender() {
-        this.activeControllers.forEach((controller) => controller.hostWillRender?.());
-    }
-    componentDidRender() {
-        this.activeControllers.forEach((controller) => controller.hostDidRender?.());
-    }
-    componentWillUpdate() {
-        this.activeControllers.forEach((controller) => controller.hostWillUpdate?.());
-    }
-    componentDidUpdate() {
-        this.activeControllers.forEach((controller) => controller.hostDidUpdate?.());
-    }
-}
-
 exports.AriaValidationController = AriaValidationController;
-exports.ReactiveControllerHost = ReactiveControllerHost;

package/cjs/{ds.constants-DSnxZ3ia.js → ds.constants-8fh6ItAF.js}

@@ -4,7 +4,7 @@ const sizes = ['xs', 'sm', 'md', 'lg'];
 const textSizes = [...sizes, 'xl'];
 const inputTypes = ['text', 'email', 'password', 'tel', 'url', 'search', 'number'];
 const iconSizes = [...sizes, 'inherit'];
-const iconWeights = ['thin', 'medium', 'bold', 'filled'];
+const iconWeights = ['thin', 'medium', 'bold'];
 const chipTypes = ['active', 'warning', 'success', 'error', 'neutral'];
 const chipSizes = ['default', 'small'];
 

package/cjs/index.cjs.js

@@ -1,12 +1,205 @@
 'use strict';
 
 var ariaLoader = require('./aria-loader-BRo2FTGh.js');
-var ds_constants = require('./ds.constants-DSnxZ3ia.js');
+var ds_constants = require('./ds.constants-8fh6ItAF.js');
 var icons = require('./icons-BQASWgk-.js');
 require('./svg-BMBduILB.js');
 require('./logger-DsM6xg6V.js');
 
-
+const PRIORITY_MAP = {
+    low: 0,
+    normal: 1,
+    high: 2,
+};
+const STATUS_DURATION = {
+    success: 5000,
+    warning: 5000,
+    error: 8000,
+};
+let idCounter = 0;
+function nextId() {
+    idCounter += 1;
+    return `snackbar-${idCounter}`;
+}
+function resolveHostElement() {
+    if (typeof document === 'undefined') {
+        return undefined;
+    }
+    const existing = document.querySelector('[data-snackbar-host]');
+    if (existing) {
+        return existing;
+    }
+    const el = document.createElement('lmvz-snackbar');
+    el.setAttribute('data-snackbar-host', '');
+    document.body.appendChild(el);
+    return el;
+}
+class SnackbarController {
+    hostEl = undefined;
+    active = undefined;
+    getHost() {
+        if (this.hostEl !== undefined && !this.hostEl.isConnected) {
+            this.hostEl = undefined;
+        }
+        if (this.hostEl === undefined) {
+            this.hostEl = resolveHostElement();
+        }
+        return this.hostEl;
+    }
+    clearTimer(entry) {
+        if (entry.timerId !== undefined) {
+            clearTimeout(entry.timerId);
+            entry.timerId = undefined;
+        }
+    }
+    scheduleTimer(entry, delayMs) {
+        if (delayMs <= 0) {
+            return;
+        }
+        entry.timerStartedAt = Date.now();
+        entry.timerId = setTimeout(() => {
+            if (this.active !== undefined && this.active.id === entry.id) {
+                this.dismissActive(entry, 'timeout');
+            }
+        }, delayMs);
+    }
+    dismissActive(entry, reason) {
+        this.clearTimer(entry);
+        const host = entry.hostEl;
+        host.removeEventListener('pointerenter', entry.onPointerEnter);
+        host.removeEventListener('pointerleave', entry.onPointerLeave);
+        host.removeEventListener('focusin', entry.onFocusIn);
+        host.removeEventListener('focusout', entry.onFocusOut);
+        if (entry.onActionListener) {
+            host.removeEventListener('lmvzAction', entry.onActionListener);
+        }
+        host.hide?.();
+        if (this.active?.id === entry.id) {
+            this.active = undefined;
+        }
+        if (reason !== 'action') {
+            host.dispatchEvent(new CustomEvent('lmvzClose', { detail: { reason }, bubbles: true, composed: true }));
+        }
+        entry.resolve({ reason });
+    }
+    pauseTimer(entry) {
+        entry.pauseCount += 1;
+        if (entry.pauseCount > 1 || entry.timerId === undefined) {
+            return;
+        }
+        const elapsed = entry.timerStartedAt !== undefined ? Date.now() - entry.timerStartedAt : 0;
+        entry.remaining = Math.max(0, entry.remaining - elapsed);
+        entry.timerStartedAt = undefined;
+        this.clearTimer(entry);
+    }
+    resumeTimer(entry) {
+        if (entry.pauseCount > 0) {
+            entry.pauseCount -= 1;
+        }
+        if (entry.pauseCount > 0) {
+            return;
+        }
+        if (entry.remaining > 0) {
+            this.scheduleTimer(entry, entry.remaining);
+        }
+    }
+    applyToHost(host, options) {
+        host.setAttribute('status', options.status ?? 'success');
+        if (options.actionLabel !== undefined) {
+            host.setAttribute('action-label', options.actionLabel);
+        }
+        else {
+            host.removeAttribute('action-label');
+        }
+    }
+    open(options) {
+        const incomingPriority = PRIORITY_MAP[options.priority ?? 'normal'];
+        if (this.active !== undefined && incomingPriority < this.active.priority) {
+            let swallowResolve;
+            const closed = new Promise((resolve) => {
+                swallowResolve = resolve;
+            });
+            swallowResolve({ reason: 'swallowed' });
+            const id = nextId();
+            return {
+                id,
+                closed,
+                dismiss() {
+                },
+            };
+        }
+        if (this.active !== undefined) {
+            this.dismissActive(this.active, 'overridden');
+        }
+        const host = this.getHost();
+        if (host === undefined) {
+            const id = nextId();
+            let ssrResolve;
+            const closed = new Promise((resolve) => {
+                ssrResolve = resolve;
+            });
+            ssrResolve({ reason: 'swallowed' });
+            return { id, closed, dismiss() { } };
+        }
+        const id = nextId();
+        const status = options.status ?? 'success';
+        const durationMs = options.duration === 0 ? 0 : (options.duration ?? STATUS_DURATION[status]);
+        let entryResolve;
+        const closed = new Promise((resolve) => {
+            entryResolve = resolve;
+        });
+        const entry = {
+            id,
+            priority: incomingPriority,
+            resolve: entryResolve,
+            timerId: undefined,
+            remaining: durationMs,
+            timerStartedAt: undefined,
+            pauseCount: 0,
+            hostEl: host,
+            onPointerEnter: () => this.pauseTimer(entry),
+            onPointerLeave: () => this.resumeTimer(entry),
+            onFocusIn: () => this.pauseTimer(entry),
+            onFocusOut: () => this.resumeTimer(entry),
+        };
+        this.active = entry;
+        host.addEventListener('pointerenter', entry.onPointerEnter);
+        host.addEventListener('pointerleave', entry.onPointerLeave);
+        host.addEventListener('focusin', entry.onFocusIn);
+        host.addEventListener('focusout', entry.onFocusOut);
+        this.applyToHost(host, options);
+        const onAction = () => {
+            if (this.active !== undefined && this.active.id === id) {
+                options.onAction?.();
+                this.dismissActive(entry, 'action');
+            }
+        };
+        entry.onActionListener = onAction;
+        host.addEventListener('lmvzAction', onAction, { once: true });
+        host.show?.();
+        queueMicrotask(() => host.setAttribute('message', options.message));
+        if (durationMs > 0) {
+            this.scheduleTimer(entry, durationMs);
+        }
+        return {
+            id,
+            closed,
+            dismiss: () => {
+                if (this.active?.id === id) {
+                    this.dismissActive(entry, 'manual');
+                }
+            },
+        };
+    }
+    dismiss(id) {
+        if (!this.active) {
+            return;
+        }
+        if (!id || this.active.id === id) {
+            this.dismissActive(this.active, 'manual');
+        }
+    }
+}
 
 exports.ARIA_VALIDATION_RUNTIME_CHANGED_EVENT = ariaLoader.ARIA_VALIDATION_RUNTIME_CHANGED_EVENT;
 exports.disableAriaValidation = ariaLoader.disableAriaValidation;
@@ -23,3 +216,4 @@ exports.textSizes = ds_constants.textSizes;
 exports.getRegisteredIconProvider = icons.getRegisteredIconProvider;
 exports.registerIconProvider = icons.registerIconProvider;
 exports.typedIconFromSet = icons.typedIconFromSet;
+exports.SnackbarController = SnackbarController;

package/cjs/list-keyboard-controller-CzZdPBeH.js

@@ -0,0 +1,173 @@
+'use strict';
+
+var component = require('./component-C7cavwmZ.js');
+
+const defaultConfig = {
+    orientation: 'both',
+    enableHomeAndEnd: false,
+    manageTabIndex: false,
+};
+class DirectionalFocusController {
+    host;
+    elements = [];
+    currentElement;
+    config;
+    constructor(host, config = {}) {
+        this.host = host;
+        this.config = {
+            ...defaultConfig,
+            ...config,
+        };
+    }
+    hostConnected() {
+        this.host.el.addEventListener('keydown', this.handleKeydown);
+        this.syncManagedFocusTarget();
+    }
+    hostDisconnected() {
+        this.host.el.removeEventListener('keydown', this.handleKeydown);
+    }
+    updateElements(elements) {
+        const previousElement = this.currentElement ?? this.getManagedActiveElement() ?? undefined;
+        this.elements = elements.filter((element) => 'focus' in element && element.nodeType === 1);
+        this.syncManagedFocusTarget(previousElement);
+    }
+    setCurrentElement(element) {
+        const previousElement = this.currentElement;
+        this.currentElement = element !== null && element !== undefined && 'focus' in element && element.nodeType === 1 ? element : undefined;
+        this.syncManagedFocusTarget(previousElement);
+    }
+    handleKeydown = (event) => {
+        const intent = this.getFocusIntent(event.key);
+        if (!intent)
+            return;
+        const activeElement = this.getManagedActiveElement();
+        const nextElement = this.getTargetElement(activeElement, intent);
+        if (!nextElement)
+            return;
+        event.preventDefault();
+        this.applyFocusTarget(nextElement, true);
+    };
+    getFocusIntent(key) {
+        if (this.config.enableHomeAndEnd && key === 'Home')
+            return 'first';
+        if (this.config.enableHomeAndEnd && key === 'End')
+            return 'last';
+        if (this.config.orientation === 'horizontal') {
+            if (key === 'ArrowRight')
+                return 'next';
+            if (key === 'ArrowLeft')
+                return 'previous';
+            return undefined;
+        }
+        if (this.config.orientation === 'vertical') {
+            if (key === 'ArrowDown')
+                return 'next';
+            if (key === 'ArrowUp')
+                return 'previous';
+            return undefined;
+        }
+        if (key === 'ArrowDown' || key === 'ArrowRight')
+            return 'next';
+        if (key === 'ArrowUp' || key === 'ArrowLeft')
+            return 'previous';
+        return undefined;
+    }
+    getManagedActiveElement() {
+        const activeElement = component.getDeepActiveElement(this.host.el.ownerDocument ?? document);
+        if (activeElement instanceof HTMLElement && this.elements.includes(activeElement) && this.canMoveFocusTo(activeElement)) {
+            return activeElement;
+        }
+        if (this.currentElement && this.elements.includes(this.currentElement) && this.canMoveFocusTo(this.currentElement)) {
+            return this.currentElement;
+        }
+        return undefined;
+    }
+    getTargetElement(current, intent) {
+        if (!this.elements.length)
+            return undefined;
+        if (intent === 'first')
+            return this.findFocusableFromIndex(-1, 'next');
+        if (intent === 'last')
+            return this.findFocusableFromIndex(this.elements.length, 'previous');
+        const currentIndex = current ? this.elements.indexOf(current) : -1;
+        if (currentIndex === -1) {
+            return intent === 'next' ? this.findFocusableFromIndex(-1, 'next') : this.findFocusableFromIndex(this.elements.length, 'previous');
+        }
+        return this.findFocusableFromIndex(currentIndex, intent);
+    }
+    findFocusableFromIndex(startIndex, intent) {
+        if (!this.elements.length)
+            return undefined;
+        const step = intent === 'next' ? 1 : -1;
+        for (let offset = 1; offset <= this.elements.length; offset++) {
+            const index = (startIndex + step * offset + this.elements.length) % this.elements.length;
+            const candidate = this.elements[index];
+            if (this.canMoveFocusTo(candidate))
+                return candidate;
+        }
+        return undefined;
+    }
+    syncManagedFocusTarget(previousElement) {
+        const nextElement = this.selectManagedElement(previousElement);
+        const didChange = nextElement !== this.currentElement;
+        this.currentElement = nextElement;
+        if (this.config.manageTabIndex) {
+            this.updateTabIndexes(nextElement);
+        }
+        if (didChange && nextElement) {
+            this.config.onFocusTargetChange?.(nextElement);
+        }
+    }
+    selectManagedElement(previousElement) {
+        const activeElement = this.getManagedActiveElement();
+        if (activeElement)
+            return activeElement;
+        if (this.currentElement && this.elements.includes(this.currentElement) && this.canMoveFocusTo(this.currentElement)) {
+            return this.currentElement;
+        }
+        if (previousElement && this.elements.includes(previousElement)) {
+            return this.findFocusableFromIndex(this.elements.indexOf(previousElement), 'next') ?? this.findFocusableFromIndex(-1, 'next');
+        }
+        const currentRovingTarget = this.elements.find((element) => element.tabIndex === 0 && this.canMoveFocusTo(element));
+        if (currentRovingTarget)
+            return currentRovingTarget;
+        return this.findFocusableFromIndex(-1, 'next');
+    }
+    updateTabIndexes(activeElement) {
+        this.elements.forEach((element) => {
+            element.tabIndex = activeElement && element === activeElement ? 0 : -1;
+        });
+    }
+    applyFocusTarget(element, shouldFocus) {
+        const didChange = element !== this.currentElement;
+        this.currentElement = element;
+        if (this.config.manageTabIndex) {
+            this.updateTabIndexes(element);
+        }
+        if (shouldFocus) {
+            element.focus();
+        }
+        if (didChange) {
+            this.config.onFocusTargetChange?.(element);
+        }
+    }
+    canMoveFocusTo(element) {
+        if (!element)
+            return false;
+        if (element.hasAttribute('disabled'))
+            return false;
+        if ('disabled' in element && Boolean(element.disabled))
+            return false;
+        if (element.getAttribute('aria-disabled') === 'true')
+            return false;
+        if (this.config.isFocusableElement)
+            return this.config.isFocusableElement(element);
+        const isTabOrderable = this.config.manageTabIndex || element.tabIndex >= 0;
+        return (isTabOrderable &&
+            element.getAttribute('aria-hidden') !== 'true' &&
+            (element.checkVisibility?.() ?? true) &&
+            element.offsetParent !== null);
+    }
+}
+
+exports.DirectionalFocusController = DirectionalFocusController;

package/cjs/lmvz-button-group.cjs.entry.js

@@ -0,0 +1,183 @@
+'use strict';
+
+var index = require('./index-BCFBLj0e.js');
+var ariaLoader = require('./aria-loader-BRo2FTGh.js');
+var component = require('./component-C7cavwmZ.js');
+
+/**
+ * Returns a function that delegates to the given predicate/filter and negates its result.
+ * The returned function preserves the input function's types, arguments and timing.
+ *
+ * @param delegate - The predicate/filter function to negate.
+ * @returns A function that returns the negated result.
+ */
+function negate(delegate) {
+    return (...args) => {
+        const result = delegate(...args);
+        return ariaLoader.isPromise(result) ? result.then((res) => !res) : !result;
+    };
+}
+
+const lmvzButtonGroupCss = () => `:host{display:flex;justify-content:flex-end;gap:var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));font:var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);flex-wrap:wrap}::slotted([hidden]){display:none !important}`;
+
+const LmvzButtonGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    actionsSlot;
+    validationMessageCache = [];
+    actionsStateObserver;
+    get primaryEnabledAction() {
+        return this.enabledButtons.find(isPrimaryAction) ?? this.enabledButtons[0];
+    }
+    get hasActions() {
+        return this.assignedButtons.some((element) => isVisible(element) && isActionButton(element) && !isDisabledButton(element));
+    }
+    componentDidLoad() {
+        this.handleActionsSlotChange();
+    }
+    disconnectedCallback() {
+        this.actionsStateObserver?.disconnect();
+    }
+    get assignedElements() {
+        return this.actionsSlot?.assignedElements({ flatten: true }) ?? [];
+    }
+    get assignedButtons() {
+        return this.assignedElements.filter(isActionButton);
+    }
+    get visibleButtons() {
+        return this.assignedButtons.filter(isVisible);
+    }
+    get enabledButtons() {
+        return this.visibleButtons.filter(negate(isDisabledButton));
+    }
+    getActionValidationResult() {
+        if (!this.visibleButtons.length) {
+            return [];
+        }
+        const primaryActions = this.visibleButtons.filter(isPrimaryAction);
+        const secondaryActions = this.visibleButtons.filter(isSecondaryAction);
+        const issues = [];
+        const order = this.visibleButtons.toReversed();
+        if (primaryActions.length !== 1)
+            issues.push('LmvzModal actions slot must contain exactly one primary action.');
+        if (secondaryActions.length > 1)
+            issues.push(`LmvzModal actions slot must contain at most one secondary action (received ${secondaryActions.length})`);
+        if (primaryActions.length) {
+            const primaryAction = primaryActions[0];
+            const secondaryAction = secondaryActions[0];
+            if (order.indexOf(primaryAction) !== 0)
+                issues.push('Primary action must be the last focusable element in the actions slot (i.e. rightmost button).');
+            if (secondaryAction && order.indexOf(secondaryAction) !== 1)
+                issues.push('Secondary action must be the second-to-last focusable element in the actions slot (i.e. left of primary button).');
+        }
+        else if (secondaryActions.length) {
+            const secondaryAction = secondaryActions[0];
+            if (order.indexOf(secondaryAction) !== 0)
+                issues.push('Secondary action must be the last focusable element in the actions slot when no primary action is present (i.e. rightmost button).');
+        }
+        return issues;
+    }
+    handleActionsSlotChange = () => {
+        this.observeActionState();
+        this.syncActionsState();
+    };
+    observeActionState() {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.actionsStateObserver?.disconnect();
+        if (!this.assignedButtons.length)
+            return;
+        this.actionsStateObserver = new MutationObserver(() => {
+            this.syncActionsState();
+        });
+        this.assignedButtons.forEach((element) => {
+            this.actionsStateObserver?.observe(element, {
+                attributes: true,
+                attributeFilter: ['disabled', 'hidden', 'variant'],
+            });
+        });
+    }
+    syncActionsState() {
+        const assignedElements = this.assignedElements;
+        assignedElements.forEach((element) => {
+            const isAllowedAction = ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
+            if (isAllowedAction)
+                return;
+            if (!element.hasAttribute('hidden')) {
+                element.setAttribute('hidden', '');
+            }
+            if (element.getAttribute('aria-hidden') !== 'true') {
+                element.setAttribute('aria-hidden', 'true');
+            }
+        });
+        this.checkActions();
+        const length = this.visibleButtons.length;
+        for (let i = 0; i < length; i++) {
+            const variant = i === length - 1 ? 'primary' : i === length - 2 ? 'secondary' : 'tertiary';
+            const element = this.visibleButtons.at(i);
+            if (!element)
+                continue;
+            if (isLmvzButton(element)) {
+                if (!element.getAttribute('variant'))
+                    element.setAttribute('variant', variant);
+            }
+            else {
+                element.classList.add(variant);
+            }
+        }
+        this.focusPrimaryAction();
+    }
+    focusPrimaryAction() {
+        const focusTarget = this.primaryEnabledAction;
+        if (!focusTarget || typeof window === 'undefined')
+            return;
+        window.requestAnimationFrame(() => {
+            if (component.canReceiveFocus(focusTarget)) {
+                focusTarget.focus();
+            }
+        });
+    }
+    checkActions() {
+        if (!ariaLoader.isAriaValidationEnabled())
+            return;
+        const issues = this.getActionValidationResult();
+        if (!issues.length) {
+            return;
+        }
+        issues.forEach((issue) => {
+            if (this.validationMessageCache.includes(issue))
+                return;
+            console.warn(issue);
+            this.validationMessageCache.push(issue);
+        });
+    }
+    render() {
+        return (index.h(index.Host, { key: '56b60821ecaa2301d13e78d621e873aa74cd170e' }, index.h("slot", { key: 'e6a1422950fa5b0026356b7788a607a690116186', ref: (element) => (this.actionsSlot = element), onSlotchange: this.handleActionsSlotChange })));
+    }
+};
+function isActionButton(element) {
+    return ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
+}
+function isLmvzButton(element) {
+    return element?.tagName.toUpperCase() === 'LMVZ-BUTTON';
+}
+function isDisabledButton(element) {
+    return element.hasAttribute('disabled') || element.disabled === true;
+}
+function isVisible(element) {
+    return !element.hasAttribute('hidden');
+}
+function getActionVariant(element) {
+    const variant = element.getAttribute('variant') ?? element.variant;
+    return variant === 'primary' || variant === 'secondary' || variant === 'tertiary' ? variant : 'secondary';
+}
+function isPrimaryAction(element) {
+    return getActionVariant(element) === 'primary';
+}
+function isSecondaryAction(element) {
+    return getActionVariant(element) === 'secondary';
+}
+LmvzButtonGroup.style = lmvzButtonGroupCss();
+
+exports.lmvz_button_group = LmvzButtonGroup;