@area8975/ui 0.2.2-dev.33 → 0.2.2-dev.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@area8975/ui",
-  "version": "0.2.2-dev.33",
+  "version": "0.2.2-dev.36",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",

package/types/area8975-ui.d.ts

@@ -1002,12 +1002,12 @@ export declare class UiFieldComponent {
 export declare class UiInputComponent<ValueType = string> {
   readonly value: import("@angular/core").ModelSignal<ValueType>;
   readonly classes: import("@angular/core").InputSignal<string>;
-  readonly type: import("@angular/core").InputSignal<"number" | "color" | "text" | "search" | "time" | "email" | "tel" | "url" | "password" | "date" | "datetime-local" | "month" | "week">;
+  readonly type: import("@angular/core").InputSignal<"number" | "search" | "time" | "color" | "text" | "email" | "tel" | "url" | "password" | "date" | "datetime-local" | "month" | "week">;
   readonly id: import("@angular/core").InputSignal<string>;
   readonly name: import("@angular/core").InputSignal<string>;
   readonly placeholder: import("@angular/core").InputSignal<string>;
   readonly autocomplete: import("@angular/core").InputSignal<string>;
-  readonly inputmode: import("@angular/core").InputSignal<"" | "decimal" | "none" | "text" | "search" | "numeric" | "email" | "tel" | "url">;
+  readonly inputmode: import("@angular/core").InputSignal<"" | "decimal" | "none" | "search" | "text" | "numeric" | "email" | "tel" | "url">;
   readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
@@ -1038,7 +1038,7 @@ export declare class UiInputComponent<ValueType = string> {
   readonly trailingElement: import("@angular/core").Signal<TemplateRef<unknown> | undefined>;
   protected readonly revealed: import("@angular/core").WritableSignal<boolean>;
   protected readonly canReveal: import("@angular/core").Signal<boolean>;
-  protected readonly shownType: import("@angular/core").Signal<"number" | "color" | "text" | "search" | "time" | "email" | "tel" | "url" | "password" | "date" | "datetime-local" | "month" | "week">;
+  protected readonly shownType: import("@angular/core").Signal<"number" | "search" | "time" | "color" | "text" | "email" | "tel" | "url" | "password" | "date" | "datetime-local" | "month" | "week">;
   readonly generatedClasses: import("@angular/core").Signal<string>;
   protected handleInput(event: Event): void;
   protected handleFocus(event: FocusEvent): void;
@@ -1789,7 +1789,7 @@ export type BadgeSize = typeof BadgeSizes[number];
  * A general-purpose button.
  */
 export declare class UiButtonComponent {
-  readonly appearance: import("@angular/core").InputSignal<"none" | "solid" | "link" | "outline" | "ghost" | "white">;
+  readonly appearance: import("@angular/core").InputSignal<"none" | "link" | "solid" | "outline" | "ghost" | "white">;
   readonly intent: import("@angular/core").InputSignal<"none" | "primary" | "secondary" | "success" | "warning" | "danger">;
   readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
   readonly classes: import("@angular/core").InputSignal<string>;
@@ -1802,6 +1802,9 @@ export declare class UiButtonComponent {
    * `disabled` is set explicitly, or implicitly while `loading` is true.
    */
   readonly isDisabled: import("@angular/core").Signal<boolean>;
+  private readonly group;
+  /** In a segmented group the button matches a `ui-segmented` option instead of its own variant. */
+  private readonly segmented;
   readonly generatedClasses: import("@angular/core").Signal<string>;
   private readonly intentAndAppearanceClasses;
   private readonly sizeClasses;
@@ -1874,6 +1877,8 @@ export type ButtonSize = typeof ButtonSizes[number];
 /** @see {@link ButtonTypes} */
 export type ButtonType = typeof ButtonTypes[number];
 /**
+ * Buttons that belong together, joined edge to edge or in a segmented track.
+ *
  * @example
  * ```html
  * <ui-button-group>
@@ -1884,10 +1889,29 @@ export type ButtonType = typeof ButtonTypes[number];
  * ```
  */
 export declare class UiButtonGroupComponent {
+  /** `segmented` matches `ui-segmented`, so the two can sit side by side. Buttons inside ignore their own appearance, intent and size. */
+  readonly appearance: import("@angular/core").InputSignal<"attached" | "segmented">;
   readonly buttons: import("@angular/core").Signal<readonly UiButtonComponent[]>;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiButtonGroupComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<UiButtonGroupComponent, "ui-button-group", never, {}, {}, ["buttons"], ["*"], true, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiButtonGroupComponent, "ui-button-group", never, {
+    "appearance": {
+      "alias": "appearance";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, ["buttons"], ["*"], true, never>;
 }
+/**
+ * How the buttons in a group are drawn. `"attached"` joins them edge to edge,
+ * `"segmented"` sits them in a track that matches `ui-segmented`.
+ */
+export declare const ButtonGroupAppearances: readonly ["attached", "segmented"];
+/** @see {@link ButtonGroupAppearances} */
+export type ButtonGroupAppearance = typeof ButtonGroupAppearances[number];
+/** Lets a button take its look from the group it's in. */
+export declare const UI_BUTTON_GROUP: InjectionToken<{
+  appearance: Signal<ButtonGroupAppearance>;
+}>;
 /** Which day each calendar row starts on. 0 is Sunday, 1 is Monday. */
 export declare const WeekStarts: readonly [0, 1];
 /** @see {@link WeekStarts} */
@@ -2049,6 +2073,83 @@ export declare class UiContainerComponent {
   static ɵfac: i0.ɵɵFactoryDeclaration<UiContainerComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiContainerComponent, "ui-container", never, {}, {}, never, ["*"], true, never>;
 }
+/** The disclosure's content, only rendered while it's expanded. */
+export declare class UiDisclosurePanelDirective {
+  readonly template: TemplateRef<any>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiDisclosurePanelDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiDisclosurePanelDirective, "ng-template[uiDisclosurePanel]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Shows and hides a panel of content from a `ui-disclosure-trigger` inside it.
+ * The content goes in an `<ng-template uiDisclosurePanel>`, rendered after
+ * everything else in the disclosure.
+ */
+export declare class UiDisclosureComponent {
+  readonly expanded: import("@angular/core").ModelSignal<boolean>;
+  /** The panel's id, which the trigger's aria-controls points at. Generated when left out. */
+  readonly panelId: import("@angular/core").InputSignal<string>;
+  private readonly generatedId;
+  readonly regionId: import("@angular/core").Signal<string>;
+  protected readonly panel: import("@angular/core").Signal<UiDisclosurePanelDirective | undefined>;
+  readonly toggle: () => void;
+  readonly open: () => void;
+  readonly close: () => void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiDisclosureComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiDisclosureComponent, "ui-disclosure", ["uiDisclosure"], {
+    "expanded": {
+      "alias": "expanded";
+      "required": false;
+      "isSignal": true;
+    };
+    "panelId": {
+      "alias": "panelId";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "expanded": "expandedChange";
+  }, ["panel"], ["*"], true, never>;
+}
+/**
+ * How a disclosure trigger looks. `"section"` is a full-width header,
+ * `"row"` stretches the trigger over its row - see
+ * `UiDisclosureTriggerComponent.appearance`.
+ */
+export declare const DisclosureTriggerAppearances: readonly ["section", "row"];
+/** @see {@link DisclosureTriggerAppearances} */
+export type DisclosureTriggerAppearance = typeof DisclosureTriggerAppearances[number];
+/** A chevron that turns with the `ui-disclosure` it's in. Put it in the trigger, or anywhere in a row. */
+export declare class UiDisclosureChevronComponent {
+  protected readonly disclosure: UiDisclosureComponent;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiDisclosureChevronComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiDisclosureChevronComponent, "ui-disclosure-chevron", never, {}, {}, never, never, true, never>;
+}
+/**
+ * The button that expands and collapses the `ui-disclosure` it's in.
+ *
+ * As a `"row"`, its hit area and focus ring cover the nearest positioned
+ * element around it, so make the row `relative`, otherwise it's the whole
+ * disclosure. Give other controls in the row `class="relative"` so they stay
+ * clickable above it.
+ */
+export declare class UiDisclosureTriggerComponent {
+  protected readonly disclosure: UiDisclosureComponent;
+  readonly appearance: import("@angular/core").InputSignal<"section" | "row">;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiDisclosureTriggerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiDisclosureTriggerComponent, "ui-disclosure-trigger", never, {
+    "appearance": {
+      "alias": "appearance";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
 export declare class UiDrawerComponent {
   readonly isOpen: import("@angular/core").WritableSignal<boolean>;
   readonly enableBackdrop: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
@@ -2131,7 +2232,7 @@ export declare class UiKpiComponent {
   readonly value: import("@angular/core").InputSignal<string>;
   readonly hint: import("@angular/core").InputSignal<string>;
   readonly icon: import("@angular/core").InputSignal<keyof import("@ng-icons/core").NgIconNameMap | undefined>;
-  readonly iconPosition: import("@angular/core").InputSignal<"right" | "left">;
+  readonly iconPosition: import("@angular/core").InputSignal<"left" | "right">;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiKpiComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiKpiComponent, "ui-kpi", never, {
     "label": {
@@ -2381,7 +2482,7 @@ export declare class UiProgressComponent {
   readonly shape: import("@angular/core").InputSignal<"square" | "straight" | "rounded">;
   readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
   readonly title: import("@angular/core").InputSignal<string>;
-  readonly labelPosition: import("@angular/core").InputSignal<"none" | "top" | "end" | "floating" | "inside">;
+  readonly labelPosition: import("@angular/core").InputSignal<"none" | "end" | "top" | "floating" | "inside">;
   readonly labelWith: import("@angular/core").InputSignal<(value: number, max: number) => string>;
   /** Splits the bar into this many blocks. */
   readonly steps: import("@angular/core").InputSignal<number | null>;
@@ -3479,7 +3580,7 @@ export declare class UiDatepickerComponent {
 }
 export declare class UiDropdownButtonComponent {
   readonly intent: import("@angular/core").InputSignal<"none" | "primary" | "secondary" | "success" | "warning" | "danger">;
-  readonly appearance: import("@angular/core").InputSignal<"none" | "solid" | "link" | "outline" | "ghost" | "white">;
+  readonly appearance: import("@angular/core").InputSignal<"none" | "link" | "solid" | "outline" | "ghost" | "white">;
   readonly icon: import("@angular/core").InputSignal<string>;
   readonly isOpen: import("@angular/core").ModelSignal<boolean>;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiDropdownButtonComponent, never>;
@@ -3708,6 +3809,8 @@ export interface TableOptionsFacet {
   kind: 'options';
   options: TableFacetOption[];
   multiple?: boolean;
+  /** Shows this many options, plus any picked, then a "Show N more" toggle. Leave out to show them all. */
+  visibleOptions?: number;
 }
 /** Writes `{ start, end }` ISO dates under `id`. */
 export interface TableDateRangeFacet {
@@ -3736,6 +3839,7 @@ export declare class UiTableFiltersComponent {
   protected readonly anyDate: DateMode;
   protected readonly customDate: DateMode;
   private readonly customDates;
+  private readonly expanded;
   private readonly linked;
   protected readonly appliedCount: import("@angular/core").Signal<number>;
   protected readonly anyApplied: import("@angular/core").Signal<boolean>;
@@ -3748,12 +3852,19 @@ export declare class UiTableFiltersComponent {
   protected pick(facet: TableOptionsFacet, value: unknown): void;
   protected isChecked(facet: TableOptionsFacet, option: TableFacetOption): boolean;
   protected check(facet: TableOptionsFacet, option: TableFacetOption, checked: boolean): void;
+  protected isExpanded(facet: TableOptionsFacet): boolean;
+  protected isShown(facet: TableOptionsFacet, option: TableFacetOption, index: number): boolean;
+  /** How many options collapsing hides, 0 when there's nothing to toggle. */
+  protected hiddenCount(facet: TableOptionsFacet): number;
+  protected toggleExpanded(facet: TableOptionsFacet): void;
   protected range(facet: TableDateRangeFacet): DateRange;
   protected dateMode(facet: TableDateRangeFacet): DateMode;
   protected pickDate(facet: TableDateRangeFacet, mode: DateMode): void;
   protected setRange(facet: TableDateRangeFacet, range: DateRange): void;
   protected clearAll(): void;
   private setCustom;
+  private isPastCutoff;
+  private isSelected;
   private apply;
   private write;
   private currentFilters;