fold-ng 0.28.1 → 0.28.2
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/CHANGELOG.md +20 -1
- package/fesm2022/fold-ng.mjs +20 -6
- package/fesm2022/fold-ng.mjs.map +1 -1
- package/package.json +1 -1
- package/tmp-esm2022/tsconfig.lib.tsbuildinfo +1 -1
- package/types/fold-ng.d.ts +7 -0
- package/types/fold-ng.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,24 @@ All notable changes to **fold-ng** are documented here. The format follows
|
|
|
8
8
|
|
|
9
9
|
_Nothing yet._
|
|
10
10
|
|
|
11
|
+
## [0.28.2] - 2026-10-13
|
|
12
|
+
|
|
13
|
+
### Fixed
|
|
14
|
+
|
|
15
|
+
- **`fold-menu` replié défile.** Replié, le corps du menu gardait
|
|
16
|
+
`overflow: visible` pour laisser sortir les infobulles : un menu plus haut
|
|
17
|
+
que l'écran débordait et ses entrées se tassaient. Le corps défile désormais
|
|
18
|
+
dans les deux états (barre masquée replié), les entrées ne rétrécissent plus
|
|
19
|
+
(`flex-shrink: 0`), et l'infobulle passe en `position: fixed`, placée au
|
|
20
|
+
survol (`--mi-tip-x/y`), pour échapper au défilement.
|
|
21
|
+
|
|
22
|
+
### Changed
|
|
23
|
+
|
|
24
|
+
- **`fold-menu-section` déplié : un retrait et une barre de couleur.** Menu
|
|
25
|
+
déplié, les entrées d'une section ont un léger retrait derrière une barre
|
|
26
|
+
verticale à la couleur de la section, pour les distinguer du premier niveau.
|
|
27
|
+
Le rail replié ne change pas.
|
|
28
|
+
|
|
11
29
|
## [0.28.1] - 2026-10-06
|
|
12
30
|
|
|
13
31
|
### Fixed
|
|
@@ -2638,7 +2656,8 @@ design-token stylesheet.
|
|
|
2638
2656
|
`currentColor`; `prefers-reduced-motion` + `forced-colors` are respected;
|
|
2639
2657
|
strings localise via inputs / providers (`provideFoldPanelLabels`).
|
|
2640
2658
|
|
|
2641
|
-
[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.28.
|
|
2659
|
+
[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.28.2...HEAD
|
|
2660
|
+
[0.28.2]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.28.2
|
|
2642
2661
|
[0.28.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.28.1
|
|
2643
2662
|
[0.28.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.28.0
|
|
2644
2663
|
[0.27.2]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.27.2
|
package/fesm2022/fold-ng.mjs
CHANGED
|
@@ -4359,7 +4359,7 @@ class FoldMenuComponent {
|
|
|
4359
4359
|
this.expanded.set(!this.isExpanded());
|
|
4360
4360
|
}
|
|
4361
4361
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4362
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldMenuComponent, isStandalone: true, selector: "fold-menu", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, tint: { classPropertyName: "tint", publicName: "tint", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, togglePlacement: { classPropertyName: "togglePlacement", publicName: "togglePlacement", isSignal: true, isRequired: false, transformFunction: null }, navLabel: { classPropertyName: "navLabel", publicName: "navLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class.expanded": "isExpanded()", "attr.data-tint": "tint()", "attr.data-level": "level()" } }, viewQueries: [{ propertyName: "headRef", first: true, predicate: ["head"], descendants: true, isSignal: true }, { propertyName: "footRef", first: true, predicate: ["foot"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"menu-head\"\n [class.head-has-toggle]=\"collapsible() && resolvedPlacement() === 'header'\"\n #head\n>\n <ng-content select=\"[header]\" />\n @if (collapsible() && resolvedPlacement() === \"header\") {\n <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n }\n</div>\n\n<nav class=\"menu-body\" [attr.aria-label]=\"navLabel() ?? null\">\n <ng-content />\n @if (collapsible() && resolvedPlacement() === \"body\") {\n <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n }\n</nav>\n\n<div\n class=\"menu-foot\"\n [class.foot-has-toggle]=\"collapsible() && resolvedPlacement() === 'footer'\"\n #foot\n>\n @if (collapsible() && resolvedPlacement() === \"footer\") {\n <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n }\n <ng-content select=\"[footer]\" />\n</div>\n\n<ng-template #toggleTpl>\n <button\n type=\"button\"\n class=\"menu-toggle\"\n [attr.aria-label]=\"isExpanded() ? 'Collapse menu' : 'Expand menu'\"\n (click)=\"toggle()\"\n >\n <fold-icon\n [name]=\"isExpanded() ? 'chevron-left' : 'chevron-right'\"\n [size]=\"14\"\n />\n </button>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:center;width:var(--fold-shell-rail-width, var(--fold-rail-primary, 64px));height:100%;box-sizing:border-box;padding:var(--fold-space-sm) 0;gap:var(--fold-space-xs);background:var(--fold-color-bg-rail-primary);border-right:1px solid var(--fold-color-border);overflow:visible;-webkit-user-select:none;user-select:none;transition:width var(--fold-motion-base)}:host([data-level=secondary]){background:var(--fold-color-bg-rail-secondary)}:host([data-level=tertiary]){background:var(--fold-color-bg-rail-tertiary)}:host([data-elevated]){border-right:none}:host(.expanded){width:max-content;min-width:190px;max-width:260px;align-items:stretch}.menu-head,.menu-foot{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-xs);width:100%}.menu-head:empty,.menu-foot:empty{display:none}.menu-head{padding-bottom:var(--fold-space-sm);border-bottom:1px solid var(--fold-color-border-subtle)}.menu-foot{padding-top:var(--fold-space-sm);border-top:1px solid var(--fold-color-border-subtle)}:host(.expanded) .menu-head,:host(.expanded) .menu-foot{align-items:stretch;width:auto;padding-left:var(--fold-space-sm);padding-right:var(--fold-space-sm)}.menu-body{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-xs);width:100
|
|
4362
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldMenuComponent, isStandalone: true, selector: "fold-menu", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, tint: { classPropertyName: "tint", publicName: "tint", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, togglePlacement: { classPropertyName: "togglePlacement", publicName: "togglePlacement", isSignal: true, isRequired: false, transformFunction: null }, navLabel: { classPropertyName: "navLabel", publicName: "navLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class.expanded": "isExpanded()", "attr.data-tint": "tint()", "attr.data-level": "level()" } }, viewQueries: [{ propertyName: "headRef", first: true, predicate: ["head"], descendants: true, isSignal: true }, { propertyName: "footRef", first: true, predicate: ["foot"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"menu-head\"\n [class.head-has-toggle]=\"collapsible() && resolvedPlacement() === 'header'\"\n #head\n>\n <ng-content select=\"[header]\" />\n @if (collapsible() && resolvedPlacement() === \"header\") {\n <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n }\n</div>\n\n<nav class=\"menu-body\" [attr.aria-label]=\"navLabel() ?? null\">\n <ng-content />\n @if (collapsible() && resolvedPlacement() === \"body\") {\n <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n }\n</nav>\n\n<div\n class=\"menu-foot\"\n [class.foot-has-toggle]=\"collapsible() && resolvedPlacement() === 'footer'\"\n #foot\n>\n @if (collapsible() && resolvedPlacement() === \"footer\") {\n <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n }\n <ng-content select=\"[footer]\" />\n</div>\n\n<ng-template #toggleTpl>\n <button\n type=\"button\"\n class=\"menu-toggle\"\n [attr.aria-label]=\"isExpanded() ? 'Collapse menu' : 'Expand menu'\"\n (click)=\"toggle()\"\n >\n <fold-icon\n [name]=\"isExpanded() ? 'chevron-left' : 'chevron-right'\"\n [size]=\"14\"\n />\n </button>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:center;width:var(--fold-shell-rail-width, var(--fold-rail-primary, 64px));height:100%;box-sizing:border-box;padding:var(--fold-space-sm) 0;gap:var(--fold-space-xs);background:var(--fold-color-bg-rail-primary);border-right:1px solid var(--fold-color-border);overflow:visible;-webkit-user-select:none;user-select:none;transition:width var(--fold-motion-base)}:host([data-level=secondary]){background:var(--fold-color-bg-rail-secondary)}:host([data-level=tertiary]){background:var(--fold-color-bg-rail-tertiary)}:host([data-elevated]){border-right:none}:host(.expanded){width:max-content;min-width:190px;max-width:260px;align-items:stretch}.menu-head,.menu-foot{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-xs);width:100%}.menu-head:empty,.menu-foot:empty{display:none}.menu-head{padding-bottom:var(--fold-space-sm);border-bottom:1px solid var(--fold-color-border-subtle)}.menu-foot{padding-top:var(--fold-space-sm);border-top:1px solid var(--fold-color-border-subtle)}:host(.expanded) .menu-head,:host(.expanded) .menu-foot{align-items:stretch;width:auto;padding-left:var(--fold-space-sm);padding-right:var(--fold-space-sm)}.menu-body{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-xs);width:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.menu-body::-webkit-scrollbar{display:none}:host(.expanded) .menu-body{align-items:stretch;width:auto;padding:0 var(--fold-space-sm);scrollbar-width:thin}.menu-toggle{flex-shrink:0;width:28px;height:28px;display:grid;place-items:center;border:none;border-radius:var(--fold-radius-sm);background:none;color:var(--fold-color-text-muted);cursor:pointer;transition:background var(--fold-motion-fast),color var(--fold-motion-fast)}.menu-toggle:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text-secondary)}:host(.expanded) .menu-toggle{align-self:flex-end;margin-right:var(--fold-space-sm)}:host(.expanded) .menu-head.head-has-toggle,:host(.expanded) .menu-foot.foot-has-toggle{position:relative;padding-right:var(--fold-space-4xl)}:host(.expanded) .menu-head.head-has-toggle .menu-toggle,:host(.expanded) .menu-foot.foot-has-toggle .menu-toggle{position:absolute;right:8px;bottom:8px;margin:0}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
4363
4363
|
}
|
|
4364
4364
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldMenuComponent, decorators: [{
|
|
4365
4365
|
type: Component,
|
|
@@ -4367,7 +4367,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
4367
4367
|
"[class.expanded]": "isExpanded()",
|
|
4368
4368
|
"[attr.data-tint]": "tint()",
|
|
4369
4369
|
"[attr.data-level]": "level()",
|
|
4370
|
-
}, template: "<div\n class=\"menu-head\"\n [class.head-has-toggle]=\"collapsible() && resolvedPlacement() === 'header'\"\n #head\n>\n <ng-content select=\"[header]\" />\n @if (collapsible() && resolvedPlacement() === \"header\") {\n <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n }\n</div>\n\n<nav class=\"menu-body\" [attr.aria-label]=\"navLabel() ?? null\">\n <ng-content />\n @if (collapsible() && resolvedPlacement() === \"body\") {\n <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n }\n</nav>\n\n<div\n class=\"menu-foot\"\n [class.foot-has-toggle]=\"collapsible() && resolvedPlacement() === 'footer'\"\n #foot\n>\n @if (collapsible() && resolvedPlacement() === \"footer\") {\n <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n }\n <ng-content select=\"[footer]\" />\n</div>\n\n<ng-template #toggleTpl>\n <button\n type=\"button\"\n class=\"menu-toggle\"\n [attr.aria-label]=\"isExpanded() ? 'Collapse menu' : 'Expand menu'\"\n (click)=\"toggle()\"\n >\n <fold-icon\n [name]=\"isExpanded() ? 'chevron-left' : 'chevron-right'\"\n [size]=\"14\"\n />\n </button>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:center;width:var(--fold-shell-rail-width, var(--fold-rail-primary, 64px));height:100%;box-sizing:border-box;padding:var(--fold-space-sm) 0;gap:var(--fold-space-xs);background:var(--fold-color-bg-rail-primary);border-right:1px solid var(--fold-color-border);overflow:visible;-webkit-user-select:none;user-select:none;transition:width var(--fold-motion-base)}:host([data-level=secondary]){background:var(--fold-color-bg-rail-secondary)}:host([data-level=tertiary]){background:var(--fold-color-bg-rail-tertiary)}:host([data-elevated]){border-right:none}:host(.expanded){width:max-content;min-width:190px;max-width:260px;align-items:stretch}.menu-head,.menu-foot{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-xs);width:100%}.menu-head:empty,.menu-foot:empty{display:none}.menu-head{padding-bottom:var(--fold-space-sm);border-bottom:1px solid var(--fold-color-border-subtle)}.menu-foot{padding-top:var(--fold-space-sm);border-top:1px solid var(--fold-color-border-subtle)}:host(.expanded) .menu-head,:host(.expanded) .menu-foot{align-items:stretch;width:auto;padding-left:var(--fold-space-sm);padding-right:var(--fold-space-sm)}.menu-body{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-xs);width:100
|
|
4370
|
+
}, template: "<div\n class=\"menu-head\"\n [class.head-has-toggle]=\"collapsible() && resolvedPlacement() === 'header'\"\n #head\n>\n <ng-content select=\"[header]\" />\n @if (collapsible() && resolvedPlacement() === \"header\") {\n <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n }\n</div>\n\n<nav class=\"menu-body\" [attr.aria-label]=\"navLabel() ?? null\">\n <ng-content />\n @if (collapsible() && resolvedPlacement() === \"body\") {\n <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n }\n</nav>\n\n<div\n class=\"menu-foot\"\n [class.foot-has-toggle]=\"collapsible() && resolvedPlacement() === 'footer'\"\n #foot\n>\n @if (collapsible() && resolvedPlacement() === \"footer\") {\n <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n }\n <ng-content select=\"[footer]\" />\n</div>\n\n<ng-template #toggleTpl>\n <button\n type=\"button\"\n class=\"menu-toggle\"\n [attr.aria-label]=\"isExpanded() ? 'Collapse menu' : 'Expand menu'\"\n (click)=\"toggle()\"\n >\n <fold-icon\n [name]=\"isExpanded() ? 'chevron-left' : 'chevron-right'\"\n [size]=\"14\"\n />\n </button>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:center;width:var(--fold-shell-rail-width, var(--fold-rail-primary, 64px));height:100%;box-sizing:border-box;padding:var(--fold-space-sm) 0;gap:var(--fold-space-xs);background:var(--fold-color-bg-rail-primary);border-right:1px solid var(--fold-color-border);overflow:visible;-webkit-user-select:none;user-select:none;transition:width var(--fold-motion-base)}:host([data-level=secondary]){background:var(--fold-color-bg-rail-secondary)}:host([data-level=tertiary]){background:var(--fold-color-bg-rail-tertiary)}:host([data-elevated]){border-right:none}:host(.expanded){width:max-content;min-width:190px;max-width:260px;align-items:stretch}.menu-head,.menu-foot{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-xs);width:100%}.menu-head:empty,.menu-foot:empty{display:none}.menu-head{padding-bottom:var(--fold-space-sm);border-bottom:1px solid var(--fold-color-border-subtle)}.menu-foot{padding-top:var(--fold-space-sm);border-top:1px solid var(--fold-color-border-subtle)}:host(.expanded) .menu-head,:host(.expanded) .menu-foot{align-items:stretch;width:auto;padding-left:var(--fold-space-sm);padding-right:var(--fold-space-sm)}.menu-body{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-xs);width:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.menu-body::-webkit-scrollbar{display:none}:host(.expanded) .menu-body{align-items:stretch;width:auto;padding:0 var(--fold-space-sm);scrollbar-width:thin}.menu-toggle{flex-shrink:0;width:28px;height:28px;display:grid;place-items:center;border:none;border-radius:var(--fold-radius-sm);background:none;color:var(--fold-color-text-muted);cursor:pointer;transition:background var(--fold-motion-fast),color var(--fold-motion-fast)}.menu-toggle:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text-secondary)}:host(.expanded) .menu-toggle{align-self:flex-end;margin-right:var(--fold-space-sm)}:host(.expanded) .menu-head.head-has-toggle,:host(.expanded) .menu-foot.foot-has-toggle{position:relative;padding-right:var(--fold-space-4xl)}:host(.expanded) .menu-head.head-has-toggle .menu-toggle,:host(.expanded) .menu-foot.foot-has-toggle .menu-toggle{position:absolute;right:8px;bottom:8px;margin:0}\n"] }]
|
|
4371
4371
|
}], ctorParameters: () => [], propDecorators: { collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], tint: [{ type: i0.Input, args: [{ isSignal: true, alias: "tint", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], togglePlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "togglePlacement", required: false }] }], navLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "navLabel", required: false }] }], headRef: [{ type: i0.ViewChild, args: ["head", { isSignal: true }] }], footRef: [{ type: i0.ViewChild, args: ["foot", { isSignal: true }] }] } });
|
|
4372
4372
|
|
|
4373
4373
|
/** Solid accent colour per semantic tone (drives the dot + follow-pill). */
|
|
@@ -4406,6 +4406,18 @@ const TONE_ACCENT = {
|
|
|
4406
4406
|
* ```
|
|
4407
4407
|
*/
|
|
4408
4408
|
class FoldMenuItemComponent {
|
|
4409
|
+
host = inject(ElementRef);
|
|
4410
|
+
/**
|
|
4411
|
+
* Pins the collapsed-rail tooltip next to the item, in viewport coordinates.
|
|
4412
|
+
* The chip is `position: fixed` so the scrolling rail body cannot clip it;
|
|
4413
|
+
* it therefore needs the item's on-screen position at the moment it shows.
|
|
4414
|
+
*/
|
|
4415
|
+
placeTip() {
|
|
4416
|
+
const el = this.host.nativeElement;
|
|
4417
|
+
const box = el.getBoundingClientRect();
|
|
4418
|
+
el.style.setProperty("--mi-tip-x", `${box.right + 8}px`);
|
|
4419
|
+
el.style.setProperty("--mi-tip-y", `${box.top + box.height / 2}px`);
|
|
4420
|
+
}
|
|
4409
4421
|
icon = input.required(/* @ts-ignore */
|
|
4410
4422
|
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
4411
4423
|
/** The label shown in the hover tooltip (also the accessible name). */
|
|
@@ -4465,7 +4477,7 @@ class FoldMenuItemComponent {
|
|
|
4465
4477
|
ariaLabel = computed(() => this.hasBadge() ? `${this.label()}, ${this.badgeText()}` : null, /* @ts-ignore */
|
|
4466
4478
|
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
4467
4479
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4468
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldMenuItemComponent, isStandalone: true, selector: "a[fold-menu-item], button[fold-menu-item]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeTone: { classPropertyName: "badgeTone", publicName: "badgeTone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-active": "active()", "attr.aria-label": "ariaLabel()", "style.--mi-badge-accent": "badgeAccent()" } }, ngImport: i0, template: "<fold-icon [name]=\"icon()\" [size]=\"18\" class=\"mi-icon\" />\n\n<!-- Collapsed rail: a corner dot, or a count bubble for a number. -->\n@if (hasBadge()) {\n <span class=\"mi-dot\" [class.mi-dot-count]=\"isCount()\" aria-hidden=\"true\">{{\n dotText()\n }}</span>\n}\n\n<span class=\"mi-tip\">{{ label() }}</span>\n\n<!-- Expanded rail: the badge pill, pushed to the row's trailing edge. `follow`\n tints from the item's own accent; the semantic tones reuse fold-badge. -->\n@if (hasBadge()) {\n @if (isFollowTone()) {\n <span class=\"mi-badge mi-badge-follow\">{{ badgeText() }}</span>\n } @else {\n <fold-badge\n class=\"mi-badge\"\n [content]=\"badgeText()\"\n [variant]=\"badgeVariant()\"\n />\n }\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;width:40px;height:36px;box-sizing:border-box;display:grid;place-items:center;border-radius:var(--fold-radius-sm);color:var(--fold-color-text-muted);background:transparent;border:none;cursor:pointer;text-decoration:none;transition:background var(--fold-motion-fast),color var(--fold-motion-fast);--mi-accent: var(--fold-menu-section-color, var(--fold-color-text-secondary));--mi-hover-bg: color-mix( in srgb, var(--mi-accent) 16%, var(--fold-color-surface-hover) );--mi-hover-fg: var(--mi-accent);--mi-active-bg: color-mix(in srgb, var(--mi-accent) 15%, transparent);--mi-active-fg: color-mix( in srgb, var(--mi-accent) 80%, var(--fold-color-text) );--mi-active-icon: var(--mi-accent)}:host-context(fold-menu[data-tint=neutral]){--mi-accent: var(--fold-color-text-secondary);--mi-hover-bg: var(--fold-color-surface-hover);--mi-hover-fg: var(--fold-color-text-secondary);--mi-active-bg: var(--fold-color-surface-hover);--mi-active-fg: var(--fold-color-text);--mi-active-icon: var(--fold-color-text)}:host-context(fold-menu[data-tint=primary]){--mi-accent: var(--fold-color-primary)}:host(:hover){background:var(--mi-hover-bg);color:var(--mi-hover-fg)}:host(:focus-visible){outline:2px solid var(--fold-color-primary);outline-offset:2px}:host(.is-active){color:var(--mi-active-fg);background:var(--mi-active-bg)}:host(.is-active) .mi-icon{color:var(--mi-active-icon)}:host(.is-active):before{content:\"\";position:absolute;left:-8px;top:8px;bottom:8px;width:2px;border-radius:0 2px 2px 0;background:var(--mi-accent);box-shadow:0 0 8px var(--mi-accent)}.mi-icon{color:inherit;transition:color var(--fold-motion-fast)}.mi-dot{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:var(--fold-radius-round);background:var(--mi-badge-accent, var(--mi-accent));pointer-events:none}.mi-dot-count{top:2px;right:2px;width:auto;min-width:16px;height:16px;padding:0 var(--fold-space-xs);display:grid;place-items:center;border-radius:var(--fold-radius-pill);font-size:var(--fold-text-2xs);font-weight:var(--fold-weight-semibold);line-height:var(--fold-leading-none);color:var(--fold-color-on-primary)}.mi-badge{display:none}.mi-badge-follow{padding:1px var(--fold-space-sm);border-radius:var(--fold-radius-pill);font-size:var(--fold-text-xs);font-weight:var(--fold-weight-medium);line-height:var(--fold-leading-normal);white-space:nowrap;background:color-mix(in srgb,var(--mi-badge-accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--mi-badge-accent) 35%,transparent);color:color-mix(in srgb,var(--mi-badge-accent) 85%,var(--fold-color-text))}:host-context(fold-menu.expanded) .mi-dot{display:none}:host-context(fold-menu.expanded) .mi-badge{display:inline-flex;margin-left:auto}.mi-tip{position:
|
|
4480
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldMenuItemComponent, isStandalone: true, selector: "a[fold-menu-item], button[fold-menu-item]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeTone: { classPropertyName: "badgeTone", publicName: "badgeTone", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "placeTip()", "focusin": "placeTip()" }, properties: { "class.is-active": "active()", "attr.aria-label": "ariaLabel()", "style.--mi-badge-accent": "badgeAccent()" } }, ngImport: i0, template: "<fold-icon [name]=\"icon()\" [size]=\"18\" class=\"mi-icon\" />\n\n<!-- Collapsed rail: a corner dot, or a count bubble for a number. -->\n@if (hasBadge()) {\n <span class=\"mi-dot\" [class.mi-dot-count]=\"isCount()\" aria-hidden=\"true\">{{\n dotText()\n }}</span>\n}\n\n<span class=\"mi-tip\">{{ label() }}</span>\n\n<!-- Expanded rail: the badge pill, pushed to the row's trailing edge. `follow`\n tints from the item's own accent; the semantic tones reuse fold-badge. -->\n@if (hasBadge()) {\n @if (isFollowTone()) {\n <span class=\"mi-badge mi-badge-follow\">{{ badgeText() }}</span>\n } @else {\n <fold-badge\n class=\"mi-badge\"\n [content]=\"badgeText()\"\n [variant]=\"badgeVariant()\"\n />\n }\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;width:40px;height:36px;flex-shrink:0;box-sizing:border-box;display:grid;place-items:center;border-radius:var(--fold-radius-sm);color:var(--fold-color-text-muted);background:transparent;border:none;cursor:pointer;text-decoration:none;transition:background var(--fold-motion-fast),color var(--fold-motion-fast);--mi-accent: var(--fold-menu-section-color, var(--fold-color-text-secondary));--mi-hover-bg: color-mix( in srgb, var(--mi-accent) 16%, var(--fold-color-surface-hover) );--mi-hover-fg: var(--mi-accent);--mi-active-bg: color-mix(in srgb, var(--mi-accent) 15%, transparent);--mi-active-fg: color-mix( in srgb, var(--mi-accent) 80%, var(--fold-color-text) );--mi-active-icon: var(--mi-accent)}:host-context(fold-menu[data-tint=neutral]){--mi-accent: var(--fold-color-text-secondary);--mi-hover-bg: var(--fold-color-surface-hover);--mi-hover-fg: var(--fold-color-text-secondary);--mi-active-bg: var(--fold-color-surface-hover);--mi-active-fg: var(--fold-color-text);--mi-active-icon: var(--fold-color-text)}:host-context(fold-menu[data-tint=primary]){--mi-accent: var(--fold-color-primary)}:host(:hover){background:var(--mi-hover-bg);color:var(--mi-hover-fg)}:host(:focus-visible){outline:2px solid var(--fold-color-primary);outline-offset:2px}:host(.is-active){color:var(--mi-active-fg);background:var(--mi-active-bg)}:host(.is-active) .mi-icon{color:var(--mi-active-icon)}:host(.is-active):before{content:\"\";position:absolute;left:-8px;top:8px;bottom:8px;width:2px;border-radius:0 2px 2px 0;background:var(--mi-accent);box-shadow:0 0 8px var(--mi-accent)}.mi-icon{color:inherit;transition:color var(--fold-motion-fast)}.mi-dot{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:var(--fold-radius-round);background:var(--mi-badge-accent, var(--mi-accent));pointer-events:none}.mi-dot-count{top:2px;right:2px;width:auto;min-width:16px;height:16px;padding:0 var(--fold-space-xs);display:grid;place-items:center;border-radius:var(--fold-radius-pill);font-size:var(--fold-text-2xs);font-weight:var(--fold-weight-semibold);line-height:var(--fold-leading-none);color:var(--fold-color-on-primary)}.mi-badge{display:none}.mi-badge-follow{padding:1px var(--fold-space-sm);border-radius:var(--fold-radius-pill);font-size:var(--fold-text-xs);font-weight:var(--fold-weight-medium);line-height:var(--fold-leading-normal);white-space:nowrap;background:color-mix(in srgb,var(--mi-badge-accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--mi-badge-accent) 35%,transparent);color:color-mix(in srgb,var(--mi-badge-accent) 85%,var(--fold-color-text))}:host-context(fold-menu.expanded) .mi-dot{display:none}:host-context(fold-menu.expanded) .mi-badge{display:inline-flex;margin-left:auto}.mi-tip{position:fixed;left:var(--mi-tip-x, -9999px);top:var(--mi-tip-y, 0);transform:translateY(-50%);padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}:host(:hover) .mi-tip{opacity:1}:host-context(fold-menu.expanded){width:auto;height:36px;display:flex;align-items:center;gap:var(--fold-space-md);padding:0 var(--fold-space-md)}:host-context(fold-menu.expanded) .mi-tip{position:static;transform:none;padding:0;border:none;background:none;box-shadow:none;color:inherit;font-size:var(--fold-text-sm);opacity:1;pointer-events:auto}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldBadgeComponent, selector: "fold-badge", inputs: ["content", "radius", "variant"] }] });
|
|
4469
4481
|
}
|
|
4470
4482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldMenuItemComponent, decorators: [{
|
|
4471
4483
|
type: Component,
|
|
@@ -4473,7 +4485,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
4473
4485
|
"[class.is-active]": "active()",
|
|
4474
4486
|
"[attr.aria-label]": "ariaLabel()",
|
|
4475
4487
|
"[style.--mi-badge-accent]": "badgeAccent()",
|
|
4476
|
-
|
|
4488
|
+
"(mouseenter)": "placeTip()",
|
|
4489
|
+
"(focusin)": "placeTip()",
|
|
4490
|
+
}, template: "<fold-icon [name]=\"icon()\" [size]=\"18\" class=\"mi-icon\" />\n\n<!-- Collapsed rail: a corner dot, or a count bubble for a number. -->\n@if (hasBadge()) {\n <span class=\"mi-dot\" [class.mi-dot-count]=\"isCount()\" aria-hidden=\"true\">{{\n dotText()\n }}</span>\n}\n\n<span class=\"mi-tip\">{{ label() }}</span>\n\n<!-- Expanded rail: the badge pill, pushed to the row's trailing edge. `follow`\n tints from the item's own accent; the semantic tones reuse fold-badge. -->\n@if (hasBadge()) {\n @if (isFollowTone()) {\n <span class=\"mi-badge mi-badge-follow\">{{ badgeText() }}</span>\n } @else {\n <fold-badge\n class=\"mi-badge\"\n [content]=\"badgeText()\"\n [variant]=\"badgeVariant()\"\n />\n }\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;width:40px;height:36px;flex-shrink:0;box-sizing:border-box;display:grid;place-items:center;border-radius:var(--fold-radius-sm);color:var(--fold-color-text-muted);background:transparent;border:none;cursor:pointer;text-decoration:none;transition:background var(--fold-motion-fast),color var(--fold-motion-fast);--mi-accent: var(--fold-menu-section-color, var(--fold-color-text-secondary));--mi-hover-bg: color-mix( in srgb, var(--mi-accent) 16%, var(--fold-color-surface-hover) );--mi-hover-fg: var(--mi-accent);--mi-active-bg: color-mix(in srgb, var(--mi-accent) 15%, transparent);--mi-active-fg: color-mix( in srgb, var(--mi-accent) 80%, var(--fold-color-text) );--mi-active-icon: var(--mi-accent)}:host-context(fold-menu[data-tint=neutral]){--mi-accent: var(--fold-color-text-secondary);--mi-hover-bg: var(--fold-color-surface-hover);--mi-hover-fg: var(--fold-color-text-secondary);--mi-active-bg: var(--fold-color-surface-hover);--mi-active-fg: var(--fold-color-text);--mi-active-icon: var(--fold-color-text)}:host-context(fold-menu[data-tint=primary]){--mi-accent: var(--fold-color-primary)}:host(:hover){background:var(--mi-hover-bg);color:var(--mi-hover-fg)}:host(:focus-visible){outline:2px solid var(--fold-color-primary);outline-offset:2px}:host(.is-active){color:var(--mi-active-fg);background:var(--mi-active-bg)}:host(.is-active) .mi-icon{color:var(--mi-active-icon)}:host(.is-active):before{content:\"\";position:absolute;left:-8px;top:8px;bottom:8px;width:2px;border-radius:0 2px 2px 0;background:var(--mi-accent);box-shadow:0 0 8px var(--mi-accent)}.mi-icon{color:inherit;transition:color var(--fold-motion-fast)}.mi-dot{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:var(--fold-radius-round);background:var(--mi-badge-accent, var(--mi-accent));pointer-events:none}.mi-dot-count{top:2px;right:2px;width:auto;min-width:16px;height:16px;padding:0 var(--fold-space-xs);display:grid;place-items:center;border-radius:var(--fold-radius-pill);font-size:var(--fold-text-2xs);font-weight:var(--fold-weight-semibold);line-height:var(--fold-leading-none);color:var(--fold-color-on-primary)}.mi-badge{display:none}.mi-badge-follow{padding:1px var(--fold-space-sm);border-radius:var(--fold-radius-pill);font-size:var(--fold-text-xs);font-weight:var(--fold-weight-medium);line-height:var(--fold-leading-normal);white-space:nowrap;background:color-mix(in srgb,var(--mi-badge-accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--mi-badge-accent) 35%,transparent);color:color-mix(in srgb,var(--mi-badge-accent) 85%,var(--fold-color-text))}:host-context(fold-menu.expanded) .mi-dot{display:none}:host-context(fold-menu.expanded) .mi-badge{display:inline-flex;margin-left:auto}.mi-tip{position:fixed;left:var(--mi-tip-x, -9999px);top:var(--mi-tip-y, 0);transform:translateY(-50%);padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}:host(:hover) .mi-tip{opacity:1}:host-context(fold-menu.expanded){width:auto;height:36px;display:flex;align-items:center;gap:var(--fold-space-md);padding:0 var(--fold-space-md)}:host-context(fold-menu.expanded) .mi-tip{position:static;transform:none;padding:0;border:none;background:none;box-shadow:none;color:inherit;font-size:var(--fold-text-sm);opacity:1;pointer-events:auto}\n"] }]
|
|
4477
4491
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeTone", required: false }] }] } });
|
|
4478
4492
|
|
|
4479
4493
|
/**
|
|
@@ -4559,11 +4573,11 @@ class FoldMenuSectionComponent {
|
|
|
4559
4573
|
this.collapsed.update((v) => !v);
|
|
4560
4574
|
}
|
|
4561
4575
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldMenuSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4562
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldMenuSectionComponent, isStandalone: true, selector: "fold-menu-section", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "style.--fold-menu-section-color": "color() ?? null" } }, queries: [{ propertyName: "items", predicate: FoldMenuItemComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (collapsible()) {\n <button\n type=\"button\"\n class=\"section-head\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"bodyId\"\n (click)=\"toggle()\"\n >\n <fold-menu-separator [label]=\"label()\" [color]=\"color()\" />\n <fold-icon\n class=\"section-chevron\"\n [class.is-open]=\"open()\"\n name=\"chevron-right\"\n [size]=\"12\"\n aria-hidden=\"true\"\n />\n </button>\n} @else {\n <fold-menu-separator [label]=\"label()\" [color]=\"color()\" />\n}\n\n<div\n class=\"section-items\"\n [id]=\"bodyId\"\n [class.foldable]=\"collapsible()\"\n [class.is-collapsed]=\"!open()\"\n>\n <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-xs);width:100%}:host-context(fold-menu.expanded){align-items:stretch;width:auto}.section-items{display:contents}.section-head{all:unset;display:flex;align-items:center;width:100%;box-sizing:border-box;cursor:pointer}.section-head fold-menu-separator{flex:1;min-width:0}.section-chevron{flex-shrink:0;margin-left:auto;margin-right:var(--fold-space-sm);color:var(--fold-color-text-faded);transition:transform var(--fold-motion-fast)}.section-chevron.is-open{transform:rotate(90deg)}:host-context(fold-menu:not(.expanded)) .section-head{pointer-events:none}:host-context(fold-menu:not(.expanded)) .section-chevron{display:none}.section-items.foldable{display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-xs);width:100%;overflow:hidden;max-height:60vh;opacity:1;transition:max-height var(--fold-motion-base),opacity var(--fold-motion-base)}:host-context(fold-menu.expanded) .section-items.foldable{align-items:stretch;width:auto}.section-items.foldable.is-collapsed{max-height:0;opacity:0}:host-context(fold-menu:not(.expanded)) .section-items.foldable{max-height:none;opacity:1}@media(prefers-reduced-motion:reduce){.section-items.foldable,.section-chevron{transition:none}}\n"], dependencies: [{ kind: "component", type: FoldMenuSeparatorComponent, selector: "fold-menu-separator", inputs: ["label", "color"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
4576
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldMenuSectionComponent, isStandalone: true, selector: "fold-menu-section", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "style.--fold-menu-section-color": "color() ?? null" } }, queries: [{ propertyName: "items", predicate: FoldMenuItemComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (collapsible()) {\n <button\n type=\"button\"\n class=\"section-head\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"bodyId\"\n (click)=\"toggle()\"\n >\n <fold-menu-separator [label]=\"label()\" [color]=\"color()\" />\n <fold-icon\n class=\"section-chevron\"\n [class.is-open]=\"open()\"\n name=\"chevron-right\"\n [size]=\"12\"\n aria-hidden=\"true\"\n />\n </button>\n} @else {\n <fold-menu-separator [label]=\"label()\" [color]=\"color()\" />\n}\n\n<div\n class=\"section-items\"\n [id]=\"bodyId\"\n [class.foldable]=\"collapsible()\"\n [class.is-collapsed]=\"!open()\"\n>\n <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-xs);width:100%}:host-context(fold-menu.expanded){align-items:stretch;width:auto}.section-items{display:contents}.section-head{all:unset;display:flex;align-items:center;width:100%;box-sizing:border-box;cursor:pointer}.section-head fold-menu-separator{flex:1;min-width:0}.section-chevron{flex-shrink:0;margin-left:auto;margin-right:var(--fold-space-sm);color:var(--fold-color-text-faded);transition:transform var(--fold-motion-fast)}.section-chevron.is-open{transform:rotate(90deg)}:host-context(fold-menu:not(.expanded)) .section-head{pointer-events:none}:host-context(fold-menu:not(.expanded)) .section-chevron{display:none}.section-items.foldable{display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-xs);width:100%;overflow:hidden;max-height:60vh;opacity:1;transition:max-height var(--fold-motion-base),opacity var(--fold-motion-base)}:host-context(fold-menu.expanded) .section-items.foldable{align-items:stretch;width:auto}.section-items.foldable.is-collapsed{max-height:0;opacity:0}:host-context(fold-menu:not(.expanded)) .section-items.foldable{max-height:none;opacity:1}@media(prefers-reduced-motion:reduce){.section-items.foldable,.section-chevron{transition:none}}:host-context(fold-menu.expanded) .section-items{display:flex;flex-direction:column;align-items:stretch;gap:var(--fold-space-xs);margin-left:var(--fold-space-md);padding-left:var(--fold-space-xs);border-left:2px solid color-mix(in srgb,var(--fold-menu-section-color, var(--fold-color-border)) 60%,transparent)}\n"], dependencies: [{ kind: "component", type: FoldMenuSeparatorComponent, selector: "fold-menu-separator", inputs: ["label", "color"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
4563
4577
|
}
|
|
4564
4578
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldMenuSectionComponent, decorators: [{
|
|
4565
4579
|
type: Component,
|
|
4566
|
-
args: [{ selector: "fold-menu-section", standalone: true, imports: [FoldMenuSeparatorComponent, FoldIconComponent], host: { "[style.--fold-menu-section-color]": "color() ?? null" }, template: "@if (collapsible()) {\n <button\n type=\"button\"\n class=\"section-head\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"bodyId\"\n (click)=\"toggle()\"\n >\n <fold-menu-separator [label]=\"label()\" [color]=\"color()\" />\n <fold-icon\n class=\"section-chevron\"\n [class.is-open]=\"open()\"\n name=\"chevron-right\"\n [size]=\"12\"\n aria-hidden=\"true\"\n />\n </button>\n} @else {\n <fold-menu-separator [label]=\"label()\" [color]=\"color()\" />\n}\n\n<div\n class=\"section-items\"\n [id]=\"bodyId\"\n [class.foldable]=\"collapsible()\"\n [class.is-collapsed]=\"!open()\"\n>\n <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-xs);width:100%}:host-context(fold-menu.expanded){align-items:stretch;width:auto}.section-items{display:contents}.section-head{all:unset;display:flex;align-items:center;width:100%;box-sizing:border-box;cursor:pointer}.section-head fold-menu-separator{flex:1;min-width:0}.section-chevron{flex-shrink:0;margin-left:auto;margin-right:var(--fold-space-sm);color:var(--fold-color-text-faded);transition:transform var(--fold-motion-fast)}.section-chevron.is-open{transform:rotate(90deg)}:host-context(fold-menu:not(.expanded)) .section-head{pointer-events:none}:host-context(fold-menu:not(.expanded)) .section-chevron{display:none}.section-items.foldable{display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-xs);width:100%;overflow:hidden;max-height:60vh;opacity:1;transition:max-height var(--fold-motion-base),opacity var(--fold-motion-base)}:host-context(fold-menu.expanded) .section-items.foldable{align-items:stretch;width:auto}.section-items.foldable.is-collapsed{max-height:0;opacity:0}:host-context(fold-menu:not(.expanded)) .section-items.foldable{max-height:none;opacity:1}@media(prefers-reduced-motion:reduce){.section-items.foldable,.section-chevron{transition:none}}\n"] }]
|
|
4580
|
+
args: [{ selector: "fold-menu-section", standalone: true, imports: [FoldMenuSeparatorComponent, FoldIconComponent], host: { "[style.--fold-menu-section-color]": "color() ?? null" }, template: "@if (collapsible()) {\n <button\n type=\"button\"\n class=\"section-head\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"bodyId\"\n (click)=\"toggle()\"\n >\n <fold-menu-separator [label]=\"label()\" [color]=\"color()\" />\n <fold-icon\n class=\"section-chevron\"\n [class.is-open]=\"open()\"\n name=\"chevron-right\"\n [size]=\"12\"\n aria-hidden=\"true\"\n />\n </button>\n} @else {\n <fold-menu-separator [label]=\"label()\" [color]=\"color()\" />\n}\n\n<div\n class=\"section-items\"\n [id]=\"bodyId\"\n [class.foldable]=\"collapsible()\"\n [class.is-collapsed]=\"!open()\"\n>\n <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-xs);width:100%}:host-context(fold-menu.expanded){align-items:stretch;width:auto}.section-items{display:contents}.section-head{all:unset;display:flex;align-items:center;width:100%;box-sizing:border-box;cursor:pointer}.section-head fold-menu-separator{flex:1;min-width:0}.section-chevron{flex-shrink:0;margin-left:auto;margin-right:var(--fold-space-sm);color:var(--fold-color-text-faded);transition:transform var(--fold-motion-fast)}.section-chevron.is-open{transform:rotate(90deg)}:host-context(fold-menu:not(.expanded)) .section-head{pointer-events:none}:host-context(fold-menu:not(.expanded)) .section-chevron{display:none}.section-items.foldable{display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-xs);width:100%;overflow:hidden;max-height:60vh;opacity:1;transition:max-height var(--fold-motion-base),opacity var(--fold-motion-base)}:host-context(fold-menu.expanded) .section-items.foldable{align-items:stretch;width:auto}.section-items.foldable.is-collapsed{max-height:0;opacity:0}:host-context(fold-menu:not(.expanded)) .section-items.foldable{max-height:none;opacity:1}@media(prefers-reduced-motion:reduce){.section-items.foldable,.section-chevron{transition:none}}:host-context(fold-menu.expanded) .section-items{display:flex;flex-direction:column;align-items:stretch;gap:var(--fold-space-xs);margin-left:var(--fold-space-md);padding-left:var(--fold-space-xs);border-left:2px solid color-mix(in srgb,var(--fold-menu-section-color, var(--fold-color-border)) 60%,transparent)}\n"] }]
|
|
4567
4581
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FoldMenuItemComponent), { ...{
|
|
4568
4582
|
descendants: true,
|
|
4569
4583
|
}, isSignal: true }] }] } });
|