@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

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

@@ -0,0 +1,178 @@
+import * as i0 from "@angular/core";
+/**
+ * Visual size of the page header.
+ * - `compact`     — dense data-tool pages and section headings (18 px)
+ * - `default`     — standard app pages (24 px)
+ * - `comfortable` — landing-page hero feel (30 px)
+ * - `title`       — the "Weite" page title: 32 px on phones, 40 / 44 / 48 px
+ *                   from 1024 / 1440 / 1920 px (`--font-size-title`)
+ * - `display`     — the display greeting: 40 px on phones, 52 / 56 / 60 / 72 px
+ *                   from 1024 / 1280 / 1440 / 1920 px (`--font-size-display`)
+ * - `auth`        — the sign-in and registration `<h1>`: 30 px, 34 px from
+ *                   1024 px (`--font-size-auth-title`)
+ */
+export type PageHeaderSize = 'compact' | 'default' | 'comfortable' | 'title' | 'display' | 'auth';
+/**
+ * Page header — top-of-page title block with optional subtitle,
+ * breadcrumbs, badge, description and an actions area.
+ *
+ * Density-aware, slot-based, no Tailwind. Drop it at the top of any route
+ * to get consistent rhythm between title, metadata and content below.
+ *
+ * Slots:
+ *  - `[slot="breadcrumbs"]`   — rendered above the title (e.g. `<lc-breadcrumbs>`)
+ *  - `[slot="title-suffix"]`  — inline beside the title, after the optional `badge`
+ *                               (for one or more status chips/badges)
+ *  - `[slot="actions"]`       — right-aligned actions (buttons, menus)
+ *  - `[slot="meta"]`          — secondary metadata under the title row (chips, tags)
+ *  - default                  — short header-internal description text
+ *
+ * `overline` renders a short uppercase label (a date, a section) **above** the
+ * title but **after** it in the DOM, so a screen reader that lands on the
+ * heading reads the title first and the overline next.
+ *
+ * Full-blown navigation primitives like `lc-tabs` — which render both the tab
+ * strip **and** their panel content — belong **below** the page header, never
+ * inside it. The header stays focused on page identity.
+ *
+ * @example
+ * ```html
+ * <lc-page-header
+ *   title="Reports"
+ *   subtitle="Compare period-over-period metrics"
+ *   [showDivider]="true"
+ * >
+ *   <lc-breadcrumbs slot="breadcrumbs" [items]="crumbs" />
+ *   <lc-chip slot="title-suffix" size="sm">Beta</lc-chip>
+ *   <lc-chip slot="title-suffix" size="sm" variant="success">Ready</lc-chip>
+ *   <lc-button slot="actions" variant="primary">New report</lc-button>
+ *   <lc-chip slot="meta">12 active</lc-chip>
+ * </lc-page-header>
+ * ```
+ */
+export declare class PageHeaderComponent {
+  /** Main heading text. */
+  title: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Optional leading icon (Tabler icon name) rendered as a brand tile to the
+   * left of the title block, mirroring `lc-card`'s header icon. Purely additive.
+   */
+  icon: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Visual treatment of the leading icon tile.
+   * - brand: gradient teal tile with light ink (default)
+   * - subtle: translucent surface tile with brand-teal ink
+   * @default 'brand'
+   */
+  iconVariant: import("@angular/core").InputSignal<"brand" | "subtle">;
+  /**
+   * Size of the leading icon tile.
+   * @default 'md'
+   */
+  iconSize: import("@angular/core").InputSignal<"sm" | "md">;
+  /** Short supporting line below the title. */
+  subtitle: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Short label shown above the title (e.g. the date on a daily view, a
+   * section name): uppercase through CSS (write it in sentence case), bold,
+   * letter spacing 0.12 em, in `--color-overline`; 13 px on phones, 14 / 15 /
+   * 16 px from 1024 / 1440 / 1920 px. Rendered right after the heading in the
+   * DOM, so the heading is read first.
+   */
+  overline: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Heading level for the title — affects semantics, not size.
+   * @default 1
+   */
+  level: import("@angular/core").InputSignal<1 | 2 | 3>;
+  /**
+   * Visual size of the page header.
+   * - `compact`     — dense data-tool pages and section headings (18 px)
+   * - `default`     — standard app pages (24 px)
+   * - `comfortable` — landing-page hero feel (30 px)
+   * - `title`       — page title on the responsive title scale, 32–48 px
+   * - `display`     — the display greeting, 40–72 px, weight 700
+   * - `auth`        — the sign-in and registration `<h1>`, 30 / 34 px
+   * @default 'default'
+   */
+  size: import("@angular/core").InputSignal<PageHeaderSize>;
+  /**
+   * Whether to render a divider line below the header.
+   * @default false
+   */
+  showDivider: import("@angular/core").InputSignal<boolean>;
+  /** Optional badge text next to the title (e.g. `Beta`). */
+  badge: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Remove the header's own horizontal padding so its content sits flush with
+   * the container edge. Use when the header is already inside a padded wrapper
+   * (e.g. `<lc-container>`) and you'd otherwise get a double inset. The divider,
+   * when shown, always spans the full width regardless of this setting.
+   * @default false
+   */
+  noPaddingX: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Classes of the heading: the global type-scale class (`lc-title`,
+   * `lc-display`, `lc-auth-title`) joins the component class for the 3.3 sizes.
+   */
+  protected titleClasses: import("@angular/core").Signal<string>;
+  protected hostClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<PageHeaderComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<PageHeaderComponent, "lc-page-header", never, {
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconVariant": {
+      "alias": "iconVariant";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconSize": {
+      "alias": "iconSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "subtitle": {
+      "alias": "subtitle";
+      "required": false;
+      "isSignal": true;
+    };
+    "overline": {
+      "alias": "overline";
+      "required": false;
+      "isSignal": true;
+    };
+    "level": {
+      "alias": "level";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "showDivider": {
+      "alias": "showDivider";
+      "required": false;
+      "isSignal": true;
+    };
+    "badge": {
+      "alias": "badge";
+      "required": false;
+      "isSignal": true;
+    };
+    "noPaddingX": {
+      "alias": "noPaddingX";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[slot='breadcrumbs']", "[slot='title-suffix']", "[slot='actions']", "[slot='meta']", "*"], true, never>;
+}

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

@@ -0,0 +1,61 @@
+import * as i0 from "@angular/core";
+/** Where the layout takes its height from. */
+export type PageLayoutFill = 'screen' | 'parent';
+/** How wide the layout lets its content grow. */
+export type PageLayoutContentWidth = 'capped' | 'full';
+export declare class PageLayoutComponent {
+  /**
+   * Source of the layout's height.
+   * - `'screen'` (default): `100dvh` — fills the viewport. Use as the page root.
+   * - `'parent'`: `100%` — fills its parent. Use when nested below an app shell;
+   *   every ancestor must also carry the height down.
+   */
+  fill: import("@angular/core").InputSignal<PageLayoutFill>;
+  /**
+   * Whether the body region scrolls internally. Defaults to `true`, which is
+   * correct both for long page content and for children like `<lc-chat>` that
+   * fit the body exactly (no scrollbar appears in that case). Set `false` for
+   * full-bleed bodies that must never scroll (e.g. a map).
+   */
+  scrollBody: import("@angular/core").InputSignal<boolean>;
+  /** Add density-aware padding to the body. Off by default so embedded components keep their own padding. */
+  padded: import("@angular/core").InputSignal<boolean>;
+  /**
+   * How wide content may grow on very large monitors.
+   * - `'capped'` (default): header, body and footer are capped at
+   *   `--lc-content-max-width` and centred, so content doesn't stretch edge to
+   *   edge on wide/ultrawide displays. All three regions share the cap, so the
+   *   page title stays aligned with the body beneath it.
+   * - `'full'`: no cap — content spans the whole shell. Use for full-bleed
+   *   bodies (maps, boards, canvases) that should use every pixel.
+   *
+   * Override the width itself — globally or per subtree — via the
+   * `--lc-content-max-width` custom property.
+   */
+  contentWidth: import("@angular/core").InputSignal<PageLayoutContentWidth>;
+  get hostClasses(): string;
+  classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<PageLayoutComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<PageLayoutComponent, "lc-page-layout", never, {
+    "fill": {
+      "alias": "fill";
+      "required": false;
+      "isSignal": true;
+    };
+    "scrollBody": {
+      "alias": "scrollBody";
+      "required": false;
+      "isSignal": true;
+    };
+    "padded": {
+      "alias": "padded";
+      "required": false;
+      "isSignal": true;
+    };
+    "contentWidth": {
+      "alias": "contentWidth";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[layout-header]", "*", "[layout-footer]"], true, never>;
+}

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

@@ -0,0 +1,141 @@
+import * as i0 from "@angular/core";
+export type PaginationSize = 'sm' | 'md' | 'lg';
+/**
+ * Pagination component for navigating through pages of content.
+ *
+ * Features:
+ * - Configurable page size
+ * - Previous/Next navigation
+ * - Direct page number access
+ * - Ellipsis for large page ranges
+ * - Size variants (sm, md, lg)
+ * - Accessible with ARIA attributes
+ * - Optional item count display
+ * - All UI strings overridable via inputs (i18n)
+ *
+ * @example
+ * ```html
+ * <lc-pagination
+ *   [currentPage]="currentPage"
+ *   [totalItems]="totalItems"
+ *   [pageSize]="10"
+ *   (pageChange)="onPageChange($event)"
+ * ></lc-pagination>
+ * ```
+ */
+export declare class PaginationComponent {
+  readonly currentPage: import("@angular/core").InputSignal<number>;
+  readonly totalItems: import("@angular/core").InputSignal<number>;
+  readonly pageSize: import("@angular/core").InputSignal<number>;
+  readonly size: import("@angular/core").InputSignal<PaginationSize>;
+  readonly maxVisiblePages: import("@angular/core").InputSignal<number>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  readonly showInfo: import("@angular/core").InputSignal<boolean>;
+  /** Visible text of the previous button */
+  readonly previousLabel: import("@angular/core").InputSignal<string>;
+  /** Visible text of the next button */
+  readonly nextLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the previous button (the visible text is hidden on small screens) */
+  readonly previousAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the next button */
+  readonly nextAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of a page button; `{page}` is replaced with the page number */
+  readonly pageAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Info line shown when `showInfo` is true; `{first}`, `{last}` and `{total}`
+   * are replaced with the item range and total.
+   */
+  readonly infoText: import("@angular/core").InputSignal<string>;
+  readonly pageChange: import("@angular/core").OutputEmitterRef<number>;
+  totalPages: import("@angular/core").Signal<number>;
+  firstItemIndex: import("@angular/core").Signal<number>;
+  lastItemIndex: import("@angular/core").Signal<number>;
+  isFirstPage: import("@angular/core").Signal<boolean>;
+  isLastPage: import("@angular/core").Signal<boolean>;
+  paginationClasses: import("@angular/core").Signal<string>;
+  /**
+   * Calculate visible page numbers with ellipsis support
+   * Returns an array where -1 represents an ellipsis
+   */
+  visiblePages: import("@angular/core").Signal<number[]>;
+  goToPreviousPage(): void;
+  goToNextPage(): void;
+  goToPage(page: number): void;
+  /** Resolved info line (`infoText` with placeholders filled in) */
+  readonly infoLine: import("@angular/core").Signal<string>;
+  /** Accessible name for the button of `page` */
+  getPageAriaLabel(page: number): string;
+  isCurrentPage(page: number): boolean;
+  isEllipsis(page: number): boolean;
+  shouldRender(): boolean;
+  static ɵfac: i0.ɵɵFactoryDeclaration<PaginationComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<PaginationComponent, "lc-pagination", never, {
+    "currentPage": {
+      "alias": "currentPage";
+      "required": false;
+      "isSignal": true;
+    };
+    "totalItems": {
+      "alias": "totalItems";
+      "required": false;
+      "isSignal": true;
+    };
+    "pageSize": {
+      "alias": "pageSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxVisiblePages": {
+      "alias": "maxVisiblePages";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "showInfo": {
+      "alias": "showInfo";
+      "required": false;
+      "isSignal": true;
+    };
+    "previousLabel": {
+      "alias": "previousLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "nextLabel": {
+      "alias": "nextLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "previousAriaLabel": {
+      "alias": "previousAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "nextAriaLabel": {
+      "alias": "nextAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "pageAriaLabel": {
+      "alias": "pageAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "infoText": {
+      "alias": "infoText";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "pageChange": "pageChange";
+  }, never, never, true, never>;
+}