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

package/types/slotted-angular-segmented-control.d.ts

@@ -0,0 +1,251 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, OnInit } from '@angular/core';
+import { ChangeRequest } from '@slotted/core/state';
+import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
+
+/** The type step the control and every segment inside it sit at. */
+type SegmentedControlSize = 'sm' | 'md' | 'lg';
+/** How the segments flow. The thumb travels along the same axis. */
+type SegmentedControlOrientation = 'horizontal' | 'vertical';
+/**
+ * What the control does when it is narrower than its labels need. `icons`
+ * keeps the marks and hides the words — hidden, never removed, so the
+ * accessible name of every segment is the same at every width.
+ */
+type SegmentedControlCondense = 'none' | 'icons';
+interface SegmentedControlDefaults {
+    condense: SegmentedControlCondense;
+    fullWidth: boolean;
+    orientation: SegmentedControlOrientation;
+    size: SegmentedControlSize;
+}
+declare const SEGMENTED_CONTROL_DEFAULTS: InjectionToken<SegmentedControlDefaults>;
+/**
+ * An application decides once how its segmented controls are drawn, rather
+ * than repeating the same inputs on every one of them. A control that states
+ * any of them itself still wins, and a field around it outranks this token for
+ * `size`.
+ */
+declare function provideSegmentedControlDefaults(defaults: Partial<SegmentedControlDefaults>): {
+    provide: InjectionToken<SegmentedControlDefaults>;
+    useFactory: () => SegmentedControlDefaults;
+};
+/** What a segmented control renders as here, before it states anything of its own. */
+declare function injectSegmentedControlDefaults(): SegmentedControlDefaults;
+/**
+ * Application-scoped rather than module-scoped, for the reason `field`
+ * records: a module-level counter produces colliding sequences when two
+ * applications render in one server process, and the server and the client
+ * sequences must match for hydration.
+ *
+ * It answers for the control's generated `name` as well as for each segment's
+ * identifier, because both have to be stable across the two renders.
+ */
+declare class SlSegmentedControlIdFactory {
+    private count;
+    next(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSegmentedControlIdFactory, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+/** Why the value moved. A segmented control can produce exactly these two. */
+type SegmentedControlSelectionReason = 'pointer' | 'keyboard';
+/**
+ * What the control needs from each segment, and nothing more.
+ *
+ * A structural type rather than the segment's class, so the control does not
+ * import the component that injects it — the cycle `text-field` breaks with an
+ * abstract class, broken here with the smaller thing that works.
+ */
+interface SlSegmentedControlSegment {
+    /** What this segment selects. */
+    value: () => string;
+    /** Writes this segment's element from the control's value. */
+    syncElement(): void;
+}
+/**
+ * One choice out of a few, applied at once, on a track.
+ *
+ * **The keyboard is the platform's, and that is why the segments share a
+ * `name`.** Native radios in one form owner with one name already implement
+ * the APG's Radio Group table: Tab lands on the checked segment or on the
+ * first, `Space` checks, both arrow axes move focus and the selection
+ * together, the set wraps, and disabled segments are skipped — in a
+ * right-to-left document too.
+ *
+ * **The role is conditional, and the condition is the field group.** A
+ * `field-group` is a `fieldset` with a `legend`, which is already a named
+ * group; a `radiogroup` inside it is the same set announced twice. A `role`
+ * the consumer wrote wins over both.
+ *
+ * **`readOnly` is enforced, because the platform has none.** A radio ignores
+ * `readonly`, so the control refuses the change on the segment's own `click` —
+ * the one event a pointer and `Space` share — and announces `aria-readonly`.
+ *
+ * **The thumb's place is the checked index, and the count is how many
+ * segments registered.** Both are written as custom properties on the host, so
+ * the stylesheet needs no measurement: the thumb is one column wide and moves
+ * by its own width times the index.
+ */
+declare class SlSegmentedControl implements ControlValueAccessor, OnInit, Validator {
+    /** Present means the consumer owns the choice. */
+    readonly value: _angular_core.InputSignal<string | undefined>;
+    /** The value an uncontrolled control starts from, read once. */
+    readonly defaultValue: _angular_core.InputSignal<string | undefined>;
+    /**
+     * The submission name the segments share, and the reason the platform
+     * treats them as one radio group. Generated when it is not written, because
+     * grouping is by name within the form owner and an unnamed set is not a set.
+     */
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    readonly size: _angular_core.InputSignal<SegmentedControlSize | undefined>;
+    readonly orientation: _angular_core.InputSignal<SegmentedControlOrientation | undefined>;
+    readonly condense: _angular_core.InputSignal<SegmentedControlCondense | undefined>;
+    readonly fullWidth: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /** Unstated rather than `false`, so the control 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>;
+    /**
+     * One output for one transition. Its `previous` is `undefined` while nothing
+     * has been chosen, which a request typed over `string` alone could not say.
+     */
+    readonly valueChange: _angular_core.OutputEmitterRef<ChangeRequest<string | undefined>>;
+    private readonly field;
+    private readonly fieldGroup;
+    private readonly defaults;
+    private readonly generatedName;
+    private readonly writtenRole;
+    private readonly writtenDescribedBy;
+    private readonly segments;
+    private readonly own;
+    private readonly formDisabled;
+    private onChangeFn;
+    private onTouchedFn;
+    readonly selection: _angular_core.Signal<string | undefined>;
+    readonly resolvedName: _angular_core.Signal<string>;
+    /** How many segments the track holds, and which of them is checked. */
+    readonly count: _angular_core.Signal<number>;
+    readonly checkedIndex: _angular_core.Signal<number>;
+    protected readonly indexProperty: _angular_core.Signal<number | null>;
+    readonly resolvedSize: _angular_core.Signal<"sm" | "md" | "lg">;
+    readonly resolvedOrientation: _angular_core.Signal<SegmentedControlOrientation>;
+    readonly resolvedCondense: _angular_core.Signal<SegmentedControlCondense>;
+    readonly resolvedFullWidth: _angular_core.Signal<boolean>;
+    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>;
+    protected readonly resolvedRole: _angular_core.Signal<string | null>;
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    protected readonly ariaInvalid: _angular_core.Signal<"true" | null>;
+    protected readonly ariaReadOnly: _angular_core.Signal<"true" | null>;
+    protected readonly ariaRequired: _angular_core.Signal<"true" | null>;
+    /**
+     * Only where the root owns the role, and only when the set flows the way
+     * `radiogroup` does not already imply.
+     */
+    protected readonly ariaOrientation: _angular_core.Signal<"horizontal" | null>;
+    ngOnInit(): void;
+    /** A segment joins the set, in the order the template holds it. */
+    register(segment: SlSegmentedControlSegment): void;
+    /** A segment leaves the set. */
+    unregister(segment: SlSegmentedControlSegment): void;
+    /**
+     * Writes every segment's element from the value.
+     *
+     * The HTML standard's canceled activation behaviour for a radio restores the
+     * *clicked* element and nothing else, so the option that was chosen before
+     * the refused click stays unchecked. Angular writes a property binding only
+     * when its value changes, and the neighbour's did not — the correction is
+     * made here, which is the defect `radio-group` measured first.
+     */
+    restoreElements(): void;
+    /** Whether one value is the chosen one. Read by every segment in the set. */
+    holds(value: string): boolean;
+    /**
+     * Asks the control to move to one value. Returns whether the value actually
+     * moved — false while a consumer owns it, which is what tells the segment to
+     * refuse the activation and let the platform put the element back.
+     */
+    select(value: string, reason: SegmentedControlSelectionReason, source: Event): boolean;
+    writeValue(value: string | null | undefined): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /** Marks the set touched, which a segment calls when it loses focus. */
+    markTouched(): void;
+    /**
+     * The control owns validity over the set, which no single segment can see:
+     * "choose one" is a fact about the set and not about any one option.
+     */
+    validate(control: AbstractControl): ValidationErrors | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSegmentedControl, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlSegmentedControl, "[slSegmentedControl]", ["slSegmentedControl"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "condense": { "alias": "condense"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "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; }; }, { "valueChange": "valueChange"; }, never, ["*"], true, never>;
+}
+
+/**
+ * The mark a segment is drawn with, on the consumer's own element.
+ *
+ * A directive rather than a slot, so an `ng-icon`, an inline `svg` or a
+ * `span` all work and none of them loses its own semantics. It is hidden from
+ * the reading order, because the words beside it — or the `aria-label` on the
+ * radio — are what a reader hears.
+ */
+declare class SlSegmentIcon {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSegmentIcon, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlSegmentIcon, "[slSegmentIcon]", ["slSegmentIcon"], {}, {}, never, never, true, never>;
+}
+/**
+ * One segment of the track.
+ *
+ * It is a part of `segmented-control` and not an entry point of its own:
+ * outside a control it has no exclusive set to belong to, and the platform's
+ * whole keyboard model is defined over the set. `SlSegmentedControl` is
+ * injected without `optional`, so a segment written outside one fails at
+ * construction rather than silently.
+ *
+ * The radio is real, visually hidden and left where it is: it covers the
+ * segment and reaches the track's own edge, so the hit area is the control's
+ * height rather than the thumb's.
+ */
+declare class SlSegment implements SlSegmentedControlSegment {
+    /** What this segment selects. It is what the control's value holds. */
+    readonly value: _angular_core.InputSignal<string>;
+    /** Unstated rather than `false`, so the segment defers to the control. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /**
+     * The control the segment belongs to. Injected without `optional`, and
+     * public because the template reads the shared name from it and a consumer
+     * reaching the segment through `exportAs` may want the resolved step.
+     *
+     * The trailing underscore keeps the name off `value`, which is the input.
+     */
+    readonly control_: SlSegmentedControl;
+    private readonly writtenId;
+    /**
+     * Read from the host and written onto the radio: the name of a segment whose
+     * mark is its whole content belongs to the control that holds the focus, and
+     * an `aria-label` left on the `label` element would name it twice.
+     */
+    protected readonly ariaLabel: string | null;
+    protected readonly writtenDescribedBy: string | null;
+    private readonly element;
+    /** The identifier the radio carries. A consumer's own wins. */
+    readonly controlId: string;
+    readonly checked: _angular_core.Signal<boolean>;
+    readonly resolvedDisabled: _angular_core.Signal<boolean | undefined>;
+    protected readonly disabledAttribute: _angular_core.Signal<"" | null>;
+    constructor();
+    /** Writes this segment's element from the control's value. */
+    syncElement(): void;
+    protected onClick(event: Event): void;
+    protected onBlur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSegment, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlSegment, "[slSegment]", ["slSegment"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["[slSegmentIcon]", "*"], true, never>;
+}
+
+export { SEGMENTED_CONTROL_DEFAULTS, SlSegment, SlSegmentIcon, SlSegmentedControl, SlSegmentedControlIdFactory, injectSegmentedControlDefaults, provideSegmentedControlDefaults };
+export type { SegmentedControlCondense, SegmentedControlDefaults, SegmentedControlOrientation, SegmentedControlSelectionReason, SegmentedControlSize, SlSegmentedControlSegment };
+//# sourceMappingURL=slotted-angular-segmented-control.d.ts.map

package/types/slotted-angular-segmented-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-segmented-control.d.ts","sources":["../../segmented-control/src/segmented-control-defaults.ts","../../segmented-control/src/segmented-control.ts","../../segmented-control/src/segmented-control-parts.ts"],"mappings":";;;;;AAEA;AACM,KAAM,oBAAoB;AAEhC;KACY,2BAA2B;AAEvC;;;;AAIG;KACS,wBAAwB;UAEnB,wBAAwB;cAC7B,wBAAwB;;iBAErB,2BAA2B;UAClC,oBAAoB;AAC3B;AASD,cAAa,0BAA0B,EAAA,cAAA,CAAA,wBAAA;AAKvC;;;;;AAKG;AACH,iBAAgB,+BAA+B,WAAW,OAAO,CAAC,wBAAwB;;sBAGtE,wBAAwB;AAE3C;AAED;AACA,iBAAgB,8BAA8B,IAAI,wBAAwB;AAI1E;;;;;;;;AAQG;AACH,cACa,2BAA2B;;;oDAA3B,2BAA2B;;AAOvC;;AC1BD;KACY,+BAA+B;AAE3C;;;;;;AAMG;UACc,yBAAyB;;;;;AAKzC;AAED;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACH,cAmCa,kBAAmB,YAAW,oBAAoB,EAAE,MAAM,EAAE,SAAS;;oBAElE,aAAA,CAAA,WAAA;;2BAEO,aAAA,CAAA,WAAA;AACrB;;;;AAIG;mBACU,aAAA,CAAA,WAAA;mBACA,aAAA,CAAA,WAAA,CAAA,oBAAA;0BACO,aAAA,CAAA,WAAA,CAAA,2BAAA;uBACH,aAAA,CAAA,WAAA,CAAA,wBAAA;wBACC,aAAA,CAAA,wBAAA;;uBAID,aAAA,CAAA,wBAAA;uBAGA,aAAA,CAAA,wBAAA;sBAGD,aAAA,CAAA,wBAAA;uBAGC,aAAA,CAAA,wBAAA;AAIjB;;;AAGG;0BACiB,aAAA,CAAA,gBAAA,CAAA,aAAA;AAEpB;AACA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;;;wBAIkB,aAAA,CAAA,MAAA;2BACG,aAAA,CAAA,MAAA;;oBAGP,aAAA,CAAA,MAAA;2BACO,aAAA,CAAA,MAAA;AAKrB,sCAAgC,aAAA,CAAA,MAAA;2BAKX,aAAA,CAAA,MAAA;kCAOO,aAAA,CAAA,MAAA,CAAA,2BAAA;+BACH,aAAA,CAAA,MAAA,CAAA,wBAAA;gCACC,aAAA,CAAA,MAAA;+BACD,aAAA,CAAA,MAAA;+BAGA,aAAA,CAAA,MAAA;8BACD,aAAA,CAAA,MAAA;+BACC,aAAA,CAAA,MAAA;AAIzB,qCAA+B,aAAA,CAAA,MAAA;AAG/B,oCAA8B,aAAA,CAAA,MAAA;AAI9B,oCAA8B,aAAA,CAAA,MAAA;AAG9B,qCAA+B,aAAA,CAAA,MAAA;AAG/B,qCAA+B,aAAA,CAAA,MAAA;AAG/B;;;AAGG;AACH,wCAAkC,aAAA,CAAA,MAAA;;;sBAWhB,yBAAyB;;wBAKvB,yBAAyB;AAI7C;;;;;;;;AAQG;;;AAMH;AAIA;;;;AAIG;AACH,kCAA8B,+BAA+B,UAAU,KAAK;AAmB5E;;AAQA;;;;AAaA;;;AAGG;AACH,sBAAkB,eAAe,GAAG,gBAAgB;oDAjMzC,kBAAkB;sDAAlB,kBAAkB;AAsM9B;;ACvSD;;;;;;;AAOG;AACH,cASa,aAAa;oDAAb,aAAa;sDAAb,aAAa;AAAG;AAW7B;;;;;;;;;;;;AAYG;AACH,cA4Ba,SAAU,YAAW,yBAAyB;;oBAE3C,aAAA,CAAA,WAAA;;uBAEG,aAAA,CAAA,wBAAA;AAIjB;;;;;;AAMG;uBACc,kBAAA;AAEjB;AACA;;;;AAIG;AACH;AACA;AAGA;;;sBAKgB,aAAA,CAAA,MAAA;+BACS,aAAA,CAAA,MAAA;AAEzB,0CAAoC,aAAA,CAAA,MAAA;;;;AAcpC,6BAAyB,KAAK;AAQ9B;oDAzDW,SAAS;sDAAT,SAAS;AA4DrB;;","names":[]}