@ng-prism/core 21.1.0 → 21.2.0

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.
package/README.md CHANGED
@@ -161,7 +161,7 @@ Full documentation with API reference, plugin guide, and advanced configuration:
161
161
 
162
162
  ## Requirements
163
163
 
164
- - Angular >= 21
164
+ - Angular >= 19
165
165
  - TypeScript >= 5.9
166
166
  - Components must use `input()` / `output()` signals (not `@Input()` / `@Output()` decorators)
167
167
 
@@ -3,11 +3,16 @@ import { PrismNavigationService } from '../services/prism-navigation.service.js'
3
3
  import * as i0 from "@angular/core";
4
4
  export declare class PrismSidebarComponent {
5
5
  protected readonly navigationService: PrismNavigationService;
6
+ private readonly expandedSet;
6
7
  protected readonly entries: import("@angular/core").Signal<[string, NavigationItem[]][]>;
8
+ protected isExpanded(category: string, index: number): boolean;
9
+ protected toggleCategory(category: string, index: number): void;
7
10
  protected itemKey(item: NavigationItem): string;
8
11
  protected itemLabel(item: NavigationItem): string;
9
12
  protected isActive(item: NavigationItem): boolean;
10
13
  protected onSelect(item: NavigationItem): void;
14
+ private loadExpanded;
15
+ private saveExpanded;
11
16
  static ɵfac: i0.ɵɵFactoryDeclaration<PrismSidebarComponent, never>;
12
17
  static ɵcmp: i0.ɵɵComponentDeclaration<PrismSidebarComponent, "prism-sidebar", never, {}, {}, never, never, true, never>;
13
18
  }
@@ -1 +1 @@
1
- {"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;;AAEjF,qBA0Fa,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IAEtE,SAAS,CAAC,QAAQ,CAAC,OAAO,+DAC8B;IAExD,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAM/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAMjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IASjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;yCA3BnC,qBAAqB;2CAArB,qBAAqB;CAkCjC"}
1
+ {"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;;AAIjF,qBA8Ia,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IAEtE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA4C;IAExE,SAAS,CAAC,QAAQ,CAAC,OAAO,+DAC8B;IAExD,SAAS,CAAC,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO;IAO9D,SAAS,CAAC,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAoB/D,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAM/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAMjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IASjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQ9C,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,YAAY;yCAzET,qBAAqB;2CAArB,qBAAqB;CA8EjC"}
@@ -1,45 +1,93 @@
1
- import { Component, computed, inject } from '@angular/core';
1
+ import { Component, computed, inject, signal } from '@angular/core';
2
2
  import { PrismNavigationService } from '../services/prism-navigation.service.js';
3
3
  import * as i0 from "@angular/core";
4
4
  const _forTrack0 = ($index, $item) => $item[0];
5
5
  function _forTrack1($index, $item) { return this.itemKey($item); }
6
- function PrismSidebarComponent_For_2_For_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
7
- i0.ɵɵdomElementStart(0, "span", 5);
6
+ function PrismSidebarComponent_For_2_Conditional_5_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
7
+ i0.ɵɵdomElementStart(0, "span", 7);
8
8
  i0.ɵɵtext(1, "\u25C8");
9
9
  i0.ɵɵdomElementEnd();
10
10
  } }
11
- function PrismSidebarComponent_For_2_For_4_Template(rf, ctx) { if (rf & 1) {
12
- const _r1 = i0.ɵɵgetCurrentView();
13
- i0.ɵɵdomElementStart(0, "button", 4);
14
- i0.ɵɵdomListener("click", function PrismSidebarComponent_For_2_For_4_Template_button_click_0_listener() { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onSelect(item_r2)); });
15
- i0.ɵɵconditionalCreate(1, PrismSidebarComponent_For_2_For_4_Conditional_1_Template, 2, 0, "span", 5);
11
+ function PrismSidebarComponent_For_2_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
12
+ const _r6 = i0.ɵɵgetCurrentView();
13
+ i0.ɵɵdomElementStart(0, "button", 6);
14
+ i0.ɵɵdomListener("click", function PrismSidebarComponent_For_2_Conditional_5_For_1_Template_button_click_0_listener() { const item_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r4 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r4.onSelect(item_r7)); });
15
+ i0.ɵɵconditionalCreate(1, PrismSidebarComponent_For_2_Conditional_5_For_1_Conditional_1_Template, 2, 0, "span", 7);
16
16
  i0.ɵɵtext(2);
