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

package/types/slotted-angular-progress-indicator.d.ts

@@ -0,0 +1,312 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
+import * as _slotted_angular_progress_indicator from '@slotted/angular/progress-indicator';
+import { ProgressGeometry } from '@slotted/core/progress';
+
+type ProgressSize = 'sm' | 'md' | 'lg';
+type ProgressTone = 'accent' | 'secondary' | 'success' | 'warning' | 'danger';
+type ProgressPlacement = 'inline' | 'page' | 'edge-start' | 'edge-end';
+/** The geometry a component draws. Written to `data-shape`, never chosen. */
+type ProgressShape = 'linear' | 'circular' | 'morph';
+
+/**
+ * Everything a bar, a ring and a loader answer the same way: the defaults, the
+ * timing, the geometry, the text and the identity in the DOM.
+ *
+ * It is a base class rather than three copies because the two answers easiest
+ * to get subtly wrong are the two no test can see from outside — which
+ * `aria-value*` attributes are absent while a wait is indeterminate, and
+ * whether the painted percentage came from the same call as the announced one.
+ * The host bindings stay with each component, because `host` metadata belongs
+ * to a decorator and a shape writes different attributes; the arithmetic
+ * behind them is here.
+ *
+ * `@Directive()` with no selector is what makes the inputs and the output
+ * inheritable: `input()` and `output()` are compiled rather than called, and
+ * the compiler refuses them in a class it has not been told is a directive.
+ */
+declare abstract class SlProgressIndicatorBase {
+    /** The geometry the component draws. Written by the component, never chosen. */
+    protected abstract readonly shape: ProgressShape;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly delay: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    readonly minDuration: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly hideLabel: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    readonly decorative: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly size: _angular_core.InputSignal<ProgressSize | undefined>;
+    readonly tone: _angular_core.InputSignal<ProgressTone | undefined>;
+    /**
+     * The moment the indicator actually leaves the page, which is later than
+     * `loading` turning false whenever `minDuration` is holding it. An
+     * application unmounting on the input alone would take the indicator down
+     * mid-hold.
+     */
+    readonly withdraw: _angular_core.OutputEmitterRef<void>;
+    protected readonly defaults: _slotted_angular_progress_indicator.ProgressIndicatorDefaults;
+    /**
+     * A name the consumer wrote on their own element is read once and kept, so
+     * the family never writes over it — the escape hatch `skeleton` established
+     * with the same token.
+     */
+    protected readonly ownAriaLabel: string | null;
+    protected readonly ownAriaLabelledBy: string | null;
+    protected readonly ownAriaHidden: string | null;
+    /**
+     * A stable id, and not `crypto.randomUUID()`: a server render and the
+     * hydration that follows it have to produce the same string, and a counter
+     * per document does while a random value does not.
+     */
+    protected readonly labelId: string;
+    /** Whether anything is painted at all: `delay` may still be running. */
+    readonly painted: _angular_core.WritableSignal<boolean>;
+    readonly sizeValue: _angular_core.Signal<ProgressSize>;
+    readonly toneValue: _angular_core.Signal<ProgressTone>;
+    readonly labelText: _angular_core.Signal<string | undefined>;
+    readonly labelHidden: _angular_core.Signal<boolean>;
+    /** What the two measured components state, and the loader does not. */
+    protected measure(): {
+        value: number | null | undefined;
+        min: number | undefined;
+        max: number | undefined;
+        buffer: number | null | undefined;
+        format: Intl.NumberFormatOptions | undefined;
+        showValue: boolean | undefined;
+        valueText: string | undefined;
+        locale: string | undefined;
+    } | null;
+    /** Overridden by the bar, whose page placement has nowhere to put a name. */
+    protected hidesLabelByPlacement(): boolean;
+    readonly geometry: _angular_core.Signal<ProgressGeometry>;
+    readonly valueTextValue: _angular_core.Signal<string | undefined>;
+    readonly showValueValue: _angular_core.Signal<boolean>;
+    protected readonly named: _angular_core.Signal<boolean>;
+    protected readonly roleAttribute: _angular_core.Signal<"progressbar" | null>;
+    protected readonly labelledByAttribute: _angular_core.Signal<string | null>;
+    /**
+     * `decorative` is one switch and not two: it takes the role away as well as
+     * hiding the box, because an indicator a reader can reach and that announces
+     * nothing is worse than either half. A consumer's own `aria-hidden` is kept
+     * rather than overwritten.
+     */
+    protected readonly hiddenFromTree: _angular_core.Signal<string | null>;
+    /**
+     * The range is written out even where it equals the ARIA default, so a reader
+     * is never told a number that depends on one. `aria-valuenow` is the one
+     * attribute that is absent rather than defaulted: ARIA 1.3 asks an author to
+     * omit it while the value is indeterminate, and the omission is what says
+     * "in progress, and nobody knows how far".
+     */
+    protected readonly valueMinAttribute: _angular_core.Signal<number | null>;
+    protected readonly valueMaxAttribute: _angular_core.Signal<number | null>;
+    protected readonly valueNowAttribute: _angular_core.Signal<number | null>;
+    protected readonly valueTextAttribute: _angular_core.Signal<string | null>;
+    protected readonly indeterminateAttribute: _angular_core.Signal<"" | null>;
+    protected readonly completeAttribute: _angular_core.Signal<"" | null>;
+    protected readonly percentStyle: _angular_core.Signal<string>;
+    protected readonly bufferStyle: _angular_core.Signal<string | null>;
+    protected readonly bufferedAttribute: _angular_core.Signal<"" | null>;
+    private machine;
+    private timer;
+    constructor();
+    /**
+     * One step of the shared machine, plus at most one timer. The rule lives in
+     * `@slotted/core/loading` rather than here so React and Angular cannot
+     * disagree about when an indicator appears — a difference no test that looked
+     * at either binding alone would report.
+     */
+    private settle;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlProgressIndicatorBase, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlProgressIndicatorBase, never, never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "delay": { "alias": "delay"; "required": false; "isSignal": true; }; "minDuration": { "alias": "minDuration"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, { "withdraw": "withdraw"; }, never, never, true, never>;
+}
+
+/**
+ * The wait a shape keeps, rather than the wait a ring reports.
+ *
+ * It is M3 Expressive's loading indicator, which Google recommends *instead of*
+ * an indeterminate circular indicator for a wait under five seconds, and which
+ * no other design system and no headless library surveyed ships at all. A
+ * rounded shape morphs through a sequence — circle, clover, flower, trefoil,
+ * oval — while it turns, at two periods that do not divide into each other, so
+ * the sequence never shows the same shape in the same orientation twice.
+ *
+ * It measures nothing on purpose. A loader with a value would be a shape whose
+ * progress nobody could read off a morphing outline, and the family already
+ * has two shapes that report a number.
+ *
+ * `contained` draws M3's fully rounded container behind the shape, at M3's own
+ * 38:48 ratio. It is the form to reach for on a photograph or a coloured
+ * surface, where a bare shape has no ground to be seen against.
+ *
+ * Content after the label is projected, so a loader can stand in a sentence
+ * the consumer wrote rather than only beside a string it was given.
+ */
+declare class SlLoader extends SlProgressIndicatorBase {
+    protected readonly shape: ProgressShape;
+    /** M3's fully rounded container behind the morphing shape. */
+    readonly contained: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly labelUi: _angular_core.Signal<"visually-hidden" | null>;
+    protected readonly containedAttribute: _angular_core.Signal<"" | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlLoader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlLoader, "[slLoader]", ["slLoader"], { "contained": { "alias": "contained"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * The linear recipe: a quantity along a track, or a wait travelling it.
+ *
+ * The shape is M3's from 2024 onward — a fully rounded indicator, a gap of one
+ * thickness before the track it has not reached, and a stop indicator marking
+ * where the bar is going. The gap and the dot are what make a bar at four per
+ * cent read as four per cent of something rather than as a stray mark, and no
+ * other surveyed implementation draws either.
+ *
+ * `placement="page"` is the whole of what the deleted `loading-bar` family
+ * was: the same bar pinned to the top edge of the viewport, with no corner to
+ * round and a transparent track, because a permanent grey band across the top
+ * of a page reads as a rule under the header rather than as a wait.
+ * `edge-start` and `edge-end` are the same bar on an edge of the nearest
+ * positioned box, which is the frame `app-shell` and `page-header` render as
+ * their `progress` part.
+ *
+ * With `wave` the indicator is an `svg` over the whole track and one stroked
+ * path inside it; the stylesheet shows a window of it with a dash, so the bar
+ * ends in its own crest with a round cap. The path carries the `svg:` prefix
+ * for the reason the ring's shapes do: inside a control-flow block the parser
+ * decides the namespace, and an unprefixed `path` would be an unknown HTML
+ * element that draws nothing.
+ *
+ * The selector is a bare attribute, so the element stays the consumer's: a bar
+ * belongs in whatever already holds it — a table cell, a card's footer, a
+ * `header` — and wrapping it in a second element would change their layout to
+ * carry an attribute.
+ */
+declare class SlProgressBar extends SlProgressIndicatorBase {
+    protected readonly shape: ProgressShape;
+    readonly value: _angular_core.InputSignalWithTransform<number | null | undefined, unknown>;
+    readonly min: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    readonly max: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    /** A second, further quantity: received but not yet processed. */
+    readonly buffer: _angular_core.InputSignalWithTransform<number | null | undefined, unknown>;
+    readonly showValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly valueText: _angular_core.InputSignal<string | undefined>;
+    readonly format: _angular_core.InputSignal<Intl.NumberFormatOptions | undefined>;
+    readonly locale: _angular_core.InputSignal<string | undefined>;
+    readonly wave: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly placement: _angular_core.InputSignal<ProgressPlacement>;
+    protected readonly labelUi: _angular_core.Signal<"visually-hidden" | null>;
+    protected readonly placementAttribute: _angular_core.Signal<ProgressPlacement | null>;
+    protected readonly waveAttribute: _angular_core.Signal<"" | null>;
+    /**
+     * M3's sine from `@slotted/core/progress`, in a user space where one unit
+     * is one thickness, and the tighter wave M3 draws while the value is
+     * unknown. The viewBox and `pathLength` both state the path's reach, which
+     * is what makes a dash of one unit one thickness of travel at any amplitude.
+     */
+    protected readonly waveReach = 1200;
+    protected readonly waveViewBox = "0 -1.25 1200 2.5";
+    protected readonly wavePath: _angular_core.Signal<string>;
+    /**
+     * A bar on an edge has no room for a visible name and still needs one, so the
+     * placement decides it — and a consumer who states `hideLabel` outright still
+     * wins, which is the rule the whole library follows.
+     */
+    protected hidesLabelByPlacement(): boolean;
+    protected measure(): {
+        value: number | null | undefined;
+        min: number | undefined;
+        max: number | undefined;
+        buffer: number | null | undefined;
+        format: Intl.NumberFormatOptions | undefined;
+        showValue: boolean;
+        valueText: string | undefined;
+        locale: string | undefined;
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlProgressBar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlProgressBar, "[slProgressBar]", ["slProgressBar"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "buffer": { "alias": "buffer"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "valueText": { "alias": "valueText"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "wave": { "alias": "wave"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * The circular recipe, and with no value the spinner every surveyed library
+ * ships under that name.
+ *
+ * Two concentric shapes in one `48 48` box, each carrying `pathLength="100"`
+ * so a dash length *is* the percentage and the stylesheet needs no arithmetic
+ * of its own. The stroke is stated in the viewBox's own units, which makes it
+ * one eighth of the diameter at every size — the ratio `button` derived for its
+ * own loading ring, so the ring in a button and this circle are the same
+ * object.
+ *
+ * The number sits beside the ring rather than inside it: the largest ring this
+ * family draws is 38 pixels across with a 4.75-pixel stroke, which leaves 28
+ * pixels of hole, and a percentage centred in it would be four-pixel type.
+ *
+ * With `wave` the indicator is M3's wavy ring from `@slotted/core/progress`
+ * and the track stays a circle, which is what `CircularWavyProgressModifiers`
+ * draws: only the active indicator morphs.
+ *
+ * The shapes carry the `svg:` prefix because a template's namespace is decided
+ * by the parser rather than by the parent element: inside a control-flow block
+ * an unprefixed `circle` is an unknown HTML element, and an unknown HTML
+ * element draws nothing at all.
+ */
+declare class SlProgressCircle extends SlProgressIndicatorBase {
+    protected readonly shape: ProgressShape;
+    protected readonly wavePath = "M45.6 24C45.6 26.83 41.92 28.82 41 31.04C40.08 33.27 41.27 37.27 39.27 39.27C37.27 41.27 33.27 40.08 31.04 41C28.82 41.92 26.83 45.6 24 45.6C21.17 45.6 19.18 41.92 16.96 41C14.73 40.08 10.73 41.27 8.73 39.27C6.73 37.27 7.92 33.27 7 31.04C6.08 28.82 2.4 26.83 2.4 24C2.4 21.17 6.08 19.18 7 16.96C7.92 14.73 6.73 10.73 8.73 8.73C10.73 6.73 14.73 7.92 16.96 7C19.18 6.08 21.17 2.4 24 2.4C26.83 2.4 28.82 6.08 31.04 7C33.27 7.92 37.27 6.73 39.27 8.73C41.27 10.73 40.08 14.73 41 16.96C41.92 19.18 45.6 21.17 45.6 24Z";
+    readonly value: _angular_core.InputSignalWithTransform<number | null | undefined, unknown>;
+    readonly min: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    readonly max: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    readonly showValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly valueText: _angular_core.InputSignal<string | undefined>;
+    readonly format: _angular_core.InputSignal<Intl.NumberFormatOptions | undefined>;
+    readonly locale: _angular_core.InputSignal<string | undefined>;
+    readonly wave: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly labelUi: _angular_core.Signal<"visually-hidden" | null>;
+    protected readonly waveAttribute: _angular_core.Signal<"" | null>;
+    protected measure(): {
+        value: number | null | undefined;
+        min: number | undefined;
+        max: number | undefined;
+        buffer: null;
+        format: Intl.NumberFormatOptions | undefined;
+        showValue: boolean;
+        valueText: string | undefined;
+        locale: string | undefined;
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlProgressCircle, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlProgressCircle, "[slProgressCircle]", ["slProgressCircle"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "valueText": { "alias": "valueText"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "wave": { "alias": "wave"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * What every indicator in an application looks like, and how a wait is timed,
+ * before any of them states anything of its own.
+ *
+ * The two durations are here rather than on an indicator because the policy is
+ * an application's: a team decides once that a wait under two hundred
+ * milliseconds is not worth reporting, and every bar inherits it. `locale` is
+ * here for the same reason — the digits of a percentage belong to the
+ * application's language, not to one upload.
+ */
+interface ProgressIndicatorDefaults {
+    delay?: number;
+    label?: string;
+    locale?: string;
+    minDuration?: number;
+    size?: ProgressSize;
+    tone?: ProgressTone;
+}
+declare const PROGRESS_INDICATOR_DEFAULTS_TOKEN: InjectionToken<ProgressIndicatorDefaults>;
+/**
+ * An application decides once how its indicators are sized and toned, how long
+ * a wait has to last before one appears, how long one is held once it has, and
+ * which language writes the digits. An indicator that states any of those still
+ * wins: an explicit input is never overridden by the token.
+ */
+declare function provideProgressIndicatorDefaults(defaults: ProgressIndicatorDefaults): {
+    provide: InjectionToken<ProgressIndicatorDefaults>;
+    useValue: ProgressIndicatorDefaults;
+};
+declare function injectProgressIndicatorDefaults(): ProgressIndicatorDefaults;
+
+export { PROGRESS_INDICATOR_DEFAULTS_TOKEN, SlLoader, SlProgressBar, SlProgressCircle, injectProgressIndicatorDefaults, provideProgressIndicatorDefaults };
+export type { ProgressIndicatorDefaults, ProgressPlacement, ProgressShape, ProgressSize, ProgressTone };
+//# sourceMappingURL=slotted-angular-progress-indicator.d.ts.map

package/types/slotted-angular-progress-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-progress-indicator.d.ts","sources":["../../progress-indicator/src/progress-indicator.constants.ts","../../progress-indicator/src/progress-indicator-base.ts","../../progress-indicator/src/loader.ts","../../progress-indicator/src/progress-bar.ts","../../progress-indicator/src/progress-circle.ts","../../progress-indicator/src/progress-indicator-defaults.ts"],"mappings":";;;;;AAAM,KAAM,YAAY;AAClB,KAAM,YAAY;AAClB,KAAM,iBAAiB;AAC7B;AACM,KAAM,aAAa;;AC2BzB;;;;;;;;;;;;;;;AAeG;AACH,uBACsB,uBAAuB;;uCAER,aAAa;sBAEhC,aAAA,CAAA,wBAAA;oBACF,aAAA,CAAA,wBAAA;0BACM,aAAA,CAAA,wBAAA;oBAGN,aAAA,CAAA,WAAA;wBACI,aAAA,CAAA,wBAAA;yBAGC,aAAA,CAAA,wBAAA;mBACN,aAAA,CAAA,WAAA,CAAA,YAAA;mBACA,aAAA,CAAA,WAAA,CAAA,YAAA;AAEb;;;;;AAKG;uBACc,aAAA,CAAA,gBAAA;AAEjB,iCAA2B,mCAAA,CAAA,yBAAA;AAE3B;;;;AAIG;AACH;AAGA;AAGA;AAIA;;;;AAIG;AACH;;sBAGgB,aAAA,CAAA,cAAA;wBAEE,aAAA,CAAA,MAAA,CAAA,YAAA;wBACA,aAAA,CAAA,MAAA,CAAA,YAAA;wBACA,aAAA,CAAA,MAAA;0BACE,aAAA,CAAA,MAAA;;;AAIlB;AACA;AACA;AACA;AACA,gBAAQ,IAAI,CAAC,mBAAmB;AAChC;AACA;AACA;AACD;;;uBASgB,aAAA,CAAA,MAAA,CAAA,gBAAA;6BAUM,aAAA,CAAA,MAAA;6BAWA,aAAA,CAAA,MAAA;AAOvB,8BAAwB,aAAA,CAAA,MAAA;AAIxB,sCAAgC,aAAA,CAAA,MAAA;AAChC,4CAAsC,aAAA,CAAA,MAAA;AAGtC;;;;;AAKG;AACH,uCAAiC,aAAA,CAAA,MAAA;AAGjC;;;;;;AAMG;AACH,0CAAoC,aAAA,CAAA,MAAA;AAGpC,0CAAoC,aAAA,CAAA,MAAA;AAGpC,0CAAoC,aAAA,CAAA,MAAA;AAGpC,2CAAqC,aAAA,CAAA,MAAA;AAGrC,+CAAyC,aAAA,CAAA,MAAA;AAGzC,0CAAoC,aAAA,CAAA,MAAA;AACpC,qCAA+B,aAAA,CAAA,MAAA;AAC/B,oCAA8B,aAAA,CAAA,MAAA;AAI9B,0CAAoC,aAAA,CAAA,MAAA;;;;AAwCpC;;;;;AAKG;AACH;oDAnMoB,uBAAuB;sDAAvB,uBAAuB;AA+M5C;;ACnPD;;;;;;;;;;;;;;;;;;;;AAoBG;AACH,cA6Ba,QAAS,SAAQ,uBAAuB;8BAChB,aAAa;;wBAG9B,aAAA,CAAA,wBAAA;AAElB,gCAA0B,aAAA,CAAA,MAAA;AAC1B,2CAAqC,aAAA,CAAA,MAAA;oDAP1B,QAAQ;sDAAR,QAAQ;AAQpB;;AC7CD;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BG;AACH,cAsDa,aAAc,SAAQ,uBAAuB;8BACrB,aAAa;oBAElC,aAAA,CAAA,wBAAA;kBAGF,aAAA,CAAA,wBAAA;kBACA,aAAA,CAAA,wBAAA;;qBAEG,aAAA,CAAA,wBAAA;wBAGG,aAAA,CAAA,wBAAA;wBACA,aAAA,CAAA,WAAA;qBACH,aAAA,CAAA,WAAA,CAAA,IAAA,CAAA,mBAAA;qBACA,aAAA,CAAA,WAAA;mBACF,aAAA,CAAA,wBAAA;wBACK,aAAA,CAAA,WAAA,CAAA,iBAAA;AAElB,gCAA0B,aAAA,CAAA,MAAA;AAC1B,2CAAqC,aAAA,CAAA,MAAA,CAAA,iBAAA;AAGrC,sCAAgC,aAAA,CAAA,MAAA;AAEhC;;;;;AAKG;AACH;AACA;AACA,iCAA2B,aAAA,CAAA,MAAA;AAI3B;;;;AAIG;AACgB;;;;;;;;;;;oDA1CR,aAAa;sDAAb,aAAa;AA0DzB;;ACrJD;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACH,cA4Ca,gBAAiB,SAAQ,uBAAuB;8BACxB,aAAa;AAChD;oBAEc,aAAA,CAAA,wBAAA;kBAGF,aAAA,CAAA,wBAAA;kBACA,aAAA,CAAA,wBAAA;wBACM,aAAA,CAAA,wBAAA;wBACA,aAAA,CAAA,WAAA;qBACH,aAAA,CAAA,WAAA,CAAA,IAAA,CAAA,mBAAA;qBACA,aAAA,CAAA,WAAA;mBACF,aAAA,CAAA,wBAAA;AAEb,gCAA0B,aAAA,CAAA,MAAA;AAC1B,sCAAgC,aAAA,CAAA,MAAA;;;;;;;;;;;oDAhBrB,gBAAgB;sDAAhB,gBAAgB;AA8B5B;;AC/GD;;;;;;;;;AASG;UACc,yBAAyB;;;;;WAKjC,YAAY;WACZ,YAAY;AACpB;AAED,cAAa,iCAAiC,EAAA,cAAA,CAAA,yBAAA;AAK9C;;;;;AAKG;AACH,iBAAgB,gCAAgC,WAAW,yBAAyB;;;AAEnF;AAED,iBAAgB,+BAA+B,IAAI,yBAAyB;;","names":[]}

package/types/slotted-angular-prompt-composer.d.ts

@@ -0,0 +1,242 @@
+import * as _slotted_core_i18n from '@slotted/core/i18n';
+import { PartialMessages, PromptComposerMessages } from '@slotted/core/i18n';
+import * as _slotted_angular_prompt_composer from '@slotted/angular/prompt-composer';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Signal, OnInit } from '@angular/core';
+import { ChangeRequest } from '@slotted/core/state';
+import { UploadFile } from '@slotted/core/upload';
+import { ControlValueAccessor } from '@angular/forms';
+import { SlField } from '@slotted/angular/field';
+
+type PromptComposerSize = 'sm' | 'md' | 'lg';
+/**
+ * `raised` is the chat composer, a surface lifted off the page; `outline` and
+ * `subtle` are a composer inside a form, with a one-line control's geometry.
+ */
+type PromptComposerVariant = 'raised' | 'outline' | 'subtle';
+/** Whether Enter sends, or only Mod+Enter does. Shift+Enter always breaks a line. */
+type PromptComposerSubmitOn = 'enter' | 'mod-enter';
+/** Where the request stands. The application owns it. */
+type PromptComposerStatus = 'ready' | 'submitted' | 'streaming' | 'error';
+type PromptComposerSubmitReason = 'keyboard' | 'pointer';
+/** Files from the attach button, a paste or a drop, after the selection rules. */
+interface PromptComposerAttachEvent {
+    files: File[];
+    reason: 'pointer' | 'paste' | 'drop';
+    rejected: UploadFile[];
+    source: Event;
+}
+interface PromptComposerStopEvent {
+    reason: PromptComposerSubmitReason;
+    source: Event;
+}
+interface PromptComposerDefaults {
+    size: PromptComposerSize;
+    submitOn: PromptComposerSubmitOn;
+    variant: PromptComposerVariant;
+}
+declare const PROMPT_COMPOSER_DEFAULTS: InjectionToken<PromptComposerDefaults>;
+/**
+ * An application decides once how its composers look and which key sends. A
+ * composer that states any of them itself still wins. What the buttons say
+ * comes from the language in force (`provideSlotted`).
+ */
+declare function providePromptComposerDefaults(defaults: Partial<PromptComposerDefaults>): {
+    provide: InjectionToken<PromptComposerDefaults>;
+    useFactory: () => PromptComposerDefaults;
+};
+declare function injectPromptComposerDefaults(): PromptComposerDefaults;
+/**
+ * What the composer needs of the textarea inside it. An abstract class rather
+ * than an import, so the two directives depend on each other without a cycle.
+ */
+declare abstract class SlPromptComposerControl {
+    /** What the element shows. */
+    abstract readonly current: Signal<string>;
+    abstract readonly resolvedDisabled: Signal<boolean | undefined>;
+    abstract readonly resolvedReadOnly: Signal<boolean | undefined>;
+    abstract readonly resolvedInvalid: Signal<boolean | undefined>;
+    /** Empties the value after an accepted send, with reason `submit`. */
+    abstract clearAfterSubmit(source: Event): void;
+    abstract focus(): void;
+}
+
+/**
+ * A message being written: the consumer's own `form`, around a textarea, a
+ * band above for what the message carries and a band below for what it is
+ * sent with.
+ *
+ * The value is the textarea's, so a reactive form binds there; the status is
+ * the application's; the attachments are the application's too — the
+ * composer hands over the files after the selection rules `upload` applies,
+ * and draws nothing of them.
+ */
+declare class SlPromptComposer {
+    readonly size: _angular_core.InputSignal<PromptComposerSize | undefined>;
+    readonly variant: _angular_core.InputSignal<PromptComposerVariant | undefined>;
+    /** Where the request stands. The application owns it. */
+    readonly status: _angular_core.InputSignal<PromptComposerStatus>;
+    readonly submitOn: _angular_core.InputSignal<PromptComposerSubmitOn | undefined>;
+    /** Whether the send is available. Defaults to "the value has something besides white space". */
+    readonly canSubmit: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /** The file types the attach button, a paste and a drop accept. */
+    readonly accept: _angular_core.InputSignal<string | undefined>;
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly maxSize: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    readonly maxFiles: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * names of the attach and submit buttons for each status (`send`, `sending`,
+     * `stop`, `retry`), and the `sending` and `stopped` announcements.
+     */
+    readonly messages: _angular_core.InputSignal<PartialMessages<PromptComposerMessages> | undefined>;
+    /** Before the message is sent; `cancel()` keeps the value where it is. */
+    readonly valueSubmit: _angular_core.OutputEmitterRef<ChangeRequest<string>>;
+    /** The stop button, while the status is `streaming`. */
+    readonly stop: _angular_core.OutputEmitterRef<PromptComposerStopEvent>;
+    /** Files from the attach button, a paste or a drop, after the selection rules. */
+    readonly attach: _angular_core.OutputEmitterRef<PromptComposerAttachEvent>;
+    readonly defaults: _slotted_angular_prompt_composer.PromptComposerDefaults;
+    /** The family's words in the language in force, with this composer's `messages` laid over them. */
+    readonly t: _slotted_core_i18n.FamilyTranslator<PromptComposerMessages>;
+    private readonly field;
+    private readonly element;
+    readonly control: _angular_core.Signal<SlPromptComposerControl | undefined>;
+    protected readonly dropTarget: _angular_core.WritableSignal<boolean>;
+    readonly resolvedSize: _angular_core.Signal<PromptComposerSize>;
+    readonly resolvedVariant: _angular_core.Signal<PromptComposerVariant>;
+    readonly resolvedSubmitOn: _angular_core.Signal<PromptComposerSubmitOn>;
+    readonly busy: _angular_core.Signal<boolean>;
+    readonly resolvedCanSubmit: _angular_core.Signal<boolean>;
+    readonly off: _angular_core.Signal<boolean>;
+    constructor();
+    private announce;
+    /** Sends what the textarea holds, unless the send is unavailable or refused. */
+    submitWith(reason: PromptComposerSubmitReason, source: Event): void;
+    stopWith(reason: PromptComposerSubmitReason, source: Event): void;
+    attachFiles(files: readonly File[], reason: PromptComposerAttachEvent['reason'], source: Event): void;
+    protected onSubmit(event: SubmitEvent): void;
+    /** A press on the frame's padding or a band's empty space puts the caret in the value. */
+    protected onMouseDown(event: MouseEvent): void;
+    protected onDragOver(event: DragEvent): void;
+    protected onDragLeave(event: DragEvent): void;
+    protected onDrop(event: DragEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlPromptComposer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlPromptComposer, "form[slPromptComposer]", ["slPromptComposer"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "submitOn": { "alias": "submitOn"; "required": false; "isSignal": true; }; "canSubmit": { "alias": "canSubmit"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; }, { "valueSubmit": "valueSubmit"; "stop": "stop"; "attach": "attach"; }, ["control"], ["*"], true, never>;
+}
+
+/**
+ * The value. Enter sends unless the composer's `submitOn` is `mod-enter`;
+ * Mod+Enter always sends; Shift+Enter is the platform's line break; nothing is
+ * sent while an input method is composing, because there Enter confirms the
+ * composition. Files pasted with or without text go to the composer's
+ * `attach`.
+ *
+ * The element owns the characters, as in `text-field`: a form's `writeValue`
+ * and a `[value]` binding write the element, and the directive keeps a mirror
+ * for the send and the count.
+ */
+declare class SlPromptComposerInput implements ControlValueAccessor, OnInit, SlPromptComposerControl {
+    /** Present means the consumer owns the value. */
+    readonly value: _angular_core.InputSignal<string | undefined>;
+    readonly defaultValue: _angular_core.InputSignal<string | undefined>;
+    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>;
+    /** The fewest lines the value shows. */
+    readonly rows: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** The most lines it grows to before it scrolls. */
+    readonly maxRows: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    /** Publishes the length of the value to the field, which draws the count. */
+    readonly showCount: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Before the value moves: `keyboard` for an edit, `submit` for the clearing after a send. */
+    readonly valueChange: _angular_core.OutputEmitterRef<ChangeRequest<string>>;
+    private readonly element;
+    private readonly composer;
+    protected readonly field: SlField | null;
+    protected readonly writtenDir: string | null;
+    private readonly writtenId;
+    private readonly writtenMaxLength;
+    private readonly mirror;
+    private readonly formDisabled;
+    private onChangeFn;
+    protected onTouchedFn: () => void;
+    readonly current: _angular_core.Signal<string>;
+    readonly resolvedDisabled: _angular_core.Signal<boolean | undefined>;
+    readonly resolvedReadOnly: _angular_core.Signal<boolean | undefined>;
+    readonly resolvedInvalid: _angular_core.Signal<boolean | undefined>;
+    protected readonly controlId: _angular_core.Signal<string | null>;
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    constructor();
+    ngOnInit(): void;
+    /** The native element, for `focus()`, `select()` and `setSelectionRange()`. */
+    get inputElement(): HTMLTextAreaElement;
+    focus(): void;
+    writeValue(value: string | null | undefined): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    clearAfterSubmit(source: Event): void;
+    protected onInput(event: Event): void;
+    protected onKeyDown(event: KeyboardEvent): void;
+    protected onPaste(event: ClipboardEvent): void;
+    private request;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlPromptComposerInput, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlPromptComposerInput, "textarea[slPromptComposerInput]", ["slPromptComposerInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "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; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; "showCount": { "alias": "showCount"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+/** The band above the value: attachments, a quoted reply, a context chip. */
+declare class SlPromptComposerHeader {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlPromptComposerHeader, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlPromptComposerHeader, "[slPromptComposerHeader]", never, {}, {}, never, never, true, never>;
+}
+/** The band below the value: tools on the start, the send at the end. */
+declare class SlPromptComposerFooter {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlPromptComposerFooter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlPromptComposerFooter, "[slPromptComposerFooter]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * A button of the consumer's in a band: a model menu, a tool, Cancelar.
+ * `slMenuTriggerFor` on the same element binds `data-part` to `null`, and the
+ * binding is a constant, so the part is written back once after the first
+ * render — the rule `menu` records for its own trigger.
+ */
+declare class SlPromptComposerAction {
+    protected readonly type: string;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlPromptComposerAction, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlPromptComposerAction, "button[slPromptComposerAction]", ["slPromptComposerAction"], {}, {}, never, never, true, never>;
+}
+/**
+ * The paperclip. It opens a file chooser it creates and never attaches to the
+ * page, with the composer's `accept` and `multiple`; content projected into
+ * the button replaces the mark.
+ */
+declare class SlPromptComposerAttach {
+    protected readonly composer: SlPromptComposer;
+    protected readonly label: string | null;
+    protected open(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlPromptComposerAttach, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlPromptComposerAttach, "button[slPromptComposerAttach]", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * The send. Round and named by the provider's label for its status; a padded
+ * word when given text, which then names it. It turns into a busy ring while
+ * the request travels, a stop inside the ring while the answer streams, and a
+ * retry after an error.
+ */
+declare class SlPromptComposerSubmit {
+    protected readonly composer: SlPromptComposer;
+    private readonly element;
+    /** Whether the consumer named the button with words of its own. */
+    protected readonly named: _angular_core.WritableSignal<boolean>;
+    protected readonly label: _angular_core.Signal<string>;
+    constructor();
+    protected activate(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlPromptComposerSubmit, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlPromptComposerSubmit, "button[slPromptComposerSubmit]", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { PROMPT_COMPOSER_DEFAULTS, SlPromptComposer, SlPromptComposerAction, SlPromptComposerAttach, SlPromptComposerControl, SlPromptComposerFooter, SlPromptComposerHeader, SlPromptComposerInput, SlPromptComposerSubmit, injectPromptComposerDefaults, providePromptComposerDefaults };
+export type { PromptComposerAttachEvent, PromptComposerDefaults, PromptComposerSize, PromptComposerStatus, PromptComposerStopEvent, PromptComposerSubmitOn, PromptComposerSubmitReason, PromptComposerVariant };
+//# sourceMappingURL=slotted-angular-prompt-composer.d.ts.map

package/types/slotted-angular-prompt-composer.d.ts.map

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