@besaitech/ng-design-system 0.0.68 → 0.0.69

package/index.d.ts

@@ -4778,6 +4778,57 @@ declare class SdsSidebar {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSidebar, "sds-sidebar", never, { "collapseLabel": { "alias": "collapseLabel"; "required": false; "isSignal": true; }; "expandLabel": { "alias": "expandLabel"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "decorations": { "alias": "decorations"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[sdsFooter]"], true, never>;
 }
 
+type SdsNavItemBadgeTone = 'brand' | 'danger' | 'neutral';
+/**
+ * A single sidebar navigation entry. Renders an anchor when [link] is set
+ * (with automatic active state via routerLinkActive) or a button otherwise.
+ *
+ * Requires the host application to provide the Angular Router (`provideRouter`),
+ * as it depends on RouterLink/RouterLinkActive even when used as a button.
+ *
+ * @example
+ * <sds-nav-item icon="home" label="Accueil" link="/" [exact]="true" />
+ * <sds-nav-item icon="book-open" label="Menu" link="/menu" [badge]="3" badgeLabel="{count} issues" badgeTone="danger" />
+ */
+declare class SdsNavItem {
+    protected readonly store: SidebarStore;
+    readonly icon: _angular_core.InputSignal<"chart-column" | "chart-line" | "chart-bar" | "chart-area" | "chart-pie" | "chart-scatter" | "grid-3x3" | "activity" | "gauge" | "trending-up" | "trending-down" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "file-check" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "locate-fixed" | "locate-off" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
+    readonly label: _angular_core.InputSignal<string>;
+    /** Router link target; when null, the item behaves as a button. */
+    readonly link: _angular_core.InputSignal<string | unknown[] | null>;
+    readonly exact: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Manual active state (combined with routerLinkActive when a link is set). */
+    readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Optional count shown as a pill after the label (e.g. menu issues to fix). Hidden when null or 0.
+     * On the collapsed rail it sits on the icon's corner.
+     */
+    readonly badge: _angular_core.InputSignal<number | null>;
+    /** Spoken text for the badge; `{count}` is replaced. Pass a translated string. */
+    readonly badgeLabel: _angular_core.InputSignal<string>;
+    /** Counts above this read as "max+" (e.g. 99+). */
+    readonly badgeMax: _angular_core.InputSignal<number>;
+    /** Badge colour. `danger` for things that block, `brand` (default) for a neutral count. */
+    readonly badgeTone: _angular_core.InputSignal<SdsNavItemBadgeTone>;
+    readonly select: _angular_core.OutputEmitterRef<void>;
+    protected readonly collapsed: _angular_core.WritableSignal<boolean>;
+    /** The badge's spoken text, or null when there is nothing to show. */
+    protected readonly badgeText: _angular_core.Signal<string | null>;
+    protected readonly badgeDisplay: _angular_core.Signal<string>;
+    /** Accessible name on the collapsed rail, where the visible label is hidden. */
+    protected readonly collapsedName: _angular_core.Signal<string>;
+    protected readonly badgeClass: _angular_core.Signal<string>;
+    protected itemClass(isActive: boolean): string;
+    /**
+     * The left accent bar on an active item — the strongest "selected" cue, and the one that survives a
+     * grayscale brand where a tinted pill alone is nearly invisible. brand-600 on the light rail, white on
+     * the dark one; on a coloured brand it is the brand colour, matching the certicheck accent bar.
+     */
+    protected readonly accentBarClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsNavItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavItem, "sds-nav-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "exact": { "alias": "exact"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeLabel": { "alias": "badgeLabel"; "required": false; "isSignal": true; }; "badgeMax": { "alias": "badgeMax"; "required": false; "isSignal": true; }; "badgeTone": { "alias": "badgeTone"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, never, true, never>;
+}
+
 /**
  * Groups nav items under an optional uppercase section label.
  *
@@ -4787,7 +4838,12 @@ declare class SdsSidebar {
  * - **Collapsible** (`[collapsible]`) — the label becomes a button that expands and collapses the
  *   group. Set `[basePath]` and the group opens itself whenever the active route is inside it, so a
  *   deep link or a browser Back lands with the right section already open instead of the person
- *   having to find and re-open it.
+ *   having to find and re-open it. A group whose pages live under several prefixes (a business area
+ *   grouping `/people`, `/customers`, `/drivers`) lists them all in `[basePaths]`.
+ *
+ * A collapsible group can carry a `[badge]` of its own — typically the sum of its children's. It is
+ * drawn on the header only while the children are hidden, so a closed section still says that
+ * something inside it is waiting, and an open one does not show the same count twice.
  *
  * Collapsible mode exists because a flat rail stops scaling somewhere around a dozen destinations,
  * and the alternative — showing every child of every section at once — buries the ones in use.
@@ -4809,6 +4865,22 @@ declare class SdsNavGroup {
      * group counts as active and opens itself — unless the person has explicitly toggled it since.
      */
     readonly basePath: _angular_core.InputSignal<string | null>;
+    /**
+     * More URL prefixes owned by this group, for an area whose pages don't share one root
+     * (`['/people', '/customers', '/drivers']`). Matched exactly like {@link basePath}, alongside it.
+     */
+    readonly basePaths: _angular_core.InputSignal<readonly string[] | null>;
+    /**
+     * A count for the header, e.g. the items waiting across the group's children. Drawn only while the
+     * children are hidden; null or 0 shows nothing.
+     */
+    readonly badge: _angular_core.InputSignal<number | null>;
+    /** Spoken text for the badge; `{count}` is replaced. Pass a translated string. */
+    readonly badgeLabel: _angular_core.InputSignal<string>;
+    /** Counts above this read as "max+" (e.g. 99+). */
+    readonly badgeMax: _angular_core.InputSignal<number>;
+    /** Badge colour, as on {@link SdsNavItem}. */
+    readonly badgeTone: _angular_core.InputSignal<SdsNavItemBadgeTone>;
     /** Emits the new state on every manual toggle. Not emitted for route-driven auto-expansion. */
     readonly expandedChange: _angular_core.OutputEmitterRef<boolean>;
     /** Explicit user choice; null means "follow the route". */
@@ -4822,6 +4894,11 @@ declare class SdsNavGroup {
     protected readonly routeActive: _angular_core.Signal<boolean>;
     protected readonly expanded: _angular_core.Signal<boolean>;
     protected readonly collapsed: _angular_core.WritableSignal<boolean>;
+    /** The header badge's spoken text — only while the children (which show their own) are hidden. */
+    protected readonly headerBadgeText: _angular_core.Signal<string | null>;
+    protected readonly badgeDisplay: _angular_core.Signal<string>;
+    /** The same pill as {@link SdsNavItem}'s, pinned to the icon's corner on the collapsed rail. */
+    protected readonly badgeClass: _angular_core.Signal<string>;
     /** Rail paint, shared via the store — see SidebarStore.appearance. Drives the header/caption tones. */
     private readonly surface;
     /** Collapsible header, painted for the active rail (ink+brand on `surface`, white on `brand`). */
@@ -4851,58 +4928,7 @@ declare class SdsNavGroup {
      */
     protected toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsNavGroup, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavGroup, "sds-nav-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "basePath": { "alias": "basePath"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; }, never, ["*"], true, never>;
-}
-
-type SdsNavItemBadgeTone = 'brand' | 'danger' | 'neutral';
-/**
- * A single sidebar navigation entry. Renders an anchor when [link] is set
- * (with automatic active state via routerLinkActive) or a button otherwise.
- *
- * Requires the host application to provide the Angular Router (`provideRouter`),
- * as it depends on RouterLink/RouterLinkActive even when used as a button.
- *
- * @example
- * <sds-nav-item icon="home" label="Accueil" link="/" [exact]="true" />
- * <sds-nav-item icon="book-open" label="Menu" link="/menu" [badge]="3" badgeLabel="{count} issues" badgeTone="danger" />
- */
-declare class SdsNavItem {
-    protected readonly store: SidebarStore;
-    readonly icon: _angular_core.InputSignal<"chart-column" | "chart-line" | "chart-bar" | "chart-area" | "chart-pie" | "chart-scatter" | "grid-3x3" | "activity" | "gauge" | "trending-up" | "trending-down" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "file-check" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "locate-fixed" | "locate-off" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
-    readonly label: _angular_core.InputSignal<string>;
-    /** Router link target; when null, the item behaves as a button. */
-    readonly link: _angular_core.InputSignal<string | unknown[] | null>;
-    readonly exact: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Manual active state (combined with routerLinkActive when a link is set). */
-    readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /**
-     * Optional count shown as a pill after the label (e.g. menu issues to fix). Hidden when null or 0.
-     * On the collapsed rail it sits on the icon's corner.
-     */
-    readonly badge: _angular_core.InputSignal<number | null>;
-    /** Spoken text for the badge; `{count}` is replaced. Pass a translated string. */
-    readonly badgeLabel: _angular_core.InputSignal<string>;
-    /** Counts above this read as "max+" (e.g. 99+). */
-    readonly badgeMax: _angular_core.InputSignal<number>;
-    /** Badge colour. `danger` for things that block, `brand` (default) for a neutral count. */
-    readonly badgeTone: _angular_core.InputSignal<SdsNavItemBadgeTone>;
-    readonly select: _angular_core.OutputEmitterRef<void>;
-    protected readonly collapsed: _angular_core.WritableSignal<boolean>;
-    /** The badge's spoken text, or null when there is nothing to show. */
-    protected readonly badgeText: _angular_core.Signal<string | null>;
-    protected readonly badgeDisplay: _angular_core.Signal<string>;
-    /** Accessible name on the collapsed rail, where the visible label is hidden. */
-    protected readonly collapsedName: _angular_core.Signal<string>;
-    protected readonly badgeClass: _angular_core.Signal<string>;
-    protected itemClass(isActive: boolean): string;
-    /**
-     * The left accent bar on an active item — the strongest "selected" cue, and the one that survives a
-     * grayscale brand where a tinted pill alone is nearly invisible. brand-600 on the light rail, white on
-     * the dark one; on a coloured brand it is the brand colour, matching the certicheck accent bar.
-     */
-    protected readonly accentBarClass: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsNavItem, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavItem, "sds-nav-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "exact": { "alias": "exact"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeLabel": { "alias": "badgeLabel"; "required": false; "isSignal": true; }; "badgeMax": { "alias": "badgeMax"; "required": false; "isSignal": true; }; "badgeTone": { "alias": "badgeTone"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavGroup, "sds-nav-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "basePath": { "alias": "basePath"; "required": false; "isSignal": true; }; "basePaths": { "alias": "basePaths"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeLabel": { "alias": "badgeLabel"; "required": false; "isSignal": true; }; "badgeMax": { "alias": "badgeMax"; "required": false; "isSignal": true; }; "badgeTone": { "alias": "badgeTone"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; }, never, ["*"], true, never>;
 }
 
 type SdsUserMenuAppearance = 'surface' | 'on-brand';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@besaitech/ng-design-system",
-  "version": "0.0.68",
+  "version": "0.0.69",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"