@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-avatar.mjs

@@ -0,0 +1,247 @@
+import * as i0 from '@angular/core';
+import { input, signal, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, Pipe } from '@angular/core';
+import { MlvFade } from '@malva-ui/cdk/utils';
+
+/**
+ * Derives initials from a name string.
+ * Takes the first letter of each space-separated part, max 2.
+ *
+ * @example
+ * deriveInitials('John Doe')         // 'JD'
+ * deriveInitials('Alice')            // 'A'
+ * deriveInitials('John Michael Doe') // 'JD'
+ * deriveInitials('')                 // ''
+ */
+function deriveInitials(name) {
+    if (!name || !name.trim()) {
+        return '';
+    }
+    const parts = name.trim().split(/\s+/);
+    return parts
+        .slice(0, 2)
+        .map((p) => p.charAt(0).toUpperCase())
+        .join('');
+}
+/**
+ * Avatar component displaying a user or entity representation.
+ *
+ * Supports image URLs, text initials (explicit or derived from a name),
+ * arbitrary projected content (e.g. icons), and an optional label below.
+ *
+ * Content priority: `src` image > `initials`/`name` > `ng-content`.
+ *
+ * @example
+ * ```html
+ * <mlv-avatar name="John Doe" [color]="'John Doe' | mlvColorFromText" />
+ * <mlv-avatar src="https://example.com/avatar.jpg" label="John Doe" />
+ * <mlv-avatar size="xl" shape="square" initials="JD" color="#5770cb" />
+ * ```
+ */
+class MlvAvatar {
+    /**
+     * The size variant of the avatar.
+     * Maps to predefined width/height and font-size values.
+     */
+    size = input('m', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * The shape of the avatar visual container.
+     * `circle` is fully rounded; `square` uses `--mlv-radius-2` (8px).
+     */
+    shape = input('circle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional image URL. When provided, the avatar displays an image.
+     * A loading skeleton is shown while the image loads.
+     * On error, falls back to initials or projected content.
+     */
+    src = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    /**
+     * A name string from which initials are automatically derived.
+     * Takes the first character of each space-separated word, up to 2 characters.
+     * E.g. "John Doe" → "JD", "Alice" → "A", "John Michael Doe" → "JD".
+     * Ignored when `initials` is explicitly set.
+     */
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * Explicit initials string. When provided, overrides initials derived from `name`.
+     */
+    initials = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    /**
+     * CSS color value for the avatar background.
+     * Accepts any valid CSS color: hex, rgb, hsl, CSS custom property reference.
+     * Defaults to `var(--mlv-text-secondary)`.
+     */
+    color = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional label text displayed below the avatar.
+     * Long text is gracefully faded at the edges using `MlvFade`.
+     */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Whether the image has successfully loaded.
+     */
+    _imageLoaded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_imageLoaded" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Whether the image encountered a load error.
+     */
+    _imageError = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_imageError" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Computed background color style value.
+     * Returns the `color` input if set, otherwise the default CSS variable.
+     */
+    _backgroundColor = computed(() => {
+        const c = this.color();
+        return c ? c : 'var(--mlv-text-secondary)';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_backgroundColor" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Resolved initials to display.
+     * Uses explicit `initials` input first, then derives from `name`.
+     */
+    _resolvedInitials = computed(() => {
+        const explicit = this.initials();
+        if (explicit) {
+            return explicit;
+        }
+        return deriveInitials(this.name());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedInitials" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Accessible name for the avatar as a whole.
+     * Prefers the display `name`, falling back to the `label`. Returns `null`
+     * when neither is set so the host stays role-less (see host bindings).
+     */
+    _accessibleName = computed(() => this.name().trim() || this.label().trim() || null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_accessibleName" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Whether to show the image element (src provided and no error).
+     */
+    _showImage = computed(() => {
+        return !!this.src() && !this._imageError();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showImage" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Whether to show the loading skeleton.
+     */
+    _showSkeleton = computed(() => {
+        return !!this.src() && !this._imageLoaded() && !this._imageError();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showSkeleton" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Whether to show initials (no valid image, and initials are available).
+     */
+    _showInitials = computed(() => {
+        return !this._showImage() && !!this._resolvedInitials();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showInitials" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Whether to show projected ng-content (no valid image and no initials).
+     */
+    _showContent = computed(() => {
+        return !this._showImage() && !this._resolvedInitials();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showContent" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Label words split for individual MlvFade wrapping.
+     */
+    _labelWords = computed(() => {
+        const l = this.label();
+        if (!l || !l.trim()) {
+            return [];
+        }
+        return l.trim().split(/\s+/);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_labelWords" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Handles the image load event.
+     */
+    _onImageLoad() {
+        this._imageLoaded.set(true);
+    }
+    /**
+     * @internal Handles the image error event.
+     */
+    _onImageError() {
+        this._imageError.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvAvatar, isStandalone: true, selector: "mlv-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "\"mlv-avatar--\" + size()", "class.mlv-avatar--circle": "shape() === \"circle\"", "class.mlv-avatar--square": "shape() === \"square\"", "attr.role": "_accessibleName() ? \"img\" : null", "attr.aria-label": "_accessibleName()" }, classAttribute: "mlv-avatar" }, ngImport: i0, template: "<div class=\"mlv-avatar__visual\" [style.background-color]=\"_backgroundColor()\">\n  @if (_showSkeleton()) {\n  <div class=\"mlv-avatar__skeleton\" aria-hidden=\"true\"></div>\n  } @if (_showImage()) {\n  <img\n    class=\"mlv-avatar__image\"\n    [src]=\"src()\"\n    [class.mlv-avatar__image--loaded]=\"_imageLoaded()\"\n    (load)=\"_onImageLoad()\"\n    (error)=\"_onImageError()\"\n    alt=\"\"\n    aria-hidden=\"true\"\n  />\n  } @if (_showInitials()) {\n  <span class=\"mlv-avatar__initials\" aria-hidden=\"true\"\n    >{{ _resolvedInitials() }}</span\n  >\n  } @if (_showContent()) {\n  <span class=\"mlv-avatar__content\">\n    <ng-content />\n  </span>\n  }\n</div>\n\n@if (_labelWords().length > 0) {\n<div class=\"mlv-avatar__label\">\n  @for (word of _labelWords(); track $index) {\n  <span\n    class=\"mlv-avatar__label-word\"\n    [mlvFade]=\"'horizontal'\"\n    mlvFadeSize=\"1.5em\"\n    >{{ word }}</span\n  >\n  }\n</div>\n}\n", styles: ["@layer mlv.components{.mlv-avatar{display:inline-flex;flex-direction:column;align-items:center;gap:var(--mlv-spacing-2, .5rem)}.mlv-avatar--xs{--mlv-avatar-size: 1.5rem;--mlv-avatar-font: .625rem}.mlv-avatar--s{--mlv-avatar-size: 2rem;--mlv-avatar-font: .75rem}.mlv-avatar--m{--mlv-avatar-size: 2.5rem;--mlv-avatar-font: .875rem}.mlv-avatar--l{--mlv-avatar-size: 3.5rem;--mlv-avatar-font: 1rem}.mlv-avatar--xl{--mlv-avatar-size: 5rem;--mlv-avatar-font: 1.25rem}.mlv-avatar--xxl{--mlv-avatar-size: 6rem;--mlv-avatar-font: 1.5rem}.mlv-avatar__visual{position:relative;display:flex;align-items:center;justify-content:center;width:var(--mlv-avatar-size, 2.5rem);height:var(--mlv-avatar-size, 2.5rem);flex-shrink:0;overflow:hidden;background-color:var(--mlv-background-neutral-1);color:var(--mlv-text-primary);-webkit-user-select:none;user-select:none}.mlv-avatar--circle .mlv-avatar__visual{border-radius:var(--mlv-radius-full)}.mlv-avatar--square .mlv-avatar__visual{border-radius:var(--mlv-radius-m)}.mlv-avatar__image{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity var(--mlv-duration-normal, .2s) var(--mlv-ease-default, ease)}.mlv-avatar__image--loaded{opacity:1}.mlv-avatar__initials{font-size:var(--mlv-avatar-font, .875rem);font-weight:600;line-height:1;letter-spacing:var(--mlv-letter-spacing-wide, .025em);color:var(--mlv-palette-neutral-800);opacity:.8;text-transform:uppercase}.mlv-avatar__content{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:inherit}.mlv-avatar__skeleton{position:absolute;inset:0;background:linear-gradient(90deg,var(--mlv-background-sunken) 25%,var(--mlv-background-base) 50%,var(--mlv-background-sunken) 75%);background-size:200% 100%;animation:mlv-avatar-shimmer 1.4s ease-in-out infinite;border-radius:inherit}.mlv-avatar__label{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;gap:.125rem;max-width:var(--mlv-avatar-size);width:100%;overflow:hidden}.mlv-avatar__label-word{display:block;font-size:var(--mlv-font-size-s);font-weight:500;color:var(--mlv-text-primary);white-space:nowrap;flex-shrink:1;min-width:0;max-width:100%}@media(prefers-reduced-motion:reduce){.mlv-avatar,.mlv-avatar *,.mlv-avatar:before,.mlv-avatar:after,[class^=mlv-avatar__],[class*=\" mlv-avatar__\"],[class^=mlv-avatar--],[class*=\" mlv-avatar--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}@keyframes mlv-avatar-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}}\n"], dependencies: [{ kind: "component", type: MlvFade, selector: "[mlvFade]", inputs: ["mlvFadeHeight", "mlvFadeSize", "mlvFadeOffset", "mlvFade"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvAvatar, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-avatar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MlvFade], host: {
+                        class: 'mlv-avatar',
+                        '[class]': '"mlv-avatar--" + size()',
+                        '[class.mlv-avatar--circle]': 'shape() === "circle"',
+                        '[class.mlv-avatar--square]': 'shape() === "square"',
+                        // Expose the avatar as a single labelled image to assistive tech when it
+                        // represents a named entity. Without a name there is nothing to label, so
+                        // the role is omitted (the visible initials/content speak for themselves)
+                        // rather than emitting a nameless `role="img"`.
+                        '[attr.role]': '_accessibleName() ? "img" : null',
+                        '[attr.aria-label]': '_accessibleName()',
+                    }, template: "<div class=\"mlv-avatar__visual\" [style.background-color]=\"_backgroundColor()\">\n  @if (_showSkeleton()) {\n  <div class=\"mlv-avatar__skeleton\" aria-hidden=\"true\"></div>\n  } @if (_showImage()) {\n  <img\n    class=\"mlv-avatar__image\"\n    [src]=\"src()\"\n    [class.mlv-avatar__image--loaded]=\"_imageLoaded()\"\n    (load)=\"_onImageLoad()\"\n    (error)=\"_onImageError()\"\n    alt=\"\"\n    aria-hidden=\"true\"\n  />\n  } @if (_showInitials()) {\n  <span class=\"mlv-avatar__initials\" aria-hidden=\"true\"\n    >{{ _resolvedInitials() }}</span\n  >\n  } @if (_showContent()) {\n  <span class=\"mlv-avatar__content\">\n    <ng-content />\n  </span>\n  }\n</div>\n\n@if (_labelWords().length > 0) {\n<div class=\"mlv-avatar__label\">\n  @for (word of _labelWords(); track $index) {\n  <span\n    class=\"mlv-avatar__label-word\"\n    [mlvFade]=\"'horizontal'\"\n    mlvFadeSize=\"1.5em\"\n    >{{ word }}</span\n  >\n  }\n</div>\n}\n", styles: ["@layer mlv.components{.mlv-avatar{display:inline-flex;flex-direction:column;align-items:center;gap:var(--mlv-spacing-2, .5rem)}.mlv-avatar--xs{--mlv-avatar-size: 1.5rem;--mlv-avatar-font: .625rem}.mlv-avatar--s{--mlv-avatar-size: 2rem;--mlv-avatar-font: .75rem}.mlv-avatar--m{--mlv-avatar-size: 2.5rem;--mlv-avatar-font: .875rem}.mlv-avatar--l{--mlv-avatar-size: 3.5rem;--mlv-avatar-font: 1rem}.mlv-avatar--xl{--mlv-avatar-size: 5rem;--mlv-avatar-font: 1.25rem}.mlv-avatar--xxl{--mlv-avatar-size: 6rem;--mlv-avatar-font: 1.5rem}.mlv-avatar__visual{position:relative;display:flex;align-items:center;justify-content:center;width:var(--mlv-avatar-size, 2.5rem);height:var(--mlv-avatar-size, 2.5rem);flex-shrink:0;overflow:hidden;background-color:var(--mlv-background-neutral-1);color:var(--mlv-text-primary);-webkit-user-select:none;user-select:none}.mlv-avatar--circle .mlv-avatar__visual{border-radius:var(--mlv-radius-full)}.mlv-avatar--square .mlv-avatar__visual{border-radius:var(--mlv-radius-m)}.mlv-avatar__image{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity var(--mlv-duration-normal, .2s) var(--mlv-ease-default, ease)}.mlv-avatar__image--loaded{opacity:1}.mlv-avatar__initials{font-size:var(--mlv-avatar-font, .875rem);font-weight:600;line-height:1;letter-spacing:var(--mlv-letter-spacing-wide, .025em);color:var(--mlv-palette-neutral-800);opacity:.8;text-transform:uppercase}.mlv-avatar__content{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:inherit}.mlv-avatar__skeleton{position:absolute;inset:0;background:linear-gradient(90deg,var(--mlv-background-sunken) 25%,var(--mlv-background-base) 50%,var(--mlv-background-sunken) 75%);background-size:200% 100%;animation:mlv-avatar-shimmer 1.4s ease-in-out infinite;border-radius:inherit}.mlv-avatar__label{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;gap:.125rem;max-width:var(--mlv-avatar-size);width:100%;overflow:hidden}.mlv-avatar__label-word{display:block;font-size:var(--mlv-font-size-s);font-weight:500;color:var(--mlv-text-primary);white-space:nowrap;flex-shrink:1;min-width:0;max-width:100%}@media(prefers-reduced-motion:reduce){.mlv-avatar,.mlv-avatar *,.mlv-avatar:before,.mlv-avatar:after,[class^=mlv-avatar__],[class*=\" mlv-avatar__\"],[class^=mlv-avatar--],[class*=\" mlv-avatar--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}@keyframes mlv-avatar-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/**
+ * Converts a string to an HSL CSS color by hashing the string characters into a hue (0–360).
+ *
+ * Hue is the only thing the name controls. Saturation stays near 60% and lightness
+ * near 80% so every derived color is a **pale tint** that carries dark text at AA
+ * — per AB-R6 of the 2026-08 visual language spec, a name-derived avatar is a quiet
+ * identity marker, not an accent-carrying mark competing for the view's accent budget.
+ * Callers that want no identity hue at all simply omit `[color]`; `mlv-avatar` then
+ * falls back to `--mlv-text-secondary`.
+ *
+ * @example
+ * {{ 'John Doe' | mlvColorFromText }}  // 'hsl(147,58%,78%)'
+ * {{ 'Alice' | mlvColorFromText }}     // 'hsl(88,63%,83%)'
+ */
+class MlvColorFromTextPipe {
+    /**
+     * Transforms a string into a deterministic HSL color value.
+     *
+     * @param value - The string to convert. Returns a default color for empty strings.
+     * @returns A CSS `hsl(...)` string.
+     */
+    transform(value) {
+        if (!value) {
+            // Same pale band as every hashed value below. The AB-R6 retune moved the
+            // hashed lightness 45% -> ~80% but left this literal at 45%, so a nameless
+            // avatar rendered a mid-dark fill under `avatar.scss`'s dark
+            // `--mlv-palette-neutral-800` initials (~3.0:1, under AA). Keeping the
+            // fallback inside the band restores ~8.7:1 and makes the format uniform.
+            return 'hsl(210,60%,80%)';
+        }
+        let hash = 0;
+        for (let i = 0; i < value.length; i++) {
+            hash = value.charCodeAt(i) + ((hash << 5) - hash);
+            hash |= 0; // Convert to 32-bit integer
+        }
+        const hue = Math.abs(hash) % 360;
+        const saturation = 60 + (hash % 5);
+        const lightness = 80 + (hash % 5);
+        return `hsl(${hue},${saturation}%,${lightness}%)`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvColorFromTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: MlvColorFromTextPipe, isStandalone: true, name: "mlvColorFromText" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvColorFromTextPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'mlvColorFromText' }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvAvatar, MlvColorFromTextPipe, deriveInitials };
+//# sourceMappingURL=malva-ui-core-avatar.mjs.map

package/fesm2022/malva-ui-core-avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-avatar.mjs","sources":["../../../../libs/core/avatar/src/lib/avatar/avatar.ts","../../../../libs/core/avatar/src/lib/avatar/avatar.html","../../../../libs/core/avatar/src/lib/color-from-text.pipe.ts","../../../../libs/core/avatar/src/malva-ui-core-avatar.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { MlvFade } from '@malva-ui/cdk/utils';\n\n/** Available size variants for the avatar component. */\nexport type MlvAvatarSize = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n\n/** Available shape variants for the avatar component. */\nexport type MlvAvatarShape = 'circle' | 'square';\n\n/**\n * Derives initials from a name string.\n * Takes the first letter of each space-separated part, max 2.\n *\n * @example\n * deriveInitials('John Doe')         // 'JD'\n * deriveInitials('Alice')            // 'A'\n * deriveInitials('John Michael Doe') // 'JD'\n * deriveInitials('')                 // ''\n */\nexport function deriveInitials(name: string): string {\n  if (!name || !name.trim()) {\n    return '';\n  }\n  const parts = name.trim().split(/\\s+/);\n  return parts\n    .slice(0, 2)\n    .map((p) => p.charAt(0).toUpperCase())\n    .join('');\n}\n\n/**\n * Avatar component displaying a user or entity representation.\n *\n * Supports image URLs, text initials (explicit or derived from a name),\n * arbitrary projected content (e.g. icons), and an optional label below.\n *\n * Content priority: `src` image > `initials`/`name` > `ng-content`.\n *\n * @example\n * ```html\n * <mlv-avatar name=\"John Doe\" [color]=\"'John Doe' | mlvColorFromText\" />\n * <mlv-avatar src=\"https://example.com/avatar.jpg\" label=\"John Doe\" />\n * <mlv-avatar size=\"xl\" shape=\"square\" initials=\"JD\" color=\"#5770cb\" />\n * ```\n */\n@Component({\n  selector: 'mlv-avatar',\n  templateUrl: './avatar.html',\n  styleUrl: './avatar.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [MlvFade],\n  host: {\n    class: 'mlv-avatar',\n    '[class]': '\"mlv-avatar--\" + size()',\n    '[class.mlv-avatar--circle]': 'shape() === \"circle\"',\n    '[class.mlv-avatar--square]': 'shape() === \"square\"',\n    // Expose the avatar as a single labelled image to assistive tech when it\n    // represents a named entity. Without a name there is nothing to label, so\n    // the role is omitted (the visible initials/content speak for themselves)\n    // rather than emitting a nameless `role=\"img\"`.\n    '[attr.role]': '_accessibleName() ? \"img\" : null',\n    '[attr.aria-label]': '_accessibleName()',\n  },\n})\nexport class MlvAvatar {\n  /**\n   * The size variant of the avatar.\n   * Maps to predefined width/height and font-size values.\n   */\n  readonly size = input<MlvAvatarSize>('m');\n\n  /**\n   * The shape of the avatar visual container.\n   * `circle` is fully rounded; `square` uses `--mlv-radius-2` (8px).\n   */\n  readonly shape = input<MlvAvatarShape>('circle');\n\n  /**\n   * Optional image URL. When provided, the avatar displays an image.\n   * A loading skeleton is shown while the image loads.\n   * On error, falls back to initials or projected content.\n   */\n  readonly src = input<string | null>(null);\n\n  /**\n   * A name string from which initials are automatically derived.\n   * Takes the first character of each space-separated word, up to 2 characters.\n   * E.g. \"John Doe\" → \"JD\", \"Alice\" → \"A\", \"John Michael Doe\" → \"JD\".\n   * Ignored when `initials` is explicitly set.\n   */\n  readonly name = input<string>('');\n\n  /**\n   * Explicit initials string. When provided, overrides initials derived from `name`.\n   */\n  readonly initials = input<string>('');\n\n  /**\n   * CSS color value for the avatar background.\n   * Accepts any valid CSS color: hex, rgb, hsl, CSS custom property reference.\n   * Defaults to `var(--mlv-text-secondary)`.\n   */\n  readonly color = input<string>('');\n\n  /**\n   * Optional label text displayed below the avatar.\n   * Long text is gracefully faded at the edges using `MlvFade`.\n   */\n  readonly label = input<string>('');\n\n  /**\n   * @internal Whether the image has successfully loaded.\n   */\n  protected readonly _imageLoaded = signal(false);\n\n  /**\n   * @internal Whether the image encountered a load error.\n   */\n  protected readonly _imageError = signal(false);\n\n  /**\n   * @internal Computed background color style value.\n   * Returns the `color` input if set, otherwise the default CSS variable.\n   */\n  protected readonly _backgroundColor = computed(() => {\n    const c = this.color();\n    return c ? c : 'var(--mlv-text-secondary)';\n  });\n\n  /**\n   * @internal Resolved initials to display.\n   * Uses explicit `initials` input first, then derives from `name`.\n   */\n  protected readonly _resolvedInitials = computed(() => {\n    const explicit = this.initials();\n    if (explicit) {\n      return explicit;\n    }\n    return deriveInitials(this.name());\n  });\n\n  /**\n   * @internal Accessible name for the avatar as a whole.\n   * Prefers the display `name`, falling back to the `label`. Returns `null`\n   * when neither is set so the host stays role-less (see host bindings).\n   */\n  protected readonly _accessibleName = computed(\n    () => this.name().trim() || this.label().trim() || null,\n  );\n\n  /**\n   * @internal Whether to show the image element (src provided and no error).\n   */\n  protected readonly _showImage = computed(() => {\n    return !!this.src() && !this._imageError();\n  });\n\n  /**\n   * @internal Whether to show the loading skeleton.\n   */\n  protected readonly _showSkeleton = computed(() => {\n    return !!this.src() && !this._imageLoaded() && !this._imageError();\n  });\n\n  /**\n   * @internal Whether to show initials (no valid image, and initials are available).\n   */\n  protected readonly _showInitials = computed(() => {\n    return !this._showImage() && !!this._resolvedInitials();\n  });\n\n  /**\n   * @internal Whether to show projected ng-content (no valid image and no initials).\n   */\n  protected readonly _showContent = computed(() => {\n    return !this._showImage() && !this._resolvedInitials();\n  });\n\n  /**\n   * @internal Label words split for individual MlvFade wrapping.\n   */\n  protected readonly _labelWords = computed(() => {\n    const l = this.label();\n    if (!l || !l.trim()) {\n      return [];\n    }\n    return l.trim().split(/\\s+/);\n  });\n\n  /**\n   * @internal Handles the image load event.\n   */\n  protected _onImageLoad(): void {\n    this._imageLoaded.set(true);\n  }\n\n  /**\n   * @internal Handles the image error event.\n   */\n  protected _onImageError(): void {\n    this._imageError.set(true);\n  }\n}\n","<div class=\"mlv-avatar__visual\" [style.background-color]=\"_backgroundColor()\">\n  @if (_showSkeleton()) {\n  <div class=\"mlv-avatar__skeleton\" aria-hidden=\"true\"></div>\n  } @if (_showImage()) {\n  <img\n    class=\"mlv-avatar__image\"\n    [src]=\"src()\"\n    [class.mlv-avatar__image--loaded]=\"_imageLoaded()\"\n    (load)=\"_onImageLoad()\"\n    (error)=\"_onImageError()\"\n    alt=\"\"\n    aria-hidden=\"true\"\n  />\n  } @if (_showInitials()) {\n  <span class=\"mlv-avatar__initials\" aria-hidden=\"true\"\n    >{{ _resolvedInitials() }}</span\n  >\n  } @if (_showContent()) {\n  <span class=\"mlv-avatar__content\">\n    <ng-content />\n  </span>\n  }\n</div>\n\n@if (_labelWords().length > 0) {\n<div class=\"mlv-avatar__label\">\n  @for (word of _labelWords(); track $index) {\n  <span\n    class=\"mlv-avatar__label-word\"\n    [mlvFade]=\"'horizontal'\"\n    mlvFadeSize=\"1.5em\"\n    >{{ word }}</span\n  >\n  }\n</div>\n}\n","import type { PipeTransform } from '@angular/core';\nimport { Pipe } from '@angular/core';\n\n/**\n * Converts a string to an HSL CSS color by hashing the string characters into a hue (0–360).\n *\n * Hue is the only thing the name controls. Saturation stays near 60% and lightness\n * near 80% so every derived color is a **pale tint** that carries dark text at AA\n * — per AB-R6 of the 2026-08 visual language spec, a name-derived avatar is a quiet\n * identity marker, not an accent-carrying mark competing for the view's accent budget.\n * Callers that want no identity hue at all simply omit `[color]`; `mlv-avatar` then\n * falls back to `--mlv-text-secondary`.\n *\n * @example\n * {{ 'John Doe' | mlvColorFromText }}  // 'hsl(147,58%,78%)'\n * {{ 'Alice' | mlvColorFromText }}     // 'hsl(88,63%,83%)'\n */\n@Pipe({ name: 'mlvColorFromText' })\nexport class MlvColorFromTextPipe implements PipeTransform {\n  /**\n   * Transforms a string into a deterministic HSL color value.\n   *\n   * @param value - The string to convert. Returns a default color for empty strings.\n   * @returns A CSS `hsl(...)` string.\n   */\n  transform(value: string | null | undefined): string {\n    if (!value) {\n      // Same pale band as every hashed value below. The AB-R6 retune moved the\n      // hashed lightness 45% -> ~80% but left this literal at 45%, so a nameless\n      // avatar rendered a mid-dark fill under `avatar.scss`'s dark\n      // `--mlv-palette-neutral-800` initials (~3.0:1, under AA). Keeping the\n      // fallback inside the band restores ~8.7:1 and makes the format uniform.\n      return 'hsl(210,60%,80%)';\n    }\n    let hash = 0;\n    for (let i = 0; i < value.length; i++) {\n      hash = value.charCodeAt(i) + ((hash << 5) - hash);\n      hash |= 0; // Convert to 32-bit integer\n    }\n    const hue = Math.abs(hash) % 360;\n    const saturation = 60 + (hash % 5);\n    const lightness = 80 + (hash % 5);\n    return `hsl(${hue},${saturation}%,${lightness}%)`;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/malva-ui-core-badge.mjs

@@ -0,0 +1,122 @@
+import * as i0 from '@angular/core';
+import { input, Directive, contentChild, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i1 from '@malva-ui/cdk/density';
+import { MLV_DENSITY_ELEMENT, MlvDensityDirective } from '@malva-ui/cdk/density';
+
+/**
+ * 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>
+ * ```
+ */
+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 }] }] } });
+
+/**
+ * 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>
+ * ```
+ */
+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: ["@layer mlv.components{.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-badge);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: ["@layer mlv.components{.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-badge);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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvBadge, MlvBadgeIcon };
+//# sourceMappingURL=malva-ui-core-badge.mjs.map

package/fesm2022/malva-ui-core-badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-badge.mjs","sources":["../../../../libs/core/badge/src/lib/badge-icon.ts","../../../../libs/core/badge/src/lib/badge/badge.ts","../../../../libs/core/badge/src/lib/badge/badge.html","../../../../libs/core/badge/src/malva-ui-core-badge.ts"],"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","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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAKA;;;;;;;;;;;;;;;;;;;;;AAqBG;MASU,YAAY,CAAA;AACvB;;;;AAIG;IACM,QAAQ,GAAG,KAAK,CAAuB,OAAO;iFAAC;uGAN7C,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,EAAA,4BAAA,EAAA,sBAAA,EAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAZ,YAAY,EAAA,UAAA,EAAA,CAAA;kBARxB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,iBAAiB;AACxB,wBAAA,8BAA8B,EAAE,sBAAsB;AACtD,wBAAA,aAAa,EAAE,MAAM;AACtB,qBAAA;AACF,iBAAA;;;ACND;;;;;;;;;;;;;;;;;;AAkBG;MAsBU,QAAQ,CAAA;AACnB;;;;AAIG;IACM,IAAI,GAAG,KAAK,CAAe,SAAS;6EAAC;AAE9C;;;;;;AAMG;IACM,OAAO,GAAG,KAAK,CAAwB,KAAK,+EACnD,SAAS,EAAE,qBAAqB,EAAA,CAChC;AAEF;;;;AAIG;IACM,KAAK,GAAG,KAAK,CAAwB,KAAK,6EACjD,SAAS,EAAE,qBAAqB,EAAA,CAChC;AAEF;;;AAGG;IACgB,QAAQ,GAAG,YAAY,CAAC,YAAY;iFAAC;uGAhC7C,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,+BAAA,EAAA,wBAAA,EAAA,SAAA,EAAA,4BAAA,EAAA,cAAA,EAAA,EAAA,cAAA,EAAA,WAAA,EAAA,EAAA,SAAA,EAdR,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EA8CrB,YAAY,+JCpGzD,4DAEA,EAAA,MAAA,EAAA,CAAA,6mHAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDkEa,QAAQ,EAAA,UAAA,EAAA,CAAA;kBArBpB,SAAS;+BACE,WAAW,EAAA,aAAA,EAGN,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,EAAE,EAAA,SAAA,EACA,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAA,cAAA,EAChD;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,mBAAmB;4BAC9B,MAAM,EAAE,CAAC,YAAY,CAAC;AACvB,yBAAA;qBACF,EAAA,IAAA,EACK;AACJ,wBAAA,KAAK,EAAE,WAAW;AAClB,wBAAA,SAAS,EAAE,6BAA6B;AACxC,wBAAA,0BAA0B,EAAE,SAAS;AACrC,wBAAA,8BAA8B,EAAE,cAAc;AAC/C,qBAAA,EAAA,QAAA,EAAA,4DAAA,EAAA,MAAA,EAAA,CAAA,6mHAAA,CAAA,EAAA;6WAkC0C,YAAY,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEpGzD;;AAEG;;;;"}