17
17
  i0.ɵɵdomElementEnd();
18
18
  } if (rf & 2) {
19
- const item_r2 = ctx.$implicit;
20
- const ctx_r2 = i0.ɵɵnextContext(2);
21
- i0.ɵɵclassProp("prism-sidebar__item--active", ctx_r2.isActive(item_r2))("prism-sidebar__item--page", item_r2.kind === "page");
19
+ const item_r7 = ctx.$implicit;
20
+ const ctx_r4 = i0.ɵɵnextContext(3);
21
+ i0.ɵɵclassProp("prism-sidebar__item--active", ctx_r4.isActive(item_r7))("prism-sidebar__item--page", item_r7.kind === "page");
22
22
  i0.ɵɵadvance();
23
- i0.ɵɵconditional(item_r2.kind === "page" ? 1 : -1);
23
+ i0.ɵɵconditional(item_r7.kind === "page" ? 1 : -1);
24
24
  i0.ɵɵadvance();
25
- i0.ɵɵtextInterpolate1(" ", ctx_r2.itemLabel(item_r2), " ");
25
+ i0.ɵɵtextInterpolate1(" ", ctx_r4.itemLabel(item_r7), " ");
26
+ } }
27
+ function PrismSidebarComponent_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
28
+ i0.ɵɵrepeaterCreate(0, PrismSidebarComponent_For_2_Conditional_5_For_1_Template, 3, 6, "button", 5, _forTrack1, true);
29
+ } if (rf & 2) {
30
+ const entry_r3 = i0.ɵɵnextContext().$implicit;
31
+ i0.ɵɵrepeater(entry_r3[1]);
26
32
  } }
27
33
  function PrismSidebarComponent_For_2_Template(rf, ctx) { if (rf & 1) {
28
- i0.ɵɵdomElementStart(0, "div", 1)(1, "h3", 2);
29
- i0.ɵɵtext(2);
34
+ const _r1 = i0.ɵɵgetCurrentView();
35
+ i0.ɵɵdomElementStart(0, "div", 1)(1, "button", 2);
36
+ i0.ɵɵdomListener("click", function PrismSidebarComponent_For_2_Template_button_click_1_listener() { const ctx_r1 = i0.ɵɵrestoreView(_r1); const entry_r3 = ctx_r1.$implicit; const ɵ$index_3_r4 = ctx_r1.$index; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.toggleCategory(entry_r3[0], ɵ$index_3_r4)); });
37
+ i0.ɵɵnamespaceSVG();
38
+ i0.ɵɵdomElementStart(2, "svg", 3);
39
+ i0.ɵɵdomElement(3, "path", 4);
40
+ i0.ɵɵdomElementEnd();
41
+ i0.ɵɵtext(4);
30
42
  i0.ɵɵdomElementEnd();
31
- i0.ɵɵrepeaterCreate(3, PrismSidebarComponent_For_2_For_4_Template, 3, 6, "button", 3, _forTrack1, true);
43
+ i0.ɵɵconditionalCreate(5, PrismSidebarComponent_For_2_Conditional_5_Template, 2, 0);
32
44
  i0.ɵɵdomElementEnd();
33
45
  } if (rf & 2) {
34
- const entry_r4 = ctx.$implicit;
46
+ const entry_r3 = ctx.$implicit;
47
+ const ɵ$index_3_r4 = ctx.$index;
48
+ const ctx_r4 = i0.ɵɵnextContext();
35
49
  i0.ɵɵadvance(2);
36
- i0.ɵɵtextInterpolate(entry_r4[0]);
50
+ i0.ɵɵclassProp("prism-sidebar__chevron--expanded", ctx_r4.isExpanded(entry_r3[0], ɵ$index_3_r4));
51
+ i0.ɵɵadvance(2);
52
+ i0.ɵɵtextInterpolate1(" ", entry_r3[0], " ");
37
53
  i0.ɵɵadvance();
38
- i0.ɵɵrepeater(entry_r4[1]);
54
+ i0.ɵɵconditional(ctx_r4.isExpanded(entry_r3[0], ɵ$index_3_r4) ? 5 : -1);
39
55
  } }
