@ng-prism/core 21.5.1 → 21.5.3
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/dist/app/component-head/prism-component-head.component.js +2 -2
- package/dist/app/header/prism-header.component.d.ts.map +1 -1
- package/dist/app/header/prism-header.component.js +3 -3
- package/dist/app/panels/a11y/a11y-score.component.js +2 -2
- package/dist/app/shell/prism-shell.component.js +4 -4
- package/dist/app/sidebar/prism-sidebar.component.d.ts +3 -4
- package/dist/app/sidebar/prism-sidebar.component.d.ts.map +1 -1
- package/dist/app/sidebar/prism-sidebar.component.js +83 -108
- package/package.json +1 -1
|
@@ -148,7 +148,7 @@ export class PrismComponentHeadComponent {
|
|
|
148
148
|
} if (rf & 2) {
|
|
149
149
|
let tmp_0_0;
|
|
150
150
|
i0.ɵɵconditional((tmp_0_0 = ctx.comp()) ? 0 : -1, tmp_0_0);
|
|
151
|
-
} }, dependencies: [PrismIconComponent, PrismStatComponent], styles: ["[_nghost-%COMP%] { display: block; flex-shrink: 0; }\n\n .comp-head[_ngcontent-%COMP%] {\n padding: 12px 28px;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n position: relative;\n }\n .comp-head[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 6px;\n background: linear-gradient(180deg, var(--prism-primary-from) 0%,
|
|
151
|
+
} }, dependencies: [PrismIconComponent, PrismStatComponent], styles: ["[_nghost-%COMP%] { display: block; flex-shrink: 0; }\n\n .comp-head[_ngcontent-%COMP%] {\n padding: 12px 28px;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n position: relative;\n }\n .comp-head[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 6px;\n background: linear-gradient(180deg, var(--prism-primary-from) 0%, var(--prism-accent) 50%, var(--prism-primary-to) 100%);\n }\n\n .comp-head-top[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n }\n\n .comp-crumb[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: var(--fs-sm);\n color: var(--prism-text-ghost);\n margin-bottom: 6px;\n font-weight: 500;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n }\n .comp-crumb[_ngcontent-%COMP%] prism-icon[_ngcontent-%COMP%] { opacity: 0.6; }\n\n .comp-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--fs-2xl);\n font-weight: 700;\n letter-spacing: -0.02em;\n color: var(--prism-text);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .comp-selector[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--prism-primary);\n padding: 3px 8px;\n border-radius: var(--radius-sm);\n background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n font-weight: 500;\n }\n\n .comp-desc[_ngcontent-%COMP%] {\n margin: 6px 0 0;\n font-size: var(--fs-lg);\n color: var(--prism-text-2);\n max-width: 72ch;\n line-height: 1.55;\n }\n\n .comp-tags[_ngcontent-%COMP%] {\n margin-top: 10px;\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n }\n .comp-tag[_ngcontent-%COMP%] {\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n border-radius: var(--radius-xs);\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n color: var(--prism-primary);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n }\n\n .comp-head-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 18px;\n flex-shrink: 0;\n }"], changeDetection: 0 });
|
|
152
152
|
}
|
|
153
153
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismComponentHeadComponent, [{
|
|
154
154
|
type: Component,
|
|
@@ -202,6 +202,6 @@ export class PrismComponentHeadComponent {
|
|
|
202
202
|
</div>
|
|
203
203
|
</section>
|
|
204
204
|
}
|
|
205
|
-
`, styles: ["\n :host { display: block; flex-shrink: 0; }\n\n .comp-head {\n padding: 12px 28px;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n position: relative;\n }\n .comp-head::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 6px;\n background: linear-gradient(180deg, var(--prism-primary-from) 0%,
|
|
205
|
+
`, styles: ["\n :host { display: block; flex-shrink: 0; }\n\n .comp-head {\n padding: 12px 28px;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n position: relative;\n }\n .comp-head::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 6px;\n background: linear-gradient(180deg, var(--prism-primary-from) 0%, var(--prism-accent) 50%, var(--prism-primary-to) 100%);\n }\n\n .comp-head-top {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n }\n\n .comp-crumb {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: var(--fs-sm);\n color: var(--prism-text-ghost);\n margin-bottom: 6px;\n font-weight: 500;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n }\n .comp-crumb prism-icon { opacity: 0.6; }\n\n .comp-title {\n margin: 0;\n font-size: var(--fs-2xl);\n font-weight: 700;\n letter-spacing: -0.02em;\n color: var(--prism-text);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .comp-selector {\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--prism-primary);\n padding: 3px 8px;\n border-radius: var(--radius-sm);\n background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n font-weight: 500;\n }\n\n .comp-desc {\n margin: 6px 0 0;\n font-size: var(--fs-lg);\n color: var(--prism-text-2);\n max-width: 72ch;\n line-height: 1.55;\n }\n\n .comp-tags {\n margin-top: 10px;\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n }\n .comp-tag {\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n border-radius: var(--radius-xs);\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n color: var(--prism-primary);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n }\n\n .comp-head-stats {\n display: flex;\n gap: 18px;\n flex-shrink: 0;\n }\n "] }]
|
|
206
206
|
}], null, null); })();
|
|
207
207
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeadComponent, { className: "PrismComponentHeadComponent", filePath: "app/component-head/prism-component-head.component.ts", lineNumber: 160 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prism-header.component.d.ts","sourceRoot":"","sources":["../../../src/app/header/prism-header.component.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAEvE,
|
|
1
|
+
{"version":3,"file":"prism-header.component.d.ts","sourceRoot":"","sources":["../../../src/app/header/prism-header.component.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAEvE,qBAoLa,oBAAoB;IAC/B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAC9D,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAE5D,SAAS,CAAC,QAAQ,CAAC,OAAO,gDAKvB;IAEH,SAAS,CAAC,QAAQ,CAAC,KAAK,yCAAmD;IAC3E,SAAS,CAAC,QAAQ,CAAC,QAAQ,gDAAgD;IAG3E,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAO7C,SAAS,CAAC,aAAa,IAAI,IAAI;yCAvBpB,oBAAoB;2CAApB,oBAAoB;CA0BhC"}
|
|
@@ -86,7 +86,7 @@ export class PrismHeaderComponent {
|
|
|
86
86
|
i0.ɵɵattribute("aria-label", ctx.themeService.isDark() ? "Switch to light mode" : "Switch to dark mode")("aria-pressed", ctx.themeService.isDark());
|
|
87
87
|
i0.ɵɵadvance();
|
|
88
88
|
i0.ɵɵconditional(ctx.themeService.isDark() ? 10 : 11);
|
|
89
|
-
} }, dependencies: [PrismIconComponent, PrismLayoutMenuComponent], styles: [".prism-header[_ngcontent-%COMP%] {\n height: 52px;\n display: grid;\n grid-template-columns: var(--sw, 264px) 1fr auto;\n align-items: center;\n padding: 0 14px 0 0;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n }\n\n .prism-header__brand[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 0 16px;\n cursor: pointer;\n }\n\n .prism-header__logo-default[_ngcontent-%COMP%] {\n width: 26px;\n height: 26px;\n flex: 0 0 26px;\n color: var(--prism-primary);\n filter: drop-shadow(0 0 8px var(--prism-glow-strong));\n }\n .prism-header__logo-default[_ngcontent-%COMP%] img[_ngcontent-%COMP%] { width: 30px; }\n\n .prism-header__logo-img[_ngcontent-%COMP%] {\n height: 26px;\n width: auto;\n object-fit: contain;\n }\n\n .prism-header__brand-text[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n line-height: 1.1;\n }\n\n .prism-header__brand-name[_ngcontent-%COMP%] {\n font-weight: 700;\n font-size: var(--fs-xl);\n letter-spacing: -0.01em;\n background: linear-gradient(90deg,
|
|
89
|
+
} }, dependencies: [PrismIconComponent, PrismLayoutMenuComponent], styles: [".prism-header[_ngcontent-%COMP%] {\n height: 52px;\n display: grid;\n grid-template-columns: minmax(min-content, var(--sw, 264px)) 1fr auto;\n align-items: center;\n padding: 0 14px 0 0;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n }\n\n .prism-header__brand[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 0 16px;\n cursor: pointer;\n white-space: nowrap;\n }\n\n .prism-header__logo-default[_ngcontent-%COMP%] {\n width: 26px;\n height: 26px;\n flex: 0 0 26px;\n color: var(--prism-primary);\n filter: drop-shadow(0 0 8px var(--prism-glow-strong));\n }\n .prism-header__logo-default[_ngcontent-%COMP%] img[_ngcontent-%COMP%] { width: 30px; }\n\n .prism-header__logo-img[_ngcontent-%COMP%] {\n height: 26px;\n width: auto;\n object-fit: contain;\n }\n\n .prism-header__brand-text[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n line-height: 1.1;\n }\n\n .prism-header__brand-name[_ngcontent-%COMP%] {\n font-weight: 700;\n font-size: var(--fs-xl);\n letter-spacing: -0.01em;\n background: linear-gradient(90deg, var(--prism-primary), var(--prism-accent) 60%, var(--prism-primary-to));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n\n .prism-header__brand-sub[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: var(--fs-xs);\n color: var(--prism-text-ghost);\n }\n\n .prism-header__cmdbar[_ngcontent-%COMP%] {\n max-width: 540px;\n width: 100%;\n justify-self: center;\n display: flex;\n align-items: center;\n gap: 10px;\n height: 32px;\n padding: 0 12px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: 8px;\n color: var(--prism-text-muted);\n font-size: var(--fs-lg);\n cursor: pointer;\n transition: border-color var(--dur-fast), background var(--dur-fast);\n }\n .prism-header__cmdbar[_ngcontent-%COMP%]:hover {\n border-color: var(--prism-border-strong);\n color: var(--prism-text-2);\n }\n\n .prism-header__cmdbar-text[_ngcontent-%COMP%] {\n flex: 1;\n text-align: left;\n }\n\n .prism-header__cmdbar-shortcut[_ngcontent-%COMP%] {\n display: flex;\n gap: 3px;\n }\n .prism-header__cmdbar-shortcut[_ngcontent-%COMP%] kbd[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: 10.5px;\n padding: 1px 5px;\n border-radius: 4px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n color: var(--prism-text-muted);\n }\n\n .prism-header__actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 6px;\n }\n\n .prism-header__icon-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n display: grid;\n place-items: center;\n border-radius: 8px;\n color: var(--prism-text-muted);\n background: none;\n border: none;\n cursor: pointer;\n position: relative;\n transition: all var(--dur-fast);\n }\n .prism-header__icon-btn[_ngcontent-%COMP%]:hover {\n background: var(--prism-input-bg);\n color: var(--prism-text);\n }\n\n [_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--prism-primary);\n outline-offset: 2px;\n }"], changeDetection: 0 });
|
|
90
90
|
}
|
|
91
91
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismHeaderComponent, [{
|
|
92
92
|
type: Component,
|
|
@@ -135,9 +135,9 @@ export class PrismHeaderComponent {
|
|
|
135
135
|
<prism-layout-menu />
|
|
136
136
|
</div>
|
|
137
137
|
</header>
|
|
138
|
-
`, styles: ["\n .prism-header {\n height: 52px;\n display: grid;\n grid-template-columns: var(--sw, 264px) 1fr auto;\n align-items: center;\n padding: 0 14px 0 0;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n }\n\n .prism-header__brand {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 0 16px;\n cursor: pointer;\n }\n\n .prism-header__logo-default {\n width: 26px;\n height: 26px;\n flex: 0 0 26px;\n color: var(--prism-primary);\n filter: drop-shadow(0 0 8px var(--prism-glow-strong));\n }\n .prism-header__logo-default img { width: 30px; }\n\n .prism-header__logo-img {\n height: 26px;\n width: auto;\n object-fit: contain;\n }\n\n .prism-header__brand-text {\n display: flex;\n flex-direction: column;\n line-height: 1.1;\n }\n\n .prism-header__brand-name {\n font-weight: 700;\n font-size: var(--fs-xl);\n letter-spacing: -0.01em;\n background: linear-gradient(90deg,
|
|
138
|
+
`, styles: ["\n .prism-header {\n height: 52px;\n display: grid;\n grid-template-columns: minmax(min-content, var(--sw, 264px)) 1fr auto;\n align-items: center;\n padding: 0 14px 0 0;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n }\n\n .prism-header__brand {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 0 16px;\n cursor: pointer;\n white-space: nowrap;\n }\n\n .prism-header__logo-default {\n width: 26px;\n height: 26px;\n flex: 0 0 26px;\n color: var(--prism-primary);\n filter: drop-shadow(0 0 8px var(--prism-glow-strong));\n }\n .prism-header__logo-default img { width: 30px; }\n\n .prism-header__logo-img {\n height: 26px;\n width: auto;\n object-fit: contain;\n }\n\n .prism-header__brand-text {\n display: flex;\n flex-direction: column;\n line-height: 1.1;\n }\n\n .prism-header__brand-name {\n font-weight: 700;\n font-size: var(--fs-xl);\n letter-spacing: -0.01em;\n background: linear-gradient(90deg, var(--prism-primary), var(--prism-accent) 60%, var(--prism-primary-to));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n\n .prism-header__brand-sub {\n font-family: var(--font-mono);\n font-size: var(--fs-xs);\n color: var(--prism-text-ghost);\n }\n\n .prism-header__cmdbar {\n max-width: 540px;\n width: 100%;\n justify-self: center;\n display: flex;\n align-items: center;\n gap: 10px;\n height: 32px;\n padding: 0 12px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: 8px;\n color: var(--prism-text-muted);\n font-size: var(--fs-lg);\n cursor: pointer;\n transition: border-color var(--dur-fast), background var(--dur-fast);\n }\n .prism-header__cmdbar:hover {\n border-color: var(--prism-border-strong);\n color: var(--prism-text-2);\n }\n\n .prism-header__cmdbar-text {\n flex: 1;\n text-align: left;\n }\n\n .prism-header__cmdbar-shortcut {\n display: flex;\n gap: 3px;\n }\n .prism-header__cmdbar-shortcut kbd {\n font-family: var(--font-mono);\n font-size: 10.5px;\n padding: 1px 5px;\n border-radius: 4px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n color: var(--prism-text-muted);\n }\n\n .prism-header__actions {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 6px;\n }\n\n .prism-header__icon-btn {\n width: 32px;\n height: 32px;\n display: grid;\n place-items: center;\n border-radius: 8px;\n color: var(--prism-text-muted);\n background: none;\n border: none;\n cursor: pointer;\n position: relative;\n transition: all var(--dur-fast);\n }\n .prism-header__icon-btn:hover {\n background: var(--prism-input-bg);\n color: var(--prism-text);\n }\n\n :focus-visible {\n outline: 2px solid var(--prism-primary);\n outline-offset: 2px;\n }\n "] }]
|
|
139
139
|
}], null, { onGlobalKey: [{
|
|
140
140
|
type: HostListener,
|
|
141
141
|
args: ['document:keydown', ['$event']]
|
|
142
142
|
}] }); })();
|
|
143
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismHeaderComponent, { className: "PrismHeaderComponent", filePath: "app/header/prism-header.component.ts", lineNumber:
|
|
143
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismHeaderComponent, { className: "PrismHeaderComponent", filePath: "app/header/prism-header.component.ts", lineNumber: 195 }); })();
|
|
@@ -42,7 +42,7 @@ export class A11yScoreComponent {
|
|
|
42
42
|
i0.ɵɵattribute("r", ctx.R)("stroke-dasharray", ctx.CIRC)("stroke-dashoffset", ctx.dashOffset())("stroke", "url(#" + ctx.gradientId + ")");
|
|
43
43
|
i0.ɵɵadvance();
|
|
44
44
|
i0.ɵɵconditional(!ctx.compact() ? 8 : -1);
|
|
45
|
-
} }, styles: ["[_nghost-%COMP%] { display: inline-flex; }\n\n .score-ring[_ngcontent-%COMP%] {\n position: relative;\n width: 128px;\n height: 128px;\n }\n .compact[_nghost-%COMP%] .score-ring[_ngcontent-%COMP%], .compact [_nghost-%COMP%] .score-ring[_ngcontent-%COMP%], \n [style*=\"width:18px\"][_nghost-%COMP%] .score-ring[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n }\n\n .score-ring[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] {\n transform: rotate(-90deg);\n width: 100%;\n height: 100%;\n }\n\n .score-ring[_ngcontent-%COMP%] circle[_ngcontent-%COMP%] {\n fill: none;\n stroke-width: 10;\n }\n .track[_ngcontent-%COMP%] { stroke: var(--prism-input-bg); }\n .fill[_ngcontent-%COMP%] {\n stroke-linecap: round;\n transition: stroke-dashoffset 0.5s ease;\n }\n\n .score-val[_ngcontent-%COMP%] {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0;\n }\n .score-num[_ngcontent-%COMP%] {\n font-size: 30px;\n font-weight: 700;\n letter-spacing: -0.02em;\n background: linear-gradient(135deg,
|
|
45
|
+
} }, styles: ["[_nghost-%COMP%] { display: inline-flex; }\n\n .score-ring[_ngcontent-%COMP%] {\n position: relative;\n width: 128px;\n height: 128px;\n }\n .compact[_nghost-%COMP%] .score-ring[_ngcontent-%COMP%], .compact [_nghost-%COMP%] .score-ring[_ngcontent-%COMP%], \n [style*=\"width:18px\"][_nghost-%COMP%] .score-ring[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n }\n\n .score-ring[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] {\n transform: rotate(-90deg);\n width: 100%;\n height: 100%;\n }\n\n .score-ring[_ngcontent-%COMP%] circle[_ngcontent-%COMP%] {\n fill: none;\n stroke-width: 10;\n }\n .track[_ngcontent-%COMP%] { stroke: var(--prism-input-bg); }\n .fill[_ngcontent-%COMP%] {\n stroke-linecap: round;\n transition: stroke-dashoffset 0.5s ease;\n }\n\n .score-val[_ngcontent-%COMP%] {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0;\n }\n .score-num[_ngcontent-%COMP%] {\n font-size: 30px;\n font-weight: 700;\n letter-spacing: -0.02em;\n background: linear-gradient(135deg, var(--prism-primary), var(--prism-accent));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n font-family: var(--font-mono);\n }\n .score-max[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--prism-text-ghost);\n font-weight: 500;\n }"], changeDetection: 0 });
|
|
46
46
|
}
|
|
47
47
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yScoreComponent, [{
|
|
48
48
|
type: Component,
|
|
@@ -73,6 +73,6 @@ export class A11yScoreComponent {
|
|
|
73
73
|
</div>
|
|
74
74
|
}
|
|
75
75
|
</div>
|
|
76
|
-
`, styles: ["\n :host { display: inline-flex; }\n\n .score-ring {\n position: relative;\n width: 128px;\n height: 128px;\n }\n :host-context(.compact) .score-ring,\n :host([style*=\"width:18px\"]) .score-ring {\n width: 100%;\n height: 100%;\n }\n\n .score-ring svg {\n transform: rotate(-90deg);\n width: 100%;\n height: 100%;\n }\n\n .score-ring circle {\n fill: none;\n stroke-width: 10;\n }\n .track { stroke: var(--prism-input-bg); }\n .fill {\n stroke-linecap: round;\n transition: stroke-dashoffset 0.5s ease;\n }\n\n .score-val {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0;\n }\n .score-num {\n font-size: 30px;\n font-weight: 700;\n letter-spacing: -0.02em;\n background: linear-gradient(135deg,
|
|
76
|
+
`, styles: ["\n :host { display: inline-flex; }\n\n .score-ring {\n position: relative;\n width: 128px;\n height: 128px;\n }\n :host-context(.compact) .score-ring,\n :host([style*=\"width:18px\"]) .score-ring {\n width: 100%;\n height: 100%;\n }\n\n .score-ring svg {\n transform: rotate(-90deg);\n width: 100%;\n height: 100%;\n }\n\n .score-ring circle {\n fill: none;\n stroke-width: 10;\n }\n .track { stroke: var(--prism-input-bg); }\n .fill {\n stroke-linecap: round;\n transition: stroke-dashoffset 0.5s ease;\n }\n\n .score-val {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0;\n }\n .score-num {\n font-size: 30px;\n font-weight: 700;\n letter-spacing: -0.02em;\n background: linear-gradient(135deg, var(--prism-primary), var(--prism-accent));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n font-family: var(--font-mono);\n }\n .score-max {\n font-size: 11px;\n color: var(--prism-text-ghost);\n font-weight: 500;\n }\n "] }]
|
|
77
77
|
}], null, { score: [{ type: i0.Input, args: [{ isSignal: true, alias: "score", required: true }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] }); })();
|
|
78
78
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yScoreComponent, { className: "A11yScoreComponent", filePath: "app/panels/a11y/a11y-score.component.ts", lineNumber: 100 }); })();
|
|
@@ -145,16 +145,16 @@ export class PrismShellComponent {
|
|
|
145
145
|
onKeyDown(e) {
|
|
146
146
|
if (!e.altKey)
|
|
147
147
|
return;
|
|
148
|
-
switch (e.
|
|
149
|
-
case '
|
|
148
|
+
switch (e.code) {
|
|
149
|
+
case 'KeyS':
|
|
150
150
|
e.preventDefault();
|
|
151
151
|
this.layout.toggleSidebar();
|
|
152
152
|
break;
|
|
153
|
-
case '
|
|
153
|
+
case 'KeyT':
|
|
154
154
|
e.preventDefault();
|
|
155
155
|
this.layout.toggleToolbar();
|
|
156
156
|
break;
|
|
157
|
-
case '
|
|
157
|
+
case 'KeyA':
|
|
158
158
|
e.preventDefault();
|
|
159
159
|
this.layout.toggleAddons();
|
|
160
160
|
break;
|
|
@@ -11,14 +11,13 @@ export declare class PrismSidebarComponent {
|
|
|
11
11
|
protected readonly navigationService: PrismNavigationService;
|
|
12
12
|
protected readonly searchService: PrismSearchService;
|
|
13
13
|
private readonly manifestService;
|
|
14
|
+
private readonly filterInput;
|
|
15
|
+
protected onGlobalKey(e: KeyboardEvent): void;
|
|
14
16
|
private readonly collapsedSet;
|
|
15
17
|
protected readonly totalPages: import("@angular/core").Signal<number>;
|
|
16
18
|
protected readonly pageCategories: import("@angular/core").Signal<SidebarCategory[]>;
|
|
17
19
|
protected readonly componentCategories: import("@angular/core").Signal<SidebarCategory[]>;
|
|
18
|
-
protected readonly
|
|
19
|
-
components: number;
|
|
20
|
-
variants: number;
|
|
21
|
-
}>;
|
|
20
|
+
protected readonly totalComponents: import("@angular/core").Signal<number>;
|
|
22
21
|
protected isCollapsed(key: string): boolean;
|
|
23
22
|
protected toggleCollapse(key: string): void;
|
|
24
23
|
protected itemKey(item: NavigationItem): string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAwBzE,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,qBAuRa,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA0D;IAGtF,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAQ7C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6C;IAE1E,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAE1B;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,oDAc9B;IAEH,SAAS,CAAC,QAAQ,CAAC,mBAAmB,oDAanC;IAEH,SAAS,CAAC,QAAQ,CAAC,eAAe,yCAEhC;IAEF,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAI3C,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAU3C,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;IAWjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQ9C,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,aAAa;yCA9GV,qBAAqB;2CAArB,qBAAqB;CAmHjC"}
|
|
@@ -1,16 +1,17 @@
|
|
|
1
|
-
import { Component, computed, inject, signal, ChangeDetectionStrategy, } from '@angular/core';
|
|
1
|
+
import { Component, computed, inject, signal, viewChild, HostListener, ChangeDetectionStrategy, } from '@angular/core';
|
|
2
2
|
import { PrismIconComponent } from '../icons/prism-icon.component.js';
|
|
3
3
|
import { PrismNavigationService } from '../services/prism-navigation.service.js';
|
|
4
4
|
import { PrismSearchService } from '../services/prism-search.service.js';
|
|
5
5
|
import { PrismManifestService } from '../services/prism-manifest.service.js';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
|
+
const _c0 = ["filterInput"];
|
|
7
8
|
const _forTrack0 = ($index, $item) => $item.name;
|
|
8
9
|
function _forTrack1($index, $item) { return this.itemKey($item); }
|
|
9
|
-
function
|
|
10
|
+
function PrismSidebarComponent_Conditional_8_For_8_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
10
11
|
const _r4 = i0.ɵɵgetCurrentView();
|
|
11
|
-
i0.ɵɵelementStart(0, "button",
|
|
12
|
-
i0.ɵɵlistener("click", function
|
|
13
|
-
i0.ɵɵelementStart(1, "span",
|
|
12
|
+
i0.ɵɵelementStart(0, "button", 18);
|
|
13
|
+
i0.ɵɵlistener("click", function PrismSidebarComponent_Conditional_8_For_8_Conditional_5_For_2_Template_button_click_0_listener() { const item_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onSelect(item_r5)); });
|
|
14
|
+
i0.ɵɵelementStart(1, "span", 19);
|
|
14
15
|
i0.ɵɵtext(2);
|
|
15
16
|
i0.ɵɵelementEnd()();
|
|
16
17
|
} if (rf & 2) {
|
|
@@ -20,23 +21,23 @@ function PrismSidebarComponent_Conditional_7_For_8_Conditional_5_For_2_Template(
|
|
|
20
21
|
i0.ɵɵadvance(2);
|
|
21
22
|
i0.ɵɵtextInterpolate(ctx_r2.itemLabel(item_r5));
|
|
22
23
|
} }
|
|
23
|
-
function
|
|
24
|
-
i0.ɵɵelementStart(0, "div",
|
|
25
|
-
i0.ɵɵrepeaterCreate(1,
|
|
24
|
+
function PrismSidebarComponent_Conditional_8_For_8_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
25
|
+
i0.ɵɵelementStart(0, "div", 16);
|
|
26
|
+
i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_Conditional_8_For_8_Conditional_5_For_2_Template, 3, 3, "button", 17, _forTrack1, true);
|
|
26
27
|
i0.ɵɵelementEnd();
|
|
27
28
|
} if (rf & 2) {
|
|
28
29
|
const cat_r2 = i0.ɵɵnextContext().$implicit;
|
|
29
30
|
i0.ɵɵadvance();
|
|
30
31
|
i0.ɵɵrepeater(cat_r2.items);
|
|
31
32
|
} }
|
|
32
|
-
function
|
|
33
|
+
function PrismSidebarComponent_Conditional_8_For_8_Template(rf, ctx) { if (rf & 1) {
|
|
33
34
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
34
|
-
i0.ɵɵelementStart(0, "div",
|
|
35
|
-
i0.ɵɵlistener("click", function
|
|
36
|
-
i0.ɵɵelement(2, "prism-icon",
|
|
35
|
+
i0.ɵɵelementStart(0, "div", 12)(1, "button", 13);
|
|
36
|
+
i0.ɵɵlistener("click", function PrismSidebarComponent_Conditional_8_For_8_Template_button_click_1_listener() { const cat_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleCollapse("page:" + cat_r2.name)); });
|
|
37
|
+
i0.ɵɵelement(2, "prism-icon", 14)(3, "span", 15);
|
|
37
38
|
i0.ɵɵtext(4);
|
|
38
39
|
i0.ɵɵelementEnd();
|
|
39
|
-
i0.ɵɵconditionalCreate(5,
|
|
40
|
+
i0.ɵɵconditionalCreate(5, PrismSidebarComponent_Conditional_8_For_8_Conditional_5_Template, 3, 0, "div", 16);
|
|
40
41
|
i0.ɵɵelementEnd();
|
|
41
42
|
} if (rf & 2) {
|
|
42
43
|
const cat_r2 = ctx.$implicit;
|
|
@@ -53,15 +54,15 @@ function PrismSidebarComponent_Conditional_7_For_8_Template(rf, ctx) { if (rf &
|
|
|
53
54
|
i0.ɵɵadvance();
|
|
54
55
|
i0.ɵɵconditional(!ctx_r2.isCollapsed("page:" + cat_r2.name) ? 5 : -1);
|
|
55
56
|
} }
|
|
56
|
-
function
|
|
57
|
-
i0.ɵɵelementStart(0, "div",
|
|
58
|
-
i0.ɵɵelement(3, "prism-icon",
|
|
57
|
+
function PrismSidebarComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
58
|
+
i0.ɵɵelementStart(0, "div", 6)(1, "div", 9)(2, "span", 10);
|
|
59
|
+
i0.ɵɵelement(3, "prism-icon", 11);
|
|
59
60
|
i0.ɵɵtext(4, " Pages ");
|
|
60
61
|
i0.ɵɵelementEnd();
|
|
61
62
|
i0.ɵɵelementStart(5, "span");
|
|
62
63
|
i0.ɵɵtext(6);
|
|
63
64
|
i0.ɵɵelementEnd()();
|
|
64
|
-
i0.ɵɵrepeaterCreate(7,
|
|
65
|
+
i0.ɵɵrepeaterCreate(7, PrismSidebarComponent_Conditional_8_For_8_Template, 6, 8, "div", 8, _forTrack0);
|
|
65
66
|
i0.ɵɵelementEnd();
|
|
66
67
|
} if (rf & 2) {
|
|
67
68
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
@@ -72,9 +73,9 @@ function PrismSidebarComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
|
72
73
|
i0.ɵɵadvance();
|
|
73
74
|
i0.ɵɵrepeater(ctx_r2.pageCategories());
|
|
74
75
|
} }
|
|
75
|
-
function
|
|
76
|
-
i0.ɵɵelementStart(0, "div",
|
|
77
|
-
i0.ɵɵelement(2, "prism-icon",
|
|
76
|
+
function PrismSidebarComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
|
|
77
|
+
i0.ɵɵelementStart(0, "div", 7)(1, "span", 20);
|
|
78
|
+
i0.ɵɵelement(2, "prism-icon", 21);
|
|
78
79
|
i0.ɵɵtext(3, " Components ");
|
|
79
80
|
i0.ɵɵelementEnd();
|
|
80
81
|
i0.ɵɵelementStart(4, "span");
|
|
@@ -85,46 +86,16 @@ function PrismSidebarComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
|
85
86
|
i0.ɵɵadvance(2);
|
|
86
87
|
i0.ɵɵproperty("size", 10);
|
|
87
88
|
i0.ɵɵadvance(3);
|
|
88
|
-
i0.ɵɵtextInterpolate(ctx_r2.
|
|
89
|
-
} }
|
|
90
|
-
function PrismSidebarComponent_For_10_Conditional_5_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
91
|
-
i0.ɵɵelementStart(0, "span", 22);
|
|
92
|
-
i0.ɵɵtext(1);
|
|
93
|
-
i0.ɵɵelementEnd();
|
|
94
|
-
} if (rf & 2) {
|
|
95
|
-
const item_r9 = i0.ɵɵnextContext().$implicit;
|
|
96
|
-
i0.ɵɵadvance();
|
|
97
|
-
i0.ɵɵtextInterpolate((item_r9.data.meta.showcaseConfig.variants == null ? null : item_r9.data.meta.showcaseConfig.variants.length) ?? 0);
|
|
98
|
-
} }
|
|
99
|
-
function PrismSidebarComponent_For_10_Conditional_5_For_2_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
|
|
100
|
-
const _r10 = i0.ɵɵgetCurrentView();
|
|
101
|
-
i0.ɵɵelementStart(0, "button", 24);
|
|
102
|
-
i0.ɵɵlistener("click", function PrismSidebarComponent_For_10_Conditional_5_For_2_Conditional_5_For_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const item_r9 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onSelect(item_r9)); });
|
|
103
|
-
i0.ɵɵelement(1, "span", 25);
|
|
104
|
-
i0.ɵɵtext(2);
|
|
105
|
-
i0.ɵɵelementEnd();
|
|
106
|
-
} if (rf & 2) {
|
|
107
|
-
const variant_r11 = ctx.$implicit;
|
|
108
|
-
i0.ɵɵadvance(2);
|
|
109
|
-
i0.ɵɵtextInterpolate1(" ", variant_r11.name, " ");
|
|
89
|
+
i0.ɵɵtextInterpolate(ctx_r2.totalComponents());
|
|
110
90
|
} }
|
|
111
|
-
function
|
|
112
|
-
i0.ɵɵrepeaterCreate(0, PrismSidebarComponent_For_10_Conditional_5_For_2_Conditional_5_For_1_Template, 3, 1, "button", 23, _forTrack0);
|
|
113
|
-
} if (rf & 2) {
|
|
114
|
-
const item_r9 = i0.ɵɵnextContext().$implicit;
|
|
115
|
-
i0.ɵɵrepeater(item_r9.data.meta.showcaseConfig.variants);
|
|
116
|
-
} }
|
|
117
|
-
function PrismSidebarComponent_For_10_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
91
|
+
function PrismSidebarComponent_For_11_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
118
92
|
const _r8 = i0.ɵɵgetCurrentView();
|
|
119
|
-
i0.ɵɵelementStart(0, "button",
|
|
120
|
-
i0.ɵɵlistener("click", function
|
|
121
|
-
i0.ɵɵelement(1, "prism-icon",
|
|
122
|
-
i0.ɵɵelementStart(2, "span",
|
|
93
|
+
i0.ɵɵelementStart(0, "button", 18);
|
|
94
|
+
i0.ɵɵlistener("click", function PrismSidebarComponent_For_11_Conditional_7_For_2_Template_button_click_0_listener() { const item_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onSelect(item_r9)); });
|
|
95
|
+
i0.ɵɵelement(1, "prism-icon", 23);
|
|
96
|
+
i0.ɵɵelementStart(2, "span", 19);
|
|
123
97
|
i0.ɵɵtext(3);
|
|
124
|
-
i0.ɵɵelementEnd();
|
|
125
|
-
i0.ɵɵconditionalCreate(4, PrismSidebarComponent_For_10_Conditional_5_For_2_Conditional_4_Template, 2, 1, "span", 22);
|
|
126
|
-
i0.ɵɵelementEnd();
|
|
127
|
-
i0.ɵɵconditionalCreate(5, PrismSidebarComponent_For_10_Conditional_5_For_2_Conditional_5_Template, 2, 0);
|
|
98
|
+
i0.ɵɵelementEnd()();
|
|
128
99
|
} if (rf & 2) {
|
|
129
100
|
const item_r9 = ctx.$implicit;
|
|
130
101
|
const ctx_r2 = i0.ɵɵnextContext(3);
|
|
@@ -133,28 +104,26 @@ function PrismSidebarComponent_For_10_Conditional_5_For_2_Template(rf, ctx) { if
|
|
|
133
104
|
i0.ɵɵproperty("size", 12);
|
|
134
105
|
i0.ɵɵadvance(2);
|
|
135
106
|
i0.ɵɵtextInterpolate(ctx_r2.itemLabel(item_r9));
|
|
136
|
-
i0.ɵɵadvance();
|
|
137
|
-
i0.ɵɵconditional(item_r9.kind === "component" ? 4 : -1);
|
|
138
|
-
i0.ɵɵadvance();
|
|
139
|
-
i0.ɵɵconditional(ctx_r2.isActive(item_r9) && item_r9.kind === "component" && (item_r9.data.meta.showcaseConfig.variants == null ? null : item_r9.data.meta.showcaseConfig.variants.length) ? 5 : -1);
|
|
140
107
|
} }
|
|
141
|
-
function
|
|
142
|
-
i0.ɵɵelementStart(0, "div",
|
|
143
|
-
i0.ɵɵrepeaterCreate(1,
|
|
108
|
+
function PrismSidebarComponent_For_11_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
109
|
+
i0.ɵɵelementStart(0, "div", 16);
|
|
110
|
+
i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_For_11_Conditional_7_For_2_Template, 4, 4, "button", 17, _forTrack1, true);
|
|
144
111
|
i0.ɵɵelementEnd();
|
|
145
112
|
} if (rf & 2) {
|
|
146
113
|
const cat_r7 = i0.ɵɵnextContext().$implicit;
|
|
147
114
|
i0.ɵɵadvance();
|
|
148
115
|
i0.ɵɵrepeater(cat_r7.items);
|
|
149
116
|
} }
|
|
150
|
-
function
|
|
117
|
+
function PrismSidebarComponent_For_11_Template(rf, ctx) { if (rf & 1) {
|
|
151
118
|
const _r6 = i0.ɵɵgetCurrentView();
|
|
152
|
-
i0.ɵɵelementStart(0, "div",
|
|
153
|
-
i0.ɵɵlistener("click", function
|
|
154
|
-
i0.ɵɵelement(2, "prism-icon",
|
|
119
|
+
i0.ɵɵelementStart(0, "div", 12)(1, "button", 13);
|
|
120
|
+
i0.ɵɵlistener("click", function PrismSidebarComponent_For_11_Template_button_click_1_listener() { const cat_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCollapse("comp:" + cat_r7.name)); });
|
|
121
|
+
i0.ɵɵelement(2, "prism-icon", 14)(3, "span", 15);
|
|
155
122
|
i0.ɵɵtext(4);
|
|
156
|
-
i0.ɵɵ
|
|
157
|
-
i0.ɵɵ
|
|
123
|
+
i0.ɵɵelementStart(5, "span", 22);
|
|
124
|
+
i0.ɵɵtext(6);
|
|
125
|
+
i0.ɵɵelementEnd()();
|
|
126
|
+
i0.ɵɵconditionalCreate(7, PrismSidebarComponent_For_11_Conditional_7_Template, 3, 0, "div", 16);
|
|
158
127
|
i0.ɵɵelementEnd();
|
|
159
128
|
} if (rf & 2) {
|
|
160
129
|
const cat_r7 = ctx.$implicit;
|
|
@@ -168,8 +137,10 @@ function PrismSidebarComponent_For_10_Template(rf, ctx) { if (rf & 1) {
|
|
|
168
137
|
i0.ɵɵstyleProp("--chip", cat_r7.color);
|
|
169
138
|
i0.ɵɵadvance();
|
|
170
139
|
i0.ɵɵtextInterpolate1(" ", cat_r7.name, " ");
|
|
140
|
+
i0.ɵɵadvance(2);
|
|
141
|
+
i0.ɵɵtextInterpolate(cat_r7.items.length);
|
|
171
142
|
i0.ɵɵadvance();
|
|
172
|
-
i0.ɵɵconditional(!ctx_r2.isCollapsed("comp:" + cat_r7.name) ?
|
|
143
|
+
i0.ɵɵconditional(!ctx_r2.isCollapsed("comp:" + cat_r7.name) ? 7 : -1);
|
|
173
144
|
} }
|
|
174
145
|
const STORAGE_KEY = 'ng-prism-sidebar-collapsed';
|
|
175
146
|
const CATEGORY_COLORS = {
|
|
@@ -194,6 +165,16 @@ export class PrismSidebarComponent {
|
|
|
194
165
|
navigationService = inject(PrismNavigationService);
|
|
195
166
|
searchService = inject(PrismSearchService);
|
|
196
167
|
manifestService = inject(PrismManifestService);
|
|
168
|
+
filterInput = viewChild('filterInput', ...(ngDevMode ? [{ debugName: "filterInput" }] : []));
|
|
169
|
+
onGlobalKey(e) {
|
|
170
|
+
if (e.key !== '/' || e.ctrlKey || e.metaKey || e.altKey)
|
|
171
|
+
return;
|
|
172
|
+
const tag = e.target.tagName;
|
|
173
|
+
if (tag === 'INPUT' || tag === 'TEXTAREA' || e.target.isContentEditable)
|
|
174
|
+
return;
|
|
175
|
+
e.preventDefault();
|
|
176
|
+
this.filterInput()?.nativeElement.focus();
|
|
177
|
+
}
|
|
197
178
|
collapsedSet = signal(this.loadCollapsed(), ...(ngDevMode ? [{ debugName: "collapsedSet" }] : []));
|
|
198
179
|
totalPages = computed(() => {
|
|
199
180
|
return this.searchService.filteredPages().length;
|
|
@@ -228,12 +209,7 @@ export class PrismSidebarComponent {
|
|
|
228
209
|
}
|
|
229
210
|
return result;
|
|
230
211
|
}, ...(ngDevMode ? [{ debugName: "componentCategories" }] : []));
|
|
231
|
-
|
|
232
|
-
const manifest = this.manifestService.manifest();
|
|
233
|
-
const components = manifest.components.length;
|
|
234
|
-
const variants = manifest.components.reduce((sum, c) => sum + (c.meta.showcaseConfig.variants?.length ?? 0), 0);
|
|
235
|
-
return { components, variants };
|
|
236
|
-
}, ...(ngDevMode ? [{ debugName: "stats" }] : []));
|
|
212
|
+
totalComponents = computed(() => this.manifestService.manifest().components.length, ...(ngDevMode ? [{ debugName: "totalComponents" }] : []));
|
|
237
213
|
isCollapsed(key) {
|
|
238
214
|
return this.collapsedSet().has(key);
|
|
239
215
|
}
|
|
@@ -291,32 +267,38 @@ export class PrismSidebarComponent {
|
|
|
291
267
|
catch { }
|
|
292
268
|
}
|
|
293
269
|
static ɵfac = function PrismSidebarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismSidebarComponent)(); };
|
|
294
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismSidebarComponent, selectors: [["prism-sidebar"]],
|
|
295
|
-
i0.ɵɵ
|
|
296
|
-
|
|
297
|
-
i0.ɵɵ
|
|
270
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismSidebarComponent, selectors: [["prism-sidebar"]], viewQuery: function PrismSidebarComponent_Query(rf, ctx) { if (rf & 1) {
|
|
271
|
+
i0.ɵɵviewQuerySignal(ctx.filterInput, _c0, 5);
|
|
272
|
+
} if (rf & 2) {
|
|
273
|
+
i0.ɵɵqueryAdvance();
|
|
274
|
+
} }, hostBindings: function PrismSidebarComponent_HostBindings(rf, ctx) { if (rf & 1) {
|
|
275
|
+
i0.ɵɵlistener("keydown", function PrismSidebarComponent_keydown_HostBindingHandler($event) { return ctx.onGlobalKey($event); }, i0.ɵɵresolveDocument);
|
|
276
|
+
} }, decls: 12, vars: 4, consts: [["filterInput", ""], [1, "prism-sidebar"], [1, "sb-filter"], ["name", "search", 3, "size"], ["placeholder", "Filter components\u2026", 3, "input", "value"], [1, "sb-scroll"], [1, "sb-pinned"], [1, "sb-section-head"], [1, "sb-group", 3, "sb-group--collapsed"], [1, "sb-pinned-head"], [1, "sb-pinned-head-l"], ["name", "pin", 1, "sb-pinned-pin", 3, "size"], [1, "sb-group"], [1, "sb-group-head", 3, "click"], ["name", "chevron-down", 3, "size"], [1, "sb-group-chip"], [1, "sb-group-body"], [1, "sb-item", 3, "sb-item--active"], [1, "sb-item", 3, "click"], [1, "sb-item-name"], [1, "sb-section-head-l"], ["name", "box", 1, "sb-section-icon", 3, "size"], [1, "sb-group-count"], ["name", "box", 1, "sb-item-icon", 3, "size"]], template: function PrismSidebarComponent_Template(rf, ctx) { if (rf & 1) {
|
|
277
|
+
i0.ɵɵelementStart(0, "nav", 1)(1, "div", 2);
|
|
278
|
+
i0.ɵɵelement(2, "prism-icon", 3);
|
|
279
|
+
i0.ɵɵelementStart(3, "input", 4, 0);
|
|
298
280
|
i0.ɵɵlistener("input", function PrismSidebarComponent_Template_input_input_3_listener($event) { return ctx.searchService.search($event.target.value); });
|
|
299
281
|
i0.ɵɵelementEnd();
|
|
300
|
-
i0.ɵɵelementStart(
|
|
301
|
-
i0.ɵɵtext(
|
|
282
|
+
i0.ɵɵelementStart(5, "kbd");
|
|
283
|
+
i0.ɵɵtext(6, "/");
|
|
302
284
|
i0.ɵɵelementEnd()();
|
|
303
|
-
i0.ɵɵelementStart(
|
|
304
|
-
i0.ɵɵconditionalCreate(
|
|
305
|
-
i0.ɵɵconditionalCreate(
|
|
306
|
-
i0.ɵɵrepeaterCreate(
|
|
285
|
+
i0.ɵɵelementStart(7, "div", 5);
|
|
286
|
+
i0.ɵɵconditionalCreate(8, PrismSidebarComponent_Conditional_8_Template, 9, 2, "div", 6);
|
|
287
|
+
i0.ɵɵconditionalCreate(9, PrismSidebarComponent_Conditional_9_Template, 6, 2, "div", 7);
|
|
288
|
+
i0.ɵɵrepeaterCreate(10, PrismSidebarComponent_For_11_Template, 8, 9, "div", 8, _forTrack0);
|
|
307
289
|
i0.ɵɵelementEnd()();
|
|
308
290
|
} if (rf & 2) {
|
|
309
291
|
i0.ɵɵadvance(2);
|
|
310
292
|
i0.ɵɵproperty("size", 12);
|
|
311
293
|
i0.ɵɵadvance();
|
|
312
294
|
i0.ɵɵproperty("value", ctx.searchService.query());
|
|
313
|
-
i0.ɵɵadvance(
|
|
314
|
-
i0.ɵɵconditional(ctx.pageCategories().length > 0 ?
|
|
295
|
+
i0.ɵɵadvance(5);
|
|
296
|
+
i0.ɵɵconditional(ctx.pageCategories().length > 0 ? 8 : -1);
|
|
315
297
|
i0.ɵɵadvance();
|
|
316
|
-
i0.ɵɵconditional(ctx.componentCategories().length > 0 ?
|
|
298
|
+
i0.ɵɵconditional(ctx.componentCategories().length > 0 ? 9 : -1);
|
|
317
299
|
i0.ɵɵadvance();
|
|
318
300
|
i0.ɵɵrepeater(ctx.componentCategories());
|
|
319
|
-
} }, dependencies: [PrismIconComponent], styles: [".prism-sidebar[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n }\n\n .sb-filter[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 12px;\n padding: 0 10px;\n height: 30px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: 6px;\n color: var(--prism-text-muted);\n }\n .sb-filter[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n background: transparent;\n border: 0;\n outline: none;\n font-size: var(--fs-md);\n color: var(--prism-text);\n font-family: var(--font-sans);\n }\n .sb-filter[_ngcontent-%COMP%] input[_ngcontent-%COMP%]::placeholder { color: var(--prism-text-muted); }\n .sb-filter[_ngcontent-%COMP%] kbd[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: 10px;\n color: var(--prism-text-ghost);\n padding: 1px 5px;\n border: 1px solid var(--prism-border);\n border-radius: 3px;\n }\n\n .sb-scroll[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 10px 0 16px;\n padding-top: 0;\n }\n .sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar { width: 8px; }\n .sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 4px; }\n .sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: transparent; }\n\n .sb-pinned[_ngcontent-%COMP%] {\n padding: 0 0 10px;\n margin-bottom: 4px;\n border-bottom: 1px solid var(--prism-border);\n border-top: 1px solid var(--prism-border);\n }\n .sb-section-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 14px 6px;\n font-size: 10.5px;\n font-weight: 700;\n letter-spacing: 0.09em;\n text-transform: uppercase;\n color: var(--prism-text-ghost);\n margin-top: 6px;\n }\n .sb-section-head-l[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; }\n .sb-section-icon[_ngcontent-%COMP%] { color: var(--prism-primary); }\n .sb-pinned-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 14px 6px;\n margin-top: 6px;\n font-size: 10.5px;\n font-weight: 700;\n letter-spacing: 0.09em;\n text-transform: uppercase;\n color: var(--prism-text-ghost);\n }\n .sb-pinned-head-l[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; }\n .sb-pinned-pin[_ngcontent-%COMP%] { color: var(--prism-accent); }\n\n .sb-group[_ngcontent-%COMP%] { margin-bottom: 4px; }\n .sb-group-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n padding: 8px 14px 6px;\n font-size: 10.5px;\n font-weight: 700;\n letter-spacing: 0.09em;\n text-transform: uppercase;\n color: var(--prism-text-ghost);\n cursor: pointer;\n user-select: none;\n background: none;\n border: none;\n text-align: left;\n font-family: var(--font-sans);\n }\n .sb-group-head[_ngcontent-%COMP%] prism-icon[_ngcontent-%COMP%] {\n transition: transform var(--dur-fast);\n color: var(--prism-text-ghost);\n }\n .sb-group--collapsed[_ngcontent-%COMP%] .sb-group-head[_ngcontent-%COMP%] prism-icon[_ngcontent-%COMP%] { transform: rotate(-90deg); }\n\n .sb-group-chip[_ngcontent-%COMP%] {\n width: 6px;\n height: 6px;\n border-radius: 2px;\n background: var(--chip, var(--prism-primary));\n box-shadow: 0 0 6px var(--chip, var(--prism-primary));\n }\n\n .sb-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n height: 30px;\n padding: 0 14px 0 28px;\n font-size: 13px;\n color: var(--prism-text-2);\n cursor: pointer;\n border: none;\n border-left: 2px solid transparent;\n background: none;\n position: relative;\n transition: background var(--dur-fast), color var(--dur-fast);\n text-align: left;\n font-family: var(--font-sans);\n }\n .sb-item[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--prism-primary) 5%, transparent);\n color: var(--prism-text);\n }\n .sb-item--active[_ngcontent-%COMP%] {\n border-left-color: var(--prism-primary);\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n color: var(--prism-text);\n font-weight: 500;\n }\n .sb-item--active[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: -1px;\n top: 0;\n bottom: 0;\n width: 3px;\n background: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to));\n }\n .sb-item-icon[_ngcontent-%COMP%] { flex: 0 0 12px; opacity: 0.7; }\n .sb-item-name[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n
|
|
301
|
+
} }, dependencies: [PrismIconComponent], styles: [".prism-sidebar[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n }\n\n .sb-filter[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 12px;\n padding: 0 10px;\n height: 30px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: 6px;\n color: var(--prism-text-muted);\n }\n .sb-filter[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n background: transparent;\n border: 0;\n outline: none;\n font-size: var(--fs-md);\n color: var(--prism-text);\n font-family: var(--font-sans);\n }\n .sb-filter[_ngcontent-%COMP%] input[_ngcontent-%COMP%]::placeholder { color: var(--prism-text-muted); }\n .sb-filter[_ngcontent-%COMP%] kbd[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: 10px;\n color: var(--prism-text-ghost);\n padding: 1px 5px;\n border: 1px solid var(--prism-border);\n border-radius: 3px;\n }\n\n .sb-scroll[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 10px 0 16px;\n padding-top: 0;\n }\n .sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar { width: 8px; }\n .sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 4px; }\n .sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: transparent; }\n\n .sb-pinned[_ngcontent-%COMP%] {\n padding: 0 0 10px;\n margin-bottom: 4px;\n border-bottom: 1px solid var(--prism-border);\n border-top: 1px solid var(--prism-border);\n }\n .sb-section-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 14px 6px;\n font-size: 10.5px;\n font-weight: 700;\n letter-spacing: 0.09em;\n text-transform: uppercase;\n color: var(--prism-text-ghost);\n margin-top: 6px;\n }\n .sb-section-head-l[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; }\n .sb-section-icon[_ngcontent-%COMP%] { color: var(--prism-primary); }\n .sb-pinned-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 14px 6px;\n margin-top: 6px;\n font-size: 10.5px;\n font-weight: 700;\n letter-spacing: 0.09em;\n text-transform: uppercase;\n color: var(--prism-text-ghost);\n }\n .sb-pinned-head-l[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; }\n .sb-pinned-pin[_ngcontent-%COMP%] { color: var(--prism-accent); }\n\n .sb-group[_ngcontent-%COMP%] { margin-bottom: 4px; }\n .sb-group-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n padding: 8px 14px 6px;\n font-size: 10.5px;\n font-weight: 700;\n letter-spacing: 0.09em;\n text-transform: uppercase;\n color: var(--prism-text-ghost);\n cursor: pointer;\n user-select: none;\n background: none;\n border: none;\n text-align: left;\n font-family: var(--font-sans);\n }\n .sb-group-head[_ngcontent-%COMP%] prism-icon[_ngcontent-%COMP%] {\n transition: transform var(--dur-fast);\n color: var(--prism-text-ghost);\n }\n .sb-group--collapsed[_ngcontent-%COMP%] .sb-group-head[_ngcontent-%COMP%] prism-icon[_ngcontent-%COMP%] { transform: rotate(-90deg); }\n\n .sb-group-chip[_ngcontent-%COMP%] {\n width: 6px;\n height: 6px;\n border-radius: 2px;\n background: var(--chip, var(--prism-primary));\n box-shadow: 0 0 6px var(--chip, var(--prism-primary));\n }\n .sb-group-count[_ngcontent-%COMP%] {\n margin-left: auto;\n font-family: var(--font-mono);\n font-size: 10px;\n color: var(--prism-text-ghost);\n font-weight: 500;\n }\n\n .sb-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n height: 30px;\n padding: 0 14px 0 28px;\n font-size: 13px;\n color: var(--prism-text-2);\n cursor: pointer;\n border: none;\n border-left: 2px solid transparent;\n background: none;\n position: relative;\n transition: background var(--dur-fast), color var(--dur-fast);\n text-align: left;\n font-family: var(--font-sans);\n }\n .sb-item[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--prism-primary) 5%, transparent);\n color: var(--prism-text);\n }\n .sb-item--active[_ngcontent-%COMP%] {\n border-left-color: var(--prism-primary);\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n color: var(--prism-text);\n font-weight: 500;\n }\n .sb-item--active[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: -1px;\n top: 0;\n bottom: 0;\n width: 3px;\n background: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to));\n }\n .sb-item-icon[_ngcontent-%COMP%] { flex: 0 0 12px; opacity: 0.7; }\n .sb-item-name[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n\n [_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--prism-primary);\n outline-offset: 2px;\n }"], changeDetection: 0 });
|
|
320
302
|
}
|
|
321
303
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismSidebarComponent, [{
|
|
322
304
|
type: Component,
|
|
@@ -325,6 +307,7 @@ export class PrismSidebarComponent {
|
|
|
325
307
|
<div class="sb-filter">
|
|
326
308
|
<prism-icon name="search" [size]="12" />
|
|
327
309
|
<input
|
|
310
|
+
#filterInput
|
|
328
311
|
placeholder="Filter components…"
|
|
329
312
|
[value]="searchService.query()"
|
|
330
313
|
(input)="searchService.search($any($event.target).value)"
|
|
@@ -378,7 +361,7 @@ export class PrismSidebarComponent {
|
|
|
378
361
|
<prism-icon name="box" [size]="10" class="sb-section-icon" />
|
|
379
362
|
Components
|
|
380
363
|
</span>
|
|
381
|
-
<span>{{
|
|
364
|
+
<span>{{ totalComponents() }}</span>
|
|
382
365
|
</div>
|
|
383
366
|
} @for (cat of componentCategories(); track cat.name) {
|
|
384
367
|
<div
|
|
@@ -393,6 +376,7 @@ export class PrismSidebarComponent {
|
|
|
393
376
|
<prism-icon name="chevron-down" [size]="10" />
|
|
394
377
|
<span class="sb-group-chip" [style.--chip]="cat.color"></span>
|
|
395
378
|
{{ cat.name }}
|
|
379
|
+
<span class="sb-group-count">{{ cat.items.length }}</span>
|
|
396
380
|
</button>
|
|
397
381
|
@if (!isCollapsed('comp:' + cat.name)) {
|
|
398
382
|
<div class="sb-group-body">
|
|
@@ -404,26 +388,17 @@ export class PrismSidebarComponent {
|
|
|
404
388
|
>
|
|
405
389
|
<prism-icon name="box" [size]="12" class="sb-item-icon" />
|
|
406
390
|
<span class="sb-item-name">{{ itemLabel(item) }}</span>
|
|
407
|
-
@if (item.kind === 'component') {
|
|
408
|
-
<span class="sb-item-count">{{
|
|
409
|
-
item.data.meta.showcaseConfig.variants?.length ?? 0
|
|
410
|
-
}}</span>
|
|
411
|
-
}
|
|
412
|
-
</button>
|
|
413
|
-
@if (isActive(item) && item.kind === 'component' &&
|
|
414
|
-
item.data.meta.showcaseConfig.variants?.length) { @for (variant of
|
|
415
|
-
item.data.meta.showcaseConfig.variants; track variant.name) {
|
|
416
|
-
<button class="sb-sub" (click)="onSelect(item)">
|
|
417
|
-
<span class="sb-sub-dot"></span>
|
|
418
|
-
{{ variant.name }}
|
|
419
391
|
</button>
|
|
420
|
-
}
|
|
392
|
+
}
|
|
421
393
|
</div>
|
|
422
394
|
}
|
|
423
395
|
</div>
|
|
424
396
|
}
|
|
425
397
|
</div>
|
|
426
398
|
</nav>
|
|
427
|
-
`, styles: ["\n .prism-sidebar {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n }\n\n .sb-filter {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 12px;\n padding: 0 10px;\n height: 30px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: 6px;\n color: var(--prism-text-muted);\n }\n .sb-filter input {\n flex: 1;\n min-width: 0;\n background: transparent;\n border: 0;\n outline: none;\n font-size: var(--fs-md);\n color: var(--prism-text);\n font-family: var(--font-sans);\n }\n .sb-filter input::placeholder { color: var(--prism-text-muted); }\n .sb-filter kbd {\n font-family: var(--font-mono);\n font-size: 10px;\n color: var(--prism-text-ghost);\n padding: 1px 5px;\n border: 1px solid var(--prism-border);\n border-radius: 3px;\n }\n\n .sb-scroll {\n flex: 1;\n overflow-y: auto;\n padding: 10px 0 16px;\n padding-top: 0;\n }\n .sb-scroll::-webkit-scrollbar { width: 8px; }\n .sb-scroll::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 4px; }\n .sb-scroll::-webkit-scrollbar-track { background: transparent; }\n\n .sb-pinned {\n padding: 0 0 10px;\n margin-bottom: 4px;\n border-bottom: 1px solid var(--prism-border);\n border-top: 1px solid var(--prism-border);\n }\n .sb-section-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 14px 6px;\n font-size: 10.5px;\n font-weight: 700;\n letter-spacing: 0.09em;\n text-transform: uppercase;\n color: var(--prism-text-ghost);\n margin-top: 6px;\n }\n .sb-section-head-l { display: flex; align-items: center; gap: 6px; }\n .sb-section-icon { color: var(--prism-primary); }\n .sb-pinned-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 14px 6px;\n margin-top: 6px;\n font-size: 10.5px;\n font-weight: 700;\n letter-spacing: 0.09em;\n text-transform: uppercase;\n color: var(--prism-text-ghost);\n }\n .sb-pinned-head-l { display: flex; align-items: center; gap: 6px; }\n .sb-pinned-pin { color: var(--prism-accent); }\n\n .sb-group { margin-bottom: 4px; }\n .sb-group-head {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n padding: 8px 14px 6px;\n font-size: 10.5px;\n font-weight: 700;\n letter-spacing: 0.09em;\n text-transform: uppercase;\n color: var(--prism-text-ghost);\n cursor: pointer;\n user-select: none;\n background: none;\n border: none;\n text-align: left;\n font-family: var(--font-sans);\n }\n .sb-group-head prism-icon {\n transition: transform var(--dur-fast);\n color: var(--prism-text-ghost);\n }\n .sb-group--collapsed .sb-group-head prism-icon { transform: rotate(-90deg); }\n\n .sb-group-chip {\n width: 6px;\n height: 6px;\n border-radius: 2px;\n background: var(--chip, var(--prism-primary));\n box-shadow: 0 0 6px var(--chip, var(--prism-primary));\n }\n\n .sb-item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n height: 30px;\n padding: 0 14px 0 28px;\n font-size: 13px;\n color: var(--prism-text-2);\n cursor: pointer;\n border: none;\n border-left: 2px solid transparent;\n background: none;\n position: relative;\n transition: background var(--dur-fast), color var(--dur-fast);\n text-align: left;\n font-family: var(--font-sans);\n }\n .sb-item:hover {\n background: color-mix(in srgb, var(--prism-primary) 5%, transparent);\n color: var(--prism-text);\n }\n .sb-item--active {\n border-left-color: var(--prism-primary);\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n color: var(--prism-text);\n font-weight: 500;\n }\n .sb-item--active::before {\n content: '';\n position: absolute;\n left: -1px;\n top: 0;\n bottom: 0;\n width: 3px;\n background: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to));\n }\n .sb-item-icon { flex: 0 0 12px; opacity: 0.7; }\n .sb-item-name {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n
|
|
428
|
-
}], null,
|
|
429
|
-
|
|
399
|
+
`, styles: ["\n .prism-sidebar {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n }\n\n .sb-filter {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 12px;\n padding: 0 10px;\n height: 30px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: 6px;\n color: var(--prism-text-muted);\n }\n .sb-filter input {\n flex: 1;\n min-width: 0;\n background: transparent;\n border: 0;\n outline: none;\n font-size: var(--fs-md);\n color: var(--prism-text);\n font-family: var(--font-sans);\n }\n .sb-filter input::placeholder { color: var(--prism-text-muted); }\n .sb-filter kbd {\n font-family: var(--font-mono);\n font-size: 10px;\n color: var(--prism-text-ghost);\n padding: 1px 5px;\n border: 1px solid var(--prism-border);\n border-radius: 3px;\n }\n\n .sb-scroll {\n flex: 1;\n overflow-y: auto;\n padding: 10px 0 16px;\n padding-top: 0;\n }\n .sb-scroll::-webkit-scrollbar { width: 8px; }\n .sb-scroll::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 4px; }\n .sb-scroll::-webkit-scrollbar-track { background: transparent; }\n\n .sb-pinned {\n padding: 0 0 10px;\n margin-bottom: 4px;\n border-bottom: 1px solid var(--prism-border);\n border-top: 1px solid var(--prism-border);\n }\n .sb-section-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 14px 6px;\n font-size: 10.5px;\n font-weight: 700;\n letter-spacing: 0.09em;\n text-transform: uppercase;\n color: var(--prism-text-ghost);\n margin-top: 6px;\n }\n .sb-section-head-l { display: flex; align-items: center; gap: 6px; }\n .sb-section-icon { color: var(--prism-primary); }\n .sb-pinned-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 14px 6px;\n margin-top: 6px;\n font-size: 10.5px;\n font-weight: 700;\n letter-spacing: 0.09em;\n text-transform: uppercase;\n color: var(--prism-text-ghost);\n }\n .sb-pinned-head-l { display: flex; align-items: center; gap: 6px; }\n .sb-pinned-pin { color: var(--prism-accent); }\n\n .sb-group { margin-bottom: 4px; }\n .sb-group-head {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n padding: 8px 14px 6px;\n font-size: 10.5px;\n font-weight: 700;\n letter-spacing: 0.09em;\n text-transform: uppercase;\n color: var(--prism-text-ghost);\n cursor: pointer;\n user-select: none;\n background: none;\n border: none;\n text-align: left;\n font-family: var(--font-sans);\n }\n .sb-group-head prism-icon {\n transition: transform var(--dur-fast);\n color: var(--prism-text-ghost);\n }\n .sb-group--collapsed .sb-group-head prism-icon { transform: rotate(-90deg); }\n\n .sb-group-chip {\n width: 6px;\n height: 6px;\n border-radius: 2px;\n background: var(--chip, var(--prism-primary));\n box-shadow: 0 0 6px var(--chip, var(--prism-primary));\n }\n .sb-group-count {\n margin-left: auto;\n font-family: var(--font-mono);\n font-size: 10px;\n color: var(--prism-text-ghost);\n font-weight: 500;\n }\n\n .sb-item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n height: 30px;\n padding: 0 14px 0 28px;\n font-size: 13px;\n color: var(--prism-text-2);\n cursor: pointer;\n border: none;\n border-left: 2px solid transparent;\n background: none;\n position: relative;\n transition: background var(--dur-fast), color var(--dur-fast);\n text-align: left;\n font-family: var(--font-sans);\n }\n .sb-item:hover {\n background: color-mix(in srgb, var(--prism-primary) 5%, transparent);\n color: var(--prism-text);\n }\n .sb-item--active {\n border-left-color: var(--prism-primary);\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n color: var(--prism-text);\n font-weight: 500;\n }\n .sb-item--active::before {\n content: '';\n position: absolute;\n left: -1px;\n top: 0;\n bottom: 0;\n width: 3px;\n background: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to));\n }\n .sb-item-icon { flex: 0 0 12px; opacity: 0.7; }\n .sb-item-name {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n\n :focus-visible {\n outline: 2px solid var(--prism-primary);\n outline-offset: 2px;\n }\n "] }]
|
|
400
|
+
}], null, { filterInput: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }], onGlobalKey: [{
|
|
401
|
+
type: HostListener,
|
|
402
|
+
args: ['document:keydown', ['$event']]
|
|
403
|
+
}] }); })();
|
|
404
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismSidebarComponent, { className: "PrismSidebarComponent", filePath: "app/sidebar/prism-sidebar.component.ts", lineNumber: 323 }); })();
|