@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/fesm2022/slotted-angular-avatar.mjs

@@ -0,0 +1,330 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Directive, HostAttributeToken, ElementRef, afterNextRender, input, booleanAttribute, output, contentChild, computed, linkedSignal, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { toneFrom, initialsFrom } from '@slotted/core/identity';
+
+const FALLBACK = {
+    locale: undefined,
+    shape: 'circle',
+    size: 'md',
+    tone: 'auto',
+    variant: 'soft',
+};
+const AVATAR_DEFAULTS = new InjectionToken('slotted avatar defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once how its avatars are shaped, how large they are,
+ * how they are painted and — the one that matters most — which locale cases
+ * their initials, rather than repeating four inputs on every avatar. An avatar
+ * that states any of them itself still wins: an explicit input is never
+ * overridden by the token.
+ *
+ * `SlAvatarGroup` provides the same token rather than a channel of its own,
+ * which is what keeps a member's explicit `size` winning over the group's.
+ */
+function provideAvatarDefaults(defaults) {
+    return {
+        provide: AVATAR_DEFAULTS,
+        useFactory: () => ({
+            locale: defaults.locale ?? FALLBACK.locale,
+            shape: defaults.shape ?? FALLBACK.shape,
+            size: defaults.size ?? FALLBACK.size,
+            tone: defaults.tone ?? FALLBACK.tone,
+            variant: defaults.variant ?? FALLBACK.variant,
+        }),
+    };
+}
+/** What an avatar renders as here, before it states anything of its own. */
+function injectAvatarDefaults() {
+    return inject(AVATAR_DEFAULTS);
+}
+
+/**
+ * Content that stands in for the picture, in place of the initials and the
+ * glyph: a company mark, a product logo, an `sl-icon`.
+ *
+ * It is a marker rather than a bare `<ng-content>` because Angular cannot ask
+ * whether anything was projected, and an avatar that wrote its initials
+ * *and* the consumer's logo into the same disc would be drawing two fallbacks.
+ * React answers the same question by looking at `children`.
+ */
+class SlAvatarFallback {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAvatarFallback, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAvatarFallback, isStandalone: true, selector: "[slAvatarFallback]", exportAs: ["slAvatarFallback"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAvatarFallback, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slAvatarFallback]',
+                    standalone: true,
+                    exportAs: 'slAvatarFallback',
+                }]
+        }] });
+
+const AVATAR_IMAGE_HOST = new InjectionToken('slotted avatar image host');
+
+/**
+ * The picture inside an avatar.
+ *
+ * It is written on an `<img>` the consumer owns, which is what lets
+ * `NgOptimizedImage` do its work: `ngSrc`, the priority hint, the generated
+ * `srcset` and the size warnings all belong to a real `<img>` in the
+ * consumer's template, and none of them survive being handed a `src` string
+ * through an input. React has no equivalent, and its `renderImage` is the other
+ * half of the same idea.
+ *
+ * `alt` is written empty only when the consumer wrote none: the avatar's name
+ * is on the root, so naming the picture as well would read the person twice —
+ * and would name them differently before the picture arrives.
+ */
+class SlAvatarImage {
+    avatar = inject(AVATAR_IMAGE_HOST);
+    /** A static `alt` the consumer wrote is read before the host binding writes one. */
+    alt = inject(new HostAttributeToken('alt'), { optional: true }) ?? '';
+    element = inject(ElementRef).nativeElement;
+    constructor() {
+        /**
+         * A picture already in the browser cache finishes decoding before the
+         * listener is attached, so the element is asked whether it is already
+         * complete rather than waited on for an event that has been and gone.
+         * Without it an avatar shows initials over a picture that is already there.
+         */
+        afterNextRender(() => {
+            if (this.element.complete && this.element.naturalWidth > 0) {
+                this.avatar.reportStatus('loaded');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAvatarImage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAvatarImage, isStandalone: true, selector: "img[slAvatarImage]", host: { attributes: { "data-part": "image" }, listeners: { "load": "avatar.reportStatus(\"loaded\")", "error": "avatar.reportStatus(\"error\")" }, properties: { "attr.alt": "alt" } }, exportAs: ["slAvatarImage"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAvatarImage, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'img[slAvatarImage]',
+                    standalone: true,
+                    exportAs: 'slAvatarImage',
+                    host: {
+                        'data-part': 'image',
+                        '[attr.alt]': 'alt',
+                        '(load)': 'avatar.reportStatus("loaded")',
+                        '(error)': 'avatar.reportStatus("error")',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * The palette `tone="auto"` chooses from, in the order the hash indexes it.
+ * Five is a small palette and collisions are frequent by construction: the
+ * colour is an aid to scanning a list of faces, and the name is what identifies
+ * the person — which is why it is on the root in every one of the four
+ * statuses.
+ */
+const AUTO_TONES = [
+    'accent',
+    'secondary',
+    'success',
+    'warning',
+    'danger',
+];
+/** At the smallest step there is room for one letter, which is Fluent's rule at 16 pixels. */
+const INITIALS_MAX = { xs: 1, sm: 2, md: 2, lg: 2, xl: 2 };
+/**
+ * A picture of a person or an entity, and what stands in when there is none:
+ * the initials taken from the name, then a glyph the family owns. A request
+ * that fails never paints the browser's torn-page mark, because the picture is
+ * out of sight until it reports that it arrived.
+ *
+ * The component is written on the element the page chose, so a `span` in a
+ * table cell, an `a` that opens a profile and a `button` that opens a menu are
+ * all the same avatar.
+ *
+ * The name lives on the root and the picture takes an empty `alt`, so the
+ * avatar announces the same thing before and after the photograph loads. Every
+ * surveyed implementation names the image instead, which makes the same avatar
+ * “Ada Lovelace” once the picture arrives and “AL” before it.
+ *
+ * `status` is an input with an output beside it rather than a `model()`. A
+ * `model()` promises a two-way binding for a value the browser owns: the
+ * component would write over whatever the consumer passed the first time an
+ * image loaded. Here the consumer's value simply wins, and the output reports
+ * the derivation — a load event is a fact rather than a request, so there is
+ * nothing to cancel and no reason from the closed vocabulary that fits it.
+ */
+class SlAvatar {
+    /**
+     * The person or entity this is a picture of. It is the accessible name in
+     * every status, the source of the initials, and the seed of the colour.
+     */
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** The picture. Absent, the avatar is its fallback and nothing is requested. */
+    src = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    /**
+     * The letters to draw, in place of the ones derived from the name. Two
+     * graphemes at most is what the box holds; `xs` draws one.
+     */
+    initialsOverride = input(undefined, { ...(ngDevMode ? { debugName: "initialsOverride" } : /* istanbul ignore next */ {}), alias: 'initials' });
+    /**
+     * A stable identifier to derive the colour from, when the name is not stable
+     * or two people share one. Defaults to `name`.
+     */
+    idFor = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "idFor" }] : /* istanbul ignore next */ []));
+    /** BCP 47, for the case of the initials. Defaults to the provider, then to the runtime. */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then to `md`. */
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then to `circle`. */
+    shape = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then to `auto`, which derives it from the name. */
+    tone = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then to `soft`. */
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** A deactivated account, or an avatar inside a control the page has turned off. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Takes the avatar out of the accessibility tree. For an avatar beside the
+     * name it belongs to, where announcing it would read the person twice.
+     */
+    decorative = input(false, { ...(ngDevMode ? { debugName: "decorative" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Where the picture is. Supplied, it wins over what the component derives
+     * from the element — for a server that already knows, or a loader the family
+     * cannot see.
+     */
+    status = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Reports the derived status. Never emits for a status passed in. */
+    statusChange = output();
+    defaults = injectAvatarDefaults();
+    /** An explicit role the consumer wrote is never replaced by an inferred one. */
+    writtenRole = inject(new HostAttributeToken('role'), { optional: true });
+    custom = contentChild(SlAvatarFallback, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "custom" }] : /* istanbul ignore next */ []));
+    projected = contentChild(SlAvatarImage, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projected" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedShape = computed(() => this.shape() ?? this.defaults.shape, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedShape" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedLocale = computed(() => this.locale() ?? this.defaults.locale, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []));
+    /**
+     * The derivation, and the picture it belongs to. A new request makes the
+     * previous answer describe nothing, so the status starts again from what the
+     * props alone can say — which is also what a server render and the hydration
+     * after it both compute, so nothing flashes between them.
+     */
+    derived = linkedSignal({ ...(ngDevMode ? { debugName: "derived" } : /* istanbul ignore next */ {}), source: () => `${this.src() ?? ''}|${this.projected() === undefined ? '' : 'projected'}`,
+        computation: (request) => (request === '|' ? 'idle' : 'loading') });
+    resolvedStatus = computed(() => this.status() ?? this.derived(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []));
+    resolvedTone = computed(() => {
+        const tone = this.tone() ?? this.defaults.tone;
+        if (tone !== 'auto')
+            return tone;
+        return toneFrom({ seed: this.idFor() ?? this.name(), tones: AUTO_TONES }) ?? 'secondary';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTone" }] : /* istanbul ignore next */ []));
+    initials = computed(() => this.initialsOverride() ??
+        initialsFrom({
+            name: this.name(),
+            max: INITIALS_MAX[this.resolvedSize()],
+            locale: this.resolvedLocale(),
+        }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    /**
+     * The W3C `alt` decision tree, in this library's vocabulary and with the rule
+     * `icon` already took: a name present decides `role="img"`, an absent one
+     * decides `aria-hidden`. `decorative` is the third case — a name that is
+     * written beside the avatar, where announcing it reads the person twice.
+     */
+    silent = computed(() => {
+        const name = this.name();
+        return this.decorative() || name === undefined || name.trim() === '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "silent" }] : /* istanbul ignore next */ []));
+    role = computed(() => this.writtenRole ?? (this.silent() ? null : 'img'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => (this.silent() ? null : (this.name() ?? null)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaHidden = computed(() => (this.silent() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaHidden" }] : /* istanbul ignore next */ []));
+    /** Called by the picture, whichever of the two elements it turned out to be. */
+    reportStatus(status) {
+        this.derived.set(status);
+        this.statusChange.emit(status);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlAvatar, isStandalone: true, selector: "[slAvatar]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, initialsOverride: { classPropertyName: "initialsOverride", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, idFor: { classPropertyName: "idFor", publicName: "idFor", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", 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 }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { statusChange: "statusChange" }, host: { attributes: { "data-ui": "avatar", "data-part": "root" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-shape": "resolvedShape()", "attr.data-tone": "resolvedTone()", "attr.data-variant": "resolvedVariant()", "attr.data-status": "resolvedStatus()", "attr.data-disabled": "disabled() ? '' : null", "attr.role": "role()", "attr.aria-label": "ariaLabel()", "attr.aria-hidden": "ariaHidden()" } }, providers: [
+            /* The component is its own image host, and a decorator is evaluated before
+               the class it decorates exists. */
+            { provide: AVATAR_IMAGE_HOST, useExisting: forwardRef(() => SlAvatar) },
+        ], queries: [{ propertyName: "custom", first: true, predicate: SlAvatarFallback, descendants: true, isSignal: true }, { propertyName: "projected", first: true, predicate: SlAvatarImage, descendants: true, isSignal: true }], exportAs: ["slAvatar"], ngImport: i0, template: `@if (src(); as source) {
+      <img slAvatarImage [src]="source" />
+    }
+    <ng-content select="img"></ng-content
+    ><span data-part="fallback">
+      @if (custom() === undefined) {
+        <!-- No picture and no name to take initials from: the person glyph. -->
+        @if (initials() === '') {
+          <span slIcon><svg slGlyph name="person"></svg></span>
+        } @else {
+          {{ initials() }}
+        }
+      }
+      <ng-content select="[slAvatarFallback]"></ng-content
+    ></span>`, isInline: true, styles: ["@layer slotted.components{[data-ui=avatar][data-part=root]{--_solid: var(--slotted-tone-secondary-solid-hover);--_on-solid: var(--slotted-tone-secondary-on-solid);--_surface: var(--slotted-tone-secondary-surface);--_border: var(--slotted-tone-secondary-border);--_text: var(--slotted-tone-secondary-text);--_size: var(--slotted-avatar-size, var(--slotted-avatar-size-md, 36px));--_initials-size: var(--slotted-avatar-initials-size, calc(var(--_size) * .4));--_glyph-size: var(--slotted-avatar-glyph-size, calc(var(--_size) * .68));--_radius: var(--slotted-radius-full, 9999px);--_edge-width: var(--slotted-avatar-border-width, var(--slotted-border-width-thin, 1px));--_edge: var(--_border);--_solid-edge: var(--_border);--_ring-width: var(--slotted-avatar-ring-width, 0);--_ring-color: var(--slotted-avatar-ring-color, var(--slotted-surface, Canvas));--_elevation: var(--slotted-avatar-elevation, 0 0 transparent);align-items:center;appearance:none;block-size:var(--_size);border-color:var(--_edge);border-radius:var(--_radius);border-style:solid;border-width:var(--_edge-width);box-shadow:0 0 0 var(--_ring-width) var(--_ring-color),var(--_elevation);box-sizing:border-box;display:inline-flex;flex:none;font-family:var(--slotted-avatar-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_initials-size);font-weight:var(--slotted-avatar-font-weight, var(--slotted-font-weight-medium, 500));inline-size:var(--_size);justify-content:center;line-height:1;padding:0;isolation:isolate;position:relative;text-decoration:none;transition:border-color var(--slotted-duration-short) var(--slotted-easing-standard),background-color var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard),transform var(--slotted-duration-short) var(--slotted-easing-standard);-webkit-user-select:none;user-select:none;vertical-align:middle}[data-ui=avatar][data-part=root][data-tone=accent]{--_solid: var(--slotted-tone-accent-solid);--_solid-edge: var(--slotted-tone-accent-solid);--_on-solid: var(--slotted-tone-accent-on-solid);--_surface: var(--slotted-tone-accent-surface);--_border: var(--slotted-tone-accent-border);--_text: var(--slotted-tone-accent-text)}[data-ui=avatar][data-part=root][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_solid-edge: var(--slotted-tone-success-solid);--_on-solid: var(--slotted-tone-success-on-solid);--_surface: var(--slotted-tone-success-surface);--_border: var(--slotted-tone-success-border);--_text: var(--slotted-tone-success-text)}[data-ui=avatar][data-part=root][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_solid-edge: var(--slotted-tone-warning-solid);--_on-solid: var(--slotted-tone-warning-on-solid);--_surface: var(--slotted-tone-warning-surface);--_border: var(--slotted-tone-warning-border);--_text: var(--slotted-tone-warning-text)}[data-ui=avatar][data-part=root][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_solid-edge: var(--slotted-tone-danger-solid);--_on-solid: var(--slotted-tone-danger-on-solid);--_surface: var(--slotted-tone-danger-surface);--_border: var(--slotted-tone-danger-border);--_text: var(--slotted-tone-danger-text)}[data-ui=avatar][data-part=root][data-variant=soft]{--_ground: var(--_surface, ButtonFace);background-color:var(--_ground);color:var(--_text, ButtonText)}[data-ui=avatar][data-part=root][data-variant=solid]{--_edge: var(--_solid-edge);--_ground: var(--_solid, ButtonFace);background-color:var(--_ground);color:var(--_on-solid, ButtonText)}[data-ui=avatar][data-part=root][data-shape=square]{--_radius: var(--slotted-avatar-radius, round(nearest, calc(var(--_size) / 6), 1px))}[data-ui=avatar][data-part=root][data-size=xs]{--slotted-avatar-size: var(--slotted-avatar-size-xs, 24px)}[data-ui=avatar][data-part=root][data-size=sm]{--slotted-avatar-size: var(--slotted-avatar-size-sm, 28px)}[data-ui=avatar][data-part=root][data-size=md]{--slotted-avatar-size: var(--slotted-avatar-size-md, 36px)}[data-ui=avatar][data-part=root][data-size=lg]{--slotted-avatar-size: var(--slotted-avatar-size-lg, 48px)}[data-ui=avatar][data-part=root][data-size=xl]{--slotted-avatar-size: var(--slotted-avatar-size-xl, 64px)}[data-ui=avatar] [data-part=image]{block-size:100%;border-radius:inherit;inline-size:100%;inset:0;object-fit:cover;opacity:0;position:absolute;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=avatar][data-status=loaded] [data-part=image]{opacity:1;transition-timing-function:var(--slotted-easing-enter)}[data-ui=avatar] [data-part=fallback]{--slotted-icon-size: var(--_glyph-size);align-items:center;block-size:100%;border-radius:inherit;display:flex;inline-size:100%;justify-content:center;overflow:hidden;transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter)}[data-ui=avatar][data-status=loaded] [data-part=fallback]{opacity:0;transition-timing-function:var(--slotted-easing-exit)}@supports (text-box: trim-both cap alphabetic){[data-ui=avatar] [data-part=fallback]:not(:has(>*)){align-content:center;display:block;text-align:center;text-box:trim-both cap alphabetic}}[data-ui=avatar][data-part=root][data-status=loaded]{--_edge: var(--slotted-border-subtle, ButtonBorder)}[data-ui=avatar][data-part=root][data-disabled]{--_solid: var(--slotted-disabled-background, Canvas);--_on-solid: var(--slotted-disabled-foreground, GrayText);--_surface: var(--slotted-disabled-background, Canvas);--_text: var(--slotted-disabled-foreground, GrayText);--_edge: var(--slotted-disabled-border, GrayText)}[data-ui=avatar][data-part=root][data-disabled] [data-part=image]{filter:var(--slotted-avatar-disabled-image-filter, grayscale(1) opacity(.5))}[data-ui=avatar][data-part=root]:any-link,button[data-ui=avatar][data-part=root],[data-ui=avatar][data-part=root][tabindex]{cursor:pointer;overflow:clip;overflow-clip-margin:var(--slotted-target-min, 24px)}[data-ui=avatar][data-part=root]:any-link:not([data-disabled]):hover,button[data-ui=avatar][data-part=root]:not([data-disabled]):hover,[data-ui=avatar][data-part=root][tabindex]:not([data-disabled]):hover{background-color:color-mix(in oklab,var(--_ground),currentColor var(--slotted-avatar-state-layer-hover, 8%))}[data-ui=avatar][data-part=root]:any-link:not([data-disabled]):active,button[data-ui=avatar][data-part=root]:not([data-disabled]):active,[data-ui=avatar][data-part=root][tabindex]:not([data-disabled]):active{background-color:color-mix(in oklab,var(--_ground),currentColor var(--slotted-avatar-state-layer-active, 14%))}[data-ui=avatar][data-status=loaded]:any-link:not([data-disabled]):hover,button[data-ui=avatar][data-status=loaded]:not([data-disabled]):hover,[data-ui=avatar][data-status=loaded][tabindex]:not([data-disabled]):hover{--_edge: var(--slotted-border-strong, CanvasText);--slotted-avatar-ring-width: var(--slotted-border-width-thin, 1px);--slotted-avatar-ring-color: var(--slotted-border-strong, CanvasText)}[data-ui=avatar][data-status=loaded]:any-link:not([data-disabled]):active,button[data-ui=avatar][data-status=loaded]:not([data-disabled]):active,[data-ui=avatar][data-status=loaded][tabindex]:not([data-disabled]):active{--slotted-avatar-ring-width: var(--slotted-border-width-thick, 2px)}[data-ui=avatar][data-part=root]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=avatar][data-part=root]:any-link:after,button[data-ui=avatar][data-part=root]:after,[data-ui=avatar][data-part=root][tabindex]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(forced-colors:active){[data-ui=avatar][data-part=root]{--_edge: currentColor}}}\n"], dependencies: [{ kind: "directive", type: SlAvatarImage, selector: "img[slAvatarImage]", exportAs: ["slAvatarImage"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAvatar, decorators: [{
+            type: Component,
+            args: [{ selector: '[slAvatar]', standalone: true, exportAs: 'slAvatar', imports: [SlAvatarImage, SlGlyph, SlIcon], providers: [
+                        /* The component is its own image host, and a decorator is evaluated before
+                           the class it decorates exists. */
+                        { provide: AVATAR_IMAGE_HOST, useExisting: forwardRef(() => SlAvatar) },
+                    ], template: `@if (src(); as source) {
+      <img slAvatarImage [src]="source" />
+    }
+    <ng-content select="img"></ng-content
+    ><span data-part="fallback">
+      @if (custom() === undefined) {
+        <!-- No picture and no name to take initials from: the person glyph. -->
+        @if (initials() === '') {
+          <span slIcon><svg slGlyph name="person"></svg></span>
+        } @else {
+          {{ initials() }}
+        }
+      }
+      <ng-content select="[slAvatarFallback]"></ng-content
+    ></span>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'avatar',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-shape]': 'resolvedShape()',
+                        '[attr.data-tone]': 'resolvedTone()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-status]': 'resolvedStatus()',
+                        '[attr.data-disabled]': "disabled() ? '' : null",
+                        '[attr.role]': 'role()',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-hidden]': 'ariaHidden()',
+                    }, styles: ["@layer slotted.components{[data-ui=avatar][data-part=root]{--_solid: var(--slotted-tone-secondary-solid-hover);--_on-solid: var(--slotted-tone-secondary-on-solid);--_surface: var(--slotted-tone-secondary-surface);--_border: var(--slotted-tone-secondary-border);--_text: var(--slotted-tone-secondary-text);--_size: var(--slotted-avatar-size, var(--slotted-avatar-size-md, 36px));--_initials-size: var(--slotted-avatar-initials-size, calc(var(--_size) * .4));--_glyph-size: var(--slotted-avatar-glyph-size, calc(var(--_size) * .68));--_radius: var(--slotted-radius-full, 9999px);--_edge-width: var(--slotted-avatar-border-width, var(--slotted-border-width-thin, 1px));--_edge: var(--_border);--_solid-edge: var(--_border);--_ring-width: var(--slotted-avatar-ring-width, 0);--_ring-color: var(--slotted-avatar-ring-color, var(--slotted-surface, Canvas));--_elevation: var(--slotted-avatar-elevation, 0 0 transparent);align-items:center;appearance:none;block-size:var(--_size);border-color:var(--_edge);border-radius:var(--_radius);border-style:solid;border-width:var(--_edge-width);box-shadow:0 0 0 var(--_ring-width) var(--_ring-color),var(--_elevation);box-sizing:border-box;display:inline-flex;flex:none;font-family:var(--slotted-avatar-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_initials-size);font-weight:var(--slotted-avatar-font-weight, var(--slotted-font-weight-medium, 500));inline-size:var(--_size);justify-content:center;line-height:1;padding:0;isolation:isolate;position:relative;text-decoration:none;transition:border-color var(--slotted-duration-short) var(--slotted-easing-standard),background-color var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard),transform var(--slotted-duration-short) var(--slotted-easing-standard);-webkit-user-select:none;user-select:none;vertical-align:middle}[data-ui=avatar][data-part=root][data-tone=accent]{--_solid: var(--slotted-tone-accent-solid);--_solid-edge: var(--slotted-tone-accent-solid);--_on-solid: var(--slotted-tone-accent-on-solid);--_surface: var(--slotted-tone-accent-surface);--_border: var(--slotted-tone-accent-border);--_text: var(--slotted-tone-accent-text)}[data-ui=avatar][data-part=root][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_solid-edge: var(--slotted-tone-success-solid);--_on-solid: var(--slotted-tone-success-on-solid);--_surface: var(--slotted-tone-success-surface);--_border: var(--slotted-tone-success-border);--_text: var(--slotted-tone-success-text)}[data-ui=avatar][data-part=root][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_solid-edge: var(--slotted-tone-warning-solid);--_on-solid: var(--slotted-tone-warning-on-solid);--_surface: var(--slotted-tone-warning-surface);--_border: var(--slotted-tone-warning-border);--_text: var(--slotted-tone-warning-text)}[data-ui=avatar][data-part=root][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_solid-edge: var(--slotted-tone-danger-solid);--_on-solid: var(--slotted-tone-danger-on-solid);--_surface: var(--slotted-tone-danger-surface);--_border: var(--slotted-tone-danger-border);--_text: var(--slotted-tone-danger-text)}[data-ui=avatar][data-part=root][data-variant=soft]{--_ground: var(--_surface, ButtonFace);background-color:var(--_ground);color:var(--_text, ButtonText)}[data-ui=avatar][data-part=root][data-variant=solid]{--_edge: var(--_solid-edge);--_ground: var(--_solid, ButtonFace);background-color:var(--_ground);color:var(--_on-solid, ButtonText)}[data-ui=avatar][data-part=root][data-shape=square]{--_radius: var(--slotted-avatar-radius, round(nearest, calc(var(--_size) / 6), 1px))}[data-ui=avatar][data-part=root][data-size=xs]{--slotted-avatar-size: var(--slotted-avatar-size-xs, 24px)}[data-ui=avatar][data-part=root][data-size=sm]{--slotted-avatar-size: var(--slotted-avatar-size-sm, 28px)}[data-ui=avatar][data-part=root][data-size=md]{--slotted-avatar-size: var(--slotted-avatar-size-md, 36px)}[data-ui=avatar][data-part=root][data-size=lg]{--slotted-avatar-size: var(--slotted-avatar-size-lg, 48px)}[data-ui=avatar][data-part=root][data-size=xl]{--slotted-avatar-size: var(--slotted-avatar-size-xl, 64px)}[data-ui=avatar] [data-part=image]{block-size:100%;border-radius:inherit;inline-size:100%;inset:0;object-fit:cover;opacity:0;position:absolute;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=avatar][data-status=loaded] [data-part=image]{opacity:1;transition-timing-function:var(--slotted-easing-enter)}[data-ui=avatar] [data-part=fallback]{--slotted-icon-size: var(--_glyph-size);align-items:center;block-size:100%;border-radius:inherit;display:flex;inline-size:100%;justify-content:center;overflow:hidden;transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter)}[data-ui=avatar][data-status=loaded] [data-part=fallback]{opacity:0;transition-timing-function:var(--slotted-easing-exit)}@supports (text-box: trim-both cap alphabetic){[data-ui=avatar] [data-part=fallback]:not(:has(>*)){align-content:center;display:block;text-align:center;text-box:trim-both cap alphabetic}}[data-ui=avatar][data-part=root][data-status=loaded]{--_edge: var(--slotted-border-subtle, ButtonBorder)}[data-ui=avatar][data-part=root][data-disabled]{--_solid: var(--slotted-disabled-background, Canvas);--_on-solid: var(--slotted-disabled-foreground, GrayText);--_surface: var(--slotted-disabled-background, Canvas);--_text: var(--slotted-disabled-foreground, GrayText);--_edge: var(--slotted-disabled-border, GrayText)}[data-ui=avatar][data-part=root][data-disabled] [data-part=image]{filter:var(--slotted-avatar-disabled-image-filter, grayscale(1) opacity(.5))}[data-ui=avatar][data-part=root]:any-link,button[data-ui=avatar][data-part=root],[data-ui=avatar][data-part=root][tabindex]{cursor:pointer;overflow:clip;overflow-clip-margin:var(--slotted-target-min, 24px)}[data-ui=avatar][data-part=root]:any-link:not([data-disabled]):hover,button[data-ui=avatar][data-part=root]:not([data-disabled]):hover,[data-ui=avatar][data-part=root][tabindex]:not([data-disabled]):hover{background-color:color-mix(in oklab,var(--_ground),currentColor var(--slotted-avatar-state-layer-hover, 8%))}[data-ui=avatar][data-part=root]:any-link:not([data-disabled]):active,button[data-ui=avatar][data-part=root]:not([data-disabled]):active,[data-ui=avatar][data-part=root][tabindex]:not([data-disabled]):active{background-color:color-mix(in oklab,var(--_ground),currentColor var(--slotted-avatar-state-layer-active, 14%))}[data-ui=avatar][data-status=loaded]:any-link:not([data-disabled]):hover,button[data-ui=avatar][data-status=loaded]:not([data-disabled]):hover,[data-ui=avatar][data-status=loaded][tabindex]:not([data-disabled]):hover{--_edge: var(--slotted-border-strong, CanvasText);--slotted-avatar-ring-width: var(--slotted-border-width-thin, 1px);--slotted-avatar-ring-color: var(--slotted-border-strong, CanvasText)}[data-ui=avatar][data-status=loaded]:any-link:not([data-disabled]):active,button[data-ui=avatar][data-status=loaded]:not([data-disabled]):active,[data-ui=avatar][data-status=loaded][tabindex]:not([data-disabled]):active{--slotted-avatar-ring-width: var(--slotted-border-width-thick, 2px)}[data-ui=avatar][data-part=root]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=avatar][data-part=root]:any-link:after,button[data-ui=avatar][data-part=root]:after,[data-ui=avatar][data-part=root][tabindex]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(forced-colors:active){[data-ui=avatar][data-part=root]{--_edge: currentColor}}}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], initialsOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], idFor: [{ type: i0.Input, args: [{ isSignal: true, alias: "idFor", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], statusChange: [{ type: i0.Output, args: ["statusChange"] }], custom: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlAvatarFallback), { isSignal: true }] }], projected: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlAvatarImage), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AVATAR_DEFAULTS, AVATAR_IMAGE_HOST, SlAvatar, SlAvatarFallback, SlAvatarImage, injectAvatarDefaults, provideAvatarDefaults };
+//# sourceMappingURL=slotted-angular-avatar.mjs.map

package/fesm2022/slotted-angular-avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-avatar.mjs","sources":["../../avatar/src/avatar-defaults.ts","../../avatar/src/avatar-fallback.ts","../../avatar/src/avatar-image-host.ts","../../avatar/src/avatar-image.ts","../../avatar/src/avatar.ts","../../avatar/src/slotted-angular-avatar.ts"],"sourcesContent":["import { inject, InjectionToken } from '@angular/core';\n\n/**\n * Which of the five semantic colours the fallback is painted in. `auto` derives\n * it from the name, so the same person keeps the same colour in a list that is\n * re-sorted and in a table that is paged.\n */\nexport type AvatarTone = 'auto' | 'accent' | 'secondary' | 'success' | 'warning' | 'danger';\n\n/** The palette `auto` chooses from, in the order the hash indexes it. */\nexport type AvatarResolvedTone = Exclude<AvatarTone, 'auto'>;\n\n/** How that colour is painted. `soft` is the tinted disc an avatar usually is. */\nexport type AvatarVariant = 'soft' | 'solid';\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** A circle is a person; a square is a team, an organisation or a bot. */\nexport type AvatarShape = 'circle' | 'square';\n\n/** Where the picture is. Four values, because a boolean cannot say why there is none. */\nexport type AvatarStatus = 'idle' | 'loading' | 'loaded' | 'error';\n\nexport type AvatarGroupLayout = 'stack' | 'spread';\n\nexport interface AvatarDefaults {\n  /** BCP 47. Used to case the initials, and by the group to join names. */\n  locale: string | undefined;\n  shape: AvatarShape;\n  size: AvatarSize;\n  tone: AvatarTone;\n  variant: AvatarVariant;\n}\n\nconst FALLBACK: AvatarDefaults = {\n  locale: undefined,\n  shape: 'circle',\n  size: 'md',\n  tone: 'auto',\n  variant: 'soft',\n};\n\nexport const AVATAR_DEFAULTS = new InjectionToken<AvatarDefaults>('slotted avatar defaults', {\n  providedIn: 'root',\n  factory: () => FALLBACK,\n});\n\n/**\n * An application decides once how its avatars are shaped, how large they are,\n * how they are painted and — the one that matters most — which locale cases\n * their initials, rather than repeating four inputs on every avatar. An avatar\n * that states any of them itself still wins: an explicit input is never\n * overridden by the token.\n *\n * `SlAvatarGroup` provides the same token rather than a channel of its own,\n * which is what keeps a member's explicit `size` winning over the group's.\n */\nexport function provideAvatarDefaults(defaults: Partial<AvatarDefaults>) {\n  return {\n    provide: AVATAR_DEFAULTS,\n    useFactory: (): AvatarDefaults => ({\n      locale: defaults.locale ?? FALLBACK.locale,\n      shape: defaults.shape ?? FALLBACK.shape,\n      size: defaults.size ?? FALLBACK.size,\n      tone: defaults.tone ?? FALLBACK.tone,\n      variant: defaults.variant ?? FALLBACK.variant,\n    }),\n  };\n}\n\n/** What an avatar renders as here, before it states anything of its own. */\nexport function injectAvatarDefaults(): AvatarDefaults {\n  return inject(AVATAR_DEFAULTS);\n}\n","import { Directive } from '@angular/core';\n\n/**\n * Content that stands in for the picture, in place of the initials and the\n * glyph: a company mark, a product logo, an `sl-icon`.\n *\n * It is a marker rather than a bare `<ng-content>` because Angular cannot ask\n * whether anything was projected, and an avatar that wrote its initials\n * *and* the consumer's logo into the same disc would be drawing two fallbacks.\n * React answers the same question by looking at `children`.\n */\n@Directive({\n  selector: '[slAvatarFallback]',\n  standalone: true,\n  exportAs: 'slAvatarFallback',\n})\nexport class SlAvatarFallback {}\n","import { InjectionToken } from '@angular/core';\n\nimport type { AvatarStatus } from './avatar-defaults';\n\n/**\n * What the picture tells the avatar it sits in.\n *\n * It is a token rather than the component's own class so that one directive can\n * serve both pictures the family knows about: the `<img>` the avatar renders\n * for its own `src`, and the `<img>` the consumer projects — which is the one\n * that carries `ngSrc`, and therefore the one `NgOptimizedImage` can reach. A\n * directive that injected the component directly would put a cycle between the\n * two files, and the component imports the directive for its own template.\n */\nexport interface AvatarImageHost {\n  reportStatus(status: AvatarStatus): void;\n}\n\nexport const AVATAR_IMAGE_HOST = new InjectionToken<AvatarImageHost>('slotted avatar image host');\n","import { afterNextRender, Directive, ElementRef, HostAttributeToken, inject } from '@angular/core';\n\nimport { AVATAR_IMAGE_HOST } from './avatar-image-host';\n\n/**\n * The picture inside an avatar.\n *\n * It is written on an `<img>` the consumer owns, which is what lets\n * `NgOptimizedImage` do its work: `ngSrc`, the priority hint, the generated\n * `srcset` and the size warnings all belong to a real `<img>` in the\n * consumer's template, and none of them survive being handed a `src` string\n * through an input. React has no equivalent, and its `renderImage` is the other\n * half of the same idea.\n *\n * `alt` is written empty only when the consumer wrote none: the avatar's name\n * is on the root, so naming the picture as well would read the person twice —\n * and would name them differently before the picture arrives.\n */\n@Directive({\n  selector: 'img[slAvatarImage]',\n  standalone: true,\n  exportAs: 'slAvatarImage',\n  host: {\n    'data-part': 'image',\n    '[attr.alt]': 'alt',\n    '(load)': 'avatar.reportStatus(\"loaded\")',\n    '(error)': 'avatar.reportStatus(\"error\")',\n  },\n})\nexport class SlAvatarImage {\n  protected readonly avatar = inject(AVATAR_IMAGE_HOST);\n\n  /** A static `alt` the consumer wrote is read before the host binding writes one. */\n  protected readonly alt = inject(new HostAttributeToken('alt'), { optional: true }) ?? '';\n\n  private readonly element = inject<ElementRef<HTMLImageElement>>(ElementRef).nativeElement;\n\n  constructor() {\n    /**\n     * A picture already in the browser cache finishes decoding before the\n     * listener is attached, so the element is asked whether it is already\n     * complete rather than waited on for an event that has been and gone.\n     * Without it an avatar shows initials over a picture that is already there.\n     */\n    afterNextRender(() => {\n      if (this.element.complete && this.element.naturalWidth > 0) {\n        this.avatar.reportStatus('loaded');\n      }\n    });\n  }\n}\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  forwardRef,\n  HostAttributeToken,\n  inject,\n  input,\n  linkedSignal,\n  output,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { SlGlyph, SlIcon } from '@slotted/angular/icon';\n\nimport { initialsFrom, toneFrom } from '@slotted/core/identity';\n\nimport {\n  injectAvatarDefaults,\n  type AvatarResolvedTone,\n  type AvatarShape,\n  type AvatarSize,\n  type AvatarStatus,\n  type AvatarTone,\n  type AvatarVariant,\n} from './avatar-defaults';\nimport { SlAvatarFallback } from './avatar-fallback';\nimport { AVATAR_IMAGE_HOST } from './avatar-image-host';\nimport { SlAvatarImage } from './avatar-image';\n\nexport type {\n  AvatarDefaults,\n  AvatarGroupLayout,\n  AvatarResolvedTone,\n  AvatarShape,\n  AvatarSize,\n  AvatarStatus,\n  AvatarTone,\n  AvatarVariant,\n} from './avatar-defaults';\n\n/**\n * The palette `tone=\"auto\"` chooses from, in the order the hash indexes it.\n * Five is a small palette and collisions are frequent by construction: the\n * colour is an aid to scanning a list of faces, and the name is what identifies\n * the person — which is why it is on the root in every one of the four\n * statuses.\n */\nconst AUTO_TONES: readonly AvatarResolvedTone[] = [\n  'accent',\n  'secondary',\n  'success',\n  'warning',\n  'danger',\n];\n\n/** At the smallest step there is room for one letter, which is Fluent's rule at 16 pixels. */\nconst INITIALS_MAX: Record<AvatarSize, number> = { xs: 1, sm: 2, md: 2, lg: 2, xl: 2 };\n\n/**\n * A picture of a person or an entity, and what stands in when there is none:\n * the initials taken from the name, then a glyph the family owns. A request\n * that fails never paints the browser's torn-page mark, because the picture is\n * out of sight until it reports that it arrived.\n *\n * The component is written on the element the page chose, so a `span` in a\n * table cell, an `a` that opens a profile and a `button` that opens a menu are\n * all the same avatar.\n *\n * The name lives on the root and the picture takes an empty `alt`, so the\n * avatar announces the same thing before and after the photograph loads. Every\n * surveyed implementation names the image instead, which makes the same avatar\n * “Ada Lovelace” once the picture arrives and “AL” before it.\n *\n * `status` is an input with an output beside it rather than a `model()`. A\n * `model()` promises a two-way binding for a value the browser owns: the\n * component would write over whatever the consumer passed the first time an\n * image loaded. Here the consumer's value simply wins, and the output reports\n * the derivation — a load event is a fact rather than a request, so there is\n * nothing to cancel and no reason from the closed vocabulary that fits it.\n */\n@Component({\n  selector: '[slAvatar]',\n  standalone: true,\n  exportAs: 'slAvatar',\n  imports: [SlAvatarImage, SlGlyph, SlIcon],\n  providers: [\n    /* The component is its own image host, and a decorator is evaluated before\n       the class it decorates exists. */\n    { provide: AVATAR_IMAGE_HOST, useExisting: forwardRef(() => SlAvatar) },\n  ],\n  template: `@if (src(); as source) {\n      <img slAvatarImage [src]=\"source\" />\n    }\n    <ng-content select=\"img\"></ng-content\n    ><span data-part=\"fallback\">\n      @if (custom() === undefined) {\n        <!-- No picture and no name to take initials from: the person glyph. -->\n        @if (initials() === '') {\n          <span slIcon><svg slGlyph name=\"person\"></svg></span>\n        } @else {\n          {{ initials() }}\n        }\n      }\n      <ng-content select=\"[slAvatarFallback]\"></ng-content\n    ></span>`,\n  styleUrl: '../../../styles/src/avatar/avatar.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-ui': 'avatar',\n    'data-part': 'root',\n    '[attr.data-size]': 'resolvedSize()',\n    '[attr.data-shape]': 'resolvedShape()',\n    '[attr.data-tone]': 'resolvedTone()',\n    '[attr.data-variant]': 'resolvedVariant()',\n    '[attr.data-status]': 'resolvedStatus()',\n    '[attr.data-disabled]': \"disabled() ? '' : null\",\n    '[attr.role]': 'role()',\n    '[attr.aria-label]': 'ariaLabel()',\n    '[attr.aria-hidden]': 'ariaHidden()',\n  },\n})\nexport class SlAvatar {\n  /**\n   * The person or entity this is a picture of. It is the accessible name in\n   * every status, the source of the initials, and the seed of the colour.\n   */\n  readonly name = input<string | undefined>(undefined);\n  /** The picture. Absent, the avatar is its fallback and nothing is requested. */\n  readonly src = input<string | undefined>(undefined);\n  /**\n   * The letters to draw, in place of the ones derived from the name. Two\n   * graphemes at most is what the box holds; `xs` draws one.\n   */\n  readonly initialsOverride = input<string | undefined>(undefined, { alias: 'initials' });\n  /**\n   * A stable identifier to derive the colour from, when the name is not stable\n   * or two people share one. Defaults to `name`.\n   */\n  readonly idFor = input<string | undefined>(undefined);\n  /** BCP 47, for the case of the initials. Defaults to the provider, then to the runtime. */\n  readonly locale = input<string | undefined>(undefined);\n  /** Defaults to the provider, then to `md`. */\n  readonly size = input<AvatarSize | undefined>(undefined);\n  /** Defaults to the provider, then to `circle`. */\n  readonly shape = input<AvatarShape | undefined>(undefined);\n  /** Defaults to the provider, then to `auto`, which derives it from the name. */\n  readonly tone = input<AvatarTone | undefined>(undefined);\n  /** Defaults to the provider, then to `soft`. */\n  readonly variant = input<AvatarVariant | undefined>(undefined);\n  /** A deactivated account, or an avatar inside a control the page has turned off. */\n  readonly disabled = input(false, { transform: booleanAttribute });\n  /**\n   * Takes the avatar out of the accessibility tree. For an avatar beside the\n   * name it belongs to, where announcing it would read the person twice.\n   */\n  readonly decorative = input(false, { transform: booleanAttribute });\n  /**\n   * Where the picture is. Supplied, it wins over what the component derives\n   * from the element — for a server that already knows, or a loader the family\n   * cannot see.\n   */\n  readonly status = input<AvatarStatus | undefined>(undefined);\n\n  /** Reports the derived status. Never emits for a status passed in. */\n  readonly statusChange = output<AvatarStatus>();\n\n  private readonly defaults = injectAvatarDefaults();\n  /** An explicit role the consumer wrote is never replaced by an inferred one. */\n  private readonly writtenRole = inject(new HostAttributeToken('role'), { optional: true });\n\n  protected readonly custom = contentChild(SlAvatarFallback);\n  private readonly projected = contentChild(SlAvatarImage);\n\n  protected readonly resolvedSize = computed(() => this.size() ?? this.defaults.size);\n  protected readonly resolvedShape = computed(() => this.shape() ?? this.defaults.shape);\n  protected readonly resolvedVariant = computed(() => this.variant() ?? this.defaults.variant);\n  private readonly resolvedLocale = computed(() => this.locale() ?? this.defaults.locale);\n\n  /**\n   * The derivation, and the picture it belongs to. A new request makes the\n   * previous answer describe nothing, so the status starts again from what the\n   * props alone can say — which is also what a server render and the hydration\n   * after it both compute, so nothing flashes between them.\n   */\n  private readonly derived = linkedSignal<string, AvatarStatus>({\n    source: () => `${this.src() ?? ''}|${this.projected() === undefined ? '' : 'projected'}`,\n    computation: (request) => (request === '|' ? 'idle' : 'loading'),\n  });\n\n  protected readonly resolvedStatus = computed(() => this.status() ?? this.derived());\n\n  protected readonly resolvedTone = computed<AvatarResolvedTone>(() => {\n    const tone = this.tone() ?? this.defaults.tone;\n    if (tone !== 'auto') return tone;\n    return toneFrom({ seed: this.idFor() ?? this.name(), tones: AUTO_TONES }) ?? 'secondary';\n  });\n\n  protected readonly initials = computed(\n    () =>\n      this.initialsOverride() ??\n      initialsFrom({\n        name: this.name(),\n        max: INITIALS_MAX[this.resolvedSize()],\n        locale: this.resolvedLocale(),\n      }),\n  );\n\n  /**\n   * The W3C `alt` decision tree, in this library's vocabulary and with the rule\n   * `icon` already took: a name present decides `role=\"img\"`, an absent one\n   * decides `aria-hidden`. `decorative` is the third case — a name that is\n   * written beside the avatar, where announcing it reads the person twice.\n   */\n  private readonly silent = computed(() => {\n    const name = this.name();\n    return this.decorative() || name === undefined || name.trim() === '';\n  });\n\n  protected readonly role = computed(() => this.writtenRole ?? (this.silent() ? null : 'img'));\n  protected readonly ariaLabel = computed(() => (this.silent() ? null : (this.name() ?? null)));\n  protected readonly ariaHidden = computed(() => (this.silent() ? 'true' : null));\n\n  /** Called by the picture, whichever of the two elements it turned out to be. */\n  reportStatus(status: AvatarStatus) {\n    this.derived.set(status);\n    this.statusChange.emit(status);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}