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

package/fesm2022/slotted-angular-image.mjs

@@ -0,0 +1,442 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, afterNextRender, Directive, input, booleanAttribute, output, contentChild, computed, linkedSignal, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlAspectRatio } from '@slotted/angular/aspect-ratio';
+
+const FALLBACK = {
+    bordered: false,
+    decoding: 'async',
+    fit: 'cover',
+    layout: 'intrinsic',
+    loading: 'lazy',
+    placeholder: 'surface',
+    position: 'center',
+    radius: 'none',
+};
+const IMAGE_DEFAULTS = new InjectionToken('slotted image defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once how its pictures are cut, cornered, edged and
+ * held before they arrive, rather than repeating the same inputs on every
+ * thumbnail in every grid. An image that states any of them itself still
+ * wins: an explicit input is never overridden by the token.
+ */
+function provideImageDefaults(defaults) {
+    return {
+        provide: IMAGE_DEFAULTS,
+        useFactory: () => ({
+            bordered: defaults.bordered ?? FALLBACK.bordered,
+            decoding: defaults.decoding ?? FALLBACK.decoding,
+            fit: defaults.fit ?? FALLBACK.fit,
+            layout: defaults.layout ?? FALLBACK.layout,
+            loading: defaults.loading ?? FALLBACK.loading,
+            placeholder: defaults.placeholder ?? FALLBACK.placeholder,
+            position: defaults.position ?? FALLBACK.position,
+            radius: defaults.radius ?? FALLBACK.radius,
+        }),
+    };
+}
+/** What an image renders as here, before it states anything of its own. */
+function injectImageDefaults() {
+    return inject(IMAGE_DEFAULTS);
+}
+
+const IMAGE_MEDIA_HOST = new InjectionToken('slotted image media host');
+
+/**
+ * The picture inside an image.
+ *
+ * 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.
+ *
+ * A projected picture keeps every attribute the consumer wrote — `alt`,
+ * `loading`, `width`, `height` — and the family writes only its part name.
+ */
+class SlImageMedia {
+    host = inject(IMAGE_MEDIA_HOST);
+    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 image shows its ground over a picture that is already
+         * there.
+         */
+        afterNextRender(() => {
+            if (this.element.complete && this.element.naturalWidth > 0) {
+                this.host.reportLoaded();
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImageMedia, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlImageMedia, isStandalone: true, selector: "img[slImageMedia]", host: { attributes: { "data-part": "image" }, listeners: { "load": "host.reportLoaded()", "error": "host.reportError()" } }, exportAs: ["slImageMedia"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImageMedia, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'img[slImageMedia]',
+                    standalone: true,
+                    exportAs: 'slImageMedia',
+                    host: {
+                        'data-part': 'image',
+                        '(load)': 'host.reportLoaded()',
+                        '(error)': 'host.reportError()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+const POSITIONS = new Set(['center', 'top', 'bottom', 'start', 'end']);
+/**
+ * A picture, and what stands in for it before it arrives and after it fails.
+ * The `<img>` is the platform's and keeps every attribute the platform gives
+ * it; the family adds the two layers under it, a fit, a focal point, a
+ * corner and an edge, and composes the frame from `slAspectRatio` when a
+ * ratio was decided.
+ *
+ * The component is written on the element the page chose — a `div`, a
+ * `figure`, an `a` that opens a page, a `button` that opens a dialog. The
+ * picture is either the `<img>` the component renders for its `src`, or the
+ * `<img slImageMedia>` the consumer projects, which is the one `ngSrc` and
+ * `NgOptimizedImage` belong on.
+ *
+ * `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 a
+ * picture 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 fits.
+ * `fallbackSrc` is tried before `error` is reported, on the component's own
+ * `<img>`; a projected picture is the consumer's to retry.
+ */
+class SlImage {
+    /** The picture. Absent, the component renders no `<img>` of its own and is idle. */
+    src = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    /** The candidates for the component's own `<img>`, as the platform's `srcset`. */
+    srcset = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "srcset" }] : /* istanbul ignore next */ []));
+    /** The platform's `sizes`, beside `srcset`. */
+    sizes = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizes" }] : /* istanbul ignore next */ []));
+    /**
+     * What the picture shows, or `""` for a picture that is decoration beside
+     * its own text. Written on the component's own `<img>`; a projected
+     * picture carries its own.
+     */
+    alt = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    /** The intrinsic width, which with `height` reserves the ratio before the picture loads. */
+    width = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    crossOrigin = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "crossOrigin" }] : /* istanbul ignore next */ []));
+    referrerPolicy = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "referrerPolicy" }] : /* istanbul ignore next */ []));
+    /**
+     * The proportion the box holds before the picture arrives. Renders an
+     * `slAspectRatio` inside the host and lays the picture out `framed`.
+     */
+    ratio = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then to `intrinsic`; a `ratio` implies `framed` unless one is stated. */
+    layout = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then to `cover`. */
+    fit = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fit" }] : /* istanbul ignore next */ []));
+    /**
+     * A focal point: one of the five names, or any `object-position` value,
+     * written on the instance. Defaults to the provider, then to `center`.
+     */
+    position = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then to `none`. */
+    radius = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    /** A subtle inset edge, for a photograph of a white wall on a white page. */
+    bordered = input(undefined, { ...(ngDevMode ? { debugName: "bordered" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /** Defaults to the provider, then to `surface`. */
+    placeholder = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** The small picture `placeholder="blur"` scales and blurs. A data URI, usually. */
+    placeholderSrc = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholderSrc" }] : /* istanbul ignore next */ []));
+    /**
+     * A second URL to try when `src` fails. The status stays `loading` while
+     * it is tried, and `error` is reached only if it fails too.
+     */
+    fallbackSrc = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fallbackSrc" }] : /* istanbul ignore next */ []));
+    /** The `<source>`s of a `<picture>`, in order. The `<img>` is written last. */
+    sources = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sources" }] : /* istanbul ignore next */ []));
+    /** The platform's `loading`. Defaults to the provider, then to `lazy`; `priority` makes it `eager`. */
+    loading = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** The platform's `decoding`. Defaults to the provider, then to `async`. */
+    decoding = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decoding" }] : /* istanbul ignore next */ []));
+    /** The platform's `fetchpriority`. `priority` writes `high` unless one is stated. */
+    fetchPriority = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fetchPriority" }] : /* istanbul ignore next */ []));
+    /**
+     * The picture the page is waiting for: `loading="eager"` and
+     * `fetchpriority="high"`, unless either is stated.
+     */
+    priority = input(false, { ...(ngDevMode ? { debugName: "priority" } : /* 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 = injectImageDefaults();
+    projected = contentChild(SlImageMedia, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projected" }] : /* istanbul ignore next */ []));
+    resolvedLayout = computed(() => this.layout() ?? (this.ratio() === undefined ? this.defaults.layout : 'framed'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLayout" }] : /* istanbul ignore next */ []));
+    resolvedFit = computed(() => this.fit() ?? this.defaults.fit, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFit" }] : /* istanbul ignore next */ []));
+    resolvedRadius = computed(() => this.radius() ?? this.defaults.radius, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedRadius" }] : /* istanbul ignore next */ []));
+    resolvedBordered = computed(() => this.bordered() ?? this.defaults.bordered, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedBordered" }] : /* istanbul ignore next */ []));
+    resolvedPlaceholder = computed(() => this.placeholder() ?? this.defaults.placeholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []));
+    resolvedLoading = computed(() => this.loading() ?? (this.priority() ? 'eager' : this.defaults.loading), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLoading" }] : /* istanbul ignore next */ []));
+    resolvedDecoding = computed(() => this.decoding() ?? this.defaults.decoding, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDecoding" }] : /* istanbul ignore next */ []));
+    resolvedFetchPriority = computed(() => this.fetchPriority() ?? (this.priority() ? 'high' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFetchPriority" }] : /* istanbul ignore next */ []));
+    resolvedPosition = computed(() => this.position() ?? this.defaults.position, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPosition" }] : /* istanbul ignore next */ []));
+    positionAttribute = computed(() => POSITIONS.has(this.resolvedPosition())
+        ? this.resolvedPosition()
+        : 'custom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positionAttribute" }] : /* istanbul ignore next */ []));
+    positionToken = computed(() => this.positionAttribute() === 'custom' ? this.resolvedPosition() : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positionToken" }] : /* 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 inputs 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) => ({
+            attempt: 'primary',
+            status: request === '|' ? 'idle' : 'loading',
+        }) });
+    resolvedStatus = computed(() => this.status() ?? this.derived().status, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []));
+    /** The URL the component's own `<img>` is showing: `src`, or `fallbackSrc` after `src` failed. */
+    shownSrc = computed(() => this.derived().attempt === 'fallback' ? (this.fallbackSrc() ?? this.src()) : this.src(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shownSrc" }] : /* istanbul ignore next */ []));
+    /** Called by the picture, whichever of the two elements it turned out to be. */
+    reportLoaded() {
+        if (this.derived().status === 'loaded')
+            return;
+        this.derived.set({ attempt: this.derived().attempt, status: 'loaded' });
+        this.statusChange.emit('loaded');
+    }
+    /**
+     * The first failure is answered with the second URL when there is one, and
+     * the status stays `loading` while it is tried; `error` is what is left
+     * when nothing could be shown. Only the component's own `<img>` can be
+     * re-pointed: a projected picture belongs to the consumer.
+     */
+    reportError() {
+        const { attempt } = this.derived();
+        if (attempt === 'primary' &&
+            this.fallbackSrc() !== undefined &&
+            this.projected() === undefined) {
+            this.derived.set({ attempt: 'fallback', status: 'loading' });
+            return;
+        }
+        this.derived.set({ attempt, status: 'error' });
+        this.statusChange.emit('error');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlImage, isStandalone: true, selector: "[slImage]", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, srcset: { classPropertyName: "srcset", publicName: "srcset", isSignal: true, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, crossOrigin: { classPropertyName: "crossOrigin", publicName: "crossOrigin", isSignal: true, isRequired: false, transformFunction: null }, referrerPolicy: { classPropertyName: "referrerPolicy", publicName: "referrerPolicy", isSignal: true, isRequired: false, transformFunction: null }, ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderSrc: { classPropertyName: "placeholderSrc", publicName: "placeholderSrc", isSignal: true, isRequired: false, transformFunction: null }, fallbackSrc: { classPropertyName: "fallbackSrc", publicName: "fallbackSrc", isSignal: true, isRequired: false, transformFunction: null }, sources: { classPropertyName: "sources", publicName: "sources", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, decoding: { classPropertyName: "decoding", publicName: "decoding", isSignal: true, isRequired: false, transformFunction: null }, fetchPriority: { classPropertyName: "fetchPriority", publicName: "fetchPriority", isSignal: true, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { statusChange: "statusChange" }, host: { attributes: { "data-ui": "image", "data-part": "root" }, properties: { "attr.data-layout": "resolvedLayout()", "attr.data-fit": "resolvedFit()", "attr.data-position": "positionAttribute()", "attr.data-radius": "resolvedRadius()", "attr.data-placeholder": "resolvedPlaceholder()", "attr.data-status": "resolvedStatus()", "attr.data-bordered": "resolvedBordered() ? '' : null", "style.--slotted-image-position": "positionToken()" } }, providers: [
+            /* The component is its own media host, and a decorator is evaluated before
+               the class it decorates exists. */
+            { provide: IMAGE_MEDIA_HOST, useExisting: forwardRef(() => SlImage) },
+        ], queries: [{ propertyName: "projected", first: true, predicate: SlImageMedia, descendants: true, isSignal: true }], exportAs: ["slImage"], ngImport: i0, template: `@if (ratio(); as decided) {
+      <div slAspectRatio [ratio]="decided">
+        <ng-container *ngTemplateOutlet="layers"></ng-container>
+      </div>
+    } @else {
+      <ng-container *ngTemplateOutlet="layers"></ng-container>
+    }
+    <ng-template #layers>
+      @if (projected() === undefined && src() !== undefined) {
+        @if (sources().length > 0) {
+          <picture data-part="picture">
+            @for (source of sources(); track $index) {
+              <source
+                [attr.srcset]="source.srcSet"
+                [attr.media]="source.media ?? null"
+                [attr.sizes]="source.sizes ?? null"
+                [attr.type]="source.type ?? null"
+              />
+            }
+            <ng-container *ngTemplateOutlet="own"></ng-container>
+          </picture>
+        } @else {
+          <ng-container *ngTemplateOutlet="own"></ng-container>
+        }
+      }
+      <ng-content select="img[slImageMedia]"></ng-content
+      ><span data-part="placeholder" aria-hidden="true">
+        @if (resolvedPlaceholder() === 'blur' && placeholderSrc(); as preview) {
+          <img alt="" [src]="preview" />
+        }
+        <ng-content select="[slImagePlaceholder]"></ng-content></span
+      ><span data-part="fallback"
+        ><ng-content select="[slImageFallback]"
+          ><span slIcon><svg slGlyph name="image-off"></svg></span></ng-content
+      ></span>
+    </ng-template>
+    <ng-template #own>
+      <img
+        slImageMedia
+        [src]="shownSrc()"
+        [attr.srcset]="srcset() ?? null"
+        [attr.sizes]="sizes() ?? null"
+        [attr.alt]="alt() ?? ''"
+        [attr.width]="width() ?? null"
+        [attr.height]="height() ?? null"
+        [attr.loading]="resolvedLoading()"
+        [attr.decoding]="resolvedDecoding()"
+        [attr.fetchpriority]="resolvedFetchPriority()"
+        [attr.crossorigin]="crossOrigin() ?? null"
+        [attr.referrerpolicy]="referrerPolicy() ?? null"
+      />
+    </ng-template>`, isInline: true, styles: ["@layer slotted.components{[data-ui=image][data-part=root]{--_fit: cover;--_position: var(--slotted-image-position, center);--_radius: var(--slotted-image-radius, var(--slotted-radius-none, 0px));--_edge: transparent;--_edge-width: var(--slotted-image-border-width, var(--slotted-border-width-thin, 1px));--_ground: var(--slotted-image-placeholder-background, var(--slotted-surface-sunken));--_ground-edge: inset 0 0 0 var(--_edge-width) var(--slotted-border-subtle, ButtonBorder);background-color:var(--slotted-image-background, transparent);border-radius:var(--_radius);box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr;inline-size:fit-content;isolation:isolate;max-inline-size:100%;min-inline-size:0;overflow:clip;position:relative;appearance:none;border:0;padding:0;text-decoration:none}[data-ui=image][data-part=root]>*{grid-area:1 / 1;min-inline-size:0}[data-ui=image][data-part=root][data-layout=fill]{block-size:100%;inline-size:100%}[data-ui=image][data-part=root][data-layout=framed]{inline-size:100%}[data-ui=image][data-part=root][data-fit=contain]{--_fit: contain}[data-ui=image][data-part=root][data-fit=fill]{--_fit: fill}[data-ui=image][data-part=root][data-fit=none]{--_fit: none}[data-ui=image][data-part=root][data-fit=scale-down]{--_fit: scale-down}[data-ui=image][data-part=root][data-position=top]{--_position: top}[data-ui=image][data-part=root][data-position=bottom]{--_position: bottom}[data-ui=image][data-part=root][data-position=start]{--_position: left}[data-ui=image][data-part=root][data-position=end]{--_position: right}[data-ui=image][data-part=root][data-position=start]:dir(rtl){--_position: right}[data-ui=image][data-part=root][data-position=end]:dir(rtl){--_position: left}[data-ui=image][data-part=root][data-radius=sm]{--_radius: var(--slotted-image-radius, var(--slotted-radius-sm, 4px))}[data-ui=image][data-part=root][data-radius=md]{--_radius: var(--slotted-image-radius, var(--slotted-radius-md, 6px))}[data-ui=image][data-part=root][data-radius=lg]{--_radius: var(--slotted-image-radius, var(--slotted-radius-lg, 8px))}[data-ui=image][data-part=root][data-bordered]{--_edge: var(--slotted-border-subtle, ButtonBorder)}[data-ui=image][data-part=root]:after{border-radius:inherit;box-shadow:inset 0 0 0 var(--_edge-width) var(--_edge);content:\"\";grid-area:1 / 1;pointer-events:none}[data-ui=image] [data-part=picture]{display:contents}[data-ui=image][data-part=root] [data-part=image]{block-size:auto;display:block;grid-area:1 / 1;max-inline-size:100%;min-inline-size:0;object-fit:var(--_fit);object-position:var(--_position);opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=image][data-part=root][data-layout=fill] [data-part=image],[data-ui=image][data-part=root][data-layout=framed] [data-part=image]{block-size:100%;inline-size:100%}[data-ui=image][data-part=root][data-status=loaded] [data-part=image]{opacity:1}[data-ui=image][data-part=root][data-status=error] [data-part=image]{block-size:0;inline-size:0;min-block-size:0}[data-ui=image][data-part=root] [data-part=placeholder]{background-color:var(--_ground);block-size:100%;box-shadow:var(--_ground-edge);overflow:clip;display:grid;grid-area:1 / 1;inline-size:100%;min-inline-size:0;pointer-events:none;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=image][data-part=root][data-placeholder=none] [data-part=placeholder]{background-color:transparent;box-shadow:none}[data-ui=image][data-part=root][data-placeholder=blur] [data-part=placeholder]>img{block-size:100%;display:block;filter:blur(var(--slotted-image-placeholder-blur, 1.25rem));inline-size:100%;object-fit:var(--_fit);object-position:var(--_position);transform:scale(1.08)}[data-ui=image][data-part=root][data-status=loaded] [data-part=placeholder]{opacity:0}[data-ui=image][data-part=root][data-status=error] [data-part=placeholder]{visibility:hidden}[data-ui=image][data-part=root] [data-part=fallback]{--slotted-icon-size: var(--slotted-image-glyph-size, var(--slotted-space-9, 2rem));display:none}[data-ui=image][data-part=root][data-status=error] [data-part=fallback]{background-color:var(--_ground);block-size:100%;box-shadow:var(--_ground-edge);color:var(--slotted-text-muted, GrayText);display:grid;grid-area:1 / 1;inline-size:100%;min-block-size:var(--slotted-image-fallback-min-size, var(--slotted-space-12, 4rem));min-inline-size:var(--slotted-image-fallback-min-size, var(--slotted-space-12, 4rem));place-items:center}[data-ui=image][data-part=root]:any-link,button[data-ui=image][data-part=root],[data-ui=image][data-part=root][tabindex]{cursor:pointer}[data-ui=image][data-part=root]:any-link:not([data-disabled]):hover,button[data-ui=image][data-part=root]:not(:disabled):hover,[data-ui=image][data-part=root][tabindex]:not([data-disabled]):hover{--_edge: var(--slotted-border-strong, CanvasText);--_edge-width: var(--slotted-border-width-thick, 2px)}[data-ui=image][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)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlAspectRatio, selector: "[slAspectRatio]", inputs: ["ratio"], exportAs: ["slAspectRatio"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "directive", type: SlImageMedia, selector: "img[slImageMedia]", exportAs: ["slImageMedia"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImage, decorators: [{
+            type: Component,
+            args: [{ selector: '[slImage]', standalone: true, exportAs: 'slImage', imports: [NgTemplateOutlet, SlAspectRatio, SlGlyph, SlIcon, SlImageMedia], providers: [
+                        /* The component is its own media host, and a decorator is evaluated before
+                           the class it decorates exists. */
+                        { provide: IMAGE_MEDIA_HOST, useExisting: forwardRef(() => SlImage) },
+                    ], template: `@if (ratio(); as decided) {
+      <div slAspectRatio [ratio]="decided">
+        <ng-container *ngTemplateOutlet="layers"></ng-container>
+      </div>
+    } @else {
+      <ng-container *ngTemplateOutlet="layers"></ng-container>
+    }
+    <ng-template #layers>
+      @if (projected() === undefined && src() !== undefined) {
+        @if (sources().length > 0) {
+          <picture data-part="picture">
+            @for (source of sources(); track $index) {
+              <source
+                [attr.srcset]="source.srcSet"
+                [attr.media]="source.media ?? null"
+                [attr.sizes]="source.sizes ?? null"
+                [attr.type]="source.type ?? null"
+              />
+            }
+            <ng-container *ngTemplateOutlet="own"></ng-container>
+          </picture>
+        } @else {
+          <ng-container *ngTemplateOutlet="own"></ng-container>
+        }
+      }
+      <ng-content select="img[slImageMedia]"></ng-content
+      ><span data-part="placeholder" aria-hidden="true">
+        @if (resolvedPlaceholder() === 'blur' && placeholderSrc(); as preview) {
+          <img alt="" [src]="preview" />
+        }
+        <ng-content select="[slImagePlaceholder]"></ng-content></span
+      ><span data-part="fallback"
+        ><ng-content select="[slImageFallback]"
+          ><span slIcon><svg slGlyph name="image-off"></svg></span></ng-content
+      ></span>
+    </ng-template>
+    <ng-template #own>
+      <img
+        slImageMedia
+        [src]="shownSrc()"
+        [attr.srcset]="srcset() ?? null"
+        [attr.sizes]="sizes() ?? null"
+        [attr.alt]="alt() ?? ''"
+        [attr.width]="width() ?? null"
+        [attr.height]="height() ?? null"
+        [attr.loading]="resolvedLoading()"
+        [attr.decoding]="resolvedDecoding()"
+        [attr.fetchpriority]="resolvedFetchPriority()"
+        [attr.crossorigin]="crossOrigin() ?? null"
+        [attr.referrerpolicy]="referrerPolicy() ?? null"
+      />
+    </ng-template>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'image',
+                        'data-part': 'root',
+                        '[attr.data-layout]': 'resolvedLayout()',
+                        '[attr.data-fit]': 'resolvedFit()',
+                        '[attr.data-position]': 'positionAttribute()',
+                        '[attr.data-radius]': 'resolvedRadius()',
+                        '[attr.data-placeholder]': 'resolvedPlaceholder()',
+                        '[attr.data-status]': 'resolvedStatus()',
+                        '[attr.data-bordered]': "resolvedBordered() ? '' : null",
+                        '[style.--slotted-image-position]': 'positionToken()',
+                    }, styles: ["@layer slotted.components{[data-ui=image][data-part=root]{--_fit: cover;--_position: var(--slotted-image-position, center);--_radius: var(--slotted-image-radius, var(--slotted-radius-none, 0px));--_edge: transparent;--_edge-width: var(--slotted-image-border-width, var(--slotted-border-width-thin, 1px));--_ground: var(--slotted-image-placeholder-background, var(--slotted-surface-sunken));--_ground-edge: inset 0 0 0 var(--_edge-width) var(--slotted-border-subtle, ButtonBorder);background-color:var(--slotted-image-background, transparent);border-radius:var(--_radius);box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr;inline-size:fit-content;isolation:isolate;max-inline-size:100%;min-inline-size:0;overflow:clip;position:relative;appearance:none;border:0;padding:0;text-decoration:none}[data-ui=image][data-part=root]>*{grid-area:1 / 1;min-inline-size:0}[data-ui=image][data-part=root][data-layout=fill]{block-size:100%;inline-size:100%}[data-ui=image][data-part=root][data-layout=framed]{inline-size:100%}[data-ui=image][data-part=root][data-fit=contain]{--_fit: contain}[data-ui=image][data-part=root][data-fit=fill]{--_fit: fill}[data-ui=image][data-part=root][data-fit=none]{--_fit: none}[data-ui=image][data-part=root][data-fit=scale-down]{--_fit: scale-down}[data-ui=image][data-part=root][data-position=top]{--_position: top}[data-ui=image][data-part=root][data-position=bottom]{--_position: bottom}[data-ui=image][data-part=root][data-position=start]{--_position: left}[data-ui=image][data-part=root][data-position=end]{--_position: right}[data-ui=image][data-part=root][data-position=start]:dir(rtl){--_position: right}[data-ui=image][data-part=root][data-position=end]:dir(rtl){--_position: left}[data-ui=image][data-part=root][data-radius=sm]{--_radius: var(--slotted-image-radius, var(--slotted-radius-sm, 4px))}[data-ui=image][data-part=root][data-radius=md]{--_radius: var(--slotted-image-radius, var(--slotted-radius-md, 6px))}[data-ui=image][data-part=root][data-radius=lg]{--_radius: var(--slotted-image-radius, var(--slotted-radius-lg, 8px))}[data-ui=image][data-part=root][data-bordered]{--_edge: var(--slotted-border-subtle, ButtonBorder)}[data-ui=image][data-part=root]:after{border-radius:inherit;box-shadow:inset 0 0 0 var(--_edge-width) var(--_edge);content:\"\";grid-area:1 / 1;pointer-events:none}[data-ui=image] [data-part=picture]{display:contents}[data-ui=image][data-part=root] [data-part=image]{block-size:auto;display:block;grid-area:1 / 1;max-inline-size:100%;min-inline-size:0;object-fit:var(--_fit);object-position:var(--_position);opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=image][data-part=root][data-layout=fill] [data-part=image],[data-ui=image][data-part=root][data-layout=framed] [data-part=image]{block-size:100%;inline-size:100%}[data-ui=image][data-part=root][data-status=loaded] [data-part=image]{opacity:1}[data-ui=image][data-part=root][data-status=error] [data-part=image]{block-size:0;inline-size:0;min-block-size:0}[data-ui=image][data-part=root] [data-part=placeholder]{background-color:var(--_ground);block-size:100%;box-shadow:var(--_ground-edge);overflow:clip;display:grid;grid-area:1 / 1;inline-size:100%;min-inline-size:0;pointer-events:none;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=image][data-part=root][data-placeholder=none] [data-part=placeholder]{background-color:transparent;box-shadow:none}[data-ui=image][data-part=root][data-placeholder=blur] [data-part=placeholder]>img{block-size:100%;display:block;filter:blur(var(--slotted-image-placeholder-blur, 1.25rem));inline-size:100%;object-fit:var(--_fit);object-position:var(--_position);transform:scale(1.08)}[data-ui=image][data-part=root][data-status=loaded] [data-part=placeholder]{opacity:0}[data-ui=image][data-part=root][data-status=error] [data-part=placeholder]{visibility:hidden}[data-ui=image][data-part=root] [data-part=fallback]{--slotted-icon-size: var(--slotted-image-glyph-size, var(--slotted-space-9, 2rem));display:none}[data-ui=image][data-part=root][data-status=error] [data-part=fallback]{background-color:var(--_ground);block-size:100%;box-shadow:var(--_ground-edge);color:var(--slotted-text-muted, GrayText);display:grid;grid-area:1 / 1;inline-size:100%;min-block-size:var(--slotted-image-fallback-min-size, var(--slotted-space-12, 4rem));min-inline-size:var(--slotted-image-fallback-min-size, var(--slotted-space-12, 4rem));place-items:center}[data-ui=image][data-part=root]:any-link,button[data-ui=image][data-part=root],[data-ui=image][data-part=root][tabindex]{cursor:pointer}[data-ui=image][data-part=root]:any-link:not([data-disabled]):hover,button[data-ui=image][data-part=root]:not(:disabled):hover,[data-ui=image][data-part=root][tabindex]:not([data-disabled]):hover{--_edge: var(--slotted-border-strong, CanvasText);--_edge-width: var(--slotted-border-width-thick, 2px)}[data-ui=image][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)}}\n"] }]
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], srcset: [{ type: i0.Input, args: [{ isSignal: true, alias: "srcset", required: false }] }], sizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizes", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], crossOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "crossOrigin", required: false }] }], referrerPolicy: [{ type: i0.Input, args: [{ isSignal: true, alias: "referrerPolicy", required: false }] }], ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placeholderSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderSrc", required: false }] }], fallbackSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackSrc", required: false }] }], sources: [{ type: i0.Input, args: [{ isSignal: true, alias: "sources", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], decoding: [{ type: i0.Input, args: [{ isSignal: true, alias: "decoding", required: false }] }], fetchPriority: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetchPriority", required: false }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], statusChange: [{ type: i0.Output, args: ["statusChange"] }], projected: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlImageMedia), { isSignal: true }] }] } });
+
+/**
+ * Content over the placeholder's ground while the picture is on its way — a
+ * skeleton, a blurhash canvas. A marker rather than a bare `<ng-content>`,
+ * so the slot can be selected by name and nothing else falls into it.
+ */
+class SlImagePlaceholder {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImagePlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlImagePlaceholder, isStandalone: true, selector: "[slImagePlaceholder]", exportAs: ["slImagePlaceholder"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImagePlaceholder, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slImagePlaceholder]',
+                    standalone: true,
+                    exportAs: 'slImagePlaceholder',
+                }]
+        }] });
+/**
+ * Content of the fallback, in place of the glyph, once the picture has
+ * failed: a message, a retry, a logotype. The glyph is the slot's default
+ * content, so projecting anything here replaces it.
+ */
+class SlImageFallback {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImageFallback, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlImageFallback, isStandalone: true, selector: "[slImageFallback]", exportAs: ["slImageFallback"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImageFallback, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slImageFallback]',
+                    standalone: true,
+                    exportAs: 'slImageFallback',
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IMAGE_DEFAULTS, IMAGE_MEDIA_HOST, SlImage, SlImageFallback, SlImageMedia, SlImagePlaceholder, injectImageDefaults, provideImageDefaults };
+//# sourceMappingURL=slotted-angular-image.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-image.mjs","sources":["../../image/src/image-defaults.ts","../../image/src/image-media-host.ts","../../image/src/image-media.ts","../../image/src/image.ts","../../image/src/image-slots.ts","../../image/src/slotted-angular-image.ts"],"sourcesContent":["import { inject, InjectionToken } from '@angular/core';\n\n/**\n * How wide and how tall the box is. `intrinsic` is the picture's own size,\n * shrunk to fit; `fill` is the parent's in both axes; `framed` is the\n * column's width and the frame's height, and it is what a decided `ratio`\n * implies.\n */\nexport type ImageLayout = 'intrinsic' | 'fill' | 'framed';\n\n/** The five values `object-fit` has. `cover` crops; `contain` letterboxes. */\nexport type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';\n\n/**\n * The focal point a crop keeps. `start` and `end` are the family's own —\n * `object-position` has no logical keywords — and mirror under `dir=\"rtl\"`.\n * Any other value (`30% 20%`, a CMS focal point) is written on the instance.\n */\nexport type ImagePosition = 'center' | 'top' | 'bottom' | 'start' | 'end';\n\n/** What the DOM says the focal point is: one of the names, or `custom`. */\nexport type ImagePositionAttribute = ImagePosition | 'custom';\n\nexport type ImageRadius = 'none' | 'sm' | 'md' | 'lg';\n\n/**\n * What stands under the picture while it is on its way. `surface` is the\n * sunken ground; `blur` is `placeholderSrc` scaled and blurred where the\n * picture will be; `none` paints nothing.\n */\nexport type ImagePlaceholder = 'none' | 'surface' | 'blur';\n\n/** Where the picture is. Four values, because a boolean cannot say why there is none. */\nexport type ImageStatus = 'idle' | 'loading' | 'loaded' | 'error';\n\nexport type ImageLoading = 'lazy' | 'eager';\nexport type ImageDecoding = 'async' | 'sync' | 'auto';\n\n/** One `<source>` of a `<picture>`: art direction by media, or a format by type. */\nexport interface ImageSource {\n  media?: string | undefined;\n  sizes?: string | undefined;\n  srcSet: string;\n  type?: string | undefined;\n}\n\n/** What an application sets once for every image under it. */\nexport interface ImageDefaults {\n  bordered: boolean;\n  decoding: ImageDecoding;\n  fit: ImageFit;\n  layout: ImageLayout;\n  loading: ImageLoading;\n  placeholder: ImagePlaceholder;\n  position: ImagePosition | (string & {});\n  radius: ImageRadius;\n}\n\nconst FALLBACK: ImageDefaults = {\n  bordered: false,\n  decoding: 'async',\n  fit: 'cover',\n  layout: 'intrinsic',\n  loading: 'lazy',\n  placeholder: 'surface',\n  position: 'center',\n  radius: 'none',\n};\n\nexport const IMAGE_DEFAULTS = new InjectionToken<ImageDefaults>('slotted image defaults', {\n  providedIn: 'root',\n  factory: () => FALLBACK,\n});\n\n/**\n * An application decides once how its pictures are cut, cornered, edged and\n * held before they arrive, rather than repeating the same inputs on every\n * thumbnail in every grid. An image that states any of them itself still\n * wins: an explicit input is never overridden by the token.\n */\nexport function provideImageDefaults(defaults: Partial<ImageDefaults>) {\n  return {\n    provide: IMAGE_DEFAULTS,\n    useFactory: (): ImageDefaults => ({\n      bordered: defaults.bordered ?? FALLBACK.bordered,\n      decoding: defaults.decoding ?? FALLBACK.decoding,\n      fit: defaults.fit ?? FALLBACK.fit,\n      layout: defaults.layout ?? FALLBACK.layout,\n      loading: defaults.loading ?? FALLBACK.loading,\n      placeholder: defaults.placeholder ?? FALLBACK.placeholder,\n      position: defaults.position ?? FALLBACK.position,\n      radius: defaults.radius ?? FALLBACK.radius,\n    }),\n  };\n}\n\n/** What an image renders as here, before it states anything of its own. */\nexport function injectImageDefaults(): ImageDefaults {\n  return inject(IMAGE_DEFAULTS);\n}\n","import { InjectionToken } from '@angular/core';\n\n/**\n * What the picture tells the image it sits in.\n *\n * It is a token rather than the component's own class so that one directive\n * can serve both pictures the family knows about: the `<img>` the image\n * renders for its own `src`, and the `<img>` the consumer projects — which is\n * the one that carries `ngSrc`, and therefore the one `NgOptimizedImage` can\n * reach. A directive that injected the component directly would put a cycle\n * between the two files, and the component imports the directive for its own\n * template.\n */\nexport interface ImageMediaHost {\n  /** The picture arrived, or was already there. */\n  reportLoaded(): void;\n  /** The picture failed. The host decides whether a second URL is tried. */\n  reportError(): void;\n}\n\nexport const IMAGE_MEDIA_HOST = new InjectionToken<ImageMediaHost>('slotted image media host');\n","import { afterNextRender, Directive, ElementRef, inject } from '@angular/core';\n\nimport { IMAGE_MEDIA_HOST } from './image-media-host';\n\n/**\n * The picture inside an image.\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\n * other half of the same idea.\n *\n * A projected picture keeps every attribute the consumer wrote — `alt`,\n * `loading`, `width`, `height` — and the family writes only its part name.\n */\n@Directive({\n  selector: 'img[slImageMedia]',\n  standalone: true,\n  exportAs: 'slImageMedia',\n  host: {\n    'data-part': 'image',\n    '(load)': 'host.reportLoaded()',\n    '(error)': 'host.reportError()',\n  },\n})\nexport class SlImageMedia {\n  protected readonly host = inject(IMAGE_MEDIA_HOST);\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 image shows its ground over a picture that is already\n     * there.\n     */\n    afterNextRender(() => {\n      if (this.element.complete && this.element.naturalWidth > 0) {\n        this.host.reportLoaded();\n      }\n    });\n  }\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  forwardRef,\n  input,\n  linkedSignal,\n  output,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { SlGlyph, SlIcon } from '@slotted/angular/icon';\n\nimport { SlAspectRatio } from '@slotted/angular/aspect-ratio';\nimport type { AspectRatioValue } from '@slotted/angular/aspect-ratio';\n\nimport {\n  injectImageDefaults,\n  type ImageDecoding,\n  type ImageFit,\n  type ImageLayout,\n  type ImageLoading,\n  type ImagePlaceholder,\n  type ImagePosition,\n  type ImagePositionAttribute,\n  type ImageRadius,\n  type ImageSource,\n  type ImageStatus,\n} from './image-defaults';\nimport { IMAGE_MEDIA_HOST } from './image-media-host';\nimport { SlImageMedia } from './image-media';\n\nexport type {\n  ImageDecoding,\n  ImageDefaults,\n  ImageFit,\n  ImageLayout,\n  ImageLoading,\n  ImagePlaceholder,\n  ImagePosition,\n  ImagePositionAttribute,\n  ImageRadius,\n  ImageSource,\n  ImageStatus,\n} from './image-defaults';\n\nconst POSITIONS = new Set(['center', 'top', 'bottom', 'start', 'end']);\n\n/** Which of the two URLs the element is showing, and what it said about it. */\ninterface Derived {\n  attempt: 'primary' | 'fallback';\n  status: ImageStatus;\n}\n\n/**\n * A picture, and what stands in for it before it arrives and after it fails.\n * The `<img>` is the platform's and keeps every attribute the platform gives\n * it; the family adds the two layers under it, a fit, a focal point, a\n * corner and an edge, and composes the frame from `slAspectRatio` when a\n * ratio was decided.\n *\n * The component is written on the element the page chose — a `div`, a\n * `figure`, an `a` that opens a page, a `button` that opens a dialog. The\n * picture is either the `<img>` the component renders for its `src`, or the\n * `<img slImageMedia>` the consumer projects, which is the one `ngSrc` and\n * `NgOptimizedImage` belong on.\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 a\n * picture loaded. Here the consumer's value simply wins, and the output\n * reports the derivation — a load event is a fact rather than a request, so\n * there is nothing to cancel and no reason from the closed vocabulary fits.\n * `fallbackSrc` is tried before `error` is reported, on the component's own\n * `<img>`; a projected picture is the consumer's to retry.\n */\n@Component({\n  selector: '[slImage]',\n  standalone: true,\n  exportAs: 'slImage',\n  imports: [NgTemplateOutlet, SlAspectRatio, SlGlyph, SlIcon, SlImageMedia],\n  providers: [\n    /* The component is its own media host, and a decorator is evaluated before\n       the class it decorates exists. */\n    { provide: IMAGE_MEDIA_HOST, useExisting: forwardRef(() => SlImage) },\n  ],\n  template: `@if (ratio(); as decided) {\n      <div slAspectRatio [ratio]=\"decided\">\n        <ng-container *ngTemplateOutlet=\"layers\"></ng-container>\n      </div>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"layers\"></ng-container>\n    }\n    <ng-template #layers>\n      @if (projected() === undefined && src() !== undefined) {\n        @if (sources().length > 0) {\n          <picture data-part=\"picture\">\n            @for (source of sources(); track $index) {\n              <source\n                [attr.srcset]=\"source.srcSet\"\n                [attr.media]=\"source.media ?? null\"\n                [attr.sizes]=\"source.sizes ?? null\"\n                [attr.type]=\"source.type ?? null\"\n              />\n            }\n            <ng-container *ngTemplateOutlet=\"own\"></ng-container>\n          </picture>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"own\"></ng-container>\n        }\n      }\n      <ng-content select=\"img[slImageMedia]\"></ng-content\n      ><span data-part=\"placeholder\" aria-hidden=\"true\">\n        @if (resolvedPlaceholder() === 'blur' && placeholderSrc(); as preview) {\n          <img alt=\"\" [src]=\"preview\" />\n        }\n        <ng-content select=\"[slImagePlaceholder]\"></ng-content></span\n      ><span data-part=\"fallback\"\n        ><ng-content select=\"[slImageFallback]\"\n          ><span slIcon><svg slGlyph name=\"image-off\"></svg></span></ng-content\n      ></span>\n    </ng-template>\n    <ng-template #own>\n      <img\n        slImageMedia\n        [src]=\"shownSrc()\"\n        [attr.srcset]=\"srcset() ?? null\"\n        [attr.sizes]=\"sizes() ?? null\"\n        [attr.alt]=\"alt() ?? ''\"\n        [attr.width]=\"width() ?? null\"\n        [attr.height]=\"height() ?? null\"\n        [attr.loading]=\"resolvedLoading()\"\n        [attr.decoding]=\"resolvedDecoding()\"\n        [attr.fetchpriority]=\"resolvedFetchPriority()\"\n        [attr.crossorigin]=\"crossOrigin() ?? null\"\n        [attr.referrerpolicy]=\"referrerPolicy() ?? null\"\n      />\n    </ng-template>`,\n  styleUrl: '../../../styles/src/image/image.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-ui': 'image',\n    'data-part': 'root',\n    '[attr.data-layout]': 'resolvedLayout()',\n    '[attr.data-fit]': 'resolvedFit()',\n    '[attr.data-position]': 'positionAttribute()',\n    '[attr.data-radius]': 'resolvedRadius()',\n    '[attr.data-placeholder]': 'resolvedPlaceholder()',\n    '[attr.data-status]': 'resolvedStatus()',\n    '[attr.data-bordered]': \"resolvedBordered() ? '' : null\",\n    '[style.--slotted-image-position]': 'positionToken()',\n  },\n})\nexport class SlImage {\n  /** The picture. Absent, the component renders no `<img>` of its own and is idle. */\n  readonly src = input<string | undefined>(undefined);\n  /** The candidates for the component's own `<img>`, as the platform's `srcset`. */\n  readonly srcset = input<string | undefined>(undefined);\n  /** The platform's `sizes`, beside `srcset`. */\n  readonly sizes = input<string | undefined>(undefined);\n  /**\n   * What the picture shows, or `\"\"` for a picture that is decoration beside\n   * its own text. Written on the component's own `<img>`; a projected\n   * picture carries its own.\n   */\n  readonly alt = input<string | undefined>(undefined);\n  /** The intrinsic width, which with `height` reserves the ratio before the picture loads. */\n  readonly width = input<number | string | undefined>(undefined);\n  readonly height = input<number | string | undefined>(undefined);\n  readonly crossOrigin = input<'anonymous' | 'use-credentials' | undefined>(undefined);\n  readonly referrerPolicy = input<string | undefined>(undefined);\n  /**\n   * The proportion the box holds before the picture arrives. Renders an\n   * `slAspectRatio` inside the host and lays the picture out `framed`.\n   */\n  readonly ratio = input<AspectRatioValue | undefined>(undefined);\n  /** Defaults to the provider, then to `intrinsic`; a `ratio` implies `framed` unless one is stated. */\n  readonly layout = input<ImageLayout | undefined>(undefined);\n  /** Defaults to the provider, then to `cover`. */\n  readonly fit = input<ImageFit | undefined>(undefined);\n  /**\n   * A focal point: one of the five names, or any `object-position` value,\n   * written on the instance. Defaults to the provider, then to `center`.\n   */\n  readonly position = input<ImagePosition | (string & {}) | undefined>(undefined);\n  /** Defaults to the provider, then to `none`. */\n  readonly radius = input<ImageRadius | undefined>(undefined);\n  /** A subtle inset edge, for a photograph of a white wall on a white page. */\n  readonly bordered = input<boolean | undefined, unknown>(undefined, {\n    transform: (value: unknown) => (value === undefined ? undefined : booleanAttribute(value)),\n  });\n  /** Defaults to the provider, then to `surface`. */\n  readonly placeholder = input<ImagePlaceholder | undefined>(undefined);\n  /** The small picture `placeholder=\"blur\"` scales and blurs. A data URI, usually. */\n  readonly placeholderSrc = input<string | undefined>(undefined);\n  /**\n   * A second URL to try when `src` fails. The status stays `loading` while\n   * it is tried, and `error` is reached only if it fails too.\n   */\n  readonly fallbackSrc = input<string | undefined>(undefined);\n  /** The `<source>`s of a `<picture>`, in order. The `<img>` is written last. */\n  readonly sources = input<readonly ImageSource[]>([]);\n  /** The platform's `loading`. Defaults to the provider, then to `lazy`; `priority` makes it `eager`. */\n  readonly loading = input<ImageLoading | undefined>(undefined);\n  /** The platform's `decoding`. Defaults to the provider, then to `async`. */\n  readonly decoding = input<ImageDecoding | undefined>(undefined);\n  /** The platform's `fetchpriority`. `priority` writes `high` unless one is stated. */\n  readonly fetchPriority = input<'high' | 'low' | 'auto' | undefined>(undefined);\n  /**\n   * The picture the page is waiting for: `loading=\"eager\"` and\n   * `fetchpriority=\"high\"`, unless either is stated.\n   */\n  readonly priority = 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\n   * family cannot see.\n   */\n  readonly status = input<ImageStatus | undefined>(undefined);\n\n  /** Reports the derived status. Never emits for a status passed in. */\n  readonly statusChange = output<ImageStatus>();\n\n  private readonly defaults = injectImageDefaults();\n\n  protected readonly projected = contentChild(SlImageMedia);\n\n  protected readonly resolvedLayout = computed<ImageLayout>(\n    () => this.layout() ?? (this.ratio() === undefined ? this.defaults.layout : 'framed'),\n  );\n  protected readonly resolvedFit = computed(() => this.fit() ?? this.defaults.fit);\n  protected readonly resolvedRadius = computed(() => this.radius() ?? this.defaults.radius);\n  protected readonly resolvedBordered = computed(() => this.bordered() ?? this.defaults.bordered);\n  protected readonly resolvedPlaceholder = computed(\n    () => this.placeholder() ?? this.defaults.placeholder,\n  );\n  protected readonly resolvedLoading = computed(\n    () => this.loading() ?? (this.priority() ? 'eager' : this.defaults.loading),\n  );\n  protected readonly resolvedDecoding = computed(() => this.decoding() ?? this.defaults.decoding);\n  protected readonly resolvedFetchPriority = computed(\n    () => this.fetchPriority() ?? (this.priority() ? 'high' : null),\n  );\n\n  private readonly resolvedPosition = computed(() => this.position() ?? this.defaults.position);\n  protected readonly positionAttribute = computed<ImagePositionAttribute>(() =>\n    POSITIONS.has(this.resolvedPosition())\n      ? (this.resolvedPosition() as ImagePositionAttribute)\n      : 'custom',\n  );\n  protected readonly positionToken = computed(() =>\n    this.positionAttribute() === 'custom' ? this.resolvedPosition() : null,\n  );\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\n   * the inputs alone can say — which is also what a server render and the\n   * hydration after it both compute, so nothing flashes between them.\n   */\n  private readonly derived = linkedSignal<string, Derived>({\n    source: () => `${this.src() ?? ''}|${this.projected() === undefined ? '' : 'projected'}`,\n    computation: (request) => ({\n      attempt: 'primary',\n      status: request === '|' ? 'idle' : 'loading',\n    }),\n  });\n\n  protected readonly resolvedStatus = computed(() => this.status() ?? this.derived().status);\n\n  /** The URL the component's own `<img>` is showing: `src`, or `fallbackSrc` after `src` failed. */\n  protected readonly shownSrc = computed(() =>\n    this.derived().attempt === 'fallback' ? (this.fallbackSrc() ?? this.src()) : this.src(),\n  );\n\n  /** Called by the picture, whichever of the two elements it turned out to be. */\n  reportLoaded() {\n    if (this.derived().status === 'loaded') return;\n    this.derived.set({ attempt: this.derived().attempt, status: 'loaded' });\n    this.statusChange.emit('loaded');\n  }\n\n  /**\n   * The first failure is answered with the second URL when there is one, and\n   * the status stays `loading` while it is tried; `error` is what is left\n   * when nothing could be shown. Only the component's own `<img>` can be\n   * re-pointed: a projected picture belongs to the consumer.\n   */\n  reportError() {\n    const { attempt } = this.derived();\n    if (\n      attempt === 'primary' &&\n      this.fallbackSrc() !== undefined &&\n      this.projected() === undefined\n    ) {\n      this.derived.set({ attempt: 'fallback', status: 'loading' });\n      return;\n    }\n    this.derived.set({ attempt, status: 'error' });\n    this.statusChange.emit('error');\n  }\n}\n","import { Directive } from '@angular/core';\n\n/**\n * Content over the placeholder's ground while the picture is on its way — a\n * skeleton, a blurhash canvas. A marker rather than a bare `<ng-content>`,\n * so the slot can be selected by name and nothing else falls into it.\n */\n@Directive({\n  selector: '[slImagePlaceholder]',\n  standalone: true,\n  exportAs: 'slImagePlaceholder',\n})\nexport class SlImagePlaceholder {}\n\n/**\n * Content of the fallback, in place of the glyph, once the picture has\n * failed: a message, a retry, a logotype. The glyph is the slot's default\n * content, so projecting anything here replaces it.\n */\n@Directive({\n  selector: '[slImageFallback]',\n  standalone: true,\n  exportAs: 'slImageFallback',\n})\nexport class SlImageFallback {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AA0DA,MAAM,QAAQ,GAAkB;AAC9B,IAAA,QAAQ,EAAE,KAAK;AACf,IAAA,QAAQ,EAAE,OAAO;AACjB,IAAA,GAAG,EAAE,OAAO;AACZ,IAAA,MAAM,EAAE,WAAW;AACnB,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,WAAW,EAAE,SAAS;AACtB,IAAA,QAAQ,EAAE,QAAQ;AAClB,IAAA,MAAM,EAAE,MAAM;CACf;MAEY,cAAc,GAAG,IAAI,cAAc,CAAgB,wBAAwB,EAAE;AACxF,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,OAAO,EAAE,MAAM,QAAQ;AACxB,CAAA;AAED;;;;;AAKG;AACG,SAAU,oBAAoB,CAAC,QAAgC,EAAA;IACnE,OAAO;AACL,QAAA,OAAO,EAAE,cAAc;AACvB,QAAA,UAAU,EAAE,OAAsB;AAChC,YAAA,QAAQ,EAAE,QAAQ,CAAC,QAAQ,IAAI,QAAQ,CAAC,QAAQ;AAChD,YAAA,QAAQ,EAAE,QAAQ,CAAC,QAAQ,IAAI,QAAQ,CAAC,QAAQ;AAChD,YAAA,GAAG,EAAE,QAAQ,CAAC,GAAG,IAAI,QAAQ,CAAC,GAAG;AACjC,YAAA,MAAM,EAAE,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,MAAM;AAC1C,YAAA,OAAO,EAAE,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO;AAC7C,YAAA,WAAW,EAAE,QAAQ,CAAC,WAAW,IAAI,QAAQ,CAAC,WAAW;AACzD,YAAA,QAAQ,EAAE,QAAQ,CAAC,QAAQ,IAAI,QAAQ,CAAC,QAAQ;AAChD,YAAA,MAAM,EAAE,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,MAAM;SAC3C,CAAC;KACH;AACH;AAEA;SACgB,mBAAmB,GAAA;AACjC,IAAA,OAAO,MAAM,CAAC,cAAc,CAAC;AAC/B;;MC/Ea,gBAAgB,GAAG,IAAI,cAAc,CAAiB,0BAA0B;;AChB7F;;;;;;;;;;;;AAYG;MAWU,YAAY,CAAA;AACJ,IAAA,IAAI,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAEjC,IAAA,OAAO,GAAG,MAAM,CAA+B,UAAU,CAAC,CAAC,aAAa;AAEzF,IAAA,WAAA,GAAA;AACE;;;;;;AAMG;QACH,eAAe,CAAC,MAAK;AACnB,YAAA,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,YAAY,GAAG,CAAC,EAAE;AAC1D,gBAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YAC1B;AACF,QAAA,CAAC,CAAC;IACJ;uGAlBW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,EAAA,MAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,oBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAZ,YAAY,EAAA,UAAA,EAAA,CAAA;kBAVxB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mBAAmB;AAC7B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,IAAI,EAAE;AACJ,wBAAA,WAAW,EAAE,OAAO;AACpB,wBAAA,QAAQ,EAAE,qBAAqB;AAC/B,wBAAA,SAAS,EAAE,oBAAoB;AAChC,qBAAA;AACF,iBAAA;;;ACsBD,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;AAQtE;;;;;;;;;;;;;;;;;;;;;AAqBG;MA+EU,OAAO,CAAA;;IAET,GAAG,GAAG,KAAK,CAAqB,SAAS;4EAAC;;IAE1C,MAAM,GAAG,KAAK,CAAqB,SAAS;+EAAC;;IAE7C,KAAK,GAAG,KAAK,CAAqB,SAAS;8EAAC;AACrD;;;;AAIG;IACM,GAAG,GAAG,KAAK,CAAqB,SAAS;4EAAC;;IAE1C,KAAK,GAAG,KAAK,CAA8B,SAAS;8EAAC;IACrD,MAAM,GAAG,KAAK,CAA8B,SAAS;+EAAC;IACtD,WAAW,GAAG,KAAK,CAA8C,SAAS;oFAAC;IAC3E,cAAc,GAAG,KAAK,CAAqB,SAAS;uFAAC;AAC9D;;;AAGG;IACM,KAAK,GAAG,KAAK,CAA+B,SAAS;8EAAC;;IAEtD,MAAM,GAAG,KAAK,CAA0B,SAAS;+EAAC;;IAElD,GAAG,GAAG,KAAK,CAAuB,SAAS;4EAAC;AACrD;;;AAGG;IACM,QAAQ,GAAG,KAAK,CAA4C,SAAS;iFAAC;;IAEtE,MAAM,GAAG,KAAK,CAA0B,SAAS;+EAAC;;AAElD,IAAA,QAAQ,GAAG,KAAK,CAA+B,SAAS,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,UAAA,EAAA,8BAAA,EAAA,CAAA,EAC/D,SAAS,EAAE,CAAC,KAAc,MAAM,KAAK,KAAK,SAAS,GAAG,SAAS,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC,GAC1F;;IAEO,WAAW,GAAG,KAAK,CAA+B,SAAS;oFAAC;;IAE5D,cAAc,GAAG,KAAK,CAAqB,SAAS;uFAAC;AAC9D;;;AAGG;IACM,WAAW,GAAG,KAAK,CAAqB,SAAS;oFAAC;;IAElD,OAAO,GAAG,KAAK,CAAyB,EAAE;gFAAC;;IAE3C,OAAO,GAAG,KAAK,CAA2B,SAAS;gFAAC;;IAEpD,QAAQ,GAAG,KAAK,CAA4B,SAAS;iFAAC;;IAEtD,aAAa,GAAG,KAAK,CAAsC,SAAS;sFAAC;AAC9E;;;AAGG;IACM,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AACjE;;;;AAIG;IACM,MAAM,GAAG,KAAK,CAA0B,SAAS;+EAAC;;IAGlD,YAAY,GAAG,MAAM,EAAe;IAE5B,QAAQ,GAAG,mBAAmB,EAAE;IAE9B,SAAS,GAAG,YAAY,CAAC,YAAY;kFAAC;AAEtC,IAAA,cAAc,GAAG,QAAQ,CAC1C,MAAM,IAAI,CAAC,MAAM,EAAE,KAAK,IAAI,CAAC,KAAK,EAAE,KAAK,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,QAAQ,CAAC;uFACtF;AACkB,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG;oFAAC;AAC7D,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM;uFAAC;AACtE,IAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ;yFAAC;AAC5E,IAAA,mBAAmB,GAAG,QAAQ,CAC/C,MAAM,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW;4FACtD;AACkB,IAAA,eAAe,GAAG,QAAQ,CAC3C,MAAM,IAAI,CAAC,OAAO,EAAE,KAAK,IAAI,CAAC,QAAQ,EAAE,GAAG,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;wFAC5E;AACkB,IAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ;yFAAC;IAC5E,qBAAqB,GAAG,QAAQ,CACjD,MAAM,IAAI,CAAC,aAAa,EAAE,KAAK,IAAI,CAAC,QAAQ,EAAE,GAAG,MAAM,GAAG,IAAI,CAAC;8FAChE;AAEgB,IAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ;yFAAC;AAC1E,IAAA,iBAAiB,GAAG,QAAQ,CAAyB,MACtE,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,EAAE;AACnC,UAAG,IAAI,CAAC,gBAAgB;AACxB,UAAE,QAAQ;0FACb;IACkB,aAAa,GAAG,QAAQ,CAAC,MAC1C,IAAI,CAAC,iBAAiB,EAAE,KAAK,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI;sFACvE;AAED;;;;;AAKG;AACc,IAAA,OAAO,GAAG,YAAY,CAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,SAAA,EAAA,8BAAA,EAAA,CAAA,EACrC,MAAM,EAAE,MAAM,CAAA,EAAG,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,EAAE,KAAK,SAAS,GAAG,EAAE,GAAG,WAAW,CAAA,CAAE;AACxF,QAAA,WAAW,EAAE,CAAC,OAAO,MAAM;AACzB,YAAA,OAAO,EAAE,SAAS;YAClB,MAAM,EAAE,OAAO,KAAK,GAAG,GAAG,MAAM,GAAG,SAAS;AAC7C,SAAA,CAAC,GACF;AAEiB,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM;uFAAC;;AAGvE,IAAA,QAAQ,GAAG,QAAQ,CAAC,MACrC,IAAI,CAAC,OAAO,EAAE,CAAC,OAAO,KAAK,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,GAAG,EAAE,IAAI,IAAI,CAAC,GAAG,EAAE;iFACxF;;IAGD,YAAY,GAAA;AACV,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,KAAK,QAAQ;YAAE;QACxC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;AACvE,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC;IAClC;AAEA;;;;;AAKG;IACH,WAAW,GAAA;QACT,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE;QAClC,IACE,OAAO,KAAK,SAAS;AACrB,YAAA,IAAI,CAAC,WAAW,EAAE,KAAK,SAAS;AAChC,YAAA,IAAI,CAAC,SAAS,EAAE,KAAK,SAAS,EAC9B;AACA,YAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;YAC5D;QACF;AACA,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;AAC9C,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC;IACjC;uGAnJW,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAP,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,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,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,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,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,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,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,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,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,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,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,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,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,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,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,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,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,EAAA,kBAAA,EAAA,kBAAA,EAAA,eAAA,EAAA,eAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,kBAAA,EAAA,kBAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,kBAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,gCAAA,EAAA,gCAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,SAAA,EAzEP;AACT;AACoC;AACpC,YAAA,EAAE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,CAAC,MAAM,OAAO,CAAC,EAAE;AACtE,SAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EA6I2C,YAAY,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA5I9C,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAmDO,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,6iKAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAzDP,gBAAgB,oJAAE,aAAa,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,MAAM,6HAAE,YAAY,EAAA,QAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FA0E7D,OAAO,EAAA,UAAA,EAAA,CAAA;kBA9EnB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,cACT,IAAI,EAAA,QAAA,EACN,SAAS,EAAA,OAAA,EACV,CAAC,gBAAgB,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,CAAC,EAAA,SAAA,EAC9D;AACT;AACoC;AACpC,wBAAA,EAAE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,CAAC,MAAK,OAAQ,CAAC,EAAE;qBACtE,EAAA,QAAA,EACS,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDO,kBAAA,CAAA,EAAA,eAAA,EAEA,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,OAAO;AAClB,wBAAA,WAAW,EAAE,MAAM;AACnB,wBAAA,oBAAoB,EAAE,kBAAkB;AACxC,wBAAA,iBAAiB,EAAE,eAAe;AAClC,wBAAA,sBAAsB,EAAE,qBAAqB;AAC7C,wBAAA,oBAAoB,EAAE,kBAAkB;AACxC,wBAAA,yBAAyB,EAAE,uBAAuB;AAClD,wBAAA,oBAAoB,EAAE,kBAAkB;AACxC,wBAAA,sBAAsB,EAAE,gCAAgC;AACxD,wBAAA,kCAAkC,EAAE,iBAAiB;AACtD,qBAAA,EAAA,MAAA,EAAA,CAAA,6iKAAA,CAAA,EAAA;uyEA0E2C,YAAY,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AClO1D;;;;AAIG;MAMU,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,sBAAsB;AAChC,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,oBAAoB;AAC/B,iBAAA;;AAGD;;;;AAIG;MAMU,eAAe,CAAA;uGAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAL3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mBAAmB;AAC7B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,iBAAiB;AAC5B,iBAAA;;;ACvBD;;AAEG;;"}