@star-ng/ui 0.0.0-stage → 0.1.0

package/types/star-ng-ui-select.d.ts

@@ -0,0 +1,540 @@
+import { FormValueControl } from "@angular/forms/signals";
+import { StarOptionKey } from "@star-ng/ui/core";
+import { StarMenuItem } from "@star-ng/ui/menu";
+import * as i0 from "@angular/core";
+import { ElementRef, TemplateRef } from "@angular/core";
+import { ConnectedPosition } from "@angular/cdk/overlay";
+interface Leaf<TOption, TValue> {
+  readonly option: TOption;
+  readonly value: TValue;
+  /** Labels from the top level to the leaf. */
+  readonly path: readonly string[];
+}
+/**
+ * Cascade select (PrimeNG `p-cascadeselect`): choose one leaf of nested options, for example
+ * country → state → city. The popup is a menu with submenus (CDK Menu: arrow keys, typeahead,
+ * Escape). The value is the leaf (`optionValue`, or the whole option).
+ *
+ * ```html
+ * <star-cascade-select [options]="countries" optionLabel="name" optionChildren="children"
+ *                     optionValue="code" [(value)]="city" showPath />
+ * ```
+ */
+export declare class StarCascadeSelect<TOption, TValue = TOption> implements FormValueControl<TValue | null> {
+  /** Keeps the CDK direction (overlays and menus) in step with `<html dir>`. */
+  private readonly directionSync;
+  protected readonly text: import("@star-ng/ui/core").StarUiText;
+  protected readonly positions: import("@angular/cdk/overlay").ConnectedPosition[];
+  readonly value: import("@angular/core").ModelSignal<TValue | null>;
+  readonly options: import("@angular/core").InputSignal<readonly TOption[]>;
+  readonly optionLabel: import("@angular/core").InputSignal<StarOptionKey<TOption> | null>;
+  /** Value stored in the form, read from the leaf. Omit to store the whole leaf option. */
+  readonly optionValue: import("@angular/core").InputSignal<StarOptionKey<TOption> | null>;
+  /** Property (or function) with the child options. An option without children is a leaf. */
+  readonly optionChildren: import("@angular/core").InputSignal<StarOptionKey<TOption, readonly TOption[] | null | undefined>>;
+  readonly optionDisabled: import("@angular/core").InputSignal<StarOptionKey<TOption> | null>;
+  readonly compareWith: import("@angular/core").InputSignal<(a: TValue, b: TValue) => boolean>;
+  readonly placeholder: import("@angular/core").InputSignal<string | null>;
+  /** Show the whole path ("Germany / Bavaria / Munich") instead of the leaf label. */
+  readonly showPath: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly showClear: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md">;
+  readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
+  readonly inputId: import("@angular/core").InputSignal<string>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly touched: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  /** The user chose a leaf. */
+  readonly optionSelect: import("@angular/core").OutputEmitterRef<TOption>;
+  private childrenOf;
+  private labelOf;
+  /** Every leaf with its path, in display order. */
+  private readonly leaves;
+  protected readonly selected: import("@angular/core").Signal<Leaf<TOption, TValue> | null>;
+  /** The options as menu items: a parent opens a submenu, a leaf sets the value. */
+  protected readonly menuItems: import("@angular/core").Signal<readonly StarMenuItem[]>;
+  /**
+   * Accessible name of the trigger button: the label and the text on the button, so the visible
+   * text is part of the name (WCAG 2.5.3). `null` without `ariaLabel`: a `star-field` label then
+   * names the button.
+   */
+  protected readonly triggerName: import("@angular/core").Signal<string | null>;
+  protected display(leaf: Leaf<TOption, TValue>): string;
+  private choose;
+  clear(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarCascadeSelect<any, any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarCascadeSelect<any, any>, "star-cascade-select", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "options": {
+      "alias": "options";
+      "required": false;
+      "isSignal": true;
+    };
+    "optionLabel": {
+      "alias": "optionLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "optionValue": {
+      "alias": "optionValue";
+      "required": false;
+      "isSignal": true;
+    };
+    "optionChildren": {
+      "alias": "optionChildren";
+      "required": false;
+      "isSignal": true;
+    };
+    "optionDisabled": {
+      "alias": "optionDisabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "compareWith": {
+      "alias": "compareWith";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "showPath": {
+      "alias": "showPath";
+      "required": false;
+      "isSignal": true;
+    };
+    "showClear": {
+      "alias": "showClear";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "inputId": {
+      "alias": "inputId";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "readonly": {
+      "alias": "readonly";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+    "touched": {
+      "alias": "touched";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "touch": "touch";
+    "optionSelect": "optionSelect";
+  }, never, never, true, never>;
+}
+/** Context of the custom option template: `<ng-template starOption let-option let-selected="selected">`. */
+export interface StarOptionContext<T> {
+  readonly $implicit: T;
+  readonly selected: boolean;
+  readonly index: number;
+}
+/** Custom option row template for `star-select` and `star-multi-select`. */
+export declare class StarOptionTemplate<T = unknown> {
+  /** Optional: pass the options array to type `let-option` in strict templates. */
+  readonly starOptionOf: import("@angular/core").InputSignal<readonly T[] | null>;
+  readonly template: TemplateRef<StarOptionContext<T>>;
+  static ngTemplateContextGuard<T>(_dir: StarOptionTemplate<T>, _ctx: unknown): _ctx is StarOptionContext<T>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarOptionTemplate<any>, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<StarOptionTemplate<any>, "ng-template[starOption]", never, {
+    "starOptionOf": {
+      "alias": "starOptionOf";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** One rendered line of the option list: a group heading or an option. */
+export type StarListRow<T> = {
+  readonly kind: 'group';
+  readonly key: string;
+  readonly label: string;
+  readonly id: string;
+} | {
+  readonly kind: 'option';
+  readonly key: string;
+  readonly option: T;
+  /** Index in the visible options (keyboard order). */
+  readonly index: number;
+  readonly groupId: string | null;
+};
+/**
+ * Shared state and keyboard model of the dropdown list controls (WAI-ARIA combobox +
+ * listbox with `aria-activedescendant`). Subclasses add the selection model.
+ */
+export declare abstract class StarOptionListBase<TOption, TValue> {
+  /** Keeps the CDK direction (overlays and menus) in step with `<html dir>`. */
+  private readonly directionSync;
+  protected readonly text: import("@star-ng/ui/core").StarUiText;
+  private readonly ids;
+  readonly options: import("@angular/core").InputSignal<readonly TOption[]>;
+  readonly optionLabel: import("@angular/core").InputSignal<StarOptionKey<TOption> | null>;
+  /** Value stored in the form. Omit to store the whole option. */
+  readonly optionValue: import("@angular/core").InputSignal<StarOptionKey<TOption> | null>;
+  readonly optionDisabled: import("@angular/core").InputSignal<StarOptionKey<TOption> | null>;
+  /** Equality for values (default `Object.is`). Use for object values from the server. */
+  readonly compareWith: import("@angular/core").InputSignal<(a: TValue, b: TValue) => boolean>;
+  /**
+   * Group heading of an option (property name or function). Options with the same heading
+   * show together under it, in the order in which the headings first appear.
+   */
+  readonly optionGroup: import("@angular/core").InputSignal<StarOptionKey<TOption> | null>;
+  /**
+   * Renders only the lines in view, for long option lists. Every line has the height
+   * `virtualItemSize` and option text stays on one line.
+   */
+  readonly virtualScroll: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Line height in pixels with `virtualScroll`. */
+  readonly virtualItemSize: import("@angular/core").InputSignal<number>;
+  readonly placeholder: import("@angular/core").InputSignal<string | null>;
+  readonly filter: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly filterPlaceholder: import("@angular/core").InputSignal<string | null>;
+  readonly showClear: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly emptyMessage: import("@angular/core").InputSignal<string | null>;
+  readonly scrollHeight: import("@angular/core").InputSignal<string>;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md">;
+  readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
+  readonly ariaLabelledBy: import("@angular/core").InputSignal<string | null>;
+  readonly inputId: import("@angular/core").InputSignal<string>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly touched: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly name: import("@angular/core").InputSignal<string>;
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  readonly opened: import("@angular/core").OutputEmitterRef<void>;
+  readonly closed: import("@angular/core").OutputEmitterRef<void>;
+  readonly filterChange: import("@angular/core").OutputEmitterRef<string>;
+  protected readonly optionTemplate: import("@angular/core").Signal<StarOptionTemplate<any> | undefined>;
+  protected readonly trigger: import("@angular/core").Signal<ElementRef<HTMLElement>>;
+  private readonly filterInput;
+  protected readonly positions: ConnectedPosition[];
+  protected readonly listId: string;
+  protected readonly open: import("@angular/core").WritableSignal<boolean>;
+  protected readonly filterValue: import("@angular/core").WritableSignal<string>;
+  protected readonly activeIndex: import("@angular/core").WritableSignal<number>;
+  protected readonly showInvalid: import("@angular/core").Signal<boolean>;
+  protected readonly interactive: import("@angular/core").Signal<boolean>;
+  protected readonly visibleOptions: import("@angular/core").Signal<readonly TOption[]>;
+  /** With `optionGroup`: keeps each group together, in the order the groups first appear. */
+  protected groupedOrder(options: readonly TOption[]): readonly TOption[];
+  /** Group headings and options, in display order. */
+  protected readonly rows: import("@angular/core").Signal<readonly StarListRow<TOption>[]>;
+  private readonly listScrollTop;
+  private readonly listHeight;
+  /** First and last rendered line, and the heights of the lines left out. */
+  protected readonly virtualWindow: import("@angular/core").Signal<{
+    start: number;
+    end: number;
+    before: number;
+    after: number;
+  }>;
+  protected readonly renderedRows: import("@angular/core").Signal<readonly StarListRow<TOption>[]>;
+  protected onListScroll(event: Event): void;
+  protected readonly activeId: import("@angular/core").Signal<string | null>;
+  protected readonly emptyText: import("@angular/core").Signal<string>;
+  private typeahead;
+  private typeaheadTimer;
+  constructor();
+  /** True when the option is part of the current value. */
+  protected abstract isSelected(option: TOption): boolean;
+  /** Applies the user's choice of an option. */
+  protected abstract choose(option: TOption): void;
+  /** Index to highlight when the panel opens. */
+  protected abstract initialActiveIndex(): number;
+  /** Whether choosing an option closes the panel. */
+  protected abstract readonly closeOnChoose: boolean;
+  labelOf(option: TOption): string;
+  protected groupOf(option: TOption): string;
+  protected valueOf(option: TOption): TValue;
+  protected isDisabled(option: TOption): boolean;
+  protected equals(a: TValue, b: TValue): boolean;
+  protected optionId(index: number): string;
+  protected optionContext(option: TOption, index: number): StarOptionContext<TOption>;
+  openPanel(): void;
+  closePanel(focusTrigger?: boolean): void;
+  protected toggle(): void;
+  focus(options?: FocusOptions): void;
+  protected onPanelAttached(): void;
+  protected onOutsideClick(event: MouseEvent): void;
+  /** Keeps focus on the trigger (or filter) while the user clicks inside the panel. */
+  protected onPanelMousedown(event: MouseEvent): void;
+  protected onTriggerBlur(): void;
+  protected onFilterInput(value: string): void;
+  protected onOptionClick(option: TOption, index: number): void;
+  /** Keyboard model for both the trigger and the filter input. */
+  protected onKeydown(event: KeyboardEvent): void;
+  private chooseActive;
+  private moveActive;
+  protected firstEnabledFrom(start: number, step: 1 | -1): number;
+  /** Type a letter to jump to the next option whose label starts with the typed text. */
+  private runTypeahead;
+  private scrollActiveIntoView;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarOptionListBase<any, any>, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<StarOptionListBase<any, any>, never, never, {
+    "options": {
+      "alias": "options";
+      "required": false;
+      "isSignal": true;
+    };
+    "optionLabel": {
+      "alias": "optionLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "optionValue": {
+      "alias": "optionValue";
+      "required": false;
+      "isSignal": true;
+    };
+    "optionDisabled": {
+      "alias": "optionDisabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "compareWith": {
+      "alias": "compareWith";
+      "required": false;
+      "isSignal": true;
+    };
+    "optionGroup": {
+      "alias": "optionGroup";
+      "required": false;
+      "isSignal": true;
+    };
+    "virtualScroll": {
+      "alias": "virtualScroll";
+      "required": false;
+      "isSignal": true;
+    };
+    "virtualItemSize": {
+      "alias": "virtualItemSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "filter": {
+      "alias": "filter";
+      "required": false;
+      "isSignal": true;
+    };
+    "filterPlaceholder": {
+      "alias": "filterPlaceholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "showClear": {
+      "alias": "showClear";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyMessage": {
+      "alias": "emptyMessage";
+      "required": false;
+      "isSignal": true;
+    };
+    "scrollHeight": {
+      "alias": "scrollHeight";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabelledBy": {
+      "alias": "ariaLabelledBy";
+      "required": false;
+      "isSignal": true;
+    };
+    "inputId": {
+      "alias": "inputId";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "readonly": {
+      "alias": "readonly";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+    "touched": {
+      "alias": "touched";
+      "required": false;
+      "isSignal": true;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "touch": "touch";
+    "opened": "opened";
+    "closed": "closed";
+    "filterChange": "filterChange";
+  }, ["optionTemplate"], never, true, never>;
+}
+/**
+ * Multiple-choice dropdown (PrimeNG `p-multiselect`): checkbox list, "select all", filter,
+ * chip or comma display, `maxSelectedLabels`, `selectionLimit` and clear. Same keyboard model
+ * as `star-select`; Enter / Space toggle the active option and keep the panel open.
+ *
+ * `<star-multi-select [options]="tags" optionLabel="name" optionValue="id" [(value)]="ids" display="chip" filter />`
+ */
+export declare class StarMultiSelect<TOption = unknown, TValue = TOption> extends StarOptionListBase<TOption, TValue> implements FormValueControl<readonly TValue[]> {
+  readonly value: import("@angular/core").ModelSignal<readonly TValue[]>;
+  /** `comma`: "A, B, C". `chip`: removable chips. */
+  readonly display: import("@angular/core").InputSignal<"comma" | "chip">;
+  /** Above this count the trigger shows "{n} items selected". */
+  readonly maxSelectedLabels: import("@angular/core").InputSignal<number>;
+  /** Maximum number of selected items (0 = no limit). Hides "select all". */
+  readonly selectionLimit: import("@angular/core").InputSignal<number>;
+  readonly showToggleAll: import("@angular/core").InputSignal<boolean>;
+  protected readonly closeOnChoose = false;
+  protected readonly selectedOptions: import("@angular/core").Signal<TOption[]>;
+  protected readonly collapsed: import("@angular/core").Signal<boolean>;
+  protected readonly selectedLabels: import("@angular/core").Signal<string>;
+  private readonly selectableVisible;
+  /** `true`, `false` or `'mixed'` for the "select all" box (over visible, enabled options). */
+  protected readonly allState: import("@angular/core").Signal<boolean | "mixed">;
+  protected isSelected(option: TOption): boolean;
+  protected choose(option: TOption): void;
+  protected initialActiveIndex(): number;
+  remove(option: TOption): void;
+  protected toggleAll(): void;
+  clear(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarMultiSelect<any, any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarMultiSelect<any, any>, "star-multi-select", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "display": {
+      "alias": "display";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxSelectedLabels": {
+      "alias": "maxSelectedLabels";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectionLimit": {
+      "alias": "selectionLimit";
+      "required": false;
+      "isSignal": true;
+    };
+    "showToggleAll": {
+      "alias": "showToggleAll";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+  }, never, never, true, never>;
+}
+/**
+ * Single-choice dropdown (PrimeNG `p-select`): typed options, `optionLabel` / `optionValue` /
+ * `optionDisabled`, filter, clear button, loading state, typeahead and full keyboard support
+ * (WAI-ARIA select-only combobox). The panel is a native popover, so it also works inside
+ * modal `star-dialog`s.
+ *
+ * ```html
+ * <star-select [options]="countries" optionLabel="name" optionValue="code"
+ *             [formField]="form.country" filter showClear placeholder="Country" />
+ * ```
+ */
+export declare class StarSelect<TOption = unknown, TValue = TOption> extends StarOptionListBase<TOption, TValue> implements FormValueControl<TValue | null> {
+  readonly value: import("@angular/core").ModelSignal<TValue | null>;
+  protected readonly closeOnChoose = true;
+  /** The option that matches the current value, or `undefined`. */
+  protected readonly selectedOption: import("@angular/core").Signal<TOption | undefined>;
+  protected isSelected(option: TOption): boolean;
+  protected choose(option: TOption): void;
+  protected initialActiveIndex(): number;
+  clear(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarSelect<any, any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarSelect<any, any>, "star-select", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+  }, never, never, true, never>;
+}
+export {};

package/types/star-ng-ui-skeleton.d.ts

@@ -0,0 +1,47 @@
+import * as i0 from "@angular/core";
+/**
+ * Loading placeholder (PrimeNG `p-skeleton`). Respects `prefers-reduced-motion`.
+ * `<star-skeleton width="60%" height="1rem" />`, `<star-skeleton shape="circle" size="2.5rem" />`
+ */
+export declare class StarSkeleton {
+  readonly shape: import("@angular/core").InputSignal<"rectangle" | "circle">;
+  readonly width: import("@angular/core").InputSignal<string>;
+  readonly height: import("@angular/core").InputSignal<string>;
+  /** Width and height together (squares and circles). */
+  readonly size: import("@angular/core").InputSignal<string | null>;
+  readonly borderRadius: import("@angular/core").InputSignal<string | null>;
+  readonly animation: import("@angular/core").InputSignal<"wave" | "none">;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarSkeleton, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarSkeleton, "star-skeleton", never, {
+    "shape": {
+      "alias": "shape";
+      "required": false;
+      "isSignal": true;
+    };
+    "width": {
+      "alias": "width";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "borderRadius": {
+      "alias": "borderRadius";
+      "required": false;
+      "isSignal": true;
+    };
+    "animation": {
+      "alias": "animation";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}