56
+ const STORAGE_KEY = 'ng-prism-sidebar-expanded';
40
57
  export class PrismSidebarComponent {
41
58
  navigationService = inject(PrismNavigationService);
59
+ expandedSet = signal(this.loadExpanded(), ...(ngDevMode ? [{ debugName: "expandedSet" }] : []));
42
60
  entries = computed(() => [...this.navigationService.categoryTree().entries()], ...(ngDevMode ? [{ debugName: "entries" }] : []));
61
+ isExpanded(category, index) {
62
+ const set = this.expandedSet();
63
+ if (set.has(category))
64
+ return true;
65
+ if (set.has(`__collapsed:${category}`))
66
+ return false;
67
+ return index === 0;
68
+ }
69
+ toggleCategory(category, index) {
70
+ this.expandedSet.update(prev => {
71
+ const next = new Set(prev);
72
+ const collapsedKey = `__collapsed:${category}`;
73
+ if (next.has(category)) {
74
+ next.delete(category);
75
+ next.add(collapsedKey);
76
+ }
77
+ else if (next.has(collapsedKey)) {
78
+ next.delete(collapsedKey);
79
+ next.add(category);
80
+ }
81
+ else if (index === 0) {
82
+ next.add(collapsedKey);
83
+ }
84
+ else {
85
+ next.add(category);
86
+ }
87
+ this.saveExpanded(next);
88
+ return next;
89
+ });
90
+ }
43
91
  itemKey(item) {
44
92
  return item.kind === 'component'
45
93
  ? item.data.meta.className
@@ -67,39 +115,69 @@ export class PrismSidebarComponent {
67
115
  this.navigationService.selectPage(item.data);
68
116
  }
69
117
  }
118
+ loadExpanded() {
119
+ try {
120
+ const stored = localStorage.getItem(STORAGE_KEY);
121
+ return stored ? new Set(JSON.parse(stored)) : new Set();
122
+ }
123
+ catch {
124
+ return new Set();
125
+ }
126
+ }
127
+ saveExpanded(set) {
128
+ try {
129
+ localStorage.setItem(STORAGE_KEY, JSON.stringify([...set]));
130
+ }
131
+ catch { /* ignore */ }
132
+ }
70
133
  static ɵfac = function PrismSidebarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismSidebarComponent)(); };
71
- static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismSidebarComponent, selectors: [["prism-sidebar"]], decls: 3, vars: 0, consts: [[1, "prism-sidebar"], [1, "prism-sidebar__category"], [1, "prism-sidebar__category-title"], [1, "prism-sidebar__item", 3, "prism-sidebar__item--active", "prism-sidebar__item--page"], [1, "prism-sidebar__item", 3, "click"], [1, "prism-sidebar__page-icon"]], template: function PrismSidebarComponent_Template(rf, ctx) { if (rf & 1) {
134
+ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismSidebarComponent, selectors: [["prism-sidebar"]], decls: 3, vars: 0, consts: [[1, "prism-sidebar"], [1, "prism-sidebar__category"], [1, "prism-sidebar__category-title", 3, "click"], ["viewBox", "0 0 16 16", "fill", "currentColor", 1, "prism-sidebar__chevron"], ["d", "M6 4l4 4-4 4"], [1, "prism-sidebar__item", 3, "prism-sidebar__item--active", "prism-sidebar__item--page"], [1, "prism-sidebar__item", 3, "click"], [1, "prism-sidebar__page-icon"]], template: function PrismSidebarComponent_Template(rf, ctx) { if (rf & 1) {
72
135
  i0.ɵɵdomElementStart(0, "nav", 0);
73
- i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_For_2_Template, 5, 1, "div", 1, _forTrack0);
136
+ i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_For_2_Template, 6, 4, "div", 1, _forTrack0);
74
137
  i0.ɵɵdomElementEnd();
75
138
  } if (rf & 2) {
76
139
  i0.ɵɵadvance();
77
140
  i0.ɵɵrepeater(ctx.entries());
78
- } }, styles: [".prism-sidebar[_ngcontent-%COMP%] {\n background: var(--prism-bg);\n border-right: 1px solid var(--prism-border);\n overflow-y: auto;\n overflow-x: hidden;\n padding: 8px 0;\n height: 100%;\n }\n .prism-sidebar[_ngcontent-%COMP%]::-webkit-scrollbar { width: 4px; }\n .prism-sidebar[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: transparent; }\n .prism-sidebar[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 2px; }\n\n .prism-sidebar__category[_ngcontent-%COMP%] { margin-bottom: 4px; }\n\n .prism-sidebar__category-title[_ngcontent-%COMP%] {\n margin: 0;\n padding: 10px 16px 4px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--prism-text-ghost);\n font-family: var(--prism-font-sans);\n }\n\n .prism-sidebar__item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n padding: 6px 14px 6px 11px;\n font-size: 13px;\n font-family: var(--prism-font-sans);\n border: none;\n background: none;\n color: var(--prism-text-muted);\n cursor: pointer;\n border-left: 3px solid transparent;\n text-align: left;\n transition: background 0.1s, color 0.1s, border-color 0.1s;\n }\n\n .prism-sidebar__item[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--prism-primary) 6%, transparent);\n color: var(--prism-text-2);\n }\n\n .prism-sidebar__item--active[_ngcontent-%COMP%] {\n border-left-color: var(--prism-primary);\n background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n color: var(--prism-text);\n font-weight: 500;\n }\n\n .prism-sidebar__item--active[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n }\n\n .prism-sidebar__page-icon[_ngcontent-%COMP%] {\n font-size: 10px;\n opacity: 0.6;\n }"] });
141
+ } }, styles: [".prism-sidebar[_ngcontent-%COMP%] {\n background: var(--prism-sidebar-bg, var(--prism-bg));\n border-right: 1px solid var(--prism-border);\n overflow-y: auto;\n overflow-x: hidden;\n padding: 4px 0;\n height: 100%;\n }\n .prism-sidebar[_ngcontent-%COMP%]::-webkit-scrollbar { width: 4px; }\n .prism-sidebar[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: transparent; }\n .prism-sidebar[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 2px; }\n\n .prism-sidebar__category[_ngcontent-%COMP%] { margin-bottom: 2px; }\n\n .prism-sidebar__category-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n margin: 0;\n padding: 7px 16px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--prism-text-2);\n font-family: var(--prism-font-sans);\n background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n border: none;\n border-left: 2px solid color-mix(in srgb, var(--prism-primary) 40%, transparent);\n cursor: pointer;\n text-align: left;\n transition: background 0.12s, color 0.12s, border-color 0.12s;\n }\n\n .prism-sidebar__category-title[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--prism-primary) 14%, transparent);\n color: var(--prism-text);\n border-left-color: var(--prism-primary);\n }\n\n .prism-sidebar__chevron[_ngcontent-%COMP%] {\n width: 10px;\n height: 10px;\n flex-shrink: 0;\n transition: transform 0.15s;\n fill: none;\n stroke: currentColor;\n stroke-width: 1.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n opacity: 0.5;\n }\n\n .prism-sidebar__category-title[_ngcontent-%COMP%]:hover .prism-sidebar__chevron[_ngcontent-%COMP%] {\n opacity: 0.8;\n }\n\n .prism-sidebar__chevron--expanded[_ngcontent-%COMP%] {\n transform: rotate(90deg);\n }\n\n .prism-sidebar__item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n padding: 6px 14px 6px 24px;\n font-size: 13px;\n font-family: var(--prism-font-sans);\n border: none;\n background: none;\n color: var(--prism-text-muted);\n cursor: pointer;\n border-left: 2px solid transparent;\n text-align: left;\n transition: background 0.1s, color 0.1s, border-color 0.1s;\n }\n\n .prism-sidebar__item[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--prism-primary) 6%, transparent);\n color: var(--prism-text-2);\n }\n\n .prism-sidebar__item--active[_ngcontent-%COMP%] {\n border-left-color: var(--prism-primary);\n background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n color: var(--prism-text);\n font-weight: 500;\n }\n\n .prism-sidebar__item--active[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n }\n\n .prism-sidebar__page-icon[_ngcontent-%COMP%] {\n font-size: 10px;\n opacity: 0.6;\n }"] });
79
142
  }
80
143
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismSidebarComponent, [{
81
144
  type: Component,
82
145
  args: [{ selector: 'prism-sidebar', standalone: true, template: `
83
146
  <nav class="prism-sidebar">
84
- @for (entry of entries(); track entry[0]) {
147
+ @for (entry of entries(); track entry[0]; let idx = $index) {
85
148
  <div class="prism-sidebar__category">
86
- <h3 class="prism-sidebar__category-title">{{ entry[0] }}</h3>
87
- @for (item of entry[1]; track itemKey(item)) {
88
- <button
89
- class="prism-sidebar__item"
90
- [class.prism-sidebar__item--active]="isActive(item)"
91
- [class.prism-sidebar__item--page]="item.kind === 'page'"
92
- (click)="onSelect(item)"
149
+ <button
150
+ class="prism-sidebar__category-title"
151
+ (click)="toggleCategory(entry[0], idx)"
152
+ >
153
+ <svg
154
+ class="prism-sidebar__chevron"
155
+ [class.prism-sidebar__chevron--expanded]="isExpanded(entry[0], idx)"
156
+ viewBox="0 0 16 16"
157
+ fill="currentColor"
93
158
  >
94
- @if (item.kind === 'page') {
95
- <span class="prism-sidebar__page-icon">◈</span>
96
- }
97
- {{ itemLabel(item) }}
98
- </button>
159
+ <path d="M6 4l4 4-4 4"/>
160
+ </svg>
161
+ {{ entry[0] }}
162
+ </button>
163
+ @if (isExpanded(entry[0], idx)) {
164
+ @for (item of entry[1]; track itemKey(item)) {
165
+ <button
166
+ class="prism-sidebar__item"
167
+ [class.prism-sidebar__item--active]="isActive(item)"
168
+ [class.prism-sidebar__item--page]="item.kind === 'page'"
169
+ (click)="onSelect(item)"
170
+ >
171
+ @if (item.kind === 'page') {
172
+ <span class="prism-sidebar__page-icon">◈</span>
173
+ }
174
+ {{ itemLabel(item) }}
175
+ </button>
176
+ }
99
177
  }
100
178
  </div>
101
179
  }
102
180
  </nav>
103
- `, styles: ["\n .prism-sidebar {\n background: var(--prism-bg);\n border-right: 1px solid var(--prism-border);\n overflow-y: auto;\n overflow-x: hidden;\n padding: 8px 0;\n height: 100%;\n }\n .prism-sidebar::-webkit-scrollbar { width: 4px; }\n .prism-sidebar::-webkit-scrollbar-track { background: transparent; }\n .prism-sidebar::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 2px; }\n\n .prism-sidebar__category { margin-bottom: 4px; }\n\n .prism-sidebar__category-title {\n margin: 0;\n padding: 10px 16px 4px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--prism-text-ghost);\n font-family: var(--prism-font-sans);\n }\n\n .prism-sidebar__item {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n padding: 6px 14px 6px 11px;\n font-size: 13px;\n font-family: var(--prism-font-sans);\n border: none;\n background: none;\n color: var(--prism-text-muted);\n cursor: pointer;\n border-left: 3px solid transparent;\n text-align: left;\n transition: background 0.1s, color 0.1s, border-color 0.1s;\n }\n\n .prism-sidebar__item:hover {\n background: color-mix(in srgb, var(--prism-primary) 6%, transparent);\n color: var(--prism-text-2);\n }\n\n .prism-sidebar__item--active {\n border-left-color: var(--prism-primary);\n background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n color: var(--prism-text);\n font-weight: 500;\n }\n\n .prism-sidebar__item--active:hover {\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n }\n\n .prism-sidebar__page-icon {\n font-size: 10px;\n opacity: 0.6;\n }\n "] }]
181
+ `, styles: ["\n .prism-sidebar {\n background: var(--prism-sidebar-bg, var(--prism-bg));\n border-right: 1px solid var(--prism-border);\n overflow-y: auto;\n overflow-x: hidden;\n padding: 4px 0;\n height: 100%;\n }\n .prism-sidebar::-webkit-scrollbar { width: 4px; }\n .prism-sidebar::-webkit-scrollbar-track { background: transparent; }\n .prism-sidebar::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 2px; }\n\n .prism-sidebar__category { margin-bottom: 2px; }\n\n .prism-sidebar__category-title {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n margin: 0;\n padding: 7px 16px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--prism-text-2);\n font-family: var(--prism-font-sans);\n background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n border: none;\n border-left: 2px solid color-mix(in srgb, var(--prism-primary) 40%, transparent);\n cursor: pointer;\n text-align: left;\n transition: background 0.12s, color 0.12s, border-color 0.12s;\n }\n\n .prism-sidebar__category-title:hover {\n background: color-mix(in srgb, var(--prism-primary) 14%, transparent);\n color: var(--prism-text);\n border-left-color: var(--prism-primary);\n }\n\n .prism-sidebar__chevron {\n width: 10px;\n height: 10px;\n flex-shrink: 0;\n transition: transform 0.15s;\n fill: none;\n stroke: currentColor;\n stroke-width: 1.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n opacity: 0.5;\n }\n\n .prism-sidebar__category-title:hover .prism-sidebar__chevron {\n opacity: 0.8;\n }\n\n .prism-sidebar__chevron--expanded {\n transform: rotate(90deg);\n }\n\n .prism-sidebar__item {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n padding: 6px 14px 6px 24px;\n font-size: 13px;\n font-family: var(--prism-font-sans);\n border: none;\n background: none;\n color: var(--prism-text-muted);\n cursor: pointer;\n border-left: 2px solid transparent;\n text-align: left;\n transition: background 0.1s, color 0.1s, border-color 0.1s;\n }\n\n .prism-sidebar__item:hover {\n background: color-mix(in srgb, var(--prism-primary) 6%, transparent);\n color: var(--prism-text-2);\n }\n\n .prism-sidebar__item--active {\n border-left-color: var(--prism-primary);\n background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n color: var(--prism-text);\n font-weight: 500;\n }\n\n .prism-sidebar__item--active:hover {\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n }\n\n .prism-sidebar__page-icon {\n font-size: 10px;\n opacity: 0.6;\n }\n "] }]
104
182
  }], null, null); })();
105
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismSidebarComponent, { className: "PrismSidebarComponent", filePath: "app/sidebar/prism-sidebar.component.ts", lineNumber: 95 }); })();
183
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismSidebarComponent, { className: "PrismSidebarComponent", filePath: "app/sidebar/prism-sidebar.component.ts", lineNumber: 149 }); })();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ng-prism/core",
3
- "version": "21.1.0",
3
+ "version": "21.2.0",
4
4
  "description": "Lightweight Angular-native component showcase — no story files needed.",
5
5
  "keywords": [
6
6
  "angular",