@besaitech/ng-design-system 0.0.68 → 0.0.69

package/fesm2022/besaitech-ng-design-system.mjs

@@ -18321,7 +18321,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * - **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.
@@ -18343,6 +18348,22 @@ class SdsNavGroup {
      * group counts as active and opens itself — unless the person has explicitly toggled it since.
      */
     basePath = input(null, ...(ngDevMode ? [{ debugName: "basePath" }] : []));
+    /**
+     * 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.
+     */
+    basePaths = input(null, ...(ngDevMode ? [{ debugName: "basePaths" }] : []));
+    /**
+     * 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.
+     */
+    badge = input(null, ...(ngDevMode ? [{ debugName: "badge" }] : []));
+    /** Spoken text for the badge; `{count}` is replaced. Pass a translated string. */
+    badgeLabel = input('{count} pending', ...(ngDevMode ? [{ debugName: "badgeLabel" }] : []));
+    /** Counts above this read as "max+" (e.g. 99+). */
+    badgeMax = input(99, ...(ngDevMode ? [{ debugName: "badgeMax" }] : []));
+    /** Badge colour, as on {@link SdsNavItem}. */
+    badgeTone = input('brand', ...(ngDevMode ? [{ debugName: "badgeTone" }] : []));
     /** Emits the new state on every manual toggle. Not emitted for route-driven auto-expansion. */
     expandedChange = output();
     /** Explicit user choice; null means "follow the route". */
@@ -18354,20 +18375,50 @@ class SdsNavGroup {
      * first).
      */
     routeActive = computed(() => {
-        const base = this.basePath();
-        if (!base)
+        const bases = [this.basePath(), ...(this.basePaths() ?? [])].filter((b) => !!b);
+        if (!bases.length)
             return false;
         const path = this.url().split(/[?#]/)[0];
-        return path === base || path.startsWith(base + '/');
+        return bases.some((base) => path === base || path.startsWith(base + '/'));
     }, ...(ngDevMode ? [{ debugName: "routeActive" }] : []));
     expanded = computed(() => this.manual() ?? this.routeActive(), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
     collapsed = this.store.collapsed;
+    /** The header badge's spoken text — only while the children (which show their own) are hidden. */
+    headerBadgeText = computed(() => {
+        const n = this.badge();
+        if (n === null || n === undefined || !Number.isFinite(n) || n <= 0)
+            return null;
+        if (this.collapsible() && this.childrenVisible())
+            return null;
+        return this.badgeLabel().replace('{count}', String(n));
+    }, ...(ngDevMode ? [{ debugName: "headerBadgeText" }] : []));
+    badgeDisplay = computed(() => {
+        const n = this.badge() ?? 0;
+        return n > this.badgeMax() ? `${this.badgeMax()}+` : String(n);
+    }, ...(ngDevMode ? [{ debugName: "badgeDisplay" }] : []));
+    /** The same pill as {@link SdsNavItem}'s, pinned to the icon's corner on the collapsed rail. */
+    badgeClass = computed(() => {
+        const tone = this.badgeTone() === 'danger'
+            ? 'bg-danger text-white'
+            : this.badgeTone() === 'neutral'
+                ? 'bg-muted text-ink-soft border border-border'
+                : this.store.appearance() === 'surface'
+                    ? `bg-brand-600 text-white ${DARK_PRIMARY_BG} ${DARK_ON_PRIMARY}`
+                    : 'bg-white text-brand-800';
+        const base = 'inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 ' +
+            'text-[11px] font-bold tabular-nums leading-none';
+        const collapsed = this.collapsed()
+            ? ' lg:absolute lg:right-1.5 lg:top-0.5 lg:h-4 lg:min-w-4 lg:px-1 lg:text-[10px]' +
+                (this.store.appearance() === 'surface' ? ' lg:ring-2 lg:ring-surface' : '')
+            : '';
+        return `${base} ${tone}${collapsed}`;
+    }, ...(ngDevMode ? [{ debugName: "badgeClass" }] : []));
     /** Rail paint, shared via the store — see SidebarStore.appearance. Drives the header/caption tones. */
     surface = computed(() => this.store.appearance() === 'surface', ...(ngDevMode ? [{ debugName: "surface" }] : []));
     /** Collapsible header, painted for the active rail (ink+brand on `surface`, white on `brand`). */
     headerClass = computed(() => {
         const s = this.surface();
-        const base = 'mb-1 flex h-10 w-full items-center gap-3 rounded-control px-3 text-sm font-medium ' +
+        const base = 'relative mb-1 flex h-10 w-full items-center gap-3 rounded-control px-3 text-sm font-medium ' +
             'transition-colors focus-visible:outline-none focus-visible:ring-2 ' +
             (this.collapsed() ? 'lg:justify-center ' : '') +
             (s
@@ -18416,7 +18467,7 @@ class SdsNavGroup {
         this.expandedChange.emit(next);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsNavGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsNavGroup, isStandalone: true, selector: "sds-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsNavGroup, isStandalone: true, selector: "sds-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null }, basePaths: { classPropertyName: "basePaths", publicName: "basePaths", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeLabel: { classPropertyName: "badgeLabel", publicName: "badgeLabel", isSignal: true, isRequired: false, transformFunction: null }, badgeMax: { classPropertyName: "badgeMax", publicName: "badgeMax", isSignal: true, isRequired: false, transformFunction: null }, badgeTone: { classPropertyName: "badgeTone", publicName: "badgeTone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
     <div class="mt-5 first:mt-3">
       @if (label()) {
         @if (collapsible()) {
@@ -18445,6 +18496,10 @@ class SdsNavGroup {
             <span class="flex-1 truncate text-left" [class.lg:hidden]="collapsed()">
               {{ label() }}
             </span>
+            @if (headerBadgeText(); as text) {
+              <span [class]="badgeClass()" aria-hidden="true">{{ badgeDisplay() }}</span>
+              <span class="sr-only">, {{ text }}</span>
+            }
             <sds-icon
               name="chevron-down"
               [size]="16"
@@ -18504,6 +18559,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             <span class="flex-1 truncate text-left" [class.lg:hidden]="collapsed()">
               {{ label() }}
             </span>
+            @if (headerBadgeText(); as text) {
+              <span [class]="badgeClass()" aria-hidden="true">{{ badgeDisplay() }}</span>
+              <span class="sr-only">, {{ text }}</span>
+            }
             <sds-icon
               name="chevron-down"
               [size]="16"
@@ -18527,7 +18586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     </div>
   `,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], basePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "basePath", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], basePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "basePath", required: false }] }], basePaths: [{ type: i0.Input, args: [{ isSignal: true, alias: "basePaths", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeLabel", required: false }] }], badgeMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeMax", required: false }] }], badgeTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeTone", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
 
 /**
  * A single sidebar navigation entry. Renders an anchor when [link] is set