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

package/types/slotted-angular-table-of-contents.d.ts

@@ -0,0 +1,210 @@
+import * as _slotted_core_i18n from '@slotted/core/i18n';
+import { PartialMessages, TableOfContentsMessages } from '@slotted/core/i18n';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, ElementRef, TemplateRef } from '@angular/core';
+import { ChangeRequest } from '@slotted/core/state';
+
+/** The row height step, on the control scale. */
+type TableOfContentsSize = 'sm' | 'md' | 'lg';
+/**
+ * The column beside a page, the bar under its title, or the trigger with the
+ * current label that opens the list under it. Not decided by width: a sidebar
+ * column is narrower than a phone's bar, so the width does not say which one
+ * the consumer wants.
+ */
+type TableOfContentsLayout = 'vertical' | 'horizontal' | 'collapsed';
+/** What a press does to the URL. `push` and `replace` write `history`; `none` leaves it. */
+type TableOfContentsHistory = 'push' | 'replace' | 'none';
+/** Why the current target moved. `scroll` is the observer answering the position. */
+type TableOfContentsValueReason = 'scroll' | 'pointer' | 'keyboard' | 'programmatic';
+/** Why the collapsed list opened or closed. */
+type TableOfContentsOpenReason = 'pointer' | 'keyboard' | 'select' | 'escape' | 'outsidePress' | 'programmatic';
+/** One entry of the list, when the list is given as data. */
+interface TableOfContentsItemData {
+    /** The target's id, without the hash. */
+    id: string;
+    label: string;
+    children?: readonly TableOfContentsItemData[] | undefined;
+}
+/** What an application sets once for every list under it. */
+interface TableOfContentsDefaults {
+    history: TableOfContentsHistory;
+    landmark: boolean;
+    layout: TableOfContentsLayout;
+    levels: readonly [number, number];
+    numbered: boolean;
+    offset: number;
+    size: TableOfContentsSize;
+    sticky: boolean;
+}
+/** The contract's defaults. */
+declare const TABLE_OF_CONTENTS_FALLBACK: TableOfContentsDefaults;
+declare const TABLE_OF_CONTENTS_DEFAULTS: InjectionToken<TableOfContentsDefaults>;
+/**
+ * An application decides once how its lists read — the levels a document
+ * outlines, whether the column pins, what a press does to the URL — rather
+ * than repeating it on every page. A list that states any of them itself
+ * still wins. Its words come from the language in force (`provideSlotted`).
+ */
+declare function provideTableOfContentsDefaults(defaults: Partial<TableOfContentsDefaults>): {
+    provide: InjectionToken<TableOfContentsDefaults>;
+    useFactory: () => TableOfContentsDefaults;
+};
+declare function injectTableOfContentsDefaults(): TableOfContentsDefaults;
+declare class SlTableOfContentsIdFactory {
+    private count;
+    next(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlTableOfContentsIdFactory, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+/**
+ * The tolerance under the reading line: a target whose top is within it is
+ * taken as reached, so a heading landed on by a press — sitting exactly at
+ * the line, give or take a subpixel — is the one marked. Ant's `bounds`.
+ */
+declare const TABLE_OF_CONTENTS_BOUNDS = 4;
+/** What the link template is handed: the entry, and whether it is current. */
+interface TableOfContentsLinkContext {
+    $implicit: TableOfContentsItemData;
+    current: boolean;
+}
+/**
+ * The content of every link, as a template: `<ng-template slTableOfContentsLink let-entry>`.
+ * Without one the link shows the entry's label.
+ */
+declare class SlTableOfContentsLink {
+    readonly template: TemplateRef<TableOfContentsLinkContext>;
+    static ngTemplateContextGuard(_directive: SlTableOfContentsLink, context: unknown): context is TableOfContentsLinkContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlTableOfContentsLink, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlTableOfContentsLink, "ng-template[slTableOfContentsLink]", never, {}, {}, never, never, true, never>;
+}
+/** The list's title, as a template: `<ng-template slTableOfContentsLabel>`. */
+declare class SlTableOfContentsLabel {
+    readonly template: TemplateRef<unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlTableOfContentsLabel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlTableOfContentsLabel, "ng-template[slTableOfContentsLabel]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * A list of links into the document the reader is in, with the link of the
+ * place in view marked.
+ *
+ * The directive goes on the consumer's own element — `<nav slTableOfContents>`
+ * standing alone, `<div slTableOfContents>` inside a landmark that already has
+ * a name. `landmark` decides whether the name is written; the element is the
+ * consumer's, as it is everywhere in this ecosystem.
+ *
+ * **Two ways in, one list.** `items` as data, or `source` — a region whose
+ * headings are read after the view is built by `@slotted/core/outline` and
+ * read again when the region's subtree changes. A template Angular would not
+ * write a nested list by hand, so there are no parts to compose; a
+ * `slTableOfContentsLink` template shapes every link instead.
+ *
+ * **Two values, two models.** `value` is the current target and `open` is
+ * whether the collapsed list is shown. The spy asks `value` to move with the
+ * reason `scroll`; a press asks with `pointer` or `keyboard` before it
+ * scrolls, and the scroll happens whether or not the request is accepted.
+ */
+declare class SlTableOfContents {
+    /** The current target's id, without the hash. Two-way, so a template may bind it directly. */
+    readonly value: _angular_core.ModelSignal<string | null>;
+    /** Whether the collapsed list is shown. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** The list as data. */
+    readonly items: _angular_core.InputSignal<readonly TableOfContentsItemData[] | undefined>;
+    /** The region whose headings make the list, read after the view is built. */
+    readonly source: _angular_core.InputSignal<HTMLElement | ElementRef<HTMLElement> | null | undefined>;
+    /** The lowest and highest heading level `source` keeps. */
+    readonly levels: _angular_core.InputSignal<readonly [number, number] | undefined>;
+    /** A heading matching this selector, or inside one, is left out of `source`. */
+    readonly exclude: _angular_core.InputSignal<string | undefined>;
+    /** The element that scrolls. Derived from the first target when unset. */
+    readonly scroller: _angular_core.InputSignal<HTMLElement | ElementRef<HTMLElement> | null | undefined>;
+    /** What to add under the page's chrome, in CSS pixels. */
+    readonly offset: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
+    readonly layout: _angular_core.InputSignal<TableOfContentsLayout | undefined>;
+    readonly size: _angular_core.InputSignal<TableOfContentsSize | undefined>;
+    readonly history: _angular_core.InputSignal<TableOfContentsHistory | undefined>;
+    readonly sticky: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly numbered: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /** Whether the host is the navigation landmark and takes its name. */
+    readonly landmark: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /** The list's title, as text. A `slTableOfContentsLabel` template wins over it. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Rows of skeleton in the list's place. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    /**
+     * Words laid over the catalog of the language in force: the landmark's name
+     * when no label is given, and the collapsed trigger's fixed text
+     * (`navigation`). A static `aria-label` still wins.
+     */
+    readonly messages: _angular_core.InputSignal<PartialMessages<TableOfContentsMessages> | undefined>;
+    /** One output for one transition, carrying the reason and the event. */
+    readonly valueChangeRequest: _angular_core.OutputEmitterRef<ChangeRequest<string | null>>;
+    readonly openChangeRequest: _angular_core.OutputEmitterRef<ChangeRequest<boolean>>;
+    private readonly defaults;
+    private readonly writtenLabel;
+    private readonly writtenLabelledBy;
+    readonly host: HTMLElement;
+    private readonly destroyRef;
+    private readonly ids;
+    readonly panelId: string;
+    readonly labelId: string;
+    readonly skeletonRows: string[];
+    readonly linkTemplate: _angular_core.Signal<SlTableOfContentsLink | undefined>;
+    readonly labelTemplate: _angular_core.Signal<SlTableOfContentsLabel | undefined>;
+    private readonly panel;
+    private readonly marker;
+    private readonly trigger;
+    readonly resolvedLayout: _angular_core.Signal<TableOfContentsLayout>;
+    readonly resolvedSize: _angular_core.Signal<TableOfContentsSize>;
+    readonly resolvedHistory: _angular_core.Signal<TableOfContentsHistory>;
+    readonly resolvedSticky: _angular_core.Signal<boolean>;
+    readonly resolvedNumbered: _angular_core.Signal<boolean>;
+    readonly resolvedLandmark: _angular_core.Signal<boolean>;
+    readonly resolvedLevels: _angular_core.Signal<readonly [number, number]>;
+    readonly resolvedOffset: _angular_core.Signal<number>;
+    /** The family's words in the language in force, with this list's `messages` laid over them. */
+    readonly t: _slotted_core_i18n.FamilyTranslator<TableOfContentsMessages>;
+    readonly collapsed: _angular_core.Signal<boolean>;
+    /** The headings of `source`, as the list reads them. */
+    private readonly outline;
+    /** The list, whichever way it came. */
+    readonly entries: _angular_core.Signal<readonly TableOfContentsItemData[]>;
+    readonly flat: _angular_core.Signal<TableOfContentsItemData[]>;
+    readonly empty: _angular_core.Signal<boolean>;
+    readonly hasLabel: _angular_core.Signal<boolean>;
+    readonly resolvedLabel: _angular_core.Signal<string>;
+    readonly currentLabel: _angular_core.Signal<string>;
+    protected readonly ariaLabelledBy: _angular_core.Signal<string | null>;
+    protected readonly ariaLabel: _angular_core.Signal<string | null>;
+    private pendingFocus;
+    constructor();
+    private spy;
+    private requestValue;
+    private requestOpen;
+    private measureMarker;
+    /** The links the keyboard walks: every link while the list is shown, none while it is folded. */
+    links(): HTMLElement[];
+    /**
+     * A press asks `value`, then the list scrolls the target under the chrome,
+     * writes the URL and focuses the target. Cmd-click, Ctrl-click and the
+     * middle button are the platform's: they open the fragment in a new tab.
+     */
+    protected onLinkClick(event: MouseEvent, id: string): void;
+    private navigate;
+    protected toggle(event: MouseEvent): void;
+    protected onKeyDown(event: KeyboardEvent): void;
+    /** Focuses the first link, or the trigger in the collapsed layout. */
+    focus(): void;
+    /** Reads the headings again and measures again. */
+    refresh(): void;
+    /** Scrolls to a target and asks `value` to move with the reason `programmatic`; the URL is left. */
+    scrollTo(id: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlTableOfContents, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlTableOfContents, "[slTableOfContents]", ["slTableOfContents"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "source": { "alias": "source"; "required": false; "isSignal": true; }; "levels": { "alias": "levels"; "required": false; "isSignal": true; }; "exclude": { "alias": "exclude"; "required": false; "isSignal": true; }; "scroller": { "alias": "scroller"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "history": { "alias": "history"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "numbered": { "alias": "numbered"; "required": false; "isSignal": true; }; "landmark": { "alias": "landmark"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "open": "openChange"; "valueChangeRequest": "valueChangeRequest"; "openChangeRequest": "openChangeRequest"; }, ["linkTemplate", "labelTemplate"], never, true, never>;
+}
+
+export { SlTableOfContents, SlTableOfContentsIdFactory, SlTableOfContentsLabel, SlTableOfContentsLink, TABLE_OF_CONTENTS_BOUNDS, TABLE_OF_CONTENTS_DEFAULTS, TABLE_OF_CONTENTS_FALLBACK, injectTableOfContentsDefaults, provideTableOfContentsDefaults };
+export type { TableOfContentsDefaults, TableOfContentsHistory, TableOfContentsItemData, TableOfContentsLayout, TableOfContentsLinkContext, TableOfContentsOpenReason, TableOfContentsSize, TableOfContentsValueReason };
+//# sourceMappingURL=slotted-angular-table-of-contents.d.ts.map

package/types/slotted-angular-table-of-contents.d.ts.map

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