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

package/types/slotted-angular-rating.d.ts

@@ -0,0 +1,374 @@
+import * as _slotted_core_i18n from '@slotted/core/i18n';
+import { PartialMessages, RatingMessages } from '@slotted/core/i18n';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, TemplateRef } from '@angular/core';
+import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
+import { ChangeRequest } from '@slotted/core/state';
+import * as _slotted_core_rating from '@slotted/core/rating';
+import { RatingInsightThresholds } from '@slotted/core/rating';
+
+/** The step the symbols and the text beside them sit at. */
+type RatingSize = 'sm' | 'md' | 'lg';
+/**
+ * The colour a lit symbol takes. `secondary` is outside the axis: its solid
+ * step is a ground, and a lit star painted in it reads as an unlit one.
+ */
+type RatingTone = 'accent' | 'success' | 'warning' | 'danger';
+/** The smallest move of the input member: a whole symbol, or half of one. */
+type RatingStep = 1 | 0.5;
+/** How the display member draws a value: every symbol, one symbol, or one symbol and a histogram. */
+type RatingDisplayVariant = 'full' | 'compact' | 'histogram';
+/** How the summary draws a distribution: one bar per level, or columns over the scale with the mean. */
+type RatingSummaryVariant = 'bars' | 'spectrum';
+interface RatingDefaults {
+    size: RatingSize;
+    tone: RatingTone;
+    max: number;
+    clearable: boolean;
+    insightThresholds: RatingInsightThresholds;
+}
+/** What `provideRating()` takes: every key optional, and the thresholds partial. */
+type RatingDefaultsInput = Partial<Omit<RatingDefaults, 'insightThresholds'>> & {
+    insightThresholds?: Partial<RatingInsightThresholds>;
+};
+declare const SL_RATING_DEFAULTS: InjectionToken<RatingDefaults>;
+/**
+ * An application decides once how its ratings read — the step, the tone, the
+ * scale, whether a press on the chosen star empties it and the thresholds of
+ * the summary's conclusion. A threshold left out keeps the family's; an
+ * instance that states any of them still wins. The words and the locale come
+ * from the language in force (`provideSlotted`).
+ */
+declare function provideRating(defaults: RatingDefaultsInput): {
+    provide: InjectionToken<RatingDefaults>;
+    useFactory: () => RatingDefaults;
+};
+/** What a rating renders as here, before it states anything of its own. */
+declare function injectRatingDefaults(): RatingDefaults;
+declare class SlRatingIdFactory {
+    next(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlRatingIdFactory, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+/** Why the value moved. A rating can produce exactly these three. */
+type RatingValueReason = 'pointer' | 'keyboard' | 'clear';
+/** What the caption template is handed: the value held, and the one under the pointer. */
+interface RatingCaptionContext {
+    $implicit: number | null;
+    value: number | null;
+    preview: number | null;
+}
+/** What the symbol template is handed: the symbol's position, and how much of it is lit. */
+interface RatingSymbolContext {
+    $implicit: {
+        index: number;
+        fill: number;
+    };
+    index: number;
+    fill: number;
+}
+/**
+ * The words beside the stars. On an element it is projected as it is; on an
+ * `ng-template` it is rendered again whenever the value or the preview moves,
+ * with both in its context — the word for the star under the pointer is the
+ * whole point of a caption.
+ */
+declare class SlRatingCaption {
+    readonly template: TemplateRef<RatingCaptionContext> | null;
+    static ngTemplateContextGuard(_directive: SlRatingCaption, context: unknown): context is RatingCaptionContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlRatingCaption, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlRatingCaption, "[slRatingCaption]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * The drawing of one symbol, in place of the star. It is rendered twice per
+ * item — once in `symbol`, the unlit shape, and once in `fill`, the lit one
+ * the stylesheet clips — so a consumer's heart lights the way a star does.
+ */
+declare class SlRatingSymbol {
+    readonly template: TemplateRef<RatingSymbolContext>;
+    static ngTemplateContextGuard(_directive: SlRatingSymbol, context: unknown): context is RatingSymbolContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlRatingSymbol, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlRatingSymbol, "ng-template[slRatingSymbol]", never, {}, {}, never, never, true, never>;
+}
+interface RatingRadio {
+    value: number;
+    half: boolean;
+    label: string;
+}
+interface RatingItem {
+    index: number;
+    checked: boolean;
+    radios: RatingRadio[];
+    context: RatingSymbolContext;
+}
+/**
+ * An ordinal value chosen from a row of symbols.
+ *
+ * **The radios are native, and that buys the rest.** Tab lands on the checked
+ * one or on the first, Space checks, the form submits the value under one
+ * `name`, and a disabled rating leaves the tab order — all the platform's. The
+ * arrows are the family's (`ratingForKey`): the platform's wrap from the last
+ * radio to the first, and a rating that falls from five to one on one key too
+ * many is the defect every surveyed rating avoids.
+ *
+ * **A half step is a second radio over the inline-start half of the symbol**,
+ * stacked above the whole one, so the pointer asks for the half by pressing
+ * where the half is drawn.
+ *
+ * **The DOM is written back after every activation.** The HTML standard's
+ * canceled activation restores only the clicked radio, and a press on the
+ * checked one that empties the value leaves the platform nothing to undo, so
+ * each radio's `checked` is set from the value once the request is answered.
+ */
+declare class SlRating implements ControlValueAccessor, Validator {
+    /** The rating, `null` for none. Two-way; every move is asked first through `valueChangeRequest`. */
+    readonly value: _angular_core.ModelSignal<number | null>;
+    readonly max: _angular_core.InputSignal<number | undefined>;
+    readonly step: _angular_core.InputSignal<RatingStep>;
+    readonly clearable: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly size: _angular_core.InputSignal<RatingSize | undefined>;
+    readonly tone: _angular_core.InputSignal<RatingTone | undefined>;
+    /** The submission name the radios share. Generated when it is not written. */
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    /** The form the radios belong to when the rating sits outside it. */
+    readonly form: _angular_core.InputSignal<string | undefined>;
+    /** Unstated rather than `false`, so the rating defers to the field around it. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly readOnly: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /** Words laid over the catalog of the language in force, key by key. */
+    readonly messages: _angular_core.InputSignal<PartialMessages<RatingMessages> | undefined>;
+    /** The locale numbers are written in. Unstated, the language in force. */
+    readonly locale: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Emitted before the value moves, with the value asked for, the one it
+     * replaces, the reason and the event. `cancel()` keeps the value.
+     */
+    readonly valueChangeRequest: _angular_core.OutputEmitterRef<ChangeRequest<number | null>>;
+    /** The value under the pointer, and `null` when it leaves. It changes nothing. */
+    readonly previewChange: _angular_core.OutputEmitterRef<number | null>;
+    private readonly element;
+    private readonly field;
+    private readonly fieldGroup;
+    private readonly defaults;
+    private readonly appLocale;
+    /** The family's words in the language in force, with this rating's `messages` laid over them. */
+    readonly t: _slotted_core_i18n.FamilyTranslator<RatingMessages>;
+    private readonly generatedName;
+    private readonly writtenRole;
+    private readonly writtenDescribedBy;
+    protected readonly caption: _angular_core.Signal<SlRatingCaption | undefined>;
+    protected readonly symbol: _angular_core.Signal<SlRatingSymbol | undefined>;
+    private readonly radios;
+    private readonly formDisabled;
+    private readonly preview;
+    protected readonly dragging: _angular_core.WritableSignal<boolean>;
+    private gesture;
+    /** Set when a touch gesture has answered a press, so the click the platform sends after it does not answer it again. */
+    private suppressClick;
+    private onChange;
+    private onTouched;
+    readonly resolvedName: _angular_core.Signal<string>;
+    readonly resolvedMax: _angular_core.Signal<number>;
+    readonly resolvedStep: _angular_core.Signal<RatingStep>;
+    readonly resolvedClearable: _angular_core.Signal<boolean>;
+    readonly resolvedSize: _angular_core.Signal<RatingSize>;
+    readonly resolvedTone: _angular_core.Signal<RatingTone>;
+    readonly resolvedDisabled: _angular_core.Signal<boolean | undefined>;
+    readonly resolvedReadOnly: _angular_core.Signal<boolean | undefined>;
+    readonly resolvedInvalid: _angular_core.Signal<boolean | undefined>;
+    readonly resolvedRequired: _angular_core.Signal<boolean | undefined>;
+    readonly resolvedLocale: _angular_core.Signal<string>;
+    private readonly scale;
+    /** The value on the grid of the scale: 7 of 5 is 5, 3.2 on whole steps is 4, and `NaN` is none. */
+    readonly current: _angular_core.Signal<number | null>;
+    protected readonly items: _angular_core.Signal<RatingItem[]>;
+    protected readonly captionContext: _angular_core.Signal<RatingCaptionContext>;
+    protected readonly resolvedRole: _angular_core.Signal<string | null>;
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    private readonly inert;
+    /** The one action a value cannot express: focus on the checked radio, or on the first. */
+    focus(options?: FocusOptions): void;
+    protected onKeyDown(event: KeyboardEvent): void;
+    protected onClick(event: MouseEvent): void;
+    protected onRowPointerDown(event: PointerEvent): void;
+    protected onRowPointerMove(event: PointerEvent): void;
+    /**
+     * A touch that never moved is a press, answered here rather than by the
+     * click that follows it: with the row capturing the pointer, the click lands
+     * on the row and not on a radio.
+     */
+    protected onRowPointerUp(event: PointerEvent): void;
+    protected onRowPointerCancel(): void;
+    protected onPreview(value: number): void;
+    protected onLeave(): void;
+    protected onBlur(): void;
+    writeValue(value: number | null | undefined): void;
+    registerOnChange(fn: (value: number | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /** "Choose a rating" is a fact about the whole row, which no single radio can see. */
+    validate(control: AbstractControl): ValidationErrors | null;
+    /**
+     * Asks for one value. Returns whether it moved: not while read-only or
+     * disabled, not when it is the value already held, and not when the
+     * consumer cancelled the request.
+     */
+    private request;
+    private valueAt;
+    /** Writes every radio's `checked` from the value. */
+    private syncElements;
+    private inputFor;
+    private isOwnRadio;
+    /** A right-to-left document is a property of the page, read from the element. */
+    private isRtl;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlRating, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlRating, "div[slRating]", ["slRating"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChangeRequest": "valueChangeRequest"; "previewChange": "previewChange"; }, ["caption", "symbol"], ["[slRatingCaption]"], true, never>;
+}
+
+/**
+ * A rating the page reports rather than asks for: an image of lit symbols
+ * named by the number it draws.
+ *
+ * Any fraction is drawn — 4,6 lights six tenths of the fifth star — because
+ * nothing here is a target; the input member offers whole and half steps
+ * only. `compact` and `histogram` draw one lit star beside the number, for a
+ * row of a table or a card, and `histogram` adds the distribution as bars,
+ * each level over the largest, so a split between the two ends is visible at
+ * a glance where a mean of 3,3 would hide it.
+ */
+declare class SlRatingDisplay {
+    /** The number drawn. Any fraction; clamped to the scale when it is drawn. */
+    readonly value: _angular_core.InputSignal<number>;
+    readonly max: _angular_core.InputSignal<number | undefined>;
+    readonly size: _angular_core.InputSignal<RatingSize | undefined>;
+    readonly tone: _angular_core.InputSignal<RatingTone | undefined>;
+    readonly variant: _angular_core.InputSignal<RatingDisplayVariant>;
+    /** How many readings the value is made of. Written beside it and in the name. */
+    readonly count: _angular_core.InputSignal<number | undefined>;
+    /** Counts per level, lowest first, for the `histogram` variant. */
+    readonly distribution: _angular_core.InputSignal<readonly number[] | undefined>;
+    readonly showValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Words laid over the catalog of the language in force, key by key. */
+    readonly messages: _angular_core.InputSignal<PartialMessages<RatingMessages> | undefined>;
+    /** The locale numbers are written in. Unstated, the language in force. */
+    readonly locale: _angular_core.InputSignal<string | undefined>;
+    private readonly defaults;
+    private readonly appLocale;
+    /** The family's words in the language in force, with this display's `messages` laid over them. */
+    readonly t: _slotted_core_i18n.FamilyTranslator<RatingMessages>;
+    private readonly writtenLabel;
+    readonly resolvedMax: _angular_core.Signal<number>;
+    readonly resolvedSize: _angular_core.Signal<RatingSize>;
+    readonly resolvedTone: _angular_core.Signal<RatingTone>;
+    readonly resolvedVariant: _angular_core.Signal<RatingDisplayVariant>;
+    private readonly resolvedLocale;
+    /** The value clamped to the scale, and `NaN` read as nought. */
+    private readonly drawn;
+    /** Every symbol's lit share; one full star for the variants that draw one. */
+    protected readonly fills: _angular_core.Signal<string[]>;
+    protected readonly shares: _angular_core.Signal<string[]>;
+    protected readonly valueText: _angular_core.Signal<string>;
+    protected readonly countText: _angular_core.Signal<string | null>;
+    protected readonly label: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlRatingDisplay, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlRatingDisplay, "div[slRatingDisplay]", ["slRatingDisplay"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "distribution": { "alias": "distribution"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Why the selected levels moved: a press, or Space or Enter on a level. */
+type RatingLevelsReason = 'pointer' | 'keyboard';
+interface SummaryLevel {
+    level: number;
+    count: number;
+    countText: string;
+    /** The level's share of the total, for the bar of `bars`. */
+    share: string;
+    /** The level over the largest level, for the column of `spectrum`. */
+    peak: string;
+    shareText: string;
+    label: string;
+    pressed: boolean;
+}
+interface SummaryBucket {
+    key: 'positive' | 'neutral' | 'negative';
+    tone: 'success' | 'secondary' | 'danger';
+    before: string;
+    share: string;
+    after: string;
+}
+/**
+ * The aggregate of many ratings: the figure, how many readings it is made of,
+ * and how they spread over the levels.
+ *
+ * `bars` draws one bar per level, highest first, the order every surveyed
+ * summary uses. `spectrum` draws the same counts as columns over the scale,
+ * lowest first, with the mean and its 95% interval laid over them, the
+ * readings split into three buckets, and one conclusion — split, too few,
+ * agreed, or none of those — so a 3,3 made of ones and fives does not read
+ * like a 3,3 made of threes.
+ *
+ * With `filterable`, each level is a toggle button, and the pressed levels are
+ * a selection the page filters its reviews by; a level nobody chose is
+ * disabled, because a filter that returns nothing is a dead end.
+ */
+declare class SlRatingSummary {
+    /** How many readings each level holds, lowest level first — the order a store keeps them in. */
+    readonly counts: _angular_core.InputSignal<readonly number[]>;
+    /** How many levels the scale has. A level missing from `counts` holds none; one past it is dropped. */
+    readonly max: _angular_core.InputSignal<number | undefined>;
+    readonly variant: _angular_core.InputSignal<RatingSummaryVariant>;
+    /** Each level becomes a toggle button, and the pressed ones are `selectedLevels`. */
+    readonly filterable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The levels pressed, ascending. Two-way; every move is asked first through `selectedLevelsChangeRequest`. */
+    readonly selectedLevels: _angular_core.ModelSignal<readonly number[]>;
+    /** Merged over the application's thresholds, key by key. */
+    readonly insightThresholds: _angular_core.InputSignal<Partial<RatingInsightThresholds> | undefined>;
+    readonly showInsight: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly size: _angular_core.InputSignal<RatingSize | undefined>;
+    readonly tone: _angular_core.InputSignal<RatingTone | undefined>;
+    /** Words laid over the catalog of the language in force, key by key. */
+    readonly messages: _angular_core.InputSignal<PartialMessages<RatingMessages> | undefined>;
+    /** The locale numbers are written in. Unstated, the language in force. */
+    readonly locale: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Emitted before the selection moves, with the levels asked for, the ones
+     * they replace, the reason and the event. `cancel()` keeps the selection.
+     */
+    readonly selectedLevelsChangeRequest: _angular_core.OutputEmitterRef<ChangeRequest<readonly number[]>>;
+    private readonly defaults;
+    private readonly appLocale;
+    /** The family's words in the language in force, with this summary's `messages` laid over them. */
+    readonly t: _slotted_core_i18n.FamilyTranslator<RatingMessages>;
+    readonly resolvedMax: _angular_core.Signal<number>;
+    readonly resolvedVariant: _angular_core.Signal<RatingSummaryVariant>;
+    readonly resolvedSize: _angular_core.Signal<RatingSize>;
+    readonly resolvedTone: _angular_core.Signal<RatingTone>;
+    protected readonly resolvedLocale: _angular_core.Signal<string>;
+    private readonly thresholds;
+    /** Everything drawn is read from here: `summariseRatings` over the counts on the scale. */
+    readonly summary: _angular_core.Signal<_slotted_core_rating.RatingSummary>;
+    protected readonly lowestFirst: _angular_core.Signal<SummaryLevel[]>;
+    protected readonly highestFirst: _angular_core.Signal<SummaryLevel[]>;
+    protected readonly averageText: _angular_core.Signal<string>;
+    protected readonly scaleText: _angular_core.Signal<string>;
+    protected readonly countText: _angular_core.Signal<string>;
+    protected readonly insight: _angular_core.Signal<{
+        tone: "success" | "warning" | "secondary";
+        text: string;
+    } | null>;
+    protected readonly buckets: _angular_core.Signal<SummaryBucket[]>;
+    protected readonly meanProperties: _angular_core.Signal<{
+        mean: string;
+        low: string;
+        high: string;
+    } | null>;
+    protected toggle(level: number, event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlRatingSummary, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlRatingSummary, "section[slRatingSummary]", ["slRatingSummary"], { "counts": { "alias": "counts"; "required": true; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "selectedLevels": { "alias": "selectedLevels"; "required": false; "isSignal": true; }; "insightThresholds": { "alias": "insightThresholds"; "required": false; "isSignal": true; }; "showInsight": { "alias": "showInsight"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; }, { "selectedLevels": "selectedLevelsChange"; "selectedLevelsChangeRequest": "selectedLevelsChangeRequest"; }, never, never, true, never>;
+}
+
+export { SL_RATING_DEFAULTS, SlRating, SlRatingCaption, SlRatingDisplay, SlRatingIdFactory, SlRatingSummary, SlRatingSymbol, injectRatingDefaults, provideRating };
+export type { RatingCaptionContext, RatingDefaults, RatingDefaultsInput, RatingDisplayVariant, RatingLevelsReason, RatingSize, RatingStep, RatingSummaryVariant, RatingSymbolContext, RatingTone, RatingValueReason };
+//# sourceMappingURL=slotted-angular-rating.d.ts.map

package/types/slotted-angular-rating.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-rating.d.ts","sources":["../../rating/src/rating-defaults.ts","../../rating/src/rating.ts","../../rating/src/rating-display.ts","../../rating/src/rating-summary.ts"],"mappings":"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","names":[]}

package/types/slotted-angular-result-state.d.ts

@@ -0,0 +1,217 @@
+import * as i0 from '@angular/core';
+import { InjectionToken } from '@angular/core';
+
+/**
+ * What the region is reporting. Seven values rather than one component per
+ * semantic, which is what the guide's section 17 asks of `empty-state` and
+ * `error-state`.
+ *
+ * It is not a tone. Two pairs share one — `empty`, `no-results` and
+ * `not-found` are all secondary, `forbidden` and `offline` are both warning —
+ * so naming the axis `tone` would have made `forbidden` and `offline` one
+ * value.
+ */
+type ResultStateStatus = 'empty' | 'no-results' | 'not-found' | 'error' | 'forbidden' | 'offline' | 'success';
+/**
+ * Which scope the message applies to, which is the axis `alert` already
+ * speaks: a row inside a cell, a panel inside a card, the whole route. The
+ * geometry follows from the scope; a size axis would say the same message can
+ * be drawn large or small, which is not the choice a consumer is making.
+ */
+type ResultStateReach = 'inline' | 'section' | 'page';
+/** Whether the region reads centred or from the inline edge. */
+type ResultStateAlign = 'center' | 'start';
+/**
+ * The picture the family draws around the page's glyph: a framed tile, three
+ * layers leaning back, or a stack of cards, all in the neutral surface and
+ * border roles. `none` draws nothing of the family's own, and `inline` reach
+ * draws none of them.
+ */
+type ResultStateIllustration = 'none' | 'tile' | 'stack' | 'cards';
+/**
+ * Whether the text announces itself, and how loudly. The default is `polite`,
+ * where `alert`'s is `off`: WCAG 2.2's Understanding document for SC 4.1.3
+ * names this family's own text as its example of a status message, and a
+ * result state is by definition the outcome of an operation.
+ */
+type ResultStateLive = 'off' | 'polite' | 'assertive';
+interface ResultStateDefaults {
+    align: ResultStateAlign;
+    illustration: ResultStateIllustration;
+    live: ResultStateLive;
+    reach: ResultStateReach;
+    status: ResultStateStatus;
+}
+declare const RESULT_STATE_DEFAULTS: InjectionToken<ResultStateDefaults>;
+/**
+ * An application decides once how its empty and error regions are drawn, and
+ * whether they announce, rather than repeating the inputs on every table in a
+ * data-dense screen. A region that states any of them itself still wins: an
+ * explicit input is never overridden by the token.
+ */
+declare function provideResultStateDefaults(defaults: Partial<ResultStateDefaults>): {
+    provide: InjectionToken<ResultStateDefaults>;
+    useFactory: () => ResultStateDefaults;
+};
+/** What a result state renders as here, before it states anything of its own. */
+declare function injectResultStateDefaults(): ResultStateDefaults;
+
+/**
+ * The region that stands in for content that is not there, and says what to do
+ * next.
+ *
+ * The directive is written on the consumer's own element, and the element it
+ * belongs on is a `section`: named by its own title through `aria-labelledby`,
+ * a `section` is a `region` landmark a reader can jump to, and unnamed it is a
+ * plain grouping element that costs nothing. The APG's region landmark practice
+ * states that "a region landmark must have a label", which is why the attribute
+ * is written only once a title has said it exists.
+ *
+ * **The box is not the live region.** MDN's `alert` role reference states that
+ * the role "should only be used for text content, not interactive elements such
+ * as links or buttons", and this family has a row of buttons in it.
+ * `slResultStateContent` is what announces, and it holds the title and the
+ * description alone; the mark, the actions and the footer are its siblings.
+ *
+ * **It announces by default.** WCAG 2.2's Understanding document for SC 4.1.3
+ * names this family's own text as its example of a status message. `alert`
+ * defaults to silence because an alert may be a standing notice; a result is
+ * always the outcome of an operation.
+ */
+declare class SlResultState {
+    /** Defaults to the provider, then to `empty`. */
+    readonly status: i0.InputSignal<ResultStateStatus | undefined>;
+    /** Defaults to the provider, then to `section`. */
+    readonly reach: i0.InputSignal<ResultStateReach | undefined>;
+    /** Defaults to the provider, then to `center`. */
+    readonly align: i0.InputSignal<ResultStateAlign | undefined>;
+    /** Defaults to the provider, then to `polite`. */
+    readonly live: i0.InputSignal<ResultStateLive | undefined>;
+    /**
+     * The drawing made around the projected `slResultStateMedia`. Defaults to
+     * the provider, then to `none`. `tile` and `stack` frame a glyph and draw
+     * nothing without one; `cards` puts the glyph where a row's thumbnail would
+     * be and draws its two lines with or without it.
+     */
+    readonly illustration: i0.InputSignal<ResultStateIllustration | undefined>;
+    private readonly defaults;
+    private readonly host;
+    /** An explicit tab index the consumer wrote is never replaced by the family's. */
+    protected readonly writtenTabIndex: string | null;
+    /** The identifier the title writes, and the box is named by. */
+    readonly titleId: string;
+    /** The identifier the title actually carries, which is not always ours. */
+    private readonly labelId;
+    protected readonly resolvedStatus: i0.Signal<ResultStateStatus>;
+    protected readonly resolvedReach: i0.Signal<ResultStateReach>;
+    protected readonly resolvedAlign: i0.Signal<ResultStateAlign>;
+    protected readonly resolvedIllustration: i0.Signal<ResultStateIllustration>;
+    readonly resolvedLive: i0.Signal<ResultStateLive>;
+    /**
+     * A `section` with an `aria-labelledby` pointing at nothing has no accessible
+     * name and is not a landmark, so the attribute is written only once a title
+     * has said it exists.
+     */
+    protected readonly labelledBy: i0.Signal<string | null>;
+    /**
+     * Called by `slResultStateTitle`, which is the part that names the box. It
+     * carries the identifier rather than a boolean, because a page that wrote its
+     * own `id` on the title keeps it, and the box has to point at the one that is
+     * actually in the DOM.
+     */
+    registerTitle(id: string | null): void;
+    /**
+     * Sends the keyboard to the message. The family never does this by itself:
+     * moving focus unprompted is a change of context nobody asked for, and the
+     * moment an application wants it — a filter has just emptied a table — is one
+     * only the application knows.
+     *
+     * It is the reach a template has and React does not: JSX re-renders an input,
+     * and an Angular template calls a method on the instance `exportAs` gives it.
+     */
+    focus(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SlResultState, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SlResultState, "[slResultState]", ["slResultState"], { "status": { "alias": "status"; "required": false; "isSignal": true; }; "reach": { "alias": "reach"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "live": { "alias": "live"; "required": false; "isSignal": true; }; "illustration": { "alias": "illustration"; "required": false; "isSignal": true; }; }, {}, never, ["[slResultStateMedia]", "*"], true, never>;
+}
+
+/**
+ * The message itself, and the only part that announces.
+ *
+ * It is written explicitly rather than wrapped around the region's projected
+ * content, because a box that guessed which of its children were text would be
+ * guessing about the one thing a reader hears. None of the seven surveyed
+ * implementations writes a live role of any kind, while WCAG 2.2's
+ * Understanding document for SC 4.1.3 names "No results returned" as its own
+ * example of a status message.
+ */
+declare class SlResultStateContent {
+    private readonly region;
+    protected readonly role: i0.Signal<string | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SlResultStateContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SlResultStateContent, "[slResultStateContent]", ["slResultStateContent"], {}, {}, never, never, true, never>;
+}
+/**
+ * The message's name, and the box's.
+ *
+ * The element is the consumer's: a heading puts the region in the document
+ * outline, which is right for a full-page 404 and wrong for the empty state of
+ * one card in a grid of twelve, and only the page knows which. Writing
+ * `<h2 slResultStateTitle>` is how a page that wants one says so, and Angular
+ * needs no `render` prop to allow it.
+ *
+ * Atlassian's `headingLevel`, one to six, is the field's answer. A numeric
+ * input invites a skipped level, which the guide's section 10 forbids.
+ */
+declare class SlResultStateTitle {
+    protected readonly region: SlResultState;
+    /**
+     * The family's identifier, unless the page wrote one of its own — a skip
+     * target, an anchor. Reading it before the host binding writes over it is
+     * what keeps the consumer's attribute alive, and telling the box which
+     * identifier won is what keeps `aria-labelledby` pointing at an element that
+     * exists.
+     */
+    readonly id: string;
+    constructor();
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SlResultStateTitle, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SlResultStateTitle, "[slResultStateTitle]", ["slResultStateTitle"], {}, {}, never, ["*"], true, never>;
+}
+/** The message. Written on the consumer's own `p`, which is what prose is. */
+declare class SlResultStateDescription {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SlResultStateDescription, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SlResultStateDescription, "[slResultStateDescription]", ["slResultStateDescription"], {}, {}, never, never, true, never>;
+}
+/**
+ * The controls that get the reader out of the situation, outside the region
+ * that announces. What goes in is the consumer's own buttons, because `button`
+ * already owns what a button is — including `loading`, which is what a retry in
+ * flight is.
+ */
+declare class SlResultStateActions {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SlResultStateActions, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SlResultStateActions, "[slResultStateActions]", ["slResultStateActions"], {}, {}, never, never, true, never>;
+}
+/**
+ * The line under the actions: the documentation link that is not a call to
+ * action. Polaris calls it `footerContent` and Atlassian a `tertiaryAction`,
+ * and both are right that it is neither of the buttons above it.
+ */
+declare class SlResultStateFooter {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SlResultStateFooter, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SlResultStateFooter, "[slResultStateFooter]", ["slResultStateFooter"], {}, {}, never, never, true, never>;
+}
+/**
+ * Artwork the page supplies instead of the status's own mark. It is projected
+ * into the box the family draws, so it keeps the height the reach gives it —
+ * which is what stops an illustration that has not loaded from moving the
+ * title and the actions when it arrives.
+ */
+declare class SlResultStateMedia {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SlResultStateMedia, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SlResultStateMedia, "[slResultStateMedia]", ["slResultStateMedia"], {}, {}, never, never, true, never>;
+}
+
+export { RESULT_STATE_DEFAULTS, SlResultState, SlResultStateActions, SlResultStateContent, SlResultStateDescription, SlResultStateFooter, SlResultStateMedia, SlResultStateTitle, injectResultStateDefaults, provideResultStateDefaults };
+export type { ResultStateAlign, ResultStateDefaults, ResultStateIllustration, ResultStateLive, ResultStateReach, ResultStateStatus };
+//# sourceMappingURL=slotted-angular-result-state.d.ts.map

package/types/slotted-angular-result-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-result-state.d.ts","sources":["../../result-state/src/result-state-defaults.ts","../../result-state/src/result-state.ts","../../result-state/src/result-state-parts.ts"],"mappings":";;;AAEA;;;;;;;;;AASG;KACS,iBAAiB;AAG7B;;;;;AAKG;AACG,KAAM,gBAAgB;AAE5B;KACY,gBAAgB;AAE5B;;;;;AAKG;AACG,KAAM,uBAAuB;AAEnC;;;;;AAKG;AACG,KAAM,eAAe;UAEV,mBAAmB;WAC3B,gBAAgB;kBACT,uBAAuB;UAC/B,eAAe;WACd,gBAAgB;YACf,iBAAiB;AAC1B;AAUD,cAAa,qBAAqB,EAAA,cAAA,CAAA,mBAAA;AAKlC;;;;;AAKG;AACH,iBAAgB,0BAA0B,WAAW,OAAO,CAAC,mBAAmB;;sBAG5D,mBAAmB;AAQtC;AAED;AACA,iBAAgB,yBAAyB,IAAI,mBAAmB;;ACtDhE;;;;;;;;;;;;;;;;;;;;;AAqBG;AACH,cA2Ba,aAAa;;qBAETA,EAAA,CAAA,WAAA,CAAA,iBAAA;;oBAEDA,EAAA,CAAA,WAAA,CAAA,gBAAA;;oBAEAA,EAAA,CAAA,WAAA,CAAA,gBAAA;;mBAEDA,EAAA,CAAA,WAAA,CAAA,eAAA;AACb;;;;;AAKG;2BACkBA,EAAA,CAAA,WAAA,CAAA,uBAAA;AACrB;AACA;;AAEA;;;;AAQA;AAEA,uCAAiCA,EAAA,CAAA,MAAA,CAAA,iBAAA;AACjC,sCAAgCA,EAAA,CAAA,MAAA,CAAA,gBAAA;AAChC,sCAAgCA,EAAA,CAAA,MAAA,CAAA,gBAAA;AAChC,6CAAuCA,EAAA,CAAA,MAAA,CAAA,uBAAA;2BAGlBA,EAAA,CAAA,MAAA,CAAA,eAAA;AAErB;;;;AAIG;AACH,mCAA6BA,EAAA,CAAA,MAAA;AAE7B;;;;;AAKG;AACH;AAIA;;;;;;;;AAQG;;yCA9DQ,aAAa;2CAAb,aAAa;AAkEzB;;ACxHD;;;;;;;;;AASG;AACH,cASa,oBAAoB;AAC/B;AAEA,6BAAuBA,EAAA,CAAA,MAAA;yCAHZ,oBAAoB;2CAApB,oBAAoB;AAIhC;AAED;;;;;;;;;;;AAWG;AACH,cAYa,kBAAkB;AAC7B,+BAAyB,aAAA;AAEzB;;;;;;AAMG;;;;yCATQ,kBAAkB;2CAAlB,kBAAkB;AAmB9B;AAED;AACA,cAMa,wBAAwB;yCAAxB,wBAAwB;2CAAxB,wBAAwB;AAAG;AAExC;;;;;AAKG;AACH,cAMa,oBAAoB;yCAApB,oBAAoB;2CAApB,oBAAoB;AAAG;AAEpC;;;;AAIG;AACH,cAMa,mBAAmB;yCAAnB,mBAAmB;2CAAnB,mBAAmB;AAAG;AAEnC;;;;;AAKG;AACH,cAKa,kBAAkB;yCAAlB,kBAAkB;2CAAlB,kBAAkB;AAAG;;","names":["_angular_core"]}