@area8975/ui 0.1.1-dev.13 → 0.1.1-dev.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@area8975/ui",
-  "version": "0.1.1-dev.13",
+  "version": "0.1.1-dev.17",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",

package/theme.css

@@ -140,6 +140,11 @@
     --background: var(--color-neutral-900);
     --sidebar: var(--card);
     --sidebar-line: var(--card-line);
+
+    /* menus sit on cards, Preline's item hover is the card's own colour so it never showed */
+    --dropdown-item-hover: var(--color-neutral-700);
+    --dropdown-item-focus: var(--color-neutral-700);
+    --dropdown-item-active: var(--color-neutral-700);
 }
 
 /*

package/types/area8975-ui.d.ts

@@ -3,6 +3,7 @@ import { ElementRef, EnvironmentProviders, InjectionToken, OnDestroy, OnInit, Pr
 import ApexCharts$1 from "apexcharts";
 import { Placement } from "@floating-ui/dom";
 import { Observable } from "rxjs";
+import { IconType } from "@ng-icons/core";
 /** One entry in a legend, the colour ties it to its marks. */
 export interface ChartLegendItem {
   name: string;
@@ -705,7 +706,7 @@ export declare class UiDropzoneComponent {
   readonly maxSize: import("@angular/core").InputSignal<number | null>;
   readonly title: import("@angular/core").InputSignal<string>;
   readonly hint: import("@angular/core").InputSignal<string>;
-  readonly icon: import("@angular/core").InputSignal<string>;
+  readonly icon: import("@angular/core").InputSignal<keyof import("@ng-icons/core").NgIconNameMap>;
   readonly rejected: import("@angular/core").OutputEmitterRef<FileRejection[]>;
   private readonly picker;
   private dragDepth;
@@ -1985,7 +1986,7 @@ export declare class UiKpiComponent {
   readonly label: import("@angular/core").InputSignal<string>;
   readonly value: import("@angular/core").InputSignal<string>;
   readonly hint: import("@angular/core").InputSignal<string>;
-  readonly icon: import("@angular/core").InputSignal<string | undefined>;
+  readonly icon: import("@angular/core").InputSignal<keyof import("@ng-icons/core").NgIconNameMap | undefined>;
   readonly iconPosition: import("@angular/core").InputSignal<"right" | "left">;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiKpiComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiKpiComponent, "ui-kpi", never, {
@@ -2315,6 +2316,8 @@ export declare class UiSegmentedComponent<T> {
   readonly value: import("@angular/core").ModelSignal<T>;
   /** What the options choose between, e.g. "How far back the charts go". */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Stretches to the container's width with the options sharing it evenly. */
+  readonly fill: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   protected readonly name: string;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiSegmentedComponent<any>, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiSegmentedComponent<any>, "ui-segmented", never, {
@@ -2333,6 +2336,11 @@ export declare class UiSegmentedComponent<T> {
       "required": true;
       "isSignal": true;
     };
+    "fill": {
+      "alias": "fill";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "value": "valueChange";
   }, never, never, true, never>;
@@ -2719,7 +2727,7 @@ export declare class UiToastComponent {
   /** ms before the toast dismisses itself, paused while hovered or focused. null never times out. */
   readonly timeoutMs: import("@angular/core").InputSignal<number | null>;
   readonly dismissed: import("@angular/core").OutputEmitterRef<void>;
-  protected readonly icon: import("@angular/core").Signal<string>;
+  protected readonly icon: import("@angular/core").Signal<IconType>;
   protected readonly iconColour: import("@angular/core").Signal<string>;
   protected readonly role: import("@angular/core").Signal<"alert" | "status">;
   private hovered;
@@ -2936,6 +2944,25 @@ export declare class UiSidebarComponent {
     "isOpen": "isOpenChange";
   }, never, ["*", "[sidebar-footer]"], true, never>;
 }
+/**
+ * A labelled section of sidebar items. The label shows while the sidebar is
+ * open and turns into a divider when it's collapsed, screen readers get the
+ * name either way.
+ */
+export declare class UiSidebarGroupComponent {
+  private readonly sidebar;
+  readonly label: import("@angular/core").InputSignal<string>;
+  protected readonly labelId: string;
+  readonly isCollapsed: import("@angular/core").Signal<boolean>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiSidebarGroupComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiSidebarGroupComponent, "ui-sidebar-group", never, {
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
 export declare class UiSidebarItemComponent {
   private readonly sidebar;
   readonly label: import("@angular/core").InputSignal<string>;
@@ -3465,6 +3492,56 @@ export declare class UiTimeSelectComponent {
     "value": "valueChange";
   }, never, never, true, never>;
 }
+/**
+ * The signed in person and their options, e.g. Settings and Log out, with a
+ * theme switch. Goes inside a dropdown's `uiDropdownContent`, the same as
+ * `ui-dropdown-menu`. Give that dropdown `closeBehaviour="whenClickOutside"`
+ * so picking a theme doesn't close it, picking an item still does.
+ */
+export declare class UiUserMenuComponent {
+  private readonly dropdown;
+  readonly name: import("@angular/core").InputSignal<string>;
+  /** A second line under the name, e.g. an email address. */
+  readonly detail: import("@angular/core").InputSignal<string>;
+  readonly src: import("@angular/core").InputSignal<string | null>;
+  /** The same items as `ui-dropdown-menu`, buttons, labelled groups and dividers. */
+  readonly items: import("@angular/core").InputSignal<DropdownMenuItem[]>;
+  /** Shows the System, Light and Dark switch, which needs `provideUiTheme()`. */
+  readonly themeSwitch: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  protected readonly menuItems: import("@angular/core").Signal<DropdownMenuItem[]>;
+  protected isDivider(item: DropdownMenuItem): boolean;
+  protected group(item: DropdownMenuItem): DropdownMenuCategory | null;
+  protected button(item: DropdownMenuItem): DropdownMenuButton | null;
+  private closing;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiUserMenuComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiUserMenuComponent, "ui-user-menu", never, {
+    "name": {
+      "alias": "name";
+      "required": true;
+      "isSignal": true;
+    };
+    "detail": {
+      "alias": "detail";
+      "required": false;
+      "isSignal": true;
+    };
+    "src": {
+      "alias": "src";
+      "required": false;
+      "isSignal": true;
+    };
+    "items": {
+      "alias": "items";
+      "required": false;
+      "isSignal": true;
+    };
+    "themeSwitch": {
+      "alias": "themeSwitch";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
 /** What the user picked, `system` follows the OS setting. */
 export type UiThemePreference = 'system' | 'light' | 'dark';
 export interface UiThemeConfig {
@@ -3504,4 +3581,29 @@ export declare class UiThemeService {
   static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 /** Starts theme switching at boot. Read or change it through `UiThemeService`. */
-export declare function provideUiTheme(config?: Partial<UiThemeConfig>): EnvironmentProviders;
+export declare function provideUiTheme(config?: Partial<UiThemeConfig>): EnvironmentProviders;
+/**
+ * Picks System, Light or Dark through UiThemeService, so the choice is stored
+ * and applied straight away. Add `provideUiTheme()` so the stored choice is
+ * applied at boot, not only once this has rendered.
+ */
+export declare class UiThemeSwitchComponent {
+  protected readonly theme: UiThemeService;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Stretches to the container's width, see `ui-segmented`. */
+  readonly fill: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  protected readonly options: SegmentedOption<UiThemePreference>[];
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiThemeSwitchComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiThemeSwitchComponent, "ui-theme-switch", never, {
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "fill": {
+      "alias": "fill";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}