@malva-ui/core 0.1.12

package/esm2022/avatar-group/lib/avatar-group/avatar-group.js

@@ -0,0 +1,217 @@
+import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input, output, signal, ViewEncapsulation, } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MlvAvatar, MlvColorFromTextPipe } from '@malva-ui/core/avatar';
+import { MlvResizeObserverService } from '@malva-ui/cdk/utils';
+import { MLV_AVATAR_GROUP_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
+import { MlvPopup, MlvPopupTrigger, MlvPopupContent, } from '@malva-ui/core/popup';
+import * as i0 from "@angular/core";
+/** Avatar size to pixel mapping (matches mlv-avatar SCSS size tokens). */
+const AVATAR_SIZE_PX = {
+    xs: 24,
+    s: 32,
+    m: 40,
+    l: 56,
+    xl: 80,
+    xxl: 96,
+};
+/**
+ * Overlap in pixels per size — the absolute value of the negative
+ * `margin-left` applied to stacked avatars in avatar-group.scss.
+ */
+const AVATAR_OVERLAP_PX = {
+    xs: 4,
+    s: 6,
+    m: 8,
+    l: 10,
+    xl: 12,
+    xxl: 14,
+};
+/**
+ * Avatar group component rendering a horizontal stack of overlapping `mlv-avatar` instances.
+ *
+ * The visible count is calculated automatically based on the component's container width —
+ * no manual `max` input is needed. When members overflow, an avatar-styled `+N` counter
+ * is appended. Hovering or focusing the counter opens a popup listing every member.
+ * Clicking anywhere on the host emits `groupClick`; clicking the `+N` counter also
+ * emits `overflowClick`.
+ *
+ * The component fills its parent (uses `width: 100%` flex layout). Set a width or
+ * `max-width` on the host to constrain the visible count.
+ *
+ * @example
+ * ```html
+ * <mlv-avatar-group
+ *   [members]="team"
+ *   size="m"
+ *   (groupClick)="openMembersPanel($event)"
+ *   style="max-width: 200px"
+ * />
+ * ```
+ */
+export class MlvAvatarGroup {
+    /**
+     * The full list of members to represent.
+     * How many are visible is determined automatically by the container width.
+     */
+    members = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "members" }] : /* istanbul ignore next */ []));
+    /**
+     * Size variant applied to all avatars (including the overflow counter avatar).
+     * Matches `MlvAvatarSize`: `'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'`.
+     * Defaults to `'m'`.
+     */
+    size = input('m', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Shape applied to all avatars in the group.
+     * Defaults to `'circle'`.
+     */
+    shape = input('circle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, the group is exposed as a keyboard-operable button.
+     */
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Emits the full member array when the user clicks anywhere on the group host.
+     */
+    groupClick = output();
+    /**
+     * Emits the hidden (overflow) members when the user clicks the `+N` counter avatar.
+     * Event propagation is stopped before the host `groupClick` fires separately.
+     */
+    overflowClick = output();
+    // ── Private state ──────────────────────────────────────────────────────────
+    /** @private Host element ref, observed for width to auto-calculate the visible count. */
+    _el = inject((ElementRef));
+    /** @private Shared resize-observer service used to track the host width. */
+    _resizeService = inject(MlvResizeObserverService);
+    /** @private Localised avatar-group messages. */
+    _i18n = inject(MLV_AVATAR_GROUP_I18N);
+    /** @private ICU resolver for count-aware accessible labels. */
+    _resolver = inject(MlvI18nResolverService);
+    /** Measured width of the host element in pixels. 0 = not yet measured. */
+    _containerWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
+    /** Avatar size in pixels for the current `size()` input. */
+    _avatarSizePx = computed(() => AVATAR_SIZE_PX[this.size()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_avatarSizePx" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum total avatars (visible + overflow) that fit in the current container.
+     * Returns `Infinity` before the first ResizeObserver measurement so that
+     * all members are shown during the initial render pass.
+     */
+    _maxFit = computed(() => {
+        const w = this._containerWidth();
+        if (w <= 0)
+            return Infinity;
+        const avatarPx = this._avatarSizePx();
+        const overlapPx = AVATAR_OVERLAP_PX[this.size()];
+        const effectivePx = avatarPx - overlapPx; // width each additional avatar adds
+        if (effectivePx <= 0)
+            return 1;
+        return Math.max(1, Math.floor((w - avatarPx) / effectivePx) + 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_maxFit" }] : /* istanbul ignore next */ []));
+    // ── Protected computed ─────────────────────────────────────────────────────
+    /** Members within the auto-calculated visible limit — rendered as individual avatars. */
+    _visibleMembers = computed(() => {
+        const all = this.members();
+        const maxFit = this._maxFit();
+        if (all.length <= maxFit)
+            return all;
+        // Reserve 1 slot for the overflow counter avatar; always show at least 1.
+        return all.slice(0, Math.max(1, maxFit - 1));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_visibleMembers" }] : /* istanbul ignore next */ []));
+    /** Members beyond the visible limit — shown in the overflow popup. */
+    _hiddenMembers = computed(() => this.members().slice(this._visibleMembers().length), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hiddenMembers" }] : /* istanbul ignore next */ []));
+    /** Number of hidden members. */
+    _overflowCount = computed(() => this._hiddenMembers().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_overflowCount" }] : /* istanbul ignore next */ []));
+    /** Whether the overflow counter avatar should render. */
+    _hasOverflow = computed(() => this._overflowCount() > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasOverflow" }] : /* istanbul ignore next */ []));
+    /** Label shown inside the overflow counter avatar, e.g. `"+5"`. */
+    _overflowLabel = computed(() => `+${this._overflowCount()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_overflowLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the group host element. */
+    _hostAriaLabel = computed(() => {
+        const total = this.members().length;
+        const visible = this._visibleMembers().length;
+        if (total === 0)
+            return this._i18n().noMembers;
+        const key = this._hasOverflow() ? 'visibleMembers' : 'memberCount';
+        return this._resolver.resolve(this._i18n(), key, { total, visible });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hostAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Localised label for the overflow trigger. */
+    _overflowAriaLabel = computed(() => this._resolver.resolve(this._i18n(), 'moreMembers', { count: this._overflowCount() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_overflowAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Localised label for the complete member list. */
+    _allMembersLabel = computed(() => this._i18n().allMembers, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_allMembersLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this._resizeService
+            .observe(this._el)
+            .pipe(takeUntilDestroyed())
+            .subscribe((entries) => {
+            const width = entries[0]?.contentRect.width ?? 0;
+            this._containerWidth.set(width);
+        });
+    }
+    // ── Event handlers ─────────────────────────────────────────────────────────
+    /** Handles click on the overflow counter avatar. */
+    _onOverflowClick(event) {
+        event.stopPropagation();
+        this.overflowClick.emit(this._hiddenMembers());
+    }
+    /** Handles keydown on the overflow counter avatar. */
+    _onOverflowKeydown(event) {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.overflowClick.emit(this._hiddenMembers());
+    }
+    /** Handles click on the group host. */
+    _onHostClick() {
+        if (this.members().length > 0) {
+            this.groupClick.emit(this.members());
+        }
+    }
+    /** Activates an interactive group with the standard button keys. */
+    _onHostKeydown(event) {
+        if (!this.interactive() ||
+            this.members().length === 0 ||
+            (event.key !== 'Enter' && event.key !== ' ')) {
+            return;
+        }
+        event.preventDefault();
+        this.groupClick.emit(this.members());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvAvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvAvatarGroup, isStandalone: true, selector: "mlv-avatar-group", inputs: { members: { classPropertyName: "members", publicName: "members", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { groupClick: "groupClick", overflowClick: "overflowClick" }, host: { listeners: { "click": "_onHostClick()", "keydown": "_onHostKeydown($event)" }, properties: { "class": "\"mlv-avatar-group--size-\" + size()", "class.mlv-avatar-group--interactive": "interactive()", "attr.role": "interactive() ? \"button\" : \"group\"", "attr.tabindex": "interactive() && members().length > 0 ? 0 : null", "attr.aria-label": "_hostAriaLabel()" }, classAttribute: "mlv-avatar-group" }, ngImport: i0, template: "<div class=\"mlv-avatar-group__list\">\n  @for (member of _visibleMembers(); track member.name; let i = $index) {\n  <div class=\"mlv-avatar-group__item\">\n    <mlv-avatar\n      [size]=\"size()\"\n      [shape]=\"shape()\"\n      [name]=\"member.name\"\n      [src]=\"member.src ?? null\"\n      [initials]=\"member.initials ?? ''\"\n      [color]=\"member.color ?? (member.name | mlvColorFromText)\"\n    />\n  </div>\n  } @if (_hasOverflow()) {\n  <div\n    class=\"mlv-avatar-group__overflow\"\n    [mlvPopupTrigger]=\"memberPopup\"\n    [triggerOn]=\"['hover', 'focus']\"\n    [ariaHasPopup]=\"null\"\n    tabindex=\"0\"\n    role=\"button\"\n    [attr.aria-label]=\"_overflowAriaLabel()\"\n    (click)=\"_onOverflowClick($event)\"\n    (keydown)=\"_onOverflowKeydown($any($event))\"\n  >\n    <mlv-avatar\n      class=\"mlv-avatar-group__overflow-avatar\"\n      [size]=\"size()\"\n      [shape]=\"shape()\"\n      [initials]=\"_overflowLabel()\"\n      color=\"var(--mlv-background-neutral-2)\"\n    />\n  </div>\n\n  <mlv-popup\n    #memberPopup\n    position=\"bottom-start\"\n    [hasArrow]=\"false\"\n    [hasShadow]=\"true\"\n  >\n    <ng-template mlvPopupContent>\n      <div\n        class=\"mlv-avatar-group__popup-list\"\n        role=\"list\"\n        [attr.aria-label]=\"_allMembersLabel()\"\n      >\n        @for (member of members(); track member.name) {\n        <div class=\"mlv-avatar-group__popup-row\" role=\"listitem\">\n          <mlv-avatar\n            size=\"s\"\n            [shape]=\"shape()\"\n            [name]=\"member.name\"\n            [src]=\"member.src ?? null\"\n            [initials]=\"member.initials ?? ''\"\n            [color]=\"member.color ?? (member.name | mlvColorFromText)\"\n          />\n          <span class=\"mlv-avatar-group__popup-name\">{{ member.name }}</span>\n        </div>\n        }\n      </div>\n    </ng-template>\n  </mlv-popup>\n  }\n</div>\n", styles: [".mlv-avatar-group{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-avatar-group *{box-sizing:border-box}.mlv-avatar-group,.mlv-avatar-group__list{display:flex;align-items:center;min-width:0}.mlv-avatar-group__item{display:inline-flex;align-items:center;margin-left:var(--mlv-ag-overlap, -.5rem);position:relative}.mlv-avatar-group__item:first-child{margin-left:0}.mlv-avatar-group__item:nth-child(1){z-index:20}.mlv-avatar-group__item:nth-child(2){z-index:19}.mlv-avatar-group__item:nth-child(3){z-index:18}.mlv-avatar-group__item:nth-child(4){z-index:17}.mlv-avatar-group__item:nth-child(5){z-index:16}.mlv-avatar-group__item:nth-child(6){z-index:15}.mlv-avatar-group__item:nth-child(7){z-index:14}.mlv-avatar-group__item:nth-child(8){z-index:13}.mlv-avatar-group__item:nth-child(9){z-index:12}.mlv-avatar-group__item:nth-child(10){z-index:11}.mlv-avatar-group__item:nth-child(11){z-index:10}.mlv-avatar-group__item:nth-child(12){z-index:9}.mlv-avatar-group__item:nth-child(13){z-index:8}.mlv-avatar-group__item:nth-child(14){z-index:7}.mlv-avatar-group__item:nth-child(15){z-index:6}.mlv-avatar-group__item:nth-child(16){z-index:5}.mlv-avatar-group__item:nth-child(17){z-index:4}.mlv-avatar-group__item:nth-child(18){z-index:3}.mlv-avatar-group__item:nth-child(19){z-index:2}.mlv-avatar-group__item:nth-child(20){z-index:1}.mlv-avatar-group__item mlv-avatar{outline:var(--mlv-ag-ring-width, .125rem) solid var(--mlv-ag-ring-color, var(--mlv-background-base));border-radius:50%}.mlv-avatar-group__overflow{display:inline-flex;align-items:center;margin-left:var(--mlv-ag-overlap, -.5rem);position:relative;z-index:21;cursor:pointer;outline:none}.mlv-avatar-group__overflow mlv-avatar{outline:var(--mlv-ag-ring-width, .125rem) solid var(--mlv-ag-ring-color, var(--mlv-background-base));border-radius:50%;pointer-events:none}.mlv-avatar-group__overflow .mlv-avatar__initials{font-size:calc(var(--mlv-avatar-font, .875rem) * .75);letter-spacing:-.01em;opacity:1;color:var(--mlv-text-secondary)}.mlv-avatar-group__overflow:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:.125rem;border-radius:50%}.mlv-avatar-group__popup-list{display:flex;flex-direction:column;min-width:10rem;max-height:20rem;overflow-y:auto}.mlv-avatar-group__popup-row{display:flex;align-items:center;gap:.5rem;padding:var(--mlv-padding-s);min-height:var(--mlv-height-s);transition:background-color var(--mlv-duration-fast) var(--mlv-ease-out)}.mlv-avatar-group__popup-row:hover{background-color:var(--mlv-background-neutral-1)}.mlv-avatar-group__popup-name{font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-s);color:var(--mlv-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mlv-avatar-group--size-xs{--mlv-ag-overlap: -.25rem}.mlv-avatar-group--size-s{--mlv-ag-overlap: -.375rem}.mlv-avatar-group--size-m{--mlv-ag-overlap: -.5rem}.mlv-avatar-group--size-l{--mlv-ag-overlap: -.625rem}.mlv-avatar-group--size-xl{--mlv-ag-overlap: -.75rem}.mlv-avatar-group--size-xxl{--mlv-ag-overlap: -.875rem}.mlv-avatar-group__item mlv-avatar.mlv-avatar--square,.mlv-avatar-group__overflow mlv-avatar.mlv-avatar--square{border-radius:var(--mlv-radius-m)}.mlv-avatar-group__overflow:has(mlv-avatar.mlv-avatar--square):focus-visible{border-radius:var(--mlv-radius-m)}.mlv-avatar-group--interactive{cursor:pointer}.mlv-avatar-group--interactive:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:.125rem;border-radius:var(--mlv-radius-m)}\n"], dependencies: [{ kind: "component", type: MlvAvatar, selector: "mlv-avatar", inputs: ["size", "shape", "src", "name", "initials", "color", "label"] }, { kind: "component", type: MlvPopup, selector: "mlv-popup", inputs: ["position", "positions", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "hasArrow", "hasShadow", "class", "mlvDensity", "flexibleDimensions", "scrollStrategy", "hasBackdrop", "restrictPosition", "panelRole", "modal", "ariaLabel", "dismissExcludeElements", "mobileMode", "mobileBreakpoint", "mobileTitle", "mobileCloseLabel", "opened"], outputs: ["openedChange", "afterOpened", "afterClosed"] }, { kind: "directive", type: MlvPopupTrigger, selector: "[mlvPopupTrigger]", inputs: ["mlvPopupTrigger", "triggerOn", "ariaHasPopup"], exportAs: ["mlvPopupTrigger"] }, { kind: "directive", type: MlvPopupContent, selector: "[mlvPopupContent]" }, { kind: "pipe", type: MlvColorFromTextPipe, name: "mlvColorFromText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvAvatarGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-avatar-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MlvAvatar,
+                        MlvColorFromTextPipe,
+                        MlvPopup,
+                        MlvPopupTrigger,
+                        MlvPopupContent,
+                    ], host: {
+                        class: 'mlv-avatar-group',
+                        '[class]': '"mlv-avatar-group--size-" + size()',
+                        '[class.mlv-avatar-group--interactive]': 'interactive()',
+                        '[attr.role]': 'interactive() ? "button" : "group"',
+                        '[attr.tabindex]': 'interactive() && members().length > 0 ? 0 : null',
+                        '[attr.aria-label]': '_hostAriaLabel()',
+                        '(click)': '_onHostClick()',
+                        '(keydown)': '_onHostKeydown($event)',
+                    }, template: "<div class=\"mlv-avatar-group__list\">\n  @for (member of _visibleMembers(); track member.name; let i = $index) {\n  <div class=\"mlv-avatar-group__item\">\n    <mlv-avatar\n      [size]=\"size()\"\n      [shape]=\"shape()\"\n      [name]=\"member.name\"\n      [src]=\"member.src ?? null\"\n      [initials]=\"member.initials ?? ''\"\n      [color]=\"member.color ?? (member.name | mlvColorFromText)\"\n    />\n  </div>\n  } @if (_hasOverflow()) {\n  <div\n    class=\"mlv-avatar-group__overflow\"\n    [mlvPopupTrigger]=\"memberPopup\"\n    [triggerOn]=\"['hover', 'focus']\"\n    [ariaHasPopup]=\"null\"\n    tabindex=\"0\"\n    role=\"button\"\n    [attr.aria-label]=\"_overflowAriaLabel()\"\n    (click)=\"_onOverflowClick($event)\"\n    (keydown)=\"_onOverflowKeydown($any($event))\"\n  >\n    <mlv-avatar\n      class=\"mlv-avatar-group__overflow-avatar\"\n      [size]=\"size()\"\n      [shape]=\"shape()\"\n      [initials]=\"_overflowLabel()\"\n      color=\"var(--mlv-background-neutral-2)\"\n    />\n  </div>\n\n  <mlv-popup\n    #memberPopup\n    position=\"bottom-start\"\n    [hasArrow]=\"false\"\n    [hasShadow]=\"true\"\n  >\n    <ng-template mlvPopupContent>\n      <div\n        class=\"mlv-avatar-group__popup-list\"\n        role=\"list\"\n        [attr.aria-label]=\"_allMembersLabel()\"\n      >\n        @for (member of members(); track member.name) {\n        <div class=\"mlv-avatar-group__popup-row\" role=\"listitem\">\n          <mlv-avatar\n            size=\"s\"\n            [shape]=\"shape()\"\n            [name]=\"member.name\"\n            [src]=\"member.src ?? null\"\n            [initials]=\"member.initials ?? ''\"\n            [color]=\"member.color ?? (member.name | mlvColorFromText)\"\n          />\n          <span class=\"mlv-avatar-group__popup-name\">{{ member.name }}</span>\n        </div>\n        }\n      </div>\n    </ng-template>\n  </mlv-popup>\n  }\n</div>\n", styles: [".mlv-avatar-group{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-avatar-group *{box-sizing:border-box}.mlv-avatar-group,.mlv-avatar-group__list{display:flex;align-items:center;min-width:0}.mlv-avatar-group__item{display:inline-flex;align-items:center;margin-left:var(--mlv-ag-overlap, -.5rem);position:relative}.mlv-avatar-group__item:first-child{margin-left:0}.mlv-avatar-group__item:nth-child(1){z-index:20}.mlv-avatar-group__item:nth-child(2){z-index:19}.mlv-avatar-group__item:nth-child(3){z-index:18}.mlv-avatar-group__item:nth-child(4){z-index:17}.mlv-avatar-group__item:nth-child(5){z-index:16}.mlv-avatar-group__item:nth-child(6){z-index:15}.mlv-avatar-group__item:nth-child(7){z-index:14}.mlv-avatar-group__item:nth-child(8){z-index:13}.mlv-avatar-group__item:nth-child(9){z-index:12}.mlv-avatar-group__item:nth-child(10){z-index:11}.mlv-avatar-group__item:nth-child(11){z-index:10}.mlv-avatar-group__item:nth-child(12){z-index:9}.mlv-avatar-group__item:nth-child(13){z-index:8}.mlv-avatar-group__item:nth-child(14){z-index:7}.mlv-avatar-group__item:nth-child(15){z-index:6}.mlv-avatar-group__item:nth-child(16){z-index:5}.mlv-avatar-group__item:nth-child(17){z-index:4}.mlv-avatar-group__item:nth-child(18){z-index:3}.mlv-avatar-group__item:nth-child(19){z-index:2}.mlv-avatar-group__item:nth-child(20){z-index:1}.mlv-avatar-group__item mlv-avatar{outline:var(--mlv-ag-ring-width, .125rem) solid var(--mlv-ag-ring-color, var(--mlv-background-base));border-radius:50%}.mlv-avatar-group__overflow{display:inline-flex;align-items:center;margin-left:var(--mlv-ag-overlap, -.5rem);position:relative;z-index:21;cursor:pointer;outline:none}.mlv-avatar-group__overflow mlv-avatar{outline:var(--mlv-ag-ring-width, .125rem) solid var(--mlv-ag-ring-color, var(--mlv-background-base));border-radius:50%;pointer-events:none}.mlv-avatar-group__overflow .mlv-avatar__initials{font-size:calc(var(--mlv-avatar-font, .875rem) * .75);letter-spacing:-.01em;opacity:1;color:var(--mlv-text-secondary)}.mlv-avatar-group__overflow:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:.125rem;border-radius:50%}.mlv-avatar-group__popup-list{display:flex;flex-direction:column;min-width:10rem;max-height:20rem;overflow-y:auto}.mlv-avatar-group__popup-row{display:flex;align-items:center;gap:.5rem;padding:var(--mlv-padding-s);min-height:var(--mlv-height-s);transition:background-color var(--mlv-duration-fast) var(--mlv-ease-out)}.mlv-avatar-group__popup-row:hover{background-color:var(--mlv-background-neutral-1)}.mlv-avatar-group__popup-name{font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-s);color:var(--mlv-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mlv-avatar-group--size-xs{--mlv-ag-overlap: -.25rem}.mlv-avatar-group--size-s{--mlv-ag-overlap: -.375rem}.mlv-avatar-group--size-m{--mlv-ag-overlap: -.5rem}.mlv-avatar-group--size-l{--mlv-ag-overlap: -.625rem}.mlv-avatar-group--size-xl{--mlv-ag-overlap: -.75rem}.mlv-avatar-group--size-xxl{--mlv-ag-overlap: -.875rem}.mlv-avatar-group__item mlv-avatar.mlv-avatar--square,.mlv-avatar-group__overflow mlv-avatar.mlv-avatar--square{border-radius:var(--mlv-radius-m)}.mlv-avatar-group__overflow:has(mlv-avatar.mlv-avatar--square):focus-visible{border-radius:var(--mlv-radius-m)}.mlv-avatar-group--interactive{cursor:pointer}.mlv-avatar-group--interactive:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:.125rem;border-radius:var(--mlv-radius-m)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { members: [{ type: i0.Input, args: [{ isSignal: true, alias: "members", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], groupClick: [{ type: i0.Output, args: ["groupClick"] }], overflowClick: [{ type: i0.Output, args: ["overflowClick"] }] } });
+//# sourceMappingURL=avatar-group.js.map

package/esm2022/avatar-group/lib/avatar-group/avatar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.js","sourceRoot":"","sources":["../../../../../../../libs/core/avatar-group/src/lib/avatar-group/avatar-group.ts","../../../../../../../libs/core/avatar-group/src/lib/avatar-group/avatar-group.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { MlvAvatar, MlvColorFromTextPipe } from '@malva-ui/core/avatar';\nimport type { MlvAvatarSize, MlvAvatarShape } from '@malva-ui/core/avatar';\nimport { MlvResizeObserverService } from '@malva-ui/cdk/utils';\nimport { MLV_AVATAR_GROUP_I18N, MlvI18nResolverService } from '@malva-ui/i18n';\nimport {\n  MlvPopup,\n  MlvPopupTrigger,\n  MlvPopupContent,\n} from '@malva-ui/core/popup';\n\n/**\n * Represents a single member in the avatar group.\n * Provides enough data to render a `mlv-avatar` for each member.\n */\nexport interface MlvAvatarGroupMember {\n  /** Full display name — used for initials derivation, popup label, and aria-label. */\n  name: string;\n  /** Optional image URL. Falls back to initials or color on error. */\n  src?: string | null;\n  /** Explicit initials string; overrides name-derived initials. */\n  initials?: string;\n  /** CSS color for the avatar background. Defaults to a deterministic color from name. */\n  color?: string;\n}\n\n/** Avatar size to pixel mapping (matches mlv-avatar SCSS size tokens). */\nconst AVATAR_SIZE_PX: Record<MlvAvatarSize, number> = {\n  xs: 24,\n  s: 32,\n  m: 40,\n  l: 56,\n  xl: 80,\n  xxl: 96,\n};\n\n/**\n * Overlap in pixels per size — the absolute value of the negative\n * `margin-left` applied to stacked avatars in avatar-group.scss.\n */\nconst AVATAR_OVERLAP_PX: Record<MlvAvatarSize, number> = {\n  xs: 4,\n  s: 6,\n  m: 8,\n  l: 10,\n  xl: 12,\n  xxl: 14,\n};\n\n/**\n * Avatar group component rendering a horizontal stack of overlapping `mlv-avatar` instances.\n *\n * The visible count is calculated automatically based on the component's container width —\n * no manual `max` input is needed. When members overflow, an avatar-styled `+N` counter\n * is appended. Hovering or focusing the counter opens a popup listing every member.\n * Clicking anywhere on the host emits `groupClick`; clicking the `+N` counter also\n * emits `overflowClick`.\n *\n * The component fills its parent (uses `width: 100%` flex layout). Set a width or\n * `max-width` on the host to constrain the visible count.\n *\n * @example\n * ```html\n * <mlv-avatar-group\n *   [members]=\"team\"\n *   size=\"m\"\n *   (groupClick)=\"openMembersPanel($event)\"\n *   style=\"max-width: 200px\"\n * />\n * ```\n */\n@Component({\n  selector: 'mlv-avatar-group',\n  templateUrl: './avatar-group.html',\n  styleUrl: './avatar-group.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    MlvAvatar,\n    MlvColorFromTextPipe,\n    MlvPopup,\n    MlvPopupTrigger,\n    MlvPopupContent,\n  ],\n  host: {\n    class: 'mlv-avatar-group',\n    '[class]': '\"mlv-avatar-group--size-\" + size()',\n    '[class.mlv-avatar-group--interactive]': 'interactive()',\n    '[attr.role]': 'interactive() ? \"button\" : \"group\"',\n    '[attr.tabindex]': 'interactive() && members().length > 0 ? 0 : null',\n    '[attr.aria-label]': '_hostAriaLabel()',\n    '(click)': '_onHostClick()',\n    '(keydown)': '_onHostKeydown($event)',\n  },\n})\nexport class MlvAvatarGroup {\n  /**\n   * The full list of members to represent.\n   * How many are visible is determined automatically by the container width.\n   */\n  readonly members = input<MlvAvatarGroupMember[]>([]);\n\n  /**\n   * Size variant applied to all avatars (including the overflow counter avatar).\n   * Matches `MlvAvatarSize`: `'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'`.\n   * Defaults to `'m'`.\n   */\n  readonly size = input<MlvAvatarSize>('m');\n\n  /**\n   * Shape applied to all avatars in the group.\n   * Defaults to `'circle'`.\n   */\n  readonly shape = input<MlvAvatarShape>('circle');\n\n  /**\n   * When `true`, the group is exposed as a keyboard-operable button.\n   */\n  readonly interactive = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * Emits the full member array when the user clicks anywhere on the group host.\n   */\n  readonly groupClick = output<MlvAvatarGroupMember[]>();\n\n  /**\n   * Emits the hidden (overflow) members when the user clicks the `+N` counter avatar.\n   * Event propagation is stopped before the host `groupClick` fires separately.\n   */\n  readonly overflowClick = output<MlvAvatarGroupMember[]>();\n\n  // ── Private state ──────────────────────────────────────────────────────────\n\n  /** @private Host element ref, observed for width to auto-calculate the visible count. */\n  private readonly _el = inject(ElementRef<HTMLElement>);\n  /** @private Shared resize-observer service used to track the host width. */\n  private readonly _resizeService = inject(MlvResizeObserverService);\n  /** @private Localised avatar-group messages. */\n  private readonly _i18n = inject(MLV_AVATAR_GROUP_I18N);\n  /** @private ICU resolver for count-aware accessible labels. */\n  private readonly _resolver = inject(MlvI18nResolverService);\n\n  /** Measured width of the host element in pixels. 0 = not yet measured. */\n  private readonly _containerWidth = signal(0);\n\n  /** Avatar size in pixels for the current `size()` input. */\n  private readonly _avatarSizePx = computed(() => AVATAR_SIZE_PX[this.size()]);\n\n  /**\n   * Maximum total avatars (visible + overflow) that fit in the current container.\n   * Returns `Infinity` before the first ResizeObserver measurement so that\n   * all members are shown during the initial render pass.\n   */\n  private readonly _maxFit = computed(() => {\n    const w = this._containerWidth();\n    if (w <= 0) return Infinity;\n\n    const avatarPx = this._avatarSizePx();\n    const overlapPx = AVATAR_OVERLAP_PX[this.size()];\n    const effectivePx = avatarPx - overlapPx; // width each additional avatar adds\n\n    if (effectivePx <= 0) return 1;\n    return Math.max(1, Math.floor((w - avatarPx) / effectivePx) + 1);\n  });\n\n  // ── Protected computed ─────────────────────────────────────────────────────\n\n  /** Members within the auto-calculated visible limit — rendered as individual avatars. */\n  protected readonly _visibleMembers = computed(() => {\n    const all = this.members();\n    const maxFit = this._maxFit();\n    if (all.length <= maxFit) return all;\n    // Reserve 1 slot for the overflow counter avatar; always show at least 1.\n    return all.slice(0, Math.max(1, maxFit - 1));\n  });\n\n  /** Members beyond the visible limit — shown in the overflow popup. */\n  protected readonly _hiddenMembers = computed(() =>\n    this.members().slice(this._visibleMembers().length),\n  );\n\n  /** Number of hidden members. */\n  protected readonly _overflowCount = computed(\n    () => this._hiddenMembers().length,\n  );\n\n  /** Whether the overflow counter avatar should render. */\n  protected readonly _hasOverflow = computed(() => this._overflowCount() > 0);\n\n  /** Label shown inside the overflow counter avatar, e.g. `\"+5\"`. */\n  protected readonly _overflowLabel = computed(\n    () => `+${this._overflowCount()}`,\n  );\n\n  /** Accessible label for the group host element. */\n  protected readonly _hostAriaLabel = computed(() => {\n    const total = this.members().length;\n    const visible = this._visibleMembers().length;\n    if (total === 0) return this._i18n().noMembers;\n    const key = this._hasOverflow() ? 'visibleMembers' : 'memberCount';\n    return this._resolver.resolve(\n      this._i18n() as unknown as Record<string, string>,\n      key,\n      { total, visible },\n    );\n  });\n\n  /** Localised label for the overflow trigger. */\n  protected readonly _overflowAriaLabel = computed(() =>\n    this._resolver.resolve(\n      this._i18n() as unknown as Record<string, string>,\n      'moreMembers',\n      { count: this._overflowCount() },\n    ),\n  );\n\n  /** Localised label for the complete member list. */\n  protected readonly _allMembersLabel = computed(() => this._i18n().allMembers);\n\n  constructor() {\n    this._resizeService\n      .observe(this._el)\n      .pipe(takeUntilDestroyed())\n      .subscribe((entries) => {\n        const width = entries[0]?.contentRect.width ?? 0;\n        this._containerWidth.set(width);\n      });\n  }\n\n  // ── Event handlers ─────────────────────────────────────────────────────────\n\n  /** Handles click on the overflow counter avatar. */\n  protected _onOverflowClick(event: MouseEvent): void {\n    event.stopPropagation();\n    this.overflowClick.emit(this._hiddenMembers());\n  }\n\n  /** Handles keydown on the overflow counter avatar. */\n  protected _onOverflowKeydown(event: KeyboardEvent): void {\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    event.preventDefault();\n    event.stopPropagation();\n    this.overflowClick.emit(this._hiddenMembers());\n  }\n\n  /** Handles click on the group host. */\n  protected _onHostClick(): void {\n    if (this.members().length > 0) {\n      this.groupClick.emit(this.members());\n    }\n  }\n\n  /** Activates an interactive group with the standard button keys. */\n  protected _onHostKeydown(event: KeyboardEvent): void {\n    if (\n      !this.interactive() ||\n      this.members().length === 0 ||\n      (event.key !== 'Enter' && event.key !== ' ')\n    ) {\n      return;\n    }\n\n    event.preventDefault();\n    this.groupClick.emit(this.members());\n  }\n}\n","<div class=\"mlv-avatar-group__list\">\n  @for (member of _visibleMembers(); track member.name; let i = $index) {\n  <div class=\"mlv-avatar-group__item\">\n    <mlv-avatar\n      [size]=\"size()\"\n      [shape]=\"shape()\"\n      [name]=\"member.name\"\n      [src]=\"member.src ?? null\"\n      [initials]=\"member.initials ?? ''\"\n      [color]=\"member.color ?? (member.name | mlvColorFromText)\"\n    />\n  </div>\n  } @if (_hasOverflow()) {\n  <div\n    class=\"mlv-avatar-group__overflow\"\n    [mlvPopupTrigger]=\"memberPopup\"\n    [triggerOn]=\"['hover', 'focus']\"\n    [ariaHasPopup]=\"null\"\n    tabindex=\"0\"\n    role=\"button\"\n    [attr.aria-label]=\"_overflowAriaLabel()\"\n    (click)=\"_onOverflowClick($event)\"\n    (keydown)=\"_onOverflowKeydown($any($event))\"\n  >\n    <mlv-avatar\n      class=\"mlv-avatar-group__overflow-avatar\"\n      [size]=\"size()\"\n      [shape]=\"shape()\"\n      [initials]=\"_overflowLabel()\"\n      color=\"var(--mlv-background-neutral-2)\"\n    />\n  </div>\n\n  <mlv-popup\n    #memberPopup\n    position=\"bottom-start\"\n    [hasArrow]=\"false\"\n    [hasShadow]=\"true\"\n  >\n    <ng-template mlvPopupContent>\n      <div\n        class=\"mlv-avatar-group__popup-list\"\n        role=\"list\"\n        [attr.aria-label]=\"_allMembersLabel()\"\n      >\n        @for (member of members(); track member.name) {\n        <div class=\"mlv-avatar-group__popup-row\" role=\"listitem\">\n          <mlv-avatar\n            size=\"s\"\n            [shape]=\"shape()\"\n            [name]=\"member.name\"\n            [src]=\"member.src ?? null\"\n            [initials]=\"member.initials ?? ''\"\n            [color]=\"member.color ?? (member.name | mlvColorFromText)\"\n          />\n          <span class=\"mlv-avatar-group__popup-name\">{{ member.name }}</span>\n        </div>\n        }\n      </div>\n    </ng-template>\n  </mlv-popup>\n  }\n</div>\n"]}

package/esm2022/avatar-group/malva-ui-core-avatar-group.js

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=malva-ui-core-avatar-group.js.map

package/esm2022/avatar-group/malva-ui-core-avatar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-avatar-group.js","sourceRoot":"","sources":["../../../../../libs/core/avatar-group/src/malva-ui-core-avatar-group.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"]}

package/esm2022/badge/index.js

@@ -0,0 +1,3 @@
+export * from './lib/badge/badge';
+export * from './lib/badge-icon';
+//# sourceMappingURL=index.js.map

package/esm2022/badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/core/badge/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './lib/badge/badge';\nexport * from './lib/badge-icon';\n"]}

package/esm2022/badge/lib/badge/badge.js

@@ -0,0 +1,71 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, contentChild, input, } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MlvDensityDirective, MLV_DENSITY_ELEMENT, } from '@malva-ui/cdk/density';
+import { MlvBadgeIcon } from '../badge-icon';
+import * as i0 from "@angular/core";
+import * as i1 from "@malva-ui/cdk/density";
+/**
+ * Badge component for displaying short status labels, counts, or tags.
+ * Supports solid and muted color modes across all semantic tone variants,
+ * with full density system integration.
+ *
+ * A projected `[mlvBadgeIcon]` is sized and spaced by the badge itself and can
+ * be moved to either side with the directive's `position` input.
+ *
+ * @example
+ * ```html
+ * <mlv-badge tone="success">Active</mlv-badge>
+ * <mlv-badge tone="danger" muted>Deprecated</mlv-badge>
+ * <mlv-badge tone="primary" mlvDensity="compact">New</mlv-badge>
+ * <mlv-badge tone="success" muted>
+ *   <svg lucideCheck mlvBadgeIcon />
+ *   Published
+ * </mlv-badge>
+ * ```
+ */
+export class MlvBadge {
+    /**
+     * The semantic tone of the badge.
+     * Determines the background and text colors.
+     * Defaults to `'default'` (neutral).
+     */
+    tone = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /**
+     * @deprecated No-op. Badges always render with fully rounded (pill)
+     * corners via `--mlv-radius-full`; this input has never affected the
+     * rendered radius and is kept only so existing `[rounded]` bindings keep
+     * compiling. Override `border-radius` on `.mlv-badge` if you need a
+     * different shape.
+     */
+    rounded = input(false, { ...(ngDevMode ? { debugName: "rounded" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * When `true`, uses muted surface/text tokens instead of solid fill colors.
+     * Muted badges are less visually prominent and suit inline or decorative contexts.
+     * Supports attribute usage: `<mlv-badge muted>` or `<mlv-badge [muted]="true">`.
+     */
+    muted = input(false, { ...(ngDevMode ? { debugName: "muted" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * @protected Projected `[mlvBadgeIcon]`, if any. Only its presence is used —
+     * it adds the label gap, so a badge without an icon keeps its former spacing.
+     */
+    _iconRef = contentChild(MlvBadgeIcon, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_iconRef" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MlvBadge, isStandalone: true, selector: "mlv-badge", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, muted: { classPropertyName: "muted", publicName: "muted", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "\"mlv-badge--tone-\" + tone()", "class.mlv-badge--muted": "muted()", "class.mlv-badge--with-icon": "!!_iconRef()" }, classAttribute: "mlv-badge" }, providers: [{ provide: MLV_DENSITY_ELEMENT, useValue: 'badge' }], queries: [{ propertyName: "_iconRef", first: true, predicate: MlvBadgeIcon, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.MlvDensityDirective, inputs: ["mlvDensity", "mlvDensity"] }], ngImport: i0, template: "<ng-content select=\"[mlvBadgeIcon]\" />\n<ng-content />\n", styles: [".mlv-badge{--mlv-badge-bg: var(--mlv-background-neutral-1);--mlv-badge-color: var(--mlv-text-primary);--mlv-badge-gap: .25rem;--mlv-badge-icon-size: 1em;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--mlv-radius-full);font-size:var(--mlv-font-size-m);font-weight:500;line-height:1;white-space:nowrap;vertical-align:middle;background-color:var(--mlv-badge-bg);color:var(--mlv-badge-color);box-sizing:border-box;padding:var(--mlv-padding-m)}[class*=--tight] .mlv-badge:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-badge[class*=--tight]{font-size:var(--mlv-font-size-xs);padding:var(--mlv-padding-xs);--mlv-badge-gap: .125rem}[class*=--compact] .mlv-badge:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-badge[class*=--compact]{font-size:var(--mlv-font-size-s);padding:var(--mlv-padding-s);--mlv-badge-gap: .1875rem}[class*=--spacious] .mlv-badge:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-badge[class*=--spacious]{font-size:var(--mlv-font-size-l);padding:var(--mlv-padding-l);--mlv-badge-gap: .375rem}[class*=--airy] .mlv-badge:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-badge[class*=--airy]{font-size:var(--mlv-font-size-xl);padding:var(--mlv-padding-xl);--mlv-badge-gap: .5rem}.mlv-badge--with-icon{gap:var(--mlv-badge-gap)}.mlv-badge__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--mlv-badge-icon-size);height:var(--mlv-badge-icon-size)}.mlv-badge__icon--end{order:1}.mlv-badge--tone-default{--mlv-badge-bg: var(--mlv-background-neutral-1);--mlv-badge-color: var(--mlv-text-primary)}.mlv-badge--tone-primary{--mlv-badge-bg: var(--mlv-background-accent-1);--mlv-badge-color: var(--mlv-text-primary-on-accent-1)}.mlv-badge--tone-secondary{--mlv-badge-bg: var(--mlv-background-neutral-1);--mlv-badge-color: var(--mlv-text-action)}.mlv-badge--tone-accent{--mlv-badge-bg: var(--mlv-background-accent-2);--mlv-badge-color: var(--mlv-text-primary-on-accent-2)}.mlv-badge--tone-success{--mlv-badge-bg: var(--mlv-palette-success-500);--mlv-badge-color: var(--mlv-text-inverse)}.mlv-badge--tone-info{--mlv-badge-bg: var(--mlv-palette-info-500);--mlv-badge-color: var(--mlv-text-inverse)}.mlv-badge--tone-warning{--mlv-badge-bg: var(--mlv-background-warning-1);--mlv-badge-color: var(--mlv-text-on-warning)}.mlv-badge--tone-danger{--mlv-badge-bg: var(--mlv-background-danger-1);--mlv-badge-color: var(--mlv-text-on-danger)}.mlv-badge--muted.mlv-badge--tone-default{--mlv-badge-bg: var(--mlv-muted-default-bg-2);--mlv-badge-color: var(--mlv-muted-default-text-2)}.mlv-badge--muted.mlv-badge--tone-primary{--mlv-badge-bg: var(--mlv-muted-primary-bg-2);--mlv-badge-color: var(--mlv-muted-primary-text-2)}.mlv-badge--muted.mlv-badge--tone-secondary{--mlv-badge-bg: var(--mlv-muted-secondary-bg-2);--mlv-badge-color: var(--mlv-muted-secondary-text-2)}.mlv-badge--muted.mlv-badge--tone-accent{--mlv-badge-bg: var(--mlv-muted-accent-bg-2);--mlv-badge-color: var(--mlv-muted-accent-text-2)}.mlv-badge--muted.mlv-badge--tone-success{--mlv-badge-bg: var(--mlv-muted-success-bg-2);--mlv-badge-color: var(--mlv-muted-success-text-2)}.mlv-badge--muted.mlv-badge--tone-info{--mlv-badge-bg: var(--mlv-muted-info-bg-2);--mlv-badge-color: var(--mlv-muted-info-text-2)}.mlv-badge--muted.mlv-badge--tone-warning{--mlv-badge-bg: var(--mlv-muted-warning-bg-2);--mlv-badge-color: var(--mlv-muted-warning-text-2)}.mlv-badge--muted.mlv-badge--tone-danger{--mlv-badge-bg: var(--mlv-muted-danger-bg-2);--mlv-badge-color: var(--mlv-muted-danger-text-2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvBadge, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-badge', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], providers: [{ provide: MLV_DENSITY_ELEMENT, useValue: 'badge' }], hostDirectives: [
+                        {
+                            directive: MlvDensityDirective,
+                            inputs: ['mlvDensity'],
+                        },
+                    ], host: {
+                        class: 'mlv-badge',
+                        '[class]': '"mlv-badge--tone-" + tone()',
+                        '[class.mlv-badge--muted]': 'muted()',
+                        '[class.mlv-badge--with-icon]': '!!_iconRef()',
+                    }, template: "<ng-content select=\"[mlvBadgeIcon]\" />\n<ng-content />\n", styles: [".mlv-badge{--mlv-badge-bg: var(--mlv-background-neutral-1);--mlv-badge-color: var(--mlv-text-primary);--mlv-badge-gap: .25rem;--mlv-badge-icon-size: 1em;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--mlv-radius-full);font-size:var(--mlv-font-size-m);font-weight:500;line-height:1;white-space:nowrap;vertical-align:middle;background-color:var(--mlv-badge-bg);color:var(--mlv-badge-color);box-sizing:border-box;padding:var(--mlv-padding-m)}[class*=--tight] .mlv-badge:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-badge[class*=--tight]{font-size:var(--mlv-font-size-xs);padding:var(--mlv-padding-xs);--mlv-badge-gap: .125rem}[class*=--compact] .mlv-badge:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-badge[class*=--compact]{font-size:var(--mlv-font-size-s);padding:var(--mlv-padding-s);--mlv-badge-gap: .1875rem}[class*=--spacious] .mlv-badge:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-badge[class*=--spacious]{font-size:var(--mlv-font-size-l);padding:var(--mlv-padding-l);--mlv-badge-gap: .375rem}[class*=--airy] .mlv-badge:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-badge[class*=--airy]{font-size:var(--mlv-font-size-xl);padding:var(--mlv-padding-xl);--mlv-badge-gap: .5rem}.mlv-badge--with-icon{gap:var(--mlv-badge-gap)}.mlv-badge__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--mlv-badge-icon-size);height:var(--mlv-badge-icon-size)}.mlv-badge__icon--end{order:1}.mlv-badge--tone-default{--mlv-badge-bg: var(--mlv-background-neutral-1);--mlv-badge-color: var(--mlv-text-primary)}.mlv-badge--tone-primary{--mlv-badge-bg: var(--mlv-background-accent-1);--mlv-badge-color: var(--mlv-text-primary-on-accent-1)}.mlv-badge--tone-secondary{--mlv-badge-bg: var(--mlv-background-neutral-1);--mlv-badge-color: var(--mlv-text-action)}.mlv-badge--tone-accent{--mlv-badge-bg: var(--mlv-background-accent-2);--mlv-badge-color: var(--mlv-text-primary-on-accent-2)}.mlv-badge--tone-success{--mlv-badge-bg: var(--mlv-palette-success-500);--mlv-badge-color: var(--mlv-text-inverse)}.mlv-badge--tone-info{--mlv-badge-bg: var(--mlv-palette-info-500);--mlv-badge-color: var(--mlv-text-inverse)}.mlv-badge--tone-warning{--mlv-badge-bg: var(--mlv-background-warning-1);--mlv-badge-color: var(--mlv-text-on-warning)}.mlv-badge--tone-danger{--mlv-badge-bg: var(--mlv-background-danger-1);--mlv-badge-color: var(--mlv-text-on-danger)}.mlv-badge--muted.mlv-badge--tone-default{--mlv-badge-bg: var(--mlv-muted-default-bg-2);--mlv-badge-color: var(--mlv-muted-default-text-2)}.mlv-badge--muted.mlv-badge--tone-primary{--mlv-badge-bg: var(--mlv-muted-primary-bg-2);--mlv-badge-color: var(--mlv-muted-primary-text-2)}.mlv-badge--muted.mlv-badge--tone-secondary{--mlv-badge-bg: var(--mlv-muted-secondary-bg-2);--mlv-badge-color: var(--mlv-muted-secondary-text-2)}.mlv-badge--muted.mlv-badge--tone-accent{--mlv-badge-bg: var(--mlv-muted-accent-bg-2);--mlv-badge-color: var(--mlv-muted-accent-text-2)}.mlv-badge--muted.mlv-badge--tone-success{--mlv-badge-bg: var(--mlv-muted-success-bg-2);--mlv-badge-color: var(--mlv-muted-success-text-2)}.mlv-badge--muted.mlv-badge--tone-info{--mlv-badge-bg: var(--mlv-muted-info-bg-2);--mlv-badge-color: var(--mlv-muted-info-text-2)}.mlv-badge--muted.mlv-badge--tone-warning{--mlv-badge-bg: var(--mlv-muted-warning-bg-2);--mlv-badge-color: var(--mlv-muted-warning-text-2)}.mlv-badge--muted.mlv-badge--tone-danger{--mlv-badge-bg: var(--mlv-muted-danger-bg-2);--mlv-badge-color: var(--mlv-muted-danger-text-2)}\n"] }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], muted: [{ type: i0.Input, args: [{ isSignal: true, alias: "muted", required: false }] }], _iconRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvBadgeIcon), { isSignal: true }] }] } });
+//# sourceMappingURL=badge.js.map

package/esm2022/badge/lib/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../../../../libs/core/badge/src/lib/badge/badge.ts","../../../../../../../libs/core/badge/src/lib/badge/badge.html"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,iBAAiB,EACjB,YAAY,EACZ,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EACL,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;;;AAc7C;;;;;;;;;;;;;;;;;;GAkBG;AAsBH,MAAM,OAAO,QAAQ;IACnB;;;;OAIG;IACM,IAAI,GAAG,KAAK,CAAe,SAAS;6EAAC,CAAC;IAE/C;;;;;;OAMG;IACM,OAAO,GAAG,KAAK,CAAwB,KAAK,+EACnD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH;;;;OAIG;IACM,KAAK,GAAG,KAAK,CAAwB,KAAK,6EACjD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH;;;OAGG;IACgB,QAAQ,GAAG,YAAY,CAAC,YAAY;iFAAC,CAAC;uGAhC9C,QAAQ;2FAAR,QAAQ,mmBAdR,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,gEA8CrB,YAAY,+JCpGzD,4DAEA;;2FDkEa,QAAQ;kBArBpB,SAAS;+BACE,WAAW,iBAGN,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,WACtC,EAAE,aACA,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,kBAChD;wBACd;4BACE,SAAS,EAAE,mBAAmB;4BAC9B,MAAM,EAAE,CAAC,YAAY,CAAC;yBACvB;qBACF,QACK;wBACJ,KAAK,EAAE,WAAW;wBAClB,SAAS,EAAE,6BAA6B;wBACxC,0BAA0B,EAAE,SAAS;wBACrC,8BAA8B,EAAE,cAAc;qBAC/C;6WAkC0C,YAAY","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  contentChild,\n  input,\n} from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  MlvDensityDirective,\n  MLV_DENSITY_ELEMENT,\n} from '@malva-ui/cdk/density';\nimport type { MlvTone } from '@malva-ui/cdk/utils';\nimport { MlvBadgeIcon } from '../badge-icon';\n\n/**\n * Available tone variants for the badge component.\n * Extends the shared {@link MlvTone} semantic vocabulary with neutral and\n * brand options, mapping to color tokens in the design system.\n */\nexport type MlvBadgeTone =\n  | MlvTone\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'accent';\n\n/**\n * Badge component for displaying short status labels, counts, or tags.\n * Supports solid and muted color modes across all semantic tone variants,\n * with full density system integration.\n *\n * A projected `[mlvBadgeIcon]` is sized and spaced by the badge itself and can\n * be moved to either side with the directive's `position` input.\n *\n * @example\n * ```html\n * <mlv-badge tone=\"success\">Active</mlv-badge>\n * <mlv-badge tone=\"danger\" muted>Deprecated</mlv-badge>\n * <mlv-badge tone=\"primary\" mlvDensity=\"compact\">New</mlv-badge>\n * <mlv-badge tone=\"success\" muted>\n *   <svg lucideCheck mlvBadgeIcon />\n *   Published\n * </mlv-badge>\n * ```\n */\n@Component({\n  selector: 'mlv-badge',\n  templateUrl: './badge.html',\n  styleUrl: './badge.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [],\n  providers: [{ provide: MLV_DENSITY_ELEMENT, useValue: 'badge' }],\n  hostDirectives: [\n    {\n      directive: MlvDensityDirective,\n      inputs: ['mlvDensity'],\n    },\n  ],\n  host: {\n    class: 'mlv-badge',\n    '[class]': '\"mlv-badge--tone-\" + tone()',\n    '[class.mlv-badge--muted]': 'muted()',\n    '[class.mlv-badge--with-icon]': '!!_iconRef()',\n  },\n})\nexport class MlvBadge {\n  /**\n   * The semantic tone of the badge.\n   * Determines the background and text colors.\n   * Defaults to `'default'` (neutral).\n   */\n  readonly tone = input<MlvBadgeTone>('default');\n\n  /**\n   * @deprecated No-op. Badges always render with fully rounded (pill)\n   * corners via `--mlv-radius-full`; this input has never affected the\n   * rendered radius and is kept only so existing `[rounded]` bindings keep\n   * compiling. Override `border-radius` on `.mlv-badge` if you need a\n   * different shape.\n   */\n  readonly rounded = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * When `true`, uses muted surface/text tokens instead of solid fill colors.\n   * Muted badges are less visually prominent and suit inline or decorative contexts.\n   * Supports attribute usage: `<mlv-badge muted>` or `<mlv-badge [muted]=\"true\">`.\n   */\n  readonly muted = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * @protected Projected `[mlvBadgeIcon]`, if any. Only its presence is used —\n   * it adds the label gap, so a badge without an icon keeps its former spacing.\n   */\n  protected readonly _iconRef = contentChild(MlvBadgeIcon);\n}\n","<ng-content select=\"[mlvBadgeIcon]\" />\n<ng-content />\n"]}

package/esm2022/badge/lib/badge-icon.js

@@ -0,0 +1,47 @@
+import { Directive, input } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Marks a projected element as the badge's icon slot. The badge sizes it from
+ * its own density-driven font size and adds the label gap, so consumers do not
+ * have to hand-tune `width`/`height` per density.
+ *
+ * The icon is decorative by default (`aria-hidden="true"`): a badge normally
+ * repeats the icon's meaning in its label. When the icon is the badge's only
+ * content, give the badge itself an accessible name.
+ *
+ * @example
+ * ```html
+ * <mlv-badge tone="success" muted>
+ *   <svg lucideCheck mlvBadgeIcon />
+ *   Published
+ * </mlv-badge>
+ *
+ * <mlv-badge tone="info">
+ *   Syncing
+ *   <svg lucideRefreshCw mlvBadgeIcon position="end" />
+ * </mlv-badge>
+ * ```
+ */
+export class MlvBadgeIcon {
+    /**
+     * Where the icon sits relative to the badge label. `'start'` (the default)
+     * keeps it leading; `'end'` moves it after the label. Both are reordered by
+     * CSS, so the icon can stay wherever it reads best in the template.
+     */
+    position = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvBadgeIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvBadgeIcon, isStandalone: true, selector: "[mlvBadgeIcon]", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class.mlv-badge__icon--end": "position() === 'end'" }, classAttribute: "mlv-badge__icon" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvBadgeIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvBadgeIcon]',
+                    host: {
+                        class: 'mlv-badge__icon',
+                        '[class.mlv-badge__icon--end]': "position() === 'end'",
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+//# sourceMappingURL=badge-icon.js.map

package/esm2022/badge/lib/badge-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-icon.js","sourceRoot":"","sources":["../../../../../../libs/core/badge/src/lib/badge-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;;AAKjD;;;;;;;;;;;;;;;;;;;;;GAqBG;AASH,MAAM,OAAO,YAAY;IACvB;;;;OAIG;IACM,QAAQ,GAAG,KAAK,CAAuB,OAAO;iFAAC,CAAC;uGAN9C,YAAY;2FAAZ,YAAY;;2FAAZ,YAAY;kBARxB,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,IAAI,EAAE;wBACJ,KAAK,EAAE,iBAAiB;wBACxB,8BAA8B,EAAE,sBAAsB;wBACtD,aAAa,EAAE,MAAM;qBACtB;iBACF","sourcesContent":["import { Directive, input } from '@angular/core';\n\n/** Which side of the badge label a `[mlvBadgeIcon]` renders on. */\nexport type MlvBadgeIconPosition = 'start' | 'end';\n\n/**\n * Marks a projected element as the badge's icon slot. The badge sizes it from\n * its own density-driven font size and adds the label gap, so consumers do not\n * have to hand-tune `width`/`height` per density.\n *\n * The icon is decorative by default (`aria-hidden=\"true\"`): a badge normally\n * repeats the icon's meaning in its label. When the icon is the badge's only\n * content, give the badge itself an accessible name.\n *\n * @example\n * ```html\n * <mlv-badge tone=\"success\" muted>\n *   <svg lucideCheck mlvBadgeIcon />\n *   Published\n * </mlv-badge>\n *\n * <mlv-badge tone=\"info\">\n *   Syncing\n *   <svg lucideRefreshCw mlvBadgeIcon position=\"end\" />\n * </mlv-badge>\n * ```\n */\n@Directive({\n  selector: '[mlvBadgeIcon]',\n  host: {\n    class: 'mlv-badge__icon',\n    '[class.mlv-badge__icon--end]': \"position() === 'end'\",\n    'aria-hidden': 'true',\n  },\n})\nexport class MlvBadgeIcon {\n  /**\n   * Where the icon sits relative to the badge label. `'start'` (the default)\n   * keeps it leading; `'end'` moves it after the label. Both are reordered by\n   * CSS, so the icon can stay wherever it reads best in the template.\n   */\n  readonly position = input<MlvBadgeIconPosition>('start');\n}\n"]}

package/esm2022/badge/malva-ui-core-badge.js

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=malva-ui-core-badge.js.map

package/esm2022/badge/malva-ui-core-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-badge.js","sourceRoot":"","sources":["../../../../../libs/core/badge/src/malva-ui-core-badge.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"]}

package/esm2022/bottom-nav/index.js

@@ -0,0 +1,2 @@
+export * from './lib/bottom-nav/bottom-nav';
+//# sourceMappingURL=index.js.map

package/esm2022/bottom-nav/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/core/bottom-nav/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './lib/bottom-nav/bottom-nav';\n"]}