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

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

@@ -0,0 +1,319 @@
+import * as _slotted_core_chart from '@slotted/core/chart';
+import { ChartGrid, ChartLegendEntry, ChartTooltipContext, ChartModel, ChartSeries, ChartXAxis, ChartYAxis, ChartOrientation, ChartStackMode, ChartAnnotation, ChartTrigger, ChartPoint, ChartZoom, ChartTheme, ChartColor } from '@slotted/core/chart';
+import * as _slotted_core_i18n from '@slotted/core/i18n';
+import { PartialMessages, ChartMessages } from '@slotted/core/i18n';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, TemplateRef, ElementRef } from '@angular/core';
+import { mountChartEngine, ChartPointLocation } from '@slotted/core/chart-echarts';
+export { preloadChartEngine } from '@slotted/core/chart-echarts';
+import { ChangeRequest, ChangeReason } from '@slotted/core/state';
+
+type ChartSize = 'sm' | 'md' | 'lg';
+type ChartVariant = 'plain' | 'card';
+type ChartPalette = 'categorical' | 'sequential' | 'focus';
+type ChartToolbar = 'visible' | 'hover' | 'none';
+type ChartRenderer = 'auto' | 'svg' | 'canvas';
+type ChartLegendOverflow = 'collapse' | 'wrap';
+interface ChartTooltipSettings {
+    readonly sort?: 'none' | 'asc' | 'desc';
+    readonly total?: boolean;
+    readonly indicator?: 'dot' | 'line' | 'none';
+}
+/** What every chart in an application does before any of them states its own. */
+interface ChartDefaults {
+    size?: ChartSize;
+    variant?: ChartVariant;
+    palette?: ChartPalette;
+    toolbar?: ChartToolbar;
+    renderer?: ChartRenderer;
+    grid?: ChartGrid;
+    legendOverflow?: ChartLegendOverflow;
+    tooltip?: ChartTooltipSettings;
+    animate?: boolean;
+}
+declare const CHART_DEFAULTS_TOKEN: InjectionToken<ChartDefaults>;
+/**
+ * An application decides once how its charts look — the tile or the plain
+ * form, the palette, the toolbar — and every chart inherits the decision. A
+ * chart that states any of them still wins: an explicit input is never
+ * overridden by the token. The words and the locale come from the language in
+ * force (`provideSlotted`).
+ */
+declare function provideChartDefaults(defaults: ChartDefaults): {
+    provide: InjectionToken<ChartDefaults>;
+    useValue: ChartDefaults;
+};
+declare function injectChartDefaults(): ChartDefaults;
+
+/** What a `slChartTooltip` template is handed. */
+interface ChartTooltipTemplateContext {
+    $implicit: ChartTooltipContext;
+    model: ChartModel;
+}
+/** Replaces the tooltip's content. The box, its place and its timing stay the chart's. */
+declare class SlChartTooltip {
+    readonly template: TemplateRef<ChartTooltipTemplateContext>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlChartTooltip, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlChartTooltip, "ng-template[slChartTooltip]", never, {}, {}, never, never, true, never>;
+}
+/** What a `slChartLegendItem` template is handed for one entry. */
+interface ChartLegendItemTemplateContext {
+    $implicit: ChartLegendEntry;
+    value: string;
+    current: boolean;
+}
+/**
+ * Replaces what one legend item holds. The item — a toggle with its pressed
+ * state, its colour and its place in the roving tab stop — stays the chart's.
+ */
+declare class SlChartLegendItem {
+    readonly template: TemplateRef<ChartLegendItemTemplateContext>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlChartLegendItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlChartLegendItem, "ng-template[slChartLegendItem]", never, {}, {}, never, never, true, never>;
+}
+/** Replaces the words in a donut's centre. */
+declare class SlChartCenter {
+    readonly template: TemplateRef<{
+        $implicit: ChartModel;
+    }>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlChartCenter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlChartCenter, "ng-template[slChartCenter]", never, {}, {}, never, never, true, never>;
+}
+/** Replaces the empty plot: `no-data`, or `all-hidden`. */
+declare class SlChartEmpty {
+    readonly template: TemplateRef<{
+        $implicit: "no-data" | "all-hidden";
+    }>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlChartEmpty, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlChartEmpty, "ng-template[slChartEmpty]", never, {}, {}, never, never, true, never>;
+}
+/** Replaces the failed plot. */
+declare class SlChartError {
+    readonly template: TemplateRef<unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlChartError, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlChartError, "ng-template[slChartError]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * The engine a chart mounts. `@slotted/core/chart-echarts` by default; a test
+ * provides a recording one, and an application could provide another that
+ * answers the same three calls.
+ */
+declare const CHART_ENGINE: InjectionToken<typeof mountChartEngine>;
+/** Unique ids for the chart's parts, stable across a server render. */
+declare class SlChartIdFactory {
+    private count;
+    next(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlChartIdFactory, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+/** The imperative actions a template cannot express. */
+interface ChartHandle {
+    focus(): void;
+    resetZoom(): void;
+    toDataURL(): string | null;
+    toCsv(): string;
+}
+interface Overlay {
+    readonly crosshair: (ChartPointLocation & {
+        readonly isBand: boolean;
+    }) | null;
+    readonly markers: readonly {
+        readonly key: string;
+        readonly color: ChartColor;
+        readonly at: ChartPointLocation;
+        readonly selected: boolean;
+        readonly current: boolean;
+    }[];
+    readonly tooltip: ChartTooltipContext | null;
+    readonly docked: boolean;
+}
+/**
+ * A figure: a caption that names it, a toolbar of its own controls, a legend
+ * of toggles, and a plot the engine draws marks into and the family draws
+ * every interaction over. The engine is ECharts, loaded on demand by
+ * `@slotted/core/chart-echarts`, one chunk per kind; everything a reader
+ * operates is this component's template.
+ *
+ * Each mutable value is a `model()` — two-way, so a template binds it with
+ * `[(hidden)]` — and each move is first asked through a `*ChangeRequest`
+ * output carrying the reason and the event, which a handler may cancel. The
+ * model, the keyboard, the text alternatives and the theme are
+ * `@slotted/core/chart`'s, shared with the React binding.
+ */
+declare class SlChart implements ChartHandle {
+    readonly data: _angular_core.InputSignal<readonly Readonly<Record<string, unknown>>[]>;
+    readonly series: _angular_core.InputSignal<readonly ChartSeries[]>;
+    readonly x: _angular_core.InputSignal<ChartXAxis | undefined>;
+    readonly y: _angular_core.InputSignal<ChartYAxis | readonly [ChartYAxis, ChartYAxis] | undefined>;
+    readonly orientation: _angular_core.InputSignal<ChartOrientation | undefined>;
+    readonly stackMode: _angular_core.InputSignal<ChartStackMode | undefined>;
+    readonly annotations: _angular_core.InputSignal<readonly ChartAnnotation[] | undefined>;
+    readonly recordKey: _angular_core.InputSignal<string | undefined>;
+    readonly locale: _angular_core.InputSignal<string | undefined>;
+    /** The chart's name: the caption, and the plot's accessible name. The host's native tooltip is removed. */
+    readonly title: _angular_core.InputSignal<string | undefined>;
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    /** A note behind an information control beside the title. */
+    readonly help: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * toolbar, the legend, the states and the sentences a screen reader hears.
+     */
+    readonly messages: _angular_core.InputSignal<PartialMessages<ChartMessages> | undefined>;
+    readonly size: _angular_core.InputSignal<ChartSize | undefined>;
+    readonly variant: _angular_core.InputSignal<ChartVariant | undefined>;
+    readonly palette: _angular_core.InputSignal<ChartPalette | undefined>;
+    readonly toolbar: _angular_core.InputSignal<ChartToolbar | undefined>;
+    readonly grid: _angular_core.InputSignal<ChartGrid | undefined>;
+    readonly texture: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly renderer: _angular_core.InputSignal<ChartRenderer | undefined>;
+    readonly sampling: _angular_core.InputSignal<"none" | "auto" | undefined>;
+    readonly animate: _angular_core.InputSignal<boolean | undefined>;
+    readonly legend: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly legendInteractive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly legendValues: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly legendOverflow: _angular_core.InputSignal<ChartLegendOverflow | undefined>;
+    readonly trigger: _angular_core.InputSignal<ChartTrigger | undefined>;
+    readonly tooltip: _angular_core.InputSignal<ChartTooltipSettings | undefined>;
+    readonly zoomable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly selectable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly error: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The engine's option, before it is drawn: the escape hatch for what the contract does not say yet. */
+    readonly extendOption: _angular_core.InputSignal<((option: Record<string, unknown>) => Record<string, unknown>) | undefined>;
+    readonly hidden: _angular_core.ModelSignal<readonly string[]>;
+    readonly activePoint: _angular_core.ModelSignal<ChartPoint | null>;
+    readonly selection: _angular_core.ModelSignal<ChartPoint | null>;
+    readonly zoom: _angular_core.ModelSignal<ChartZoom>;
+    readonly tableOpen: _angular_core.ModelSignal<boolean>;
+    readonly fullscreen: _angular_core.ModelSignal<boolean>;
+    readonly hiddenChangeRequest: _angular_core.OutputEmitterRef<ChangeRequest<readonly string[]>>;
+    readonly activePointChangeRequest: _angular_core.OutputEmitterRef<ChangeRequest<ChartPoint | null>>;
+    readonly selectionChangeRequest: _angular_core.OutputEmitterRef<ChangeRequest<ChartPoint | null>>;
+    readonly zoomChangeRequest: _angular_core.OutputEmitterRef<ChangeRequest<ChartZoom>>;
+    readonly tableOpenChangeRequest: _angular_core.OutputEmitterRef<ChangeRequest<boolean>>;
+    readonly fullscreenChangeRequest: _angular_core.OutputEmitterRef<ChangeRequest<boolean>>;
+    /** The reader pressed the retry of the failed plot. */
+    readonly retry: _angular_core.OutputEmitterRef<void>;
+    protected readonly tooltipTemplate: _angular_core.Signal<SlChartTooltip | undefined>;
+    protected readonly legendItemTemplate: _angular_core.Signal<SlChartLegendItem | undefined>;
+    protected readonly centerTemplate: _angular_core.Signal<SlChartCenter | undefined>;
+    protected readonly emptyTemplate: _angular_core.Signal<SlChartEmpty | undefined>;
+    protected readonly errorTemplate: _angular_core.Signal<SlChartError | undefined>;
+    private readonly defaults;
+    private readonly mountEngine;
+    private readonly host;
+    private readonly destroyRef;
+    protected readonly id: string;
+    protected readonly plotRef: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
+    protected readonly canvasRef: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
+    protected readonly tooltipRef: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
+    protected readonly legendRef: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
+    protected readonly menuRef: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
+    protected readonly moreRef: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
+    protected readonly helpRef: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
+    private engine;
+    private readonly engineFailure;
+    protected readonly theme: _angular_core.WritableSignal<ChartTheme | null>;
+    protected readonly overlay: _angular_core.WritableSignal<Overlay>;
+    protected readonly collapsed: _angular_core.WritableSignal<readonly number[]>;
+    protected readonly legendFocus: _angular_core.WritableSignal<string | null>;
+    protected readonly layerOpen: _angular_core.WritableSignal<Record<string, boolean>>;
+    private readonly widths;
+    private readonly modality;
+    private readonly pointAnnouncer;
+    /** The family's words in the language in force, with this chart's `messages` laid over them. */
+    protected readonly t: _slotted_core_i18n.FamilyTranslator<ChartMessages>;
+    private readonly appLocale;
+    /** The name of the control holding the series the legend has no room for. */
+    protected readonly legendMoreName: _angular_core.Signal<string>;
+    protected readonly resolvedSize: _angular_core.Signal<ChartSize>;
+    protected readonly resolvedVariant: _angular_core.Signal<ChartVariant>;
+    protected readonly resolvedPalette: _angular_core.Signal<ChartPalette>;
+    protected readonly resolvedToolbar: _angular_core.Signal<ChartToolbar>;
+    protected readonly resolvedLegendOverflow: _angular_core.Signal<ChartLegendOverflow>;
+    protected readonly resolvedTooltip: _angular_core.Signal<ChartTooltipSettings>;
+    private readonly spec;
+    private readonly built;
+    protected readonly chartModel: _angular_core.Signal<ChartModel | null>;
+    protected readonly failed: _angular_core.Signal<boolean>;
+    protected readonly drawable: _angular_core.Signal<boolean>;
+    protected readonly usable: _angular_core.Signal<boolean>;
+    protected readonly resolvedTrigger: _angular_core.Signal<ChartTrigger>;
+    protected readonly activeKey: _angular_core.Signal<string | null>;
+    protected readonly summary: _angular_core.Signal<string>;
+    protected readonly skeletonKind: _angular_core.Signal<"line" | "pie" | "bar">;
+    protected readonly legendWaiting: _angular_core.Signal<boolean>;
+    protected readonly table: _angular_core.Signal<_slotted_core_chart.ChartTable | null>;
+    protected readonly rowKeys: _angular_core.Signal<string[]>;
+    protected readonly rovingKey: _angular_core.Signal<string | null>;
+    protected readonly describedBy: _angular_core.Signal<string>;
+    protected readonly repeat: (count: number) => number[];
+    constructor();
+    private readonly bump;
+    private native;
+    private tooltipWasOpen;
+    private ask;
+    protected requestHidden(next: readonly string[], reason: ChangeReason, source?: unknown): void;
+    protected requestActive(next: ChartPoint | null, reason: ChangeReason, source?: unknown): void;
+    protected requestSelection(next: ChartPoint | null, reason: ChangeReason, source?: unknown): void;
+    protected requestZoom(next: ChartZoom, reason: ChangeReason, source?: unknown): void;
+    protected requestTable(next: boolean, reason: ChangeReason, source?: unknown): void;
+    /**
+     * The Fullscreen API when the page may use it and the reader asked; a layer
+     * fixed over the page otherwise. A browser refuses the API outside the
+     * press that asked for it, so it is asked here, inside the handler.
+     */
+    protected requestFullscreen(next: boolean, reason: ChangeReason, source?: unknown): void;
+    /** The reason the last activation came with: a pointer, a key, or the application. */
+    protected pressReason(): ChangeReason;
+    private computeOverlay;
+    protected px(value: number | undefined): string | null;
+    protected colorOf(color: ChartColor): {
+        slot: string | null;
+        tone: _slotted_core_chart.ChartTone | null;
+        overflow: string | null;
+    };
+    protected strokeOf(entry: {
+        series: string;
+    } | ChartLegendEntry, key?: string): "dashed" | "dotted" | "dash-dot" | null;
+    protected markerKind(kind: string, indicator?: string): "line" | "bar" | "scatter";
+    protected legendValue(entry: ChartLegendEntry): string;
+    protected isCurrent(entry: ChartLegendEntry): boolean;
+    protected toggleEntry(entry: ChartLegendEntry, mode: 'toggle' | 'isolate', reason: ChangeReason, source: unknown): void;
+    protected onLegendClick(entry: ChartLegendEntry, event: MouseEvent): void;
+    protected onLegendItemKey(entry: ChartLegendEntry, event: KeyboardEvent): void;
+    protected emphasize(key: string | null): void;
+    protected onLegendKeyDown(event: KeyboardEvent): void;
+    /**
+     * Which entries fit on the line, measured by `@slotted/core/overflow` —
+     * the arithmetic `toolbar` folds its controls with. The rest wait behind
+     * the `+N` control, where they toggle the same series.
+     */
+    private fitLegend;
+    protected toggleLayer(name: string): void;
+    protected onLayerToggle(name: string, event: Event, control: HTMLElement, align: 'start' | 'end', focusFirst?: boolean): void;
+    protected onLayerKeyDown(event: KeyboardEvent): void;
+    private layerElement;
+    protected menuAction(action: 'view' | 'fullscreen' | 'csv' | 'image', event: Event): void;
+    private fileName;
+    private download;
+    protected resetZoomFromToolbar(event: Event): void;
+    protected showAll(event: Event): void;
+    protected onRetry(): void;
+    protected zoomed(): boolean;
+    protected onPlotKeyDown(event: KeyboardEvent): void;
+    protected onPlotFocus(event: FocusEvent): void;
+    protected onRootKeyDown(event: KeyboardEvent): void;
+    focus(): void;
+    resetZoom(): void;
+    toDataURL(): string | null;
+    toCsv(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlChart, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlChart, "figure[slChart]", ["slChart"], { "data": { "alias": "data"; "required": false; "isSignal": true; }; "series": { "alias": "series"; "required": false; "isSignal": true; }; "x": { "alias": "x"; "required": false; "isSignal": true; }; "y": { "alias": "y"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "stackMode": { "alias": "stackMode"; "required": false; "isSignal": true; }; "annotations": { "alias": "annotations"; "required": false; "isSignal": true; }; "recordKey": { "alias": "recordKey"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "help": { "alias": "help"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "palette": { "alias": "palette"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "grid": { "alias": "grid"; "required": false; "isSignal": true; }; "texture": { "alias": "texture"; "required": false; "isSignal": true; }; "renderer": { "alias": "renderer"; "required": false; "isSignal": true; }; "sampling": { "alias": "sampling"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "legendInteractive": { "alias": "legendInteractive"; "required": false; "isSignal": true; }; "legendValues": { "alias": "legendValues"; "required": false; "isSignal": true; }; "legendOverflow": { "alias": "legendOverflow"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "zoomable": { "alias": "zoomable"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "extendOption": { "alias": "extendOption"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "activePoint": { "alias": "activePoint"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "tableOpen": { "alias": "tableOpen"; "required": false; "isSignal": true; }; "fullscreen": { "alias": "fullscreen"; "required": false; "isSignal": true; }; }, { "hidden": "hiddenChange"; "activePoint": "activePointChange"; "selection": "selectionChange"; "zoom": "zoomChange"; "tableOpen": "tableOpenChange"; "fullscreen": "fullscreenChange"; "hiddenChangeRequest": "hiddenChangeRequest"; "activePointChangeRequest": "activePointChangeRequest"; "selectionChangeRequest": "selectionChangeRequest"; "zoomChangeRequest": "zoomChangeRequest"; "tableOpenChangeRequest": "tableOpenChangeRequest"; "fullscreenChangeRequest": "fullscreenChangeRequest"; "retry": "retry"; }, ["tooltipTemplate", "legendItemTemplate", "centerTemplate", "emptyTemplate", "errorTemplate"], ["[slChartActions]"], true, never>;
+}
+
+export { CHART_DEFAULTS_TOKEN, CHART_ENGINE, SlChart, SlChartCenter, SlChartEmpty, SlChartError, SlChartIdFactory, SlChartLegendItem, SlChartTooltip, injectChartDefaults, provideChartDefaults };
+export type { ChartDefaults, ChartHandle, ChartLegendItemTemplateContext, ChartLegendOverflow, ChartPalette, ChartRenderer, ChartSize, ChartToolbar, ChartTooltipSettings, ChartTooltipTemplateContext, ChartVariant };
+//# sourceMappingURL=slotted-angular-chart.d.ts.map

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

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

package/types/slotted-angular-checkbox-group.d.ts

@@ -0,0 +1,156 @@
+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 group and every box inside it sit at. */
+type CheckboxGroupSize = 'sm' | 'md' | 'lg';
+/** How the choices flow. `horizontal` wraps; a set of options is not a scroll region. */
+type CheckboxGroupOrientation = 'vertical' | 'horizontal';
+/**
+ * Whether the choice is a box beside a line of text or a framed surface whose
+ * whole area is the target. `tile` is the name Carbon and Cloudscape give the
+ * framed choice; Mantine and Chakra call it a card, which is a family here.
+ */
+type CheckboxGroupVariant = 'plain' | 'tile';
+/** Which side of its own label a box is on. */
+type CheckboxGroupLabelPlacement = 'end' | 'start';
+interface CheckboxGroupDefaults {
+    labelPlacement: CheckboxGroupLabelPlacement;
+    variant: CheckboxGroupVariant;
+    orientation: CheckboxGroupOrientation;
+    size: CheckboxGroupSize;
+}
+declare const CHECKBOX_GROUP_DEFAULTS: InjectionToken<CheckboxGroupDefaults>;
+/**
+ * An application decides once how its sets of choices flow, rather than
+ * repeating the same inputs on every group in a form. A group that states any
+ * of them itself still wins, and a field around the group outranks this token
+ * for `size`.
+ */
+declare function provideCheckboxGroupDefaults(defaults: Partial<CheckboxGroupDefaults>): {
+    provide: InjectionToken<CheckboxGroupDefaults>;
+    useFactory: () => CheckboxGroupDefaults;
+};
+/** What a checkbox group renders as here, before it states anything of its own. */
+declare function injectCheckboxGroupDefaults(): CheckboxGroupDefaults;
+
+/** Why the selection moved. A set of boxes can produce exactly these two. */
+type CheckboxGroupSelectionReason = 'pointer' | 'keyboard';
+/**
+ * A set of choices, and the array behind it.
+ *
+ * **The group holds the value; the boxes draw themselves.** `checkbox` is the
+ * entry point beside this one rather than a part of it, so a box works alone
+ * and this stylesheet never selects into that one.
+ *
+ * **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 `role="group"` inside it, named by the same legend, is the same set
+ * announced twice. A `role` the consumer wrote wins over both.
+ *
+ * **Order comes from `allValues` when there is one.** A selection that grew in
+ * click order would submit in click order, so two readers who chose the same
+ * three options would send two different arrays.
+ */
+declare class SlCheckboxGroup implements ControlValueAccessor, OnInit, Validator {
+    /** Present means the consumer owns the selection. */
+    readonly value: _angular_core.InputSignal<readonly string[] | undefined>;
+    /** The selection an uncontrolled group starts from, read once. */
+    readonly defaultValue: _angular_core.InputSignal<readonly string[] | undefined>;
+    /**
+     * Every value the group commands. It is what makes a parent box possible, and
+     * what keeps the selection in the set's order rather than in click order.
+     */
+    readonly allValues: _angular_core.InputSignal<readonly string[] | undefined>;
+    /** The submission name every box shares when it states none of its own. */
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    readonly size: _angular_core.InputSignal<CheckboxGroupSize | undefined>;
+    readonly orientation: _angular_core.InputSignal<CheckboxGroupOrientation | undefined>;
+    readonly labelPlacement: _angular_core.InputSignal<CheckboxGroupLabelPlacement | undefined>;
+    readonly variant: _angular_core.InputSignal<CheckboxGroupVariant | undefined>;
+    /** Unstated rather than `false`, so the group 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>;
+    /** Publishes how many of `allValues` are selected to the field around the group. */
+    readonly showCount: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * One output for one transition, carrying the new array, the array it
+     * replaces, the reason, the originating event and `cancel()`. There is no
+     * `[(value)]`, because a two-way binding has one slot and can carry none of
+     * those; a form gets the same movement through `ControlValueAccessor`.
+     */
+    readonly valueChange: _angular_core.OutputEmitterRef<ChangeRequest<readonly string[]>>;
+    private readonly field;
+    private readonly fieldGroup;
+    private readonly defaults;
+    /**
+     * The field defaults in force: a field group's, or the application's own.
+     * A group outside a field reads disabled and read-only from them, as React's
+     * reads them from FieldDefaultsProvider.
+     */
+    private readonly fieldDefaultsSource;
+    private readonly fieldDefaultsToken;
+    private readonly fieldDefaults;
+    private readonly writtenRole;
+    private readonly writtenDescribedBy;
+    private readonly writtenLabel;
+    private readonly writtenLabelledBy;
+    private readonly own;
+    private readonly formDisabled;
+    private onChangeFn;
+    private onTouchedFn;
+    readonly selection: _angular_core.Signal<readonly string[]>;
+    readonly resolvedSize: _angular_core.Signal<"sm" | "md" | "lg">;
+    readonly resolvedOrientation: _angular_core.Signal<CheckboxGroupOrientation>;
+    readonly resolvedLabelPlacement: _angular_core.Signal<CheckboxGroupLabelPlacement>;
+    /** Handed to every choice in the set: one plain box among four tiles is a
+        set nobody meant to write. */
+    readonly resolvedVariant: _angular_core.Signal<CheckboxGroupVariant>;
+    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 labelledBy: _angular_core.Signal<string | null>;
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    protected readonly ariaInvalid: _angular_core.Signal<"true" | null>;
+    protected readonly ariaRequired: _angular_core.Signal<"true" | null>;
+    constructor();
+    /**
+     * Angular creates every directive in a template before it binds any input, so
+     * the starting selection is read here rather than in the constructor: read
+     * there, `defaultValue` is always `undefined` and the group starts empty.
+     */
+    ngOnInit(): void;
+    /** Whether one value is in the selection. Read by every box in the set. */
+    holds(value: string): boolean;
+    /**
+     * Asks the group to add or remove one value. Returns whether the selection
+     * actually moved — false while a consumer owns it, which is what tells the
+     * box to refuse the activation and let the platform put the element back.
+     */
+    toggle(value: string, reason: CheckboxGroupSelectionReason, source: Event): boolean;
+    /** Asks the group to replace its whole selection. Used by the parent box. */
+    requestAll(checked: boolean, reason: CheckboxGroupSelectionReason, source: Event): boolean;
+    writeValue(value: readonly string[] | null | undefined): void;
+    registerOnChange(fn: (value: readonly string[]) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /** Marks the set touched, which a box calls when it loses focus. */
+    markTouched(): void;
+    /**
+     * The group owns validity over the set, which no single box can see: "choose
+     * at least one" is a fact about the array and not about any one value.
+     */
+    validate(control: AbstractControl): ValidationErrors | null;
+    private request;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlCheckboxGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlCheckboxGroup, "[slCheckboxGroup]", ["slCheckboxGroup"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "allValues": { "alias": "allValues"; "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; }; "labelPlacement": { "alias": "labelPlacement"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "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; }; "showCount": { "alias": "showCount"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, ["*"], true, never>;
+}
+
+export { CHECKBOX_GROUP_DEFAULTS, SlCheckboxGroup, injectCheckboxGroupDefaults, provideCheckboxGroupDefaults };
+export type { CheckboxGroupDefaults, CheckboxGroupLabelPlacement, CheckboxGroupOrientation, CheckboxGroupSelectionReason, CheckboxGroupSize };
+//# sourceMappingURL=slotted-angular-checkbox-group.d.ts.map

package/types/slotted-angular-checkbox-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-checkbox-group.d.ts","sources":["../../checkbox-group/src/checkbox-group-defaults.ts","../../checkbox-group/src/checkbox-group.ts"],"mappings":";;;;;AAEA;AACM,KAAM,iBAAiB;AAE7B;KACY,wBAAwB;AAEpC;;;;AAIG;KACS,oBAAoB;AAEhC;KACY,2BAA2B;UAEtB,qBAAqB;oBACpB,2BAA2B;aAClC,oBAAoB;iBAChB,wBAAwB;UAC/B,iBAAiB;AACxB;AASD,cAAa,uBAAuB,EAAA,cAAA,CAAA,qBAAA;AAKpC;;;;;AAKG;AACH,iBAAgB,4BAA4B,WAAW,OAAO,CAAC,qBAAqB;;sBAGhE,qBAAqB;AAExC;AAED;AACA,iBAAgB,2BAA2B,IAAI,qBAAqB;;ACRpE;KACY,4BAA4B;AAOxC;;;;;;;;;;;;;;;AAeG;AACH,cA4Ba,eAAgB,YAAW,oBAAoB,EAAE,MAAM,EAAE,SAAS;;oBAE/D,aAAA,CAAA,WAAA;;2BAEO,aAAA,CAAA,WAAA;AACrB;;;AAGG;wBACe,aAAA,CAAA,WAAA;;mBAEL,aAAA,CAAA,WAAA;mBACA,aAAA,CAAA,WAAA,CAAA,iBAAA;0BACO,aAAA,CAAA,WAAA,CAAA,wBAAA;6BACG,aAAA,CAAA,WAAA,CAAA,2BAAA;sBACP,aAAA,CAAA,WAAA,CAAA,oBAAA;;uBAEC,aAAA,CAAA,wBAAA;uBAGA,aAAA,CAAA,wBAAA;sBAGD,aAAA,CAAA,wBAAA;uBAGC,aAAA,CAAA,wBAAA;;wBAIC,aAAA,CAAA,wBAAA;AAElB;;;;;AAKG;0BACiB,aAAA,CAAA,gBAAA,CAAA,aAAA;AAEpB;AACA;AACA;AACA;;;;AAIG;AACH;AACA;AACA;AAGA;AACA;AAGA;AACA;AAIA;AACA;;;wBAIkB,aAAA,CAAA,MAAA;2BAEG,aAAA,CAAA,MAAA;kCAOO,aAAA,CAAA,MAAA,CAAA,wBAAA;qCACG,aAAA,CAAA,MAAA,CAAA,2BAAA;AAG/B;AACiC;8BACT,aAAA,CAAA,MAAA,CAAA,oBAAA;+BACC,aAAA,CAAA,MAAA;+BAOA,aAAA,CAAA,MAAA;8BAGD,aAAA,CAAA,MAAA;+BAGC,aAAA,CAAA,MAAA;AAGzB,qCAA+B,aAAA,CAAA,MAAA;AAK/B,mCAA6B,aAAA,CAAA,MAAA;AAK7B,oCAA8B,aAAA,CAAA,MAAA;AAI9B,oCAA8B,aAAA,CAAA,MAAA;AAG9B,qCAA+B,aAAA,CAAA,MAAA;;AAkB/B;;;;AAIG;;;AAMH;AAIA;;;;AAIG;AACH,kCAA8B,4BAA4B,UAAU,KAAK;;AAYzE,yCAAqC,4BAA4B,UAAU,KAAK;;;AAYhF;;;;AAaA;;;AAGG;AACH,sBAAkB,eAAe,GAAG,gBAAgB;AAMpD;oDAxMW,eAAe;sDAAf,eAAe;AA+N3B;;","names":[]}