@softwarity/rail-nav 1.0.7 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,6 +4,7 @@ import { MatSidenav, MatSidenavContainer, MatDrawerContainer, MatSidenavContent
4
4
  import * as i1 from '@angular/material/core';
5
5
  import { MatRippleModule } from '@angular/material/core';
6
6
  import { RouterLink, RouterLinkActive } from '@angular/router';
7
+ import { NgTemplateOutlet } from '@angular/common';
7
8
 
8
9
  class RailnavComponent extends MatSidenav {
9
10
  constructor() {
@@ -241,16 +242,8 @@ class RailnavItemComponent {
241
242
  }
242
243
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RailnavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
243
244
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: RailnavItemComponent, isStandalone: true, selector: "rail-nav-item", inputs: { routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.expanded": "expanded()", "class.position-end": "position() === \"end\"" } }, ngImport: i0, template: `
244
- @if (routerLink()) {
245
- <a
246
- class="rail-item"
247
- [class.expanded]="expanded()"
248
- [class.position-end]="position() === 'end'"
249
- [class.active]="active()"
250
- [routerLink]="routerLink()"
251
- routerLinkActive="active"
252
- (click)="onRouterLinkClick()">
253
- <div class="rail-item-pill">
245
+ <ng-template #iconTpl>
246
+ <div class="rail-item-pill">
254
247
  <div class="rail-item-ripple" matRipple></div>
255
248
  <div class="rail-item-icon-wrapper">
256
249
  <div class="rail-item-icon">
@@ -263,6 +256,17 @@ class RailnavItemComponent {
263
256
  <span class="rail-item-label label-inline">{{ label() }}</span>
264
257
  </div>
265
258
  <span class="rail-item-label label-below">{{ label() }}</span>
259
+ </ng-template>
260
+ @if (routerLink()) {
261
+ <a
262
+ class="rail-item"
263
+ [class.expanded]="expanded()"
264
+ [class.position-end]="position() === 'end'"
265
+ [class.active]="active()"
266
+ [routerLink]="routerLink()"
267
+ routerLinkActive="active"
268
+ (click)="onRouterLinkClick()">
269
+ <ng-container [ngTemplateOutlet]="iconTpl" />
266
270
  </a>
267
271
  } @else {
268
272
  <button
@@ -272,7 +276,16 @@ class RailnavItemComponent {
272
276
  [class.position-end]="position() === 'end'"
273
277
  [class.active]="active()"
274
278
  (click)="onItemClick()">
275
- <div class="rail-item-pill">
279
+ <ng-container [ngTemplateOutlet]="iconTpl" />
280
+ </button>
281
+ }
282
+ `, isInline: true, styles: [":host{display:block}.rail-item{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-decoration:none;color:var(--rail-nav-on-surface-variant, var(--mat-sys-on-surface-variant));cursor:pointer;padding:0;gap:4px;background:none;border:none;font:inherit;min-height:56px;box-sizing:border-box;outline:none;width:100%}.rail-item.position-end{align-items:flex-end}.rail-item:focus-visible .rail-item-pill{border-color:var(--rail-nav-primary, var(--mat-sys-primary))}.rail-item.position-end .rail-item-pill{justify-content:flex-end;padding-left:0;padding-right:10px}.rail-item.expanded{gap:0}.rail-item-pill{position:relative;display:flex;align-items:center;justify-content:flex-start;width:48px;height:32px;border-radius:9999px;border:2px solid transparent;overflow:visible;margin-top:12px;padding-left:10px;box-sizing:border-box;transition:background .2s ease,width .2s ease,height .2s ease,margin .2s ease}.rail-item-ripple{position:absolute;inset:0;border-radius:inherit;overflow:hidden}.rail-item:hover .rail-item-pill{background:var(--rail-nav-surface-container-high, var(--mat-sys-surface-container-high))}.rail-item.active .rail-item-pill{background:var(--rail-nav-secondary-container, var(--mat-sys-secondary-container));color:var(--rail-nav-on-secondary-container, var(--mat-sys-on-secondary-container))}.rail-item.expanded .rail-item-pill{width:auto;height:48px;border-radius:9999px;padding:0 16px 0 10px;gap:12px;justify-content:flex-start;box-sizing:border-box;margin-top:0}.rail-item.expanded.position-end .rail-item-pill{flex-direction:row-reverse;justify-content:flex-start;padding:0 10px 0 16px}:host:first-child .rail-item-pill{margin-top:8px}:host:first-child .rail-item.expanded .rail-item-pill{margin-top:0}.rail-item-icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:visible}.rail-item-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}.rail-item-icon ::ng-deep>*{font-size:24px;width:24px;height:24px}.rail-badge{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--rail-nav-error, var(--mat-sys-error));color:var(--rail-nav-on-error, var(--mat-sys-on-error));font-size:11px;font-weight:500;line-height:16px;text-align:center;box-sizing:border-box;z-index:10}.rail-badge.dot{top:-2px;right:-2px;min-width:6px;width:6px;height:6px;padding:0;border-radius:3px}.rail-item-label.label-below{font-size:12px;font-weight:500;line-height:16px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:48px;max-height:16px;opacity:1;transition:opacity .1s ease,max-height .2s ease}.rail-item.expanded .rail-item-label.label-below{opacity:0;max-height:0;pointer-events:none}.rail-item-label.label-inline{font-size:14px;font-weight:500;line-height:24px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:0;opacity:0;pointer-events:none}.rail-item.expanded .rail-item-label.label-inline{width:auto;flex:1;opacity:1;pointer-events:auto;transition:opacity .15s ease .1s}.rail-item.expanded.position-end .rail-item-label.label-inline{text-align:right}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
283
+ }
284
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RailnavItemComponent, decorators: [{
285
+ type: Component,
286
+ args: [{ selector: 'rail-nav-item', imports: [RouterLink, RouterLinkActive, MatRippleModule, NgTemplateOutlet], template: `
287
+ <ng-template #iconTpl>
288
+ <div class="rail-item-pill">
276
289
  <div class="rail-item-ripple" matRipple></div>
277
290
  <div class="rail-item-icon-wrapper">
278
291
  <div class="rail-item-icon">
@@ -285,13 +298,7 @@ class RailnavItemComponent {
285
298
  <span class="rail-item-label label-inline">{{ label() }}</span>
286
299
  </div>
287
300
  <span class="rail-item-label label-below">{{ label() }}</span>
288
- </button>
289
- }
290
- `, isInline: true, styles: [":host{display:block}.rail-item{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-decoration:none;color:var(--rail-nav-on-surface-variant, var(--mat-sys-on-surface-variant));cursor:pointer;padding:0;gap:4px;background:none;border:none;font:inherit;min-height:56px;box-sizing:border-box;outline:none;width:100%}.rail-item.position-end{align-items:flex-end}.rail-item:focus-visible .rail-item-pill{border-color:var(--rail-nav-primary, var(--mat-sys-primary))}.rail-item.position-end .rail-item-pill{justify-content:flex-end;padding-left:0;padding-right:10px}.rail-item.expanded{gap:0}.rail-item-pill{position:relative;display:flex;align-items:center;justify-content:flex-start;width:48px;height:32px;border-radius:9999px;border:2px solid transparent;overflow:visible;margin-top:12px;padding-left:10px;box-sizing:border-box;transition:background .2s ease,width .2s ease,height .2s ease,margin .2s ease}.rail-item-ripple{position:absolute;inset:0;border-radius:inherit;overflow:hidden}.rail-item:hover .rail-item-pill{background:var(--rail-nav-surface-container-high, var(--mat-sys-surface-container-high))}.rail-item.active .rail-item-pill{background:var(--rail-nav-secondary-container, var(--mat-sys-secondary-container));color:var(--rail-nav-on-secondary-container, var(--mat-sys-on-secondary-container))}.rail-item.expanded .rail-item-pill{width:auto;height:48px;border-radius:9999px;padding:0 16px 0 10px;gap:12px;justify-content:flex-start;box-sizing:border-box;margin-top:0}.rail-item.expanded.position-end .rail-item-pill{flex-direction:row-reverse;justify-content:flex-start;padding:0 10px 0 16px}:host:first-child .rail-item-pill{margin-top:8px}:host:first-child .rail-item.expanded .rail-item-pill{margin-top:0}.rail-item-icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:visible}.rail-item-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}.rail-item-icon ::ng-deep>*{font-size:24px;width:24px;height:24px}.rail-badge{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--rail-nav-error, var(--mat-sys-error));color:var(--rail-nav-on-error, var(--mat-sys-on-error));font-size:11px;font-weight:500;line-height:16px;text-align:center;box-sizing:border-box;z-index:10}.rail-badge.dot{top:-2px;right:-2px;min-width:6px;width:6px;height:6px;padding:0;border-radius:3px}.rail-item-label.label-below{font-size:12px;font-weight:500;line-height:16px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:48px;max-height:16px;opacity:1;transition:opacity .1s ease,max-height .2s ease}.rail-item.expanded .rail-item-label.label-below{opacity:0;max-height:0;pointer-events:none}.rail-item-label.label-inline{font-size:14px;font-weight:500;line-height:24px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:0;opacity:0;pointer-events:none}.rail-item.expanded .rail-item-label.label-inline{width:auto;flex:1;opacity:1;pointer-events:auto;transition:opacity .15s ease .1s}.rail-item.expanded.position-end .rail-item-label.label-inline{text-align:right}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
291
- }
292
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RailnavItemComponent, decorators: [{
293
- type: Component,
294
- args: [{ selector: 'rail-nav-item', imports: [RouterLink, RouterLinkActive, MatRippleModule], template: `
301
+ </ng-template>
295
302
  @if (routerLink()) {
296
303
  <a
297
304
  class="rail-item"
@@ -301,19 +308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
301
308
  [routerLink]="routerLink()"
302
309
  routerLinkActive="active"
303
310
  (click)="onRouterLinkClick()">
304
- <div class="rail-item-pill">
305
- <div class="rail-item-ripple" matRipple></div>
306
- <div class="rail-item-icon-wrapper">
307
- <div class="rail-item-icon">
308
- <ng-content />
309
- </div>
310
- @if (hasBadge()) {
311
- <span class="rail-badge" [class.dot]="isDotBadge()">{{ isDotBadge() ? '' : badge() }}</span>
312
- }
313
- </div>
314
- <span class="rail-item-label label-inline">{{ label() }}</span>
315
- </div>
316
- <span class="rail-item-label label-below">{{ label() }}</span>
311
+ <ng-container [ngTemplateOutlet]="iconTpl" />
317
312
  </a>
318
313
  } @else {
319
314
  <button
@@ -323,19 +318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
323
318
  [class.position-end]="position() === 'end'"
324
319
  [class.active]="active()"
325
320
  (click)="onItemClick()">
326
- <div class="rail-item-pill">
327
- <div class="rail-item-ripple" matRipple></div>
328
- <div class="rail-item-icon-wrapper">
329
- <div class="rail-item-icon">
330
- <ng-content />
331
- </div>
332
- @if (hasBadge()) {
333
- <span class="rail-badge" [class.dot]="isDotBadge()">{{ isDotBadge() ? '' : badge() }}</span>
334
- }
335
- </div>
336
- <span class="rail-item-label label-inline">{{ label() }}</span>
337
- </div>
338
- <span class="rail-item-label label-below">{{ label() }}</span>
321
+ <ng-container [ngTemplateOutlet]="iconTpl" />
339
322
  </button>
340
323
  }
341
324
  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
@@ -1 +1 @@
1
- {"version":3,"file":"softwarity-rail-nav.mjs","sources":["../../src/lib/railnav.component.ts","../../src/lib/railnav-container.component.ts","../../src/lib/railnav-content.component.ts","../../src/lib/railnav-item.component.ts","../../src/public-api.ts","../../src/softwarity-rail-nav.ts"],"sourcesContent":["import { Component, signal, effect, input } from '@angular/core';\nimport { MatSidenav } from '@angular/material/sidenav';\nimport { MatRippleModule } from '@angular/material/core';\n\n@Component({\n selector: 'rail-nav',\n imports: [MatRippleModule],\n template: `\n @if (!hideDefaultHeader()) {\n <div class=\"rail-header\" [class.position-end]=\"railPosition() === 'end'\" matRipple (click)=\"toggleExpanded()\">\n @if (expanded() && (title() || subtitle()) && railPosition() === 'end') {\n <div class=\"rail-branding position-end\">\n @if (title()) {\n <span class=\"rail-title\">{{ title() }}</span>\n }\n @if (subtitle()) {\n <span class=\"rail-subtitle\">{{ subtitle() }}</span>\n }\n </div>\n }\n <div class=\"rail-burger\" [class.expanded]=\"expanded()\" [class.position-end]=\"railPosition() === 'end'\">\n <!-- Menu icon (collapsed state) -->\n <svg class=\"icon-menu\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"currentColor\">\n <path d=\"M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z\"/>\n </svg>\n <!-- Menu open icon (expanded state) -->\n <svg class=\"icon-menu-open\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"currentColor\">\n <path d=\"M120-240v-80h520v80H120Zm664-40L584-480l200-200 56 56-144 144 144 144-56 56ZM120-440v-80h400v80H120Zm0-200v-80h520v80H120Z\"/>\n </svg>\n </div>\n @if (expanded() && (title() || subtitle()) && railPosition() === 'start') {\n <div class=\"rail-branding\">\n @if (title()) {\n <span class=\"rail-title\">{{ title() }}</span>\n }\n @if (subtitle()) {\n <span class=\"rail-subtitle\">{{ subtitle() }}</span>\n }\n </div>\n }\n </div>\n }\n <ng-content />\n `,\n styles: [`\n :host {\n display: block;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 100;\n width: var(--rail-nav-collapsed-width, 72px);\n border: none !important;\n border-right: none !important;\n border-left: none !important;\n outline: none !important;\n box-shadow: none;\n background: var(--rail-nav-surface-color, var(--mat-sys-surface));\n transition: width 0.2s ease;\n overflow: visible;\n }\n\n :host(.expanded) {\n width: var(--rail-nav-expanded-width, fit-content);\n box-shadow: 4px 0 8px rgba(0,0,0,.2);\n }\n\n :host(.position-end) {\n left: auto;\n right: 0;\n }\n\n :host(.position-end.expanded) {\n box-shadow: -4px 0 8px rgba(0,0,0,.2);\n }\n\n .rail-header {\n display: flex;\n align-items: center;\n gap: 12px;\n height: var(--rail-nav-header-height, 56px);\n padding: 16px 16px 16px 24px;\n box-sizing: border-box;\n cursor: pointer;\n color: var(--rail-nav-on-surface, var(--mat-sys-on-surface));\n }\n\n .rail-header.position-end {\n padding: 16px 24px 16px 16px;\n }\n\n .rail-header.position-end .rail-burger {\n margin-left: auto;\n }\n\n .rail-header:hover {\n background: var(--rail-nav-surface-container-high, var(--mat-sys-surface-container-high));\n }\n\n .rail-burger {\n position: relative;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n }\n\n .rail-burger.position-end {\n transform: scaleX(-1);\n }\n\n .rail-burger svg {\n position: absolute;\n top: 0;\n left: 0;\n transition: opacity 0.3s ease, transform 0.3s ease;\n }\n\n /* Position start (left) - clockwise rotation */\n .rail-burger .icon-menu {\n opacity: 1;\n transform: rotate(0deg);\n }\n\n .rail-burger .icon-menu-open {\n opacity: 0;\n transform: rotate(-90deg);\n }\n\n .rail-burger.expanded .icon-menu {\n opacity: 0;\n transform: rotate(90deg);\n }\n\n .rail-burger.expanded .icon-menu-open {\n opacity: 1;\n transform: rotate(0deg);\n }\n\n /* Position end (right) - counter-clockwise rotation (mirrored) */\n .rail-burger.position-end .icon-menu {\n transform: rotate(0deg);\n }\n\n .rail-burger.position-end .icon-menu-open {\n transform: rotate(90deg);\n }\n\n .rail-burger.position-end.expanded .icon-menu {\n transform: rotate(-90deg);\n }\n\n .rail-burger.position-end.expanded .icon-menu-open {\n transform: rotate(0deg);\n }\n\n .rail-branding {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 0;\n min-width: 0;\n overflow: hidden;\n text-align: right;\n padding-top: 5px;\n }\n\n .rail-branding.position-end {\n text-align: left;\n }\n\n .rail-title {\n font-size: 16px;\n font-weight: 500;\n line-height: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--rail-nav-on-surface, var(--mat-sys-on-surface));\n }\n\n .rail-subtitle {\n font-size: 11px;\n line-height: 1;\n color: var(--rail-nav-on-surface-variant, var(--mat-sys-on-surface-variant));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n opacity: 0.7;\n }\n `],\n host: {\n 'class': 'mat-drawer mat-sidenav',\n '[class.expanded]': 'expanded()',\n '[class.position-end]': 'railPosition() === \"end\"'\n }\n})\nexport class RailnavComponent extends MatSidenav {\n /** Position: 'start' (left) or 'end' (right) - aliased to avoid conflict with MatSidenav.position */\n readonly railPosition = input<'start' | 'end'>('start', { alias: 'position' });\n\n /** Hide the default header (burger + title/subtitle) */\n readonly hideDefaultHeader = input(false);\n\n /** Title displayed when expanded */\n readonly title = input<string>();\n\n /** Subtitle displayed when expanded */\n readonly subtitle = input<string>();\n\n /** Whether to auto-collapse when an item is clicked */\n readonly autoCollapse = input(true);\n\n /** Whether the rail is expanded to show labels */\n readonly expanded = signal(false);\n\n constructor() {\n super();\n // Default settings for rail behavior\n this.opened = true;\n this.disableClose = true;\n this.mode = 'side';\n\n // Sync mode with expanded state\n effect(() => {\n this.mode = this.expanded() ? 'over' : 'side';\n });\n }\n\n /** Toggle between collapsed (rail) and expanded (drawer) */\n toggleExpanded(): void {\n this.expanded.update(e => !e);\n }\n\n /** Collapse the rail */\n collapse(): void {\n this.expanded.set(false);\n }\n\n /** Expand the rail to drawer */\n expand(): void {\n this.expanded.set(true);\n }\n}\n","import { Component, ContentChild, AfterContentInit, input } from '@angular/core';\nimport { MatSidenavContainer, MatDrawerContainer } from '@angular/material/sidenav';\nimport { RailnavComponent } from './railnav.component';\n\n@Component({\n selector: 'rail-nav-container',\n template: `\n <ng-content />\n @if (showBackdrop()) {\n <div\n class=\"railnav-backdrop\"\n [class.visible]=\"railnav?.expanded()\"\n [class.position-end]=\"railnav?.railPosition() === 'end'\"\n (click)=\"railnav?.collapse()\">\n </div>\n }\n `,\n styles: [`\n :host {\n display: block;\n position: relative;\n height: 100%;\n overflow: hidden;\n }\n\n .railnav-backdrop {\n position: absolute;\n top: 0;\n bottom: 0;\n left: var(--rail-nav-collapsed-width, 72px);\n right: 0;\n background: var(--rail-nav-backdrop-color, rgba(0, 0, 0, 0.4));\n z-index: 99;\n cursor: pointer;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease-in-out;\n }\n\n .railnav-backdrop.position-end {\n left: 0;\n right: var(--rail-nav-collapsed-width, 72px);\n }\n\n .railnav-backdrop.visible {\n opacity: 1;\n pointer-events: auto;\n }\n `],\n host: {\n 'class': 'mat-drawer-container mat-sidenav-container'\n },\n providers: [\n { provide: MatDrawerContainer, useExisting: RailnavContainerComponent }\n ]\n})\nexport class RailnavContainerComponent extends MatSidenavContainer implements AfterContentInit {\n /** Whether to show backdrop when expanded */\n readonly showBackdrop = input(true);\n\n @ContentChild(RailnavComponent) railnav?: RailnavComponent;\n\n override ngAfterContentInit(): void {\n super.ngAfterContentInit();\n }\n}\n","import { Component, input, inject, computed } from '@angular/core';\nimport { MatSidenavContent } from '@angular/material/sidenav';\nimport { RailnavContainerComponent } from './railnav-container.component';\n\n@Component({\n selector: 'rail-nav-content',\n template: `<ng-content />`,\n styles: [`\n :host {\n display: block;\n height: 100%;\n overflow: auto;\n margin-left: var(--rail-nav-collapsed-width, 72px);\n }\n\n :host(.position-end) {\n margin-left: 0;\n margin-right: var(--rail-nav-collapsed-width, 72px);\n }\n `],\n host: {\n 'class': 'mat-drawer-content mat-sidenav-content',\n '[class.position-end]': 'effectivePosition() === \"end\"'\n }\n})\nexport class RailnavContentComponent extends MatSidenavContent {\n /** Optional: Position of the rail. If not set, uses the sibling rail-nav's position */\n readonly position = input<'start' | 'end' | undefined>(undefined);\n\n /** Parent container that gives access to sibling rail-nav */\n private container = inject(RailnavContainerComponent, { optional: true });\n\n /** Effective position - from input or from sibling rail-nav */\n protected readonly effectivePosition = computed(() => {\n const inputValue = this.position();\n if (inputValue !== undefined) return inputValue;\n return this.container?.railnav?.railPosition() ?? 'start';\n });\n}\n","import { Component, input, output, computed, inject, ChangeDetectionStrategy } from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\nimport { MatRippleModule } from '@angular/material/core';\nimport { RailnavComponent } from './railnav.component';\n\n@Component({\n selector: 'rail-nav-item',\n imports: [RouterLink, RouterLinkActive, MatRippleModule],\n template: `\n @if (routerLink()) {\n <a\n class=\"rail-item\"\n [class.expanded]=\"expanded()\"\n [class.position-end]=\"position() === 'end'\"\n [class.active]=\"active()\"\n [routerLink]=\"routerLink()\"\n routerLinkActive=\"active\"\n (click)=\"onRouterLinkClick()\">\n <div class=\"rail-item-pill\">\n <div class=\"rail-item-ripple\" matRipple></div>\n <div class=\"rail-item-icon-wrapper\">\n <div class=\"rail-item-icon\">\n <ng-content />\n </div>\n @if (hasBadge()) {\n <span class=\"rail-badge\" [class.dot]=\"isDotBadge()\">{{ isDotBadge() ? '' : badge() }}</span>\n }\n </div>\n <span class=\"rail-item-label label-inline\">{{ label() }}</span>\n </div>\n <span class=\"rail-item-label label-below\">{{ label() }}</span>\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"rail-item\"\n [class.expanded]=\"expanded()\"\n [class.position-end]=\"position() === 'end'\"\n [class.active]=\"active()\"\n (click)=\"onItemClick()\">\n <div class=\"rail-item-pill\">\n <div class=\"rail-item-ripple\" matRipple></div>\n <div class=\"rail-item-icon-wrapper\">\n <div class=\"rail-item-icon\">\n <ng-content />\n </div>\n @if (hasBadge()) {\n <span class=\"rail-badge\" [class.dot]=\"isDotBadge()\">{{ isDotBadge() ? '' : badge() }}</span>\n }\n </div>\n <span class=\"rail-item-label label-inline\">{{ label() }}</span>\n </div>\n <span class=\"rail-item-label label-below\">{{ label() }}</span>\n </button>\n }\n `,\n styles: [`\n :host {\n display: block;\n }\n\n .rail-item {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n text-decoration: none;\n color: var(--rail-nav-on-surface-variant, var(--mat-sys-on-surface-variant));\n cursor: pointer;\n padding: 0;\n gap: 4px;\n background: none;\n border: none;\n font: inherit;\n min-height: 56px;\n box-sizing: border-box;\n outline: none;\n width: 100%;\n }\n\n .rail-item.position-end {\n align-items: flex-end;\n }\n\n .rail-item:focus-visible .rail-item-pill {\n border-color: var(--rail-nav-primary, var(--mat-sys-primary));\n }\n\n .rail-item.position-end .rail-item-pill {\n justify-content: flex-end;\n padding-left: 0;\n padding-right: 10px;\n }\n\n .rail-item.expanded {\n gap: 0;\n }\n\n .rail-item-pill {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 48px;\n height: 32px;\n border-radius: 9999px;\n border: 2px solid transparent;\n overflow: visible;\n margin-top: 12px;\n padding-left: 10px;\n box-sizing: border-box;\n transition: background 0.2s ease, width 0.2s ease, height 0.2s ease, margin 0.2s ease;\n }\n\n .rail-item-ripple {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n overflow: hidden;\n }\n\n .rail-item:hover .rail-item-pill {\n background: var(--rail-nav-surface-container-high, var(--mat-sys-surface-container-high));\n }\n\n .rail-item.active .rail-item-pill {\n background: var(--rail-nav-secondary-container, var(--mat-sys-secondary-container));\n color: var(--rail-nav-on-secondary-container, var(--mat-sys-on-secondary-container));\n }\n\n /* Expanded pill includes both icon and label */\n .rail-item.expanded .rail-item-pill {\n width: auto;\n height: 48px;\n border-radius: 9999px;\n padding: 0 16px 0 10px;\n gap: 12px;\n justify-content: flex-start;\n box-sizing: border-box;\n margin-top: 0;\n }\n\n .rail-item.expanded.position-end .rail-item-pill {\n flex-direction: row-reverse;\n justify-content: flex-start;\n padding: 0 10px 0 16px;\n }\n\n /* First item: reduce space after header and keep icon stable during expand */\n /* Collapsed: 8px + 16px (half of 32px) = 24px from top */\n /* Expanded: 0px + 24px (half of 48px) = 24px from top */\n :host:first-child .rail-item-pill {\n margin-top: 8px;\n }\n\n :host:first-child .rail-item.expanded .rail-item-pill {\n margin-top: 0;\n }\n\n .rail-item-icon-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n overflow: visible;\n }\n\n .rail-item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n }\n\n .rail-item-icon ::ng-deep > * {\n font-size: 24px;\n width: 24px;\n height: 24px;\n }\n\n .rail-badge {\n position: absolute;\n top: -6px;\n right: -6px;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n border-radius: 8px;\n background: var(--rail-nav-error, var(--mat-sys-error));\n color: var(--rail-nav-on-error, var(--mat-sys-on-error));\n font-size: 11px;\n font-weight: 500;\n line-height: 16px;\n text-align: center;\n box-sizing: border-box;\n z-index: 10;\n }\n\n /* Small dot badge (no text) */\n .rail-badge.dot {\n top: -2px;\n right: -2px;\n min-width: 6px;\n width: 6px;\n height: 6px;\n padding: 0;\n border-radius: 3px;\n }\n\n /* Label below icon (collapsed mode) */\n .rail-item-label.label-below {\n font-size: 12px;\n font-weight: 500;\n line-height: 16px;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 48px;\n max-height: 16px;\n opacity: 1;\n transition: opacity 0.1s ease, max-height 0.2s ease;\n }\n\n .rail-item.expanded .rail-item-label.label-below {\n opacity: 0;\n max-height: 0;\n pointer-events: none;\n }\n\n /* Label inline with icon (expanded mode) */\n .rail-item-label.label-inline {\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 0;\n opacity: 0;\n pointer-events: none;\n }\n\n .rail-item.expanded .rail-item-label.label-inline {\n width: auto;\n flex: 1;\n opacity: 1;\n pointer-events: auto;\n transition: opacity 0.15s ease 0.1s;\n }\n\n .rail-item.expanded.position-end .rail-item-label.label-inline {\n text-align: right;\n }\n `],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class.expanded]': 'expanded()',\n '[class.position-end]': 'position() === \"end\"'\n }\n})\nexport class RailnavItemComponent {\n /** Router link for navigation */\n readonly routerLink = input<string | any[]>();\n\n /** Label text displayed */\n readonly label = input<string>();\n\n /** Badge value (number, text, or true for dot badge) */\n readonly badge = input<string | number | boolean>();\n\n /** Whether this item is active (for non-router usage) */\n readonly active = input(false);\n\n /** Whether to show a badge */\n protected readonly hasBadge = computed(() => {\n const b = this.badge();\n return b !== undefined && b !== null && b !== false;\n });\n\n /** Whether to show a small dot badge (no text) */\n protected readonly isDotBadge = computed(() => {\n const b = this.badge();\n return b === true || b === '';\n });\n\n /** Click event (for non-router usage) */\n readonly itemClick = output<void>();\n\n /** Reference to parent rail-nav */\n private railnav = inject(RailnavComponent);\n\n /** Whether the rail is expanded */\n protected expanded = computed(() => this.railnav.expanded());\n\n /** Position of the rail (start or end) */\n protected position = computed(() => this.railnav.railPosition());\n\n /** Handle item click - emit event and optionally collapse rail */\n protected onItemClick(): void {\n this.itemClick.emit();\n if (this.railnav.autoCollapse()) {\n this.railnav.collapse();\n }\n }\n\n /** Handle router link click - optionally collapse rail */\n protected onRouterLinkClick(): void {\n if (this.railnav.autoCollapse()) {\n this.railnav.collapse();\n }\n }\n}\n","/*\n * Public API Surface of @softwarity/rail-nav\n */\n\nexport { RailnavComponent } from './lib/railnav.component';\nexport { RailnavContainerComponent } from './lib/railnav-container.component';\nexport { RailnavContentComponent } from './lib/railnav-content.component';\nexport { RailnavItemComponent } from './lib/railnav-item.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"softwarity-rail-nav.mjs","sources":["../../src/lib/railnav.component.ts","../../src/lib/railnav-container.component.ts","../../src/lib/railnav-content.component.ts","../../src/lib/railnav-item.component.ts","../../src/public-api.ts","../../src/softwarity-rail-nav.ts"],"sourcesContent":["import { Component, signal, effect, input } from '@angular/core';\nimport { MatSidenav } from '@angular/material/sidenav';\nimport { MatRippleModule } from '@angular/material/core';\n\n@Component({\n selector: 'rail-nav',\n imports: [MatRippleModule],\n template: `\n @if (!hideDefaultHeader()) {\n <div class=\"rail-header\" [class.position-end]=\"railPosition() === 'end'\" matRipple (click)=\"toggleExpanded()\">\n @if (expanded() && (title() || subtitle()) && railPosition() === 'end') {\n <div class=\"rail-branding position-end\">\n @if (title()) {\n <span class=\"rail-title\">{{ title() }}</span>\n }\n @if (subtitle()) {\n <span class=\"rail-subtitle\">{{ subtitle() }}</span>\n }\n </div>\n }\n <div class=\"rail-burger\" [class.expanded]=\"expanded()\" [class.position-end]=\"railPosition() === 'end'\">\n <!-- Menu icon (collapsed state) -->\n <svg class=\"icon-menu\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"currentColor\">\n <path d=\"M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z\"/>\n </svg>\n <!-- Menu open icon (expanded state) -->\n <svg class=\"icon-menu-open\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"currentColor\">\n <path d=\"M120-240v-80h520v80H120Zm664-40L584-480l200-200 56 56-144 144 144 144-56 56ZM120-440v-80h400v80H120Zm0-200v-80h520v80H120Z\"/>\n </svg>\n </div>\n @if (expanded() && (title() || subtitle()) && railPosition() === 'start') {\n <div class=\"rail-branding\">\n @if (title()) {\n <span class=\"rail-title\">{{ title() }}</span>\n }\n @if (subtitle()) {\n <span class=\"rail-subtitle\">{{ subtitle() }}</span>\n }\n </div>\n }\n </div>\n }\n <ng-content />\n `,\n styles: [`\n :host {\n display: block;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 100;\n width: var(--rail-nav-collapsed-width, 72px);\n border: none !important;\n border-right: none !important;\n border-left: none !important;\n outline: none !important;\n box-shadow: none;\n background: var(--rail-nav-surface-color, var(--mat-sys-surface));\n transition: width 0.2s ease;\n overflow: visible;\n }\n\n :host(.expanded) {\n width: var(--rail-nav-expanded-width, fit-content);\n box-shadow: 4px 0 8px rgba(0,0,0,.2);\n }\n\n :host(.position-end) {\n left: auto;\n right: 0;\n }\n\n :host(.position-end.expanded) {\n box-shadow: -4px 0 8px rgba(0,0,0,.2);\n }\n\n .rail-header {\n display: flex;\n align-items: center;\n gap: 12px;\n height: var(--rail-nav-header-height, 56px);\n padding: 16px 16px 16px 24px;\n box-sizing: border-box;\n cursor: pointer;\n color: var(--rail-nav-on-surface, var(--mat-sys-on-surface));\n }\n\n .rail-header.position-end {\n padding: 16px 24px 16px 16px;\n }\n\n .rail-header.position-end .rail-burger {\n margin-left: auto;\n }\n\n .rail-header:hover {\n background: var(--rail-nav-surface-container-high, var(--mat-sys-surface-container-high));\n }\n\n .rail-burger {\n position: relative;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n }\n\n .rail-burger.position-end {\n transform: scaleX(-1);\n }\n\n .rail-burger svg {\n position: absolute;\n top: 0;\n left: 0;\n transition: opacity 0.3s ease, transform 0.3s ease;\n }\n\n /* Position start (left) - clockwise rotation */\n .rail-burger .icon-menu {\n opacity: 1;\n transform: rotate(0deg);\n }\n\n .rail-burger .icon-menu-open {\n opacity: 0;\n transform: rotate(-90deg);\n }\n\n .rail-burger.expanded .icon-menu {\n opacity: 0;\n transform: rotate(90deg);\n }\n\n .rail-burger.expanded .icon-menu-open {\n opacity: 1;\n transform: rotate(0deg);\n }\n\n /* Position end (right) - counter-clockwise rotation (mirrored) */\n .rail-burger.position-end .icon-menu {\n transform: rotate(0deg);\n }\n\n .rail-burger.position-end .icon-menu-open {\n transform: rotate(90deg);\n }\n\n .rail-burger.position-end.expanded .icon-menu {\n transform: rotate(-90deg);\n }\n\n .rail-burger.position-end.expanded .icon-menu-open {\n transform: rotate(0deg);\n }\n\n .rail-branding {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 0;\n min-width: 0;\n overflow: hidden;\n text-align: right;\n padding-top: 5px;\n }\n\n .rail-branding.position-end {\n text-align: left;\n }\n\n .rail-title {\n font-size: 16px;\n font-weight: 500;\n line-height: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--rail-nav-on-surface, var(--mat-sys-on-surface));\n }\n\n .rail-subtitle {\n font-size: 11px;\n line-height: 1;\n color: var(--rail-nav-on-surface-variant, var(--mat-sys-on-surface-variant));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n opacity: 0.7;\n }\n `],\n host: {\n 'class': 'mat-drawer mat-sidenav',\n '[class.expanded]': 'expanded()',\n '[class.position-end]': 'railPosition() === \"end\"'\n }\n})\nexport class RailnavComponent extends MatSidenav {\n /** Position: 'start' (left) or 'end' (right) - aliased to avoid conflict with MatSidenav.position */\n readonly railPosition = input<'start' | 'end'>('start', { alias: 'position' });\n\n /** Hide the default header (burger + title/subtitle) */\n readonly hideDefaultHeader = input(false);\n\n /** Title displayed when expanded */\n readonly title = input<string>();\n\n /** Subtitle displayed when expanded */\n readonly subtitle = input<string>();\n\n /** Whether to auto-collapse when an item is clicked */\n readonly autoCollapse = input(true);\n\n /** Whether the rail is expanded to show labels */\n readonly expanded = signal(false);\n\n constructor() {\n super();\n // Default settings for rail behavior\n this.opened = true;\n this.disableClose = true;\n this.mode = 'side';\n\n // Sync mode with expanded state\n effect(() => {\n this.mode = this.expanded() ? 'over' : 'side';\n });\n }\n\n /** Toggle between collapsed (rail) and expanded (drawer) */\n toggleExpanded(): void {\n this.expanded.update(e => !e);\n }\n\n /** Collapse the rail */\n collapse(): void {\n this.expanded.set(false);\n }\n\n /** Expand the rail to drawer */\n expand(): void {\n this.expanded.set(true);\n }\n}\n","import { Component, ContentChild, AfterContentInit, input } from '@angular/core';\nimport { MatSidenavContainer, MatDrawerContainer } from '@angular/material/sidenav';\nimport { RailnavComponent } from './railnav.component';\n\n@Component({\n selector: 'rail-nav-container',\n template: `\n <ng-content />\n @if (showBackdrop()) {\n <div\n class=\"railnav-backdrop\"\n [class.visible]=\"railnav?.expanded()\"\n [class.position-end]=\"railnav?.railPosition() === 'end'\"\n (click)=\"railnav?.collapse()\">\n </div>\n }\n `,\n styles: [`\n :host {\n display: block;\n position: relative;\n height: 100%;\n overflow: hidden;\n }\n\n .railnav-backdrop {\n position: absolute;\n top: 0;\n bottom: 0;\n left: var(--rail-nav-collapsed-width, 72px);\n right: 0;\n background: var(--rail-nav-backdrop-color, rgba(0, 0, 0, 0.4));\n z-index: 99;\n cursor: pointer;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease-in-out;\n }\n\n .railnav-backdrop.position-end {\n left: 0;\n right: var(--rail-nav-collapsed-width, 72px);\n }\n\n .railnav-backdrop.visible {\n opacity: 1;\n pointer-events: auto;\n }\n `],\n host: {\n 'class': 'mat-drawer-container mat-sidenav-container'\n },\n providers: [\n { provide: MatDrawerContainer, useExisting: RailnavContainerComponent }\n ]\n})\nexport class RailnavContainerComponent extends MatSidenavContainer implements AfterContentInit {\n /** Whether to show backdrop when expanded */\n readonly showBackdrop = input(true);\n\n @ContentChild(RailnavComponent) railnav?: RailnavComponent;\n\n override ngAfterContentInit(): void {\n super.ngAfterContentInit();\n }\n}\n","import { Component, input, inject, computed } from '@angular/core';\nimport { MatSidenavContent } from '@angular/material/sidenav';\nimport { RailnavContainerComponent } from './railnav-container.component';\n\n@Component({\n selector: 'rail-nav-content',\n template: `<ng-content />`,\n styles: [`\n :host {\n display: block;\n height: 100%;\n overflow: auto;\n margin-left: var(--rail-nav-collapsed-width, 72px);\n }\n\n :host(.position-end) {\n margin-left: 0;\n margin-right: var(--rail-nav-collapsed-width, 72px);\n }\n `],\n host: {\n 'class': 'mat-drawer-content mat-sidenav-content',\n '[class.position-end]': 'effectivePosition() === \"end\"'\n }\n})\nexport class RailnavContentComponent extends MatSidenavContent {\n /** Optional: Position of the rail. If not set, uses the sibling rail-nav's position */\n readonly position = input<'start' | 'end' | undefined>(undefined);\n\n /** Parent container that gives access to sibling rail-nav */\n private container = inject(RailnavContainerComponent, { optional: true });\n\n /** Effective position - from input or from sibling rail-nav */\n protected readonly effectivePosition = computed(() => {\n const inputValue = this.position();\n if (inputValue !== undefined) return inputValue;\n return this.container?.railnav?.railPosition() ?? 'start';\n });\n}\n","import { Component, input, output, computed, inject, ChangeDetectionStrategy } from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\nimport { MatRippleModule } from '@angular/material/core';\nimport { RailnavComponent } from './railnav.component';\nimport { NgTemplateOutlet } from '@angular/common';\n\n@Component({\n selector: 'rail-nav-item',\n imports: [RouterLink, RouterLinkActive, MatRippleModule, NgTemplateOutlet],\n template: `\n <ng-template #iconTpl>\n <div class=\"rail-item-pill\">\n <div class=\"rail-item-ripple\" matRipple></div>\n <div class=\"rail-item-icon-wrapper\">\n <div class=\"rail-item-icon\">\n <ng-content />\n </div>\n @if (hasBadge()) {\n <span class=\"rail-badge\" [class.dot]=\"isDotBadge()\">{{ isDotBadge() ? '' : badge() }}</span>\n }\n </div>\n <span class=\"rail-item-label label-inline\">{{ label() }}</span>\n </div>\n <span class=\"rail-item-label label-below\">{{ label() }}</span>\n </ng-template>\n @if (routerLink()) {\n <a\n class=\"rail-item\"\n [class.expanded]=\"expanded()\"\n [class.position-end]=\"position() === 'end'\"\n [class.active]=\"active()\"\n [routerLink]=\"routerLink()\"\n routerLinkActive=\"active\"\n (click)=\"onRouterLinkClick()\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\" />\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"rail-item\"\n [class.expanded]=\"expanded()\"\n [class.position-end]=\"position() === 'end'\"\n [class.active]=\"active()\"\n (click)=\"onItemClick()\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\" />\n </button>\n }\n `,\n styles: [`\n :host {\n display: block;\n }\n\n .rail-item {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n text-decoration: none;\n color: var(--rail-nav-on-surface-variant, var(--mat-sys-on-surface-variant));\n cursor: pointer;\n padding: 0;\n gap: 4px;\n background: none;\n border: none;\n font: inherit;\n min-height: 56px;\n box-sizing: border-box;\n outline: none;\n width: 100%;\n }\n\n .rail-item.position-end {\n align-items: flex-end;\n }\n\n .rail-item:focus-visible .rail-item-pill {\n border-color: var(--rail-nav-primary, var(--mat-sys-primary));\n }\n\n .rail-item.position-end .rail-item-pill {\n justify-content: flex-end;\n padding-left: 0;\n padding-right: 10px;\n }\n\n .rail-item.expanded {\n gap: 0;\n }\n\n .rail-item-pill {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 48px;\n height: 32px;\n border-radius: 9999px;\n border: 2px solid transparent;\n overflow: visible;\n margin-top: 12px;\n padding-left: 10px;\n box-sizing: border-box;\n transition: background 0.2s ease, width 0.2s ease, height 0.2s ease, margin 0.2s ease;\n }\n\n .rail-item-ripple {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n overflow: hidden;\n }\n\n .rail-item:hover .rail-item-pill {\n background: var(--rail-nav-surface-container-high, var(--mat-sys-surface-container-high));\n }\n\n .rail-item.active .rail-item-pill {\n background: var(--rail-nav-secondary-container, var(--mat-sys-secondary-container));\n color: var(--rail-nav-on-secondary-container, var(--mat-sys-on-secondary-container));\n }\n\n /* Expanded pill includes both icon and label */\n .rail-item.expanded .rail-item-pill {\n width: auto;\n height: 48px;\n border-radius: 9999px;\n padding: 0 16px 0 10px;\n gap: 12px;\n justify-content: flex-start;\n box-sizing: border-box;\n margin-top: 0;\n }\n\n .rail-item.expanded.position-end .rail-item-pill {\n flex-direction: row-reverse;\n justify-content: flex-start;\n padding: 0 10px 0 16px;\n }\n\n /* First item: reduce space after header and keep icon stable during expand */\n /* Collapsed: 8px + 16px (half of 32px) = 24px from top */\n /* Expanded: 0px + 24px (half of 48px) = 24px from top */\n :host:first-child .rail-item-pill {\n margin-top: 8px;\n }\n\n :host:first-child .rail-item.expanded .rail-item-pill {\n margin-top: 0;\n }\n\n .rail-item-icon-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n overflow: visible;\n }\n\n .rail-item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n }\n\n .rail-item-icon ::ng-deep > * {\n font-size: 24px;\n width: 24px;\n height: 24px;\n }\n\n .rail-badge {\n position: absolute;\n top: -6px;\n right: -6px;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n border-radius: 8px;\n background: var(--rail-nav-error, var(--mat-sys-error));\n color: var(--rail-nav-on-error, var(--mat-sys-on-error));\n font-size: 11px;\n font-weight: 500;\n line-height: 16px;\n text-align: center;\n box-sizing: border-box;\n z-index: 10;\n }\n\n /* Small dot badge (no text) */\n .rail-badge.dot {\n top: -2px;\n right: -2px;\n min-width: 6px;\n width: 6px;\n height: 6px;\n padding: 0;\n border-radius: 3px;\n }\n\n /* Label below icon (collapsed mode) */\n .rail-item-label.label-below {\n font-size: 12px;\n font-weight: 500;\n line-height: 16px;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 48px;\n max-height: 16px;\n opacity: 1;\n transition: opacity 0.1s ease, max-height 0.2s ease;\n }\n\n .rail-item.expanded .rail-item-label.label-below {\n opacity: 0;\n max-height: 0;\n pointer-events: none;\n }\n\n /* Label inline with icon (expanded mode) */\n .rail-item-label.label-inline {\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 0;\n opacity: 0;\n pointer-events: none;\n }\n\n .rail-item.expanded .rail-item-label.label-inline {\n width: auto;\n flex: 1;\n opacity: 1;\n pointer-events: auto;\n transition: opacity 0.15s ease 0.1s;\n }\n\n .rail-item.expanded.position-end .rail-item-label.label-inline {\n text-align: right;\n }\n `],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class.expanded]': 'expanded()',\n '[class.position-end]': 'position() === \"end\"'\n }\n})\nexport class RailnavItemComponent {\n /** Router link for navigation */\n readonly routerLink = input<string | any[]>();\n\n /** Label text displayed */\n readonly label = input<string>();\n\n /** Badge value (number, text, or true for dot badge) */\n readonly badge = input<string | number | boolean>();\n\n /** Whether this item is active (for non-router usage) */\n readonly active = input(false);\n\n /** Whether to show a badge */\n protected readonly hasBadge = computed(() => {\n const b = this.badge();\n return b !== undefined && b !== null && b !== false;\n });\n\n /** Whether to show a small dot badge (no text) */\n protected readonly isDotBadge = computed(() => {\n const b = this.badge();\n return b === true || b === '';\n });\n\n /** Click event (for non-router usage) */\n readonly itemClick = output<void>();\n\n /** Reference to parent rail-nav */\n private railnav = inject(RailnavComponent);\n\n /** Whether the rail is expanded */\n protected expanded = computed(() => this.railnav.expanded());\n\n /** Position of the rail (start or end) */\n protected position = computed(() => this.railnav.railPosition());\n\n /** Handle item click - emit event and optionally collapse rail */\n protected onItemClick(): void {\n this.itemClick.emit();\n if (this.railnav.autoCollapse()) {\n this.railnav.collapse();\n }\n }\n\n /** Handle router link click - optionally collapse rail */\n protected onRouterLinkClick(): void {\n if (this.railnav.autoCollapse()) {\n this.railnav.collapse();\n }\n }\n}\n","/*\n * Public API Surface of @softwarity/rail-nav\n */\n\nexport { RailnavComponent } from './lib/railnav.component';\nexport { RailnavContainerComponent } from './lib/railnav-container.component';\nexport { RailnavContentComponent } from './lib/railnav-content.component';\nexport { RailnavItemComponent } from './lib/railnav-item.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@softwarity/rail-nav",
3
- "version": "1.0.7",
3
+ "version": "1.0.8",
4
4
  "author": "Softwarity",
5
5
  "license": "MIT",
6
6
  "description": "Angular Material Navigation Rail component - Material Design 3 compliant",
@@ -72,7 +72,7 @@ declare class RailnavItemComponent {
72
72
  /** Handle router link click - optionally collapse rail */
73
73
  protected onRouterLinkClick(): void;
74
74
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<RailnavItemComponent, never>;
75
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<RailnavItemComponent, "rail-nav-item", never, { "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, ["*", "*"], true, never>;
75
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<RailnavItemComponent, "rail-nav-item", never, { "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, ["*"], true, never>;
76
76
  }
77
77
 
78
78
  export { RailnavComponent, RailnavContainerComponent, RailnavContentComponent, RailnavItemComponent };