@lifecorner/angular-ui-kit 3.5.1 → 3.6.1

package/types/lifecorner-angular-ui-kit-sidenav-placeholder.d.ts

@@ -0,0 +1,163 @@
+import { NavigationItem } from "@lifecorner/angular-ui-kit/models";
+import { SidenavPosition, SidenavVariant } from "@lifecorner/angular-ui-kit/sidenav";
+import * as i0 from "@angular/core";
+/**
+ * Stand-in for a docked `lc-sidenav` while it loads (3.6, AS-18): an inert
+ * skeleton of the rail with exactly the sidenav's boxes — the same container,
+ * width, logo block, rows, sections and expanded groups, built from the same
+ * classes and the same box rules — so swapping it for the sidenav moves
+ * nothing (CLS 0). Give it the sidenav's bindings.
+ *
+ * Use it as the `@placeholder` of a `@defer (on viewport)` block. In the app
+ * shell the navigation column is hidden below 1024 px, so on a phone the
+ * trigger never fires and the sidenav's JavaScript never loads:
+ *
+ * @example
+ * ```html
+ * <div shell-nav>
+ *   @defer (on viewport) {
+ *     <lc-sidenav mode="docked" [isOpen]="true" width="100%" [mobileBreakpoint]="0"
+ *                 variant="transparent" ariaLabel="Hauptnavigation" [items]="nav" [activeRoute]="url()" />
+ *   } @placeholder {
+ *     <lc-sidenav-placeholder [isOpen]="true" width="100%" variant="transparent" [items]="nav" [activeRoute]="url()" />
+ *   }
+ * </div>
+ * ```
+ * Import `SidenavComponent` from `@lifecorner/angular-ui-kit/sidenav` and use
+ * it only inside the `@defer` block; any other use of it in the same
+ * component makes Angular load it eagerly. With a percentage `width`, give
+ * the block a container of definite width (the app shell's column is one):
+ * in a shrink-to-fit container the sidenav's width follows its label text.
+ *
+ * Accessibility: the whole placeholder is `aria-hidden="true"` and `inert` —
+ * no landmark, no tab stop, nothing announced, so focus can never be inside
+ * it when it is swapped. The navigation landmark, the current item
+ * (`aria-current`) and the tab order arrive with `lc-sidenav`. Static, no
+ * shimmer. The skeleton shapes are filled with
+ * `--lc-sidenav-placeholder-fill`; the `--lc-sidenav-*` hooks apply as on
+ * `lc-sidenav` (set them on an ancestor of both).
+ */
+export declare class SidenavPlaceholderComponent {
+  private readonly router;
+  /** The router's URL, as on `lc-sidenav`; read only when `activeRoute` is empty. */
+  private readonly routerUrl;
+  /**
+   * Navigation items, the same value as on `lc-sidenav`: they give the number
+   * of rows, the sections and the groups that start expanded.
+   * @default []
+   */
+  readonly items: import("@angular/core").InputSignal<NavigationItem[]>;
+  /**
+   * The current route, as on `lc-sidenav`. It decides which group starts
+   * expanded; when empty, the router's URL does (3.5 rules).
+   * @default ''
+   */
+  readonly activeRoute: import("@angular/core").InputSignal<string>;
+  /**
+   * The 56 px icon rail. One-way here (a `model` on `lc-sidenav`).
+   * @default false
+   */
+  readonly collapsed: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether the docked rail is open; a closed one is 0 px wide, as on `lc-sidenav`.
+   * @default false
+   */
+  readonly isOpen: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Width of the rail, as on `lc-sidenav`.
+   * @default '320px'
+   */
+  readonly width: import("@angular/core").InputSignal<string>;
+  /**
+   * Surface, as on `lc-sidenav`: `default` (the rail) or `transparent` (the
+   * side navigation on the page, 48 px pills).
+   * @default 'default'
+   */
+  readonly variant: import("@angular/core").InputSignal<SidenavVariant>;
+  /**
+   * Theme, as on `lc-sidenav`.
+   * @default 'auto'
+   */
+  readonly theme: import("@angular/core").InputSignal<"light" | "dark" | "auto">;
+  /**
+   * Position, as on `lc-sidenav`.
+   * @default 'left'
+   */
+  readonly position: import("@angular/core").InputSignal<SidenavPosition>;
+  /**
+   * Reserves the logo block, as `showLogo` on `lc-sidenav`.
+   * @default false
+   */
+  readonly showLogo: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Height of the logo block, as on `lc-sidenav`.
+   * @default 'md'
+   */
+  readonly logoSize: import("@angular/core").InputSignal<"xs" | "sm" | "md" | "lg" | "xl">;
+  /** The items in display order. @internal */
+  protected readonly sortedItems: import("@angular/core").Signal<NavigationItem[]>;
+  /** The groups `lc-sidenav` opens on load: the parents of the current item. @internal */
+  private readonly expanded;
+  /** The rail's classes, in `lc-sidenav`'s order, always docked. @internal */
+  protected readonly railClasses: import("@angular/core").Signal<string>;
+  /** The rail's width, as `lc-sidenav` sets it. @internal */
+  protected readonly railWidth: import("@angular/core").Signal<string>;
+  constructor();
+  /** Whether a group starts expanded. @internal */
+  protected isExpanded(item: NavigationItem): boolean;
+  /** The label bar's width for the row at `index`. @internal */
+  protected labelWidth(index: number): string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<SidenavPlaceholderComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<SidenavPlaceholderComponent, "lc-sidenav-placeholder", never, {
+    "items": {
+      "alias": "items";
+      "required": false;
+      "isSignal": true;
+    };
+    "activeRoute": {
+      "alias": "activeRoute";
+      "required": false;
+      "isSignal": true;
+    };
+    "collapsed": {
+      "alias": "collapsed";
+      "required": false;
+      "isSignal": true;
+    };
+    "isOpen": {
+      "alias": "isOpen";
+      "required": false;
+      "isSignal": true;
+    };
+    "width": {
+      "alias": "width";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "theme": {
+      "alias": "theme";
+      "required": false;
+      "isSignal": true;
+    };
+    "position": {
+      "alias": "position";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLogo": {
+      "alias": "showLogo";
+      "required": false;
+      "isSignal": true;
+    };
+    "logoSize": {
+      "alias": "logoSize";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

package/types/lifecorner-angular-ui-kit-sidenav.d.ts

@@ -173,7 +173,8 @@ export declare class SidenavComponent implements OnDestroy {
    * With `activeRoute` set: the first link whose route equals it. Without:
    * the router's path — the exact match wins, otherwise the longest link
    * route the path continues with a `/` (`/` matches only `/`); ties go to
-   * the first link in display order.
+   * the first link in display order. The rules live in
+   * `internal/navigation` since 3.6, shared with `lc-sidenav-placeholder`.
    */
   private readonly currentItem;
   /**

package/types/lifecorner-angular-ui-kit.d.ts

@@ -7,6 +7,7 @@ export * from "@lifecorner/angular-ui-kit/card";
 export * from "@lifecorner/angular-ui-kit/checkbox";
 export * from "@lifecorner/angular-ui-kit/icon";
 export * from "@lifecorner/angular-ui-kit/icon-names";
+export * from "@lifecorner/angular-ui-kit/icons";
 export * from "@lifecorner/angular-ui-kit/logo";
 export * from "@lifecorner/angular-ui-kit/menu";
 export * from "@lifecorner/angular-ui-kit/input";
@@ -44,6 +45,7 @@ export * from "@lifecorner/angular-ui-kit/breadcrumbs";
 export * from "@lifecorner/angular-ui-kit/header";
 export * from "@lifecorner/angular-ui-kit/pagination";
 export * from "@lifecorner/angular-ui-kit/sidenav";
+export * from "@lifecorner/angular-ui-kit/sidenav-placeholder";
 export * from "@lifecorner/angular-ui-kit/tabs";
 export * from "@lifecorner/angular-ui-kit/bottom-nav";
 export * from "@lifecorner/angular-ui-kit/app-shell";