fold-ng 0.5.2 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +90 -1
- package/fesm2022/fold-ng.mjs +258 -169
- package/fesm2022/fold-ng.mjs.map +1 -1
- package/package.json +1 -1
- package/tokens/scales.css +7 -0
- package/tokens/semantic.css +12 -0
- package/types/fold-ng.d.ts +119 -61
- package/types/fold-ng.d.ts.map +1 -1
package/fesm2022/fold-ng.mjs
CHANGED
|
@@ -489,7 +489,7 @@ class FoldAppShellComponent {
|
|
|
489
489
|
headerHeightMobileVar = computed(() => pxVar(this.headerHeightMobile()), /* @ts-ignore */
|
|
490
490
|
...(ngDevMode ? [{ debugName: "headerHeightMobileVar" }] : /* istanbul ignore next */ []));
|
|
491
491
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldAppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
492
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldAppShellComponent, isStandalone: true, selector: "fold-app-shell", inputs: { railWidth: { classPropertyName: "railWidth", publicName: "railWidth", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, headerHeightMobile: { classPropertyName: "headerHeightMobile", publicName: "headerHeightMobile", isSignal: true, isRequired: false, transformFunction: null }, headerLayout: { classPropertyName: "headerLayout", publicName: "headerLayout", isSignal: true, isRequired: false, transformFunction: null }, footerLayout: { classPropertyName: "footerLayout", publicName: "footerLayout", isSignal: true, isRequired: false, transformFunction: null }, footerBehavior: { classPropertyName: "footerBehavior", publicName: "footerBehavior", isSignal: true, isRequired: false, transformFunction: null }, contentScroll: { classPropertyName: "contentScroll", publicName: "contentScroll", isSignal: true, isRequired: false, transformFunction: null }, skipLinkLabel: { classPropertyName: "skipLinkLabel", publicName: "skipLinkLabel", isSignal: true, isRequired: false, transformFunction: null }, drawerLabel: { classPropertyName: "drawerLabel", publicName: "drawerLabel", isSignal: true, isRequired: false, transformFunction: null }, mobileNav: { classPropertyName: "mobileNav", publicName: "mobileNav", isSignal: true, isRequired: false, transformFunction: null }, mobileNavOpen: { classPropertyName: "mobileNavOpen", publicName: "mobileNavOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mobileNavOpen: "mobileNavOpenChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "style.--fold-shell-rail-width": "railWidthVar()", "style.--fold-shell-header-height": "headerHeightVar()", "style.--fold-shell-header-height-mobile": "headerHeightMobileVar()", "class.header-full": "headerLayout() === \"full\"", "class.footer-full": "footerLayout() === \"full\"", "class.footer-scroll": "footerBehavior() === \"scroll\"", "class.mobile-drawer": "mobileNav() === \"drawer\"", "class.mobile-nav-open": "drawerOpen()", "class.content-auto": "contentScroll() === \"auto\"" } }, exportAs: ["foldAppShell"], ngImport: i0, template: "<!-- Skip-link: the first Tab stop \u2014 visually hidden until focused, then jumps\n keyboard users past the rails to <main> (which is focusable, tabindex=-1). -->\n<a class=\"skip-link\" [href]=\"'#' + contentId\" (click)=\"skipToContent($event)\">{{\n skipLinkLabel()\n}}</a>\n\n<!-- The primary rail. While the mobile drawer is open it is a real modal dialog\n (named, aria-modal, focus-trapped) and every sibling region is inert \u2014 the\n same bar the panel host holds; on desktop it's a plain nav rail. -->\n<div\n class=\"rail-primary\"\n [id]=\"drawerId\"\n foldSurface=\"chrome\"\n [foldFocusTrap]=\"drawerOpen()\"\n [attr.role]=\"drawerOpen() ? 'dialog' : null\"\n [attr.aria-modal]=\"drawerOpen() ? 'true' : null\"\n [attr.aria-label]=\"drawerOpen() ? drawerLabel() : null\"\n tabindex=\"-1\"\n>\n <ng-content select=\"[railPrimary]\" />\n</div>\n<div\n class=\"rail-secondary\"\n foldSurface=\"chrome\"\n [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n <ng-content select=\"[railSecondary]\" />\n</div>\n\n<!-- Mobile drawer scrim \u2014 only rendered while the drawer is actually open (the\n shell is narrow AND mobileNavOpen). A darkening veil that dismisses on\n click; Escape and widening close it too. aria-hidden: the focus-trapped\n drawer + Escape are the accessible path, the scrim is a mouse convenience. -->\n@if (drawerOpen()) {\n <div class=\"mobile-scrim\" (click)=\"closeMobileNav()\" aria-hidden=\"true\"></div>\n}\n<header\n class=\"header\"\n foldSurface=\"chrome\"\n [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n <ng-content select=\"[header]\" />\n</header>\n\n<!-- One footer, stamped in one of two positions \u2014 a grid row (pinned, always in\n sight) or inside the content scroll (revealed on the way down). A single\n <ng-content> in a template avoids duplicate-selector projection loss. -->\n<ng-template #footerTpl>\n <footer\n class=\"footer\"\n [class.footer-inflow]=\"footerBehavior() === 'scroll'\"\n foldSurface=\"chrome\"\n [attr.inert]=\"drawerOpen() ? '' : null\"\n >\n <ng-content select=\"[footer]\" />\n </footer>\n</ng-template>\n\n<main\n class=\"content\"\n foldSurface=\"page\"\n [id]=\"contentId\"\n tabindex=\"-1\"\n [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n <ng-content />\n @if (footerBehavior() === \"scroll\") {\n <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n }\n</main>\n@if (footerBehavior() !== \"scroll\") {\n <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;height:100%;width:100%;position:relative;box-sizing:border-box;overflow:hidden;background:var(--fold-color-bg-page);grid-template-columns:auto auto minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\"}.skip-link{position:absolute;top:0;left:0;z-index:60;margin:var(--fold-space-sm, 8px);padding:8px 14px;border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);color:var(--fold-color-text);font-size:var(--fold-text-sm);font-weight:600;text-decoration:none;transform:translateY(-150%);transition:transform .12s ease}.skip-link:focus{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}:host(.header-full){grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\"}:host(:not(.footer-scroll):has([footer])){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:not(.footer-scroll):has([footer])){grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.footer-full:not(.footer-scroll):has([footer])){grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full.footer-full:not(.footer-scroll):has([footer])){grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\" \"footer footer footer\"}.rail-primary{grid-area:rail-primary;min-height:0}.rail-secondary{grid-area:rail-secondary;min-height:0}.header{grid-area:header;min-width:0}.footer{grid-area:footer;min-width:0;min-height:0}.content{grid-area:content;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.content:focus{outline:none}:host(.footer-scroll) .content,:host(.content-auto) .content{overflow:auto}.footer-inflow{margin-top:auto}.rail-primary:has([data-elevated]),.rail-secondary:has([data-elevated]),.header:has([data-elevated]),.footer:has([data-elevated]),.content:has([data-elevated]){padding:var(--fold-surface-inset, var(--fold-space-md))}@media(max-width:768px){:host,:host(.header-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.footer-scroll):has([footer])),:host(.header-full:not(.footer-scroll):has([footer])),:host(.footer-full:not(.footer-scroll):has([footer])),:host(.header-full.footer-full:not(.footer-scroll):has([footer])){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}.rail-primary,.rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-header-height-mobile, 52px);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}.mobile-scrim{position:absolute;inset:var(--fold-shell-header-height-mobile, 52px) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content{overflow:hidden}}@container (max-width: 1024px){.rail-secondary{display:none}}@container (max-width: 768px){:host,:host(.header-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.footer-scroll):has([footer])),:host(.header-full:not(.footer-scroll):has([footer])),:host(.footer-full:not(.footer-scroll):has([footer])),:host(.header-full.footer-full:not(.footer-scroll):has([footer])){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}.rail-primary,.rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-header-height-mobile, 52px);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}.mobile-scrim{position:absolute;inset:var(--fold-shell-header-height-mobile, 52px) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content{overflow:hidden}}@keyframes fold-shell-scrim-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.rail-primary,.mobile-scrim{transition:none;animation:none}}\n"], dependencies: [{ kind: "directive", type: FoldSurfaceDirective, selector: "[foldSurface]", inputs: ["foldSurface"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusTrapDirective, selector: "[foldFocusTrap]", inputs: ["foldFocusTrap"] }] });
|
|
492
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldAppShellComponent, isStandalone: true, selector: "fold-app-shell", inputs: { railWidth: { classPropertyName: "railWidth", publicName: "railWidth", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, headerHeightMobile: { classPropertyName: "headerHeightMobile", publicName: "headerHeightMobile", isSignal: true, isRequired: false, transformFunction: null }, headerLayout: { classPropertyName: "headerLayout", publicName: "headerLayout", isSignal: true, isRequired: false, transformFunction: null }, footerLayout: { classPropertyName: "footerLayout", publicName: "footerLayout", isSignal: true, isRequired: false, transformFunction: null }, footerBehavior: { classPropertyName: "footerBehavior", publicName: "footerBehavior", isSignal: true, isRequired: false, transformFunction: null }, contentScroll: { classPropertyName: "contentScroll", publicName: "contentScroll", isSignal: true, isRequired: false, transformFunction: null }, skipLinkLabel: { classPropertyName: "skipLinkLabel", publicName: "skipLinkLabel", isSignal: true, isRequired: false, transformFunction: null }, drawerLabel: { classPropertyName: "drawerLabel", publicName: "drawerLabel", isSignal: true, isRequired: false, transformFunction: null }, mobileNav: { classPropertyName: "mobileNav", publicName: "mobileNav", isSignal: true, isRequired: false, transformFunction: null }, mobileNavOpen: { classPropertyName: "mobileNavOpen", publicName: "mobileNavOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mobileNavOpen: "mobileNavOpenChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "style.--fold-shell-rail-width": "railWidthVar()", "style.--fold-shell-header-height": "headerHeightVar()", "style.--fold-shell-header-height-mobile": "headerHeightMobileVar()", "class.header-full": "headerLayout() === \"full\"", "class.footer-full": "footerLayout() === \"full\"", "class.footer-scroll": "footerBehavior() === \"scroll\"", "class.mobile-drawer": "mobileNav() === \"drawer\"", "class.mobile-nav-open": "drawerOpen()", "class.content-auto": "contentScroll() === \"auto\"" } }, exportAs: ["foldAppShell"], ngImport: i0, template: "<!-- Skip-link: the first Tab stop \u2014 visually hidden until focused, then jumps\n keyboard users past the rails to <main> (which is focusable, tabindex=-1). -->\n<a class=\"skip-link\" [href]=\"'#' + contentId\" (click)=\"skipToContent($event)\">{{\n skipLinkLabel()\n}}</a>\n\n<!-- The primary rail. While the mobile drawer is open it is a real modal dialog\n (named, aria-modal, focus-trapped) and every sibling region is inert \u2014 the\n same bar the panel host holds; on desktop it's a plain nav rail. -->\n<div\n class=\"rail-primary\"\n [id]=\"drawerId\"\n foldSurface=\"chrome\"\n [foldFocusTrap]=\"drawerOpen()\"\n [attr.role]=\"drawerOpen() ? 'dialog' : null\"\n [attr.aria-modal]=\"drawerOpen() ? 'true' : null\"\n [attr.aria-label]=\"drawerOpen() ? drawerLabel() : null\"\n tabindex=\"-1\"\n>\n <ng-content select=\"[railPrimary]\" />\n</div>\n<div\n class=\"rail-secondary\"\n foldSurface=\"chrome\"\n [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n <ng-content select=\"[railSecondary]\" />\n</div>\n\n<!-- Mobile drawer scrim \u2014 only rendered while the drawer is actually open (the\n shell is narrow AND mobileNavOpen). A darkening veil that dismisses on\n click; Escape and widening close it too. aria-hidden: the focus-trapped\n drawer + Escape are the accessible path, the scrim is a mouse convenience. -->\n@if (drawerOpen()) {\n <div class=\"mobile-scrim\" (click)=\"closeMobileNav()\" aria-hidden=\"true\"></div>\n}\n<header\n class=\"header\"\n foldSurface=\"chrome\"\n [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n <ng-content select=\"[header]\" />\n</header>\n\n<!-- One footer, stamped in one of two positions \u2014 a grid row (pinned, always in\n sight) or inside the content scroll (revealed on the way down). A single\n <ng-content> in a template avoids duplicate-selector projection loss. -->\n<ng-template #footerTpl>\n <footer\n class=\"footer\"\n [class.footer-inflow]=\"footerBehavior() === 'scroll'\"\n foldSurface=\"chrome\"\n [attr.inert]=\"drawerOpen() ? '' : null\"\n >\n <ng-content select=\"[footer]\" />\n </footer>\n</ng-template>\n\n<main\n class=\"content\"\n foldSurface=\"page\"\n [id]=\"contentId\"\n tabindex=\"-1\"\n [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n <ng-content />\n @if (footerBehavior() === \"scroll\") {\n <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n }\n</main>\n@if (footerBehavior() !== \"scroll\") {\n <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;height:100%;width:100%;position:relative;box-sizing:border-box;overflow:hidden;background:var(--fold-color-bg-page);grid-template-columns:auto auto minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\"}.skip-link{position:absolute;top:0;left:0;z-index:60;margin:var(--fold-space-sm, 8px);padding:var(--fold-space-sm) var(--fold-space-md);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);color:var(--fold-color-text);font-size:var(--fold-text-sm);font-weight:600;text-decoration:none;transform:translateY(-150%);transition:transform .12s ease}.skip-link:focus{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}:host(.header-full){grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\"}:host(:not(.footer-scroll):has([footer])){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:not(.footer-scroll):has([footer])){grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.footer-full:not(.footer-scroll):has([footer])){grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full.footer-full:not(.footer-scroll):has([footer])){grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\" \"footer footer footer\"}.rail-primary{grid-area:rail-primary;min-height:0}.rail-secondary{grid-area:rail-secondary;min-height:0}.header{grid-area:header;min-width:0}.footer{grid-area:footer;min-width:0;min-height:0}.content{grid-area:content;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.content:focus{outline:none}:host(.footer-scroll) .content,:host(.content-auto) .content{overflow:auto}.footer-inflow{margin-top:auto}.rail-primary:has([data-elevated]),.rail-secondary:has([data-elevated]),.header:has([data-elevated]),.footer:has([data-elevated]),.content:has([data-elevated]){padding:var(--fold-surface-inset, var(--fold-space-md))}@media(max-width:768px){:host,:host(.header-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.footer-scroll):has([footer])),:host(.header-full:not(.footer-scroll):has([footer])),:host(.footer-full:not(.footer-scroll):has([footer])),:host(.header-full.footer-full:not(.footer-scroll):has([footer])){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}.rail-primary,.rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-header-height-mobile, 52px);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}.mobile-scrim{position:absolute;inset:var(--fold-shell-header-height-mobile, 52px) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content{overflow:hidden}}@container (max-width: 1024px){.rail-secondary{display:none}}@container (max-width: 768px){:host,:host(.header-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.footer-scroll):has([footer])),:host(.header-full:not(.footer-scroll):has([footer])),:host(.footer-full:not(.footer-scroll):has([footer])),:host(.header-full.footer-full:not(.footer-scroll):has([footer])){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}.rail-primary,.rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-header-height-mobile, 52px);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}.mobile-scrim{position:absolute;inset:var(--fold-shell-header-height-mobile, 52px) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content{overflow:hidden}}@keyframes fold-shell-scrim-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.rail-primary,.mobile-scrim{transition:none;animation:none}}\n"], dependencies: [{ kind: "directive", type: FoldSurfaceDirective, selector: "[foldSurface]", inputs: ["foldSurface"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusTrapDirective, selector: "[foldFocusTrap]", inputs: ["foldFocusTrap"] }] });
|
|
493
493
|
}
|
|
494
494
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldAppShellComponent, decorators: [{
|
|
495
495
|
type: Component,
|
|
@@ -503,7 +503,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
503
503
|
"[class.mobile-drawer]": 'mobileNav() === "drawer"',
|
|
504
504
|
"[class.mobile-nav-open]": "drawerOpen()",
|
|
505
505
|
"[class.content-auto]": 'contentScroll() === "auto"',
|
|
506
|
-
}, template: "<!-- Skip-link: the first Tab stop \u2014 visually hidden until focused, then jumps\n keyboard users past the rails to <main> (which is focusable, tabindex=-1). -->\n<a class=\"skip-link\" [href]=\"'#' + contentId\" (click)=\"skipToContent($event)\">{{\n skipLinkLabel()\n}}</a>\n\n<!-- The primary rail. While the mobile drawer is open it is a real modal dialog\n (named, aria-modal, focus-trapped) and every sibling region is inert \u2014 the\n same bar the panel host holds; on desktop it's a plain nav rail. -->\n<div\n class=\"rail-primary\"\n [id]=\"drawerId\"\n foldSurface=\"chrome\"\n [foldFocusTrap]=\"drawerOpen()\"\n [attr.role]=\"drawerOpen() ? 'dialog' : null\"\n [attr.aria-modal]=\"drawerOpen() ? 'true' : null\"\n [attr.aria-label]=\"drawerOpen() ? drawerLabel() : null\"\n tabindex=\"-1\"\n>\n <ng-content select=\"[railPrimary]\" />\n</div>\n<div\n class=\"rail-secondary\"\n foldSurface=\"chrome\"\n [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n <ng-content select=\"[railSecondary]\" />\n</div>\n\n<!-- Mobile drawer scrim \u2014 only rendered while the drawer is actually open (the\n shell is narrow AND mobileNavOpen). A darkening veil that dismisses on\n click; Escape and widening close it too. aria-hidden: the focus-trapped\n drawer + Escape are the accessible path, the scrim is a mouse convenience. -->\n@if (drawerOpen()) {\n <div class=\"mobile-scrim\" (click)=\"closeMobileNav()\" aria-hidden=\"true\"></div>\n}\n<header\n class=\"header\"\n foldSurface=\"chrome\"\n [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n <ng-content select=\"[header]\" />\n</header>\n\n<!-- One footer, stamped in one of two positions \u2014 a grid row (pinned, always in\n sight) or inside the content scroll (revealed on the way down). A single\n <ng-content> in a template avoids duplicate-selector projection loss. -->\n<ng-template #footerTpl>\n <footer\n class=\"footer\"\n [class.footer-inflow]=\"footerBehavior() === 'scroll'\"\n foldSurface=\"chrome\"\n [attr.inert]=\"drawerOpen() ? '' : null\"\n >\n <ng-content select=\"[footer]\" />\n </footer>\n</ng-template>\n\n<main\n class=\"content\"\n foldSurface=\"page\"\n [id]=\"contentId\"\n tabindex=\"-1\"\n [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n <ng-content />\n @if (footerBehavior() === \"scroll\") {\n <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n }\n</main>\n@if (footerBehavior() !== \"scroll\") {\n <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;height:100%;width:100%;position:relative;box-sizing:border-box;overflow:hidden;background:var(--fold-color-bg-page);grid-template-columns:auto auto minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\"}.skip-link{position:absolute;top:0;left:0;z-index:60;margin:var(--fold-space-sm, 8px);padding:
|
|
506
|
+
}, template: "<!-- Skip-link: the first Tab stop \u2014 visually hidden until focused, then jumps\n keyboard users past the rails to <main> (which is focusable, tabindex=-1). -->\n<a class=\"skip-link\" [href]=\"'#' + contentId\" (click)=\"skipToContent($event)\">{{\n skipLinkLabel()\n}}</a>\n\n<!-- The primary rail. While the mobile drawer is open it is a real modal dialog\n (named, aria-modal, focus-trapped) and every sibling region is inert \u2014 the\n same bar the panel host holds; on desktop it's a plain nav rail. -->\n<div\n class=\"rail-primary\"\n [id]=\"drawerId\"\n foldSurface=\"chrome\"\n [foldFocusTrap]=\"drawerOpen()\"\n [attr.role]=\"drawerOpen() ? 'dialog' : null\"\n [attr.aria-modal]=\"drawerOpen() ? 'true' : null\"\n [attr.aria-label]=\"drawerOpen() ? drawerLabel() : null\"\n tabindex=\"-1\"\n>\n <ng-content select=\"[railPrimary]\" />\n</div>\n<div\n class=\"rail-secondary\"\n foldSurface=\"chrome\"\n [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n <ng-content select=\"[railSecondary]\" />\n</div>\n\n<!-- Mobile drawer scrim \u2014 only rendered while the drawer is actually open (the\n shell is narrow AND mobileNavOpen). A darkening veil that dismisses on\n click; Escape and widening close it too. aria-hidden: the focus-trapped\n drawer + Escape are the accessible path, the scrim is a mouse convenience. -->\n@if (drawerOpen()) {\n <div class=\"mobile-scrim\" (click)=\"closeMobileNav()\" aria-hidden=\"true\"></div>\n}\n<header\n class=\"header\"\n foldSurface=\"chrome\"\n [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n <ng-content select=\"[header]\" />\n</header>\n\n<!-- One footer, stamped in one of two positions \u2014 a grid row (pinned, always in\n sight) or inside the content scroll (revealed on the way down). A single\n <ng-content> in a template avoids duplicate-selector projection loss. -->\n<ng-template #footerTpl>\n <footer\n class=\"footer\"\n [class.footer-inflow]=\"footerBehavior() === 'scroll'\"\n foldSurface=\"chrome\"\n [attr.inert]=\"drawerOpen() ? '' : null\"\n >\n <ng-content select=\"[footer]\" />\n </footer>\n</ng-template>\n\n<main\n class=\"content\"\n foldSurface=\"page\"\n [id]=\"contentId\"\n tabindex=\"-1\"\n [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n <ng-content />\n @if (footerBehavior() === \"scroll\") {\n <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n }\n</main>\n@if (footerBehavior() !== \"scroll\") {\n <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;height:100%;width:100%;position:relative;box-sizing:border-box;overflow:hidden;background:var(--fold-color-bg-page);grid-template-columns:auto auto minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\"}.skip-link{position:absolute;top:0;left:0;z-index:60;margin:var(--fold-space-sm, 8px);padding:var(--fold-space-sm) var(--fold-space-md);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);color:var(--fold-color-text);font-size:var(--fold-text-sm);font-weight:600;text-decoration:none;transform:translateY(-150%);transition:transform .12s ease}.skip-link:focus{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}:host(.header-full){grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\"}:host(:not(.footer-scroll):has([footer])){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:not(.footer-scroll):has([footer])){grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.footer-full:not(.footer-scroll):has([footer])){grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full.footer-full:not(.footer-scroll):has([footer])){grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\" \"footer footer footer\"}.rail-primary{grid-area:rail-primary;min-height:0}.rail-secondary{grid-area:rail-secondary;min-height:0}.header{grid-area:header;min-width:0}.footer{grid-area:footer;min-width:0;min-height:0}.content{grid-area:content;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.content:focus{outline:none}:host(.footer-scroll) .content,:host(.content-auto) .content{overflow:auto}.footer-inflow{margin-top:auto}.rail-primary:has([data-elevated]),.rail-secondary:has([data-elevated]),.header:has([data-elevated]),.footer:has([data-elevated]),.content:has([data-elevated]){padding:var(--fold-surface-inset, var(--fold-space-md))}@media(max-width:768px){:host,:host(.header-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.footer-scroll):has([footer])),:host(.header-full:not(.footer-scroll):has([footer])),:host(.footer-full:not(.footer-scroll):has([footer])),:host(.header-full.footer-full:not(.footer-scroll):has([footer])){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}.rail-primary,.rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-header-height-mobile, 52px);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}.mobile-scrim{position:absolute;inset:var(--fold-shell-header-height-mobile, 52px) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content{overflow:hidden}}@container (max-width: 1024px){.rail-secondary{display:none}}@container (max-width: 768px){:host,:host(.header-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.footer-scroll):has([footer])),:host(.header-full:not(.footer-scroll):has([footer])),:host(.footer-full:not(.footer-scroll):has([footer])),:host(.header-full.footer-full:not(.footer-scroll):has([footer])){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}.rail-primary,.rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-header-height-mobile, 52px);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}.mobile-scrim{position:absolute;inset:var(--fold-shell-header-height-mobile, 52px) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content{overflow:hidden}}@keyframes fold-shell-scrim-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.rail-primary,.mobile-scrim{transition:none;animation:none}}\n"] }]
|
|
507
507
|
}], ctorParameters: () => [], propDecorators: { railWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "railWidth", required: false }] }], headerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeight", required: false }] }], headerHeightMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeightMobile", required: false }] }], headerLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerLayout", required: false }] }], footerLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerLayout", required: false }] }], footerBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerBehavior", required: false }] }], contentScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentScroll", required: false }] }], skipLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkLabel", required: false }] }], drawerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerLabel", required: false }] }], mobileNav: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileNav", required: false }] }], mobileNavOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileNavOpen", required: false }] }, { type: i0.Output, args: ["mobileNavOpenChange"] }], onEscape: [{
|
|
508
508
|
type: HostListener,
|
|
509
509
|
args: ["document:keydown.escape"]
|
|
@@ -868,11 +868,11 @@ class FoldAvatarDetailComponent {
|
|
|
868
868
|
hasSecondary = computed(() => this.secondary().trim().length > 0, /* @ts-ignore */
|
|
869
869
|
...(ngDevMode ? [{ debugName: "hasSecondary" }] : /* istanbul ignore next */ []));
|
|
870
870
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldAvatarDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
871
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldAvatarDetailComponent, isStandalone: true, selector: "fold-avatar-detail", inputs: { primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: true, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null }, avatarName: { classPropertyName: "avatarName", publicName: "avatarName", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, muted: { classPropertyName: "muted", publicName: "muted", isSignal: true, isRequired: false, transformFunction: null }, ring: { classPropertyName: "ring", publicName: "ring", isSignal: true, isRequired: false, transformFunction: null }, ringStyle: { classPropertyName: "ringStyle", publicName: "ringStyle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<fold-avatar\n [name]=\"resolvedAvatarName()\"\n [size]=\"size()\"\n [variant]=\"variant()\"\n [square]=\"square()\"\n [imageUrl]=\"imageUrl()\"\n [muted]=\"muted()\"\n [ring]=\"ring()\"\n [ringStyle]=\"ringStyle()\"\n/>\n<span class=\"lines\">\n <span class=\"primary\">{{ primary() }}</span>\n @if (hasSecondary()) {\n <span class=\"secondary\">{{ secondary() }}</span>\n }\n</span>\n", styles: [":host{display:flex;align-items:center;gap:
|
|
871
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldAvatarDetailComponent, isStandalone: true, selector: "fold-avatar-detail", inputs: { primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: true, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null }, avatarName: { classPropertyName: "avatarName", publicName: "avatarName", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, muted: { classPropertyName: "muted", publicName: "muted", isSignal: true, isRequired: false, transformFunction: null }, ring: { classPropertyName: "ring", publicName: "ring", isSignal: true, isRequired: false, transformFunction: null }, ringStyle: { classPropertyName: "ringStyle", publicName: "ringStyle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<fold-avatar\n [name]=\"resolvedAvatarName()\"\n [size]=\"size()\"\n [variant]=\"variant()\"\n [square]=\"square()\"\n [imageUrl]=\"imageUrl()\"\n [muted]=\"muted()\"\n [ring]=\"ring()\"\n [ringStyle]=\"ringStyle()\"\n/>\n<span class=\"lines\">\n <span class=\"primary\">{{ primary() }}</span>\n @if (hasSecondary()) {\n <span class=\"secondary\">{{ secondary() }}</span>\n }\n</span>\n", styles: [":host{display:flex;align-items:center;gap:var(--fold-space-sm);min-width:0}.lines{display:flex;flex-direction:column;justify-content:center;min-width:0}.primary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--fold-color-text)}.secondary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fold-text-sm);color:var(--fold-color-text-faded)}\n"], dependencies: [{ kind: "component", type: FoldAvatarComponent, selector: "fold-avatar", inputs: ["name", "size", "colorSeed", "variant", "square", "imageUrl", "muted", "ring", "ringStyle"] }] });
|
|
872
872
|
}
|
|
873
873
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldAvatarDetailComponent, decorators: [{
|
|
874
874
|
type: Component,
|
|
875
|
-
args: [{ selector: "fold-avatar-detail", standalone: true, imports: [FoldAvatarComponent], template: "<fold-avatar\n [name]=\"resolvedAvatarName()\"\n [size]=\"size()\"\n [variant]=\"variant()\"\n [square]=\"square()\"\n [imageUrl]=\"imageUrl()\"\n [muted]=\"muted()\"\n [ring]=\"ring()\"\n [ringStyle]=\"ringStyle()\"\n/>\n<span class=\"lines\">\n <span class=\"primary\">{{ primary() }}</span>\n @if (hasSecondary()) {\n <span class=\"secondary\">{{ secondary() }}</span>\n }\n</span>\n", styles: [":host{display:flex;align-items:center;gap:
|
|
875
|
+
args: [{ selector: "fold-avatar-detail", standalone: true, imports: [FoldAvatarComponent], template: "<fold-avatar\n [name]=\"resolvedAvatarName()\"\n [size]=\"size()\"\n [variant]=\"variant()\"\n [square]=\"square()\"\n [imageUrl]=\"imageUrl()\"\n [muted]=\"muted()\"\n [ring]=\"ring()\"\n [ringStyle]=\"ringStyle()\"\n/>\n<span class=\"lines\">\n <span class=\"primary\">{{ primary() }}</span>\n @if (hasSecondary()) {\n <span class=\"secondary\">{{ secondary() }}</span>\n }\n</span>\n", styles: [":host{display:flex;align-items:center;gap:var(--fold-space-sm);min-width:0}.lines{display:flex;flex-direction:column;justify-content:center;min-width:0}.primary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--fold-color-text)}.secondary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fold-text-sm);color:var(--fold-color-text-faded)}\n"] }]
|
|
876
876
|
}], propDecorators: { primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: true }] }], secondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondary", required: false }] }], avatarName: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarName", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], square: [{ type: i0.Input, args: [{ isSignal: true, alias: "square", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], muted: [{ type: i0.Input, args: [{ isSignal: true, alias: "muted", required: false }] }], ring: [{ type: i0.Input, args: [{ isSignal: true, alias: "ring", required: false }] }], ringStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "ringStyle", required: false }] }] } });
|
|
877
877
|
|
|
878
878
|
/**
|
|
@@ -931,7 +931,7 @@ class FoldAvatarListComponent {
|
|
|
931
931
|
return this.top() === "first" ? count - index : index + 1;
|
|
932
932
|
}
|
|
933
933
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldAvatarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
934
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldAvatarListComponent, isStandalone: true, selector: "fold-avatar-list", inputs: { avatars: { classPropertyName: "avatars", publicName: "avatars", isSignal: true, isRequired: true, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "top", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.size-sm": "size() === 'sm'", "class.size-md": "size() === 'md'", "class.size-lg": "size() === 'lg'", "class.is-square": "square()" } }, ngImport: i0, template: "@for (a of visible(); track $index) {\n <span class=\"al-item\" [style.z-index]=\"z($index)\">\n <fold-avatar\n [name]=\"a.name\"\n [imageUrl]=\"a.imageUrl\"\n [colorSeed]=\"a.colorSeed\"\n [size]=\"size()\"\n [square]=\"square()\"\n [variant]=\"a.variant ?? 'solid'\"\n [muted]=\"a.muted ?? false\"\n [ring]=\"a.ring ?? 'none'\"\n [ringStyle]=\"a.ringStyle ?? 'solid'\"\n />\n </span>\n}\n@if (overflow() > 0) {\n <span class=\"al-more\" [attr.title]=\"overflow() + ' more'\"\n >+{{ overflow() }}</span\n >\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;--fold-avatar-list-ring: var(--fold-color-surface-card)}.al-item{position:relative;display:inline-flex;border-radius:var(--fold-radius-round);background:var(--fold-avatar-list-ring);box-shadow:0 0 0 2px var(--fold-avatar-list-ring)}:host(.is-square) .al-item{border-radius:var(--fold-radius-sm)}.al-item+.al-item{margin-left:var(--al-overlap)}:host(.size-sm){--al-overlap: -5px}:host(.size-md){--al-overlap: -8px}:host(.size-lg){--al-overlap: -11px}.al-more{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:
|
|
934
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldAvatarListComponent, isStandalone: true, selector: "fold-avatar-list", inputs: { avatars: { classPropertyName: "avatars", publicName: "avatars", isSignal: true, isRequired: true, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "top", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.size-sm": "size() === 'sm'", "class.size-md": "size() === 'md'", "class.size-lg": "size() === 'lg'", "class.is-square": "square()" } }, ngImport: i0, template: "@for (a of visible(); track $index) {\n <span class=\"al-item\" [style.z-index]=\"z($index)\">\n <fold-avatar\n [name]=\"a.name\"\n [imageUrl]=\"a.imageUrl\"\n [colorSeed]=\"a.colorSeed\"\n [size]=\"size()\"\n [square]=\"square()\"\n [variant]=\"a.variant ?? 'solid'\"\n [muted]=\"a.muted ?? false\"\n [ring]=\"a.ring ?? 'none'\"\n [ringStyle]=\"a.ringStyle ?? 'solid'\"\n />\n </span>\n}\n@if (overflow() > 0) {\n <span class=\"al-more\" [attr.title]=\"overflow() + ' more'\"\n >+{{ overflow() }}</span\n >\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;--fold-avatar-list-ring: var(--fold-color-surface-card)}.al-item{position:relative;display:inline-flex;border-radius:var(--fold-radius-round);background:var(--fold-avatar-list-ring);box-shadow:0 0 0 2px var(--fold-avatar-list-ring)}:host(.is-square) .al-item{border-radius:var(--fold-radius-sm)}.al-item+.al-item{margin-left:var(--al-overlap)}:host(.size-sm){--al-overlap: -5px}:host(.size-md){--al-overlap: -8px}:host(.size-lg){--al-overlap: -11px}.al-more{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--fold-space-sm);border-radius:var(--fold-radius-round);background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:700;letter-spacing:.02em;-webkit-user-select:none;user-select:none}:host(.is-square) .al-more{border-radius:var(--fold-radius-sm)}:host(.size-sm) .al-more{width:20px;height:20px;font-size:8px}:host(.size-md) .al-more{width:32px;height:32px;font-size:11px}:host(.size-lg) .al-more{width:44px;height:44px;font-size:14px}\n"], dependencies: [{ kind: "component", type: FoldAvatarComponent, selector: "fold-avatar", inputs: ["name", "size", "colorSeed", "variant", "square", "imageUrl", "muted", "ring", "ringStyle"] }] });
|
|
935
935
|
}
|
|
936
936
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldAvatarListComponent, decorators: [{
|
|
937
937
|
type: Component,
|
|
@@ -940,7 +940,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
940
940
|
"[class.size-md]": "size() === 'md'",
|
|
941
941
|
"[class.size-lg]": "size() === 'lg'",
|
|
942
942
|
"[class.is-square]": "square()",
|
|
943
|
-
}, template: "@for (a of visible(); track $index) {\n <span class=\"al-item\" [style.z-index]=\"z($index)\">\n <fold-avatar\n [name]=\"a.name\"\n [imageUrl]=\"a.imageUrl\"\n [colorSeed]=\"a.colorSeed\"\n [size]=\"size()\"\n [square]=\"square()\"\n [variant]=\"a.variant ?? 'solid'\"\n [muted]=\"a.muted ?? false\"\n [ring]=\"a.ring ?? 'none'\"\n [ringStyle]=\"a.ringStyle ?? 'solid'\"\n />\n </span>\n}\n@if (overflow() > 0) {\n <span class=\"al-more\" [attr.title]=\"overflow() + ' more'\"\n >+{{ overflow() }}</span\n >\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;--fold-avatar-list-ring: var(--fold-color-surface-card)}.al-item{position:relative;display:inline-flex;border-radius:var(--fold-radius-round);background:var(--fold-avatar-list-ring);box-shadow:0 0 0 2px var(--fold-avatar-list-ring)}:host(.is-square) .al-item{border-radius:var(--fold-radius-sm)}.al-item+.al-item{margin-left:var(--al-overlap)}:host(.size-sm){--al-overlap: -5px}:host(.size-md){--al-overlap: -8px}:host(.size-lg){--al-overlap: -11px}.al-more{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:
|
|
943
|
+
}, template: "@for (a of visible(); track $index) {\n <span class=\"al-item\" [style.z-index]=\"z($index)\">\n <fold-avatar\n [name]=\"a.name\"\n [imageUrl]=\"a.imageUrl\"\n [colorSeed]=\"a.colorSeed\"\n [size]=\"size()\"\n [square]=\"square()\"\n [variant]=\"a.variant ?? 'solid'\"\n [muted]=\"a.muted ?? false\"\n [ring]=\"a.ring ?? 'none'\"\n [ringStyle]=\"a.ringStyle ?? 'solid'\"\n />\n </span>\n}\n@if (overflow() > 0) {\n <span class=\"al-more\" [attr.title]=\"overflow() + ' more'\"\n >+{{ overflow() }}</span\n >\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;--fold-avatar-list-ring: var(--fold-color-surface-card)}.al-item{position:relative;display:inline-flex;border-radius:var(--fold-radius-round);background:var(--fold-avatar-list-ring);box-shadow:0 0 0 2px var(--fold-avatar-list-ring)}:host(.is-square) .al-item{border-radius:var(--fold-radius-sm)}.al-item+.al-item{margin-left:var(--al-overlap)}:host(.size-sm){--al-overlap: -5px}:host(.size-md){--al-overlap: -8px}:host(.size-lg){--al-overlap: -11px}.al-more{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--fold-space-sm);border-radius:var(--fold-radius-round);background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:700;letter-spacing:.02em;-webkit-user-select:none;user-select:none}:host(.is-square) .al-more{border-radius:var(--fold-radius-sm)}:host(.size-sm) .al-more{width:20px;height:20px;font-size:8px}:host(.size-md) .al-more{width:32px;height:32px;font-size:11px}:host(.size-lg) .al-more{width:44px;height:44px;font-size:14px}\n"] }]
|
|
944
944
|
}], propDecorators: { avatars: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatars", required: true }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], top: [{ type: i0.Input, args: [{ isSignal: true, alias: "top", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], square: [{ type: i0.Input, args: [{ isSignal: true, alias: "square", required: false }] }] } });
|
|
945
945
|
|
|
946
946
|
/**
|
|
@@ -978,13 +978,13 @@ class FoldBadgeComponent {
|
|
|
978
978
|
variant = input("accent", /* @ts-ignore */
|
|
979
979
|
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
980
980
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
981
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldBadgeComponent, isStandalone: true, selector: "fold-badge", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "variant() + \" \" + radius()" } }, ngImport: i0, template: "{{ content() }}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;padding:1px
|
|
981
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldBadgeComponent, isStandalone: true, selector: "fold-badge", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "variant() + \" \" + radius()" } }, ngImport: i0, template: "{{ content() }}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;padding:1px var(--fold-space-sm)}:host(.pill){border-radius:var(--fold-radius-pill)}:host(.square){border-radius:var(--fold-radius-sm)}:host(.neutral){background:var(--fold-color-surface-subtle);border:1px solid var(--fold-color-border-subtle);color:var(--fold-color-text-muted)}:host(.accent){background:var(--fold-color-primary-surface);border:1px solid var(--fold-color-primary-border);color:var(--fold-color-primary-text)}:host(.info){background:var(--fold-color-info-surface);border:1px solid var(--fold-color-info-border);color:var(--fold-color-info-text)}:host(.warning){background:var(--fold-color-warning-surface);border:1px solid var(--fold-color-warning-border);color:var(--fold-color-warning-text)}:host(.alert){background:var(--fold-color-alert-surface);border:1px solid var(--fold-color-alert-border);color:var(--fold-color-alert-text)}:host(.success){background:var(--fold-color-success-surface);border:1px solid var(--fold-color-success-border);color:var(--fold-color-success-text)}\n"] });
|
|
982
982
|
}
|
|
983
983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldBadgeComponent, decorators: [{
|
|
984
984
|
type: Component,
|
|
985
985
|
args: [{ selector: "fold-badge", standalone: true, host: {
|
|
986
986
|
"[class]": 'variant() + " " + radius()',
|
|
987
|
-
}, template: "{{ content() }}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;padding:1px
|
|
987
|
+
}, template: "{{ content() }}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;padding:1px var(--fold-space-sm)}:host(.pill){border-radius:var(--fold-radius-pill)}:host(.square){border-radius:var(--fold-radius-sm)}:host(.neutral){background:var(--fold-color-surface-subtle);border:1px solid var(--fold-color-border-subtle);color:var(--fold-color-text-muted)}:host(.accent){background:var(--fold-color-primary-surface);border:1px solid var(--fold-color-primary-border);color:var(--fold-color-primary-text)}:host(.info){background:var(--fold-color-info-surface);border:1px solid var(--fold-color-info-border);color:var(--fold-color-info-text)}:host(.warning){background:var(--fold-color-warning-surface);border:1px solid var(--fold-color-warning-border);color:var(--fold-color-warning-text)}:host(.alert){background:var(--fold-color-alert-surface);border:1px solid var(--fold-color-alert-border);color:var(--fold-color-alert-text)}:host(.success){background:var(--fold-color-success-surface);border:1px solid var(--fold-color-success-border);color:var(--fold-color-success-text)}\n"] }]
|
|
988
988
|
}], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
989
989
|
|
|
990
990
|
// The UI icon set — inlined SVG (no .svg text-loader dependency) so the
|
|
@@ -992,6 +992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
992
992
|
// each icon inherits `color` from its host. Hand-maintained; keys are kebab-case.
|
|
993
993
|
const UI_ICONS = {
|
|
994
994
|
"add-doc": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m21.414 5h-4.414v-4.414zm.586 2v17h-20v-21a3 3 0 0 1 3-3h10v7zm-6 7h-3v-3h-2v3h-3v2h3v3h2v-3h3z"/></svg>',
|
|
995
|
+
archive: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8v13H3V8"/><rect x="1" y="3" width="22" height="5" rx="1"/><path d="M10 12h4"/></svg>',
|
|
995
996
|
"arrow-back": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>',
|
|
996
997
|
"arrow-right": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>',
|
|
997
998
|
bin: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22,4H17V2a2,2,0,0,0-2-2H9A2,2,0,0,0,7,2V4H2V6H4V21a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V6h2ZM9,2h6V4H9Zm9,19a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V6H18Z"/><rect x="9" y="10" width="2" height="8"/><rect x="13" y="10" width="2" height="8"/></svg>',
|
|
@@ -1014,6 +1015,7 @@ const UI_ICONS = {
|
|
|
1014
1015
|
"eye-off": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>',
|
|
1015
1016
|
eye: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>',
|
|
1016
1017
|
"file-add": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/></svg>',
|
|
1018
|
+
filter: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>',
|
|
1017
1019
|
"folder-open": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>',
|
|
1018
1020
|
folder: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21,3H12.236l-4-2H3A3,3,0,0,0,0,4V23H24V6A3,3,0,0,0,21,3ZM3,3H7.764l4,2H21a1,1,0,0,1,1,1v.881L2,6.994V4A1,1,0,0,1,3,3ZM2,21V8.994l20-.113V21Z"/></svg>',
|
|
1019
1021
|
globe: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3C6.5 3 2 9 2 12s4.5 9 10 9 10-6 10-9-4.5-9-10-9z"/><circle cx="12" cy="12" r="3"/></svg>',
|
|
@@ -1364,6 +1366,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1364
1366
|
type: Service
|
|
1365
1367
|
}] });
|
|
1366
1368
|
|
|
1369
|
+
/** Tone → the semantic text/role colour token it paints with. */
|
|
1370
|
+
const TONE_COLOR = {
|
|
1371
|
+
primary: "var(--fold-color-primary-text)",
|
|
1372
|
+
secondary: "var(--fold-color-text-secondary)",
|
|
1373
|
+
muted: "var(--fold-color-text-muted)",
|
|
1374
|
+
faded: "var(--fold-color-text-faded)",
|
|
1375
|
+
};
|
|
1367
1376
|
/** Preset → `--fold-icon-size-*` token, with a px fallback so an icon still
|
|
1368
1377
|
* renders if a consumer loads the component without the token layer. */
|
|
1369
1378
|
const SIZE_VAR = {
|
|
@@ -1392,6 +1401,7 @@ const SIZE_VAR = {
|
|
|
1392
1401
|
* <fold-icon name="search" />
|
|
1393
1402
|
* <fold-icon name="bin" size="lg" />
|
|
1394
1403
|
* <fold-icon name="heart" [size]="18" />
|
|
1404
|
+
* <fold-icon name="star" tone="primary" /> <!-- accent tint, ignores context -->
|
|
1395
1405
|
* <fold-icon name="edit" title="Edit track" /> <!-- a11y label -->
|
|
1396
1406
|
* ```
|
|
1397
1407
|
*/
|
|
@@ -1402,6 +1412,10 @@ class FoldIconComponent {
|
|
|
1402
1412
|
/** Size — token (`xs…xl`) or explicit pixel number. Defaults to `md`. */
|
|
1403
1413
|
size = input("md", /* @ts-ignore */
|
|
1404
1414
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1415
|
+
/** Semantic tint — `primary` · `secondary` · `muted` · `faded`. Unset (default)
|
|
1416
|
+
* inherits `currentColor`, so the icon matches whatever it sits in. */
|
|
1417
|
+
tone = input(/* @ts-ignore */
|
|
1418
|
+
...(ngDevMode ? [undefined, { debugName: "tone" }] : /* istanbul ignore next */ []));
|
|
1405
1419
|
/** Optional accessible label. Set → `aria-label`; unset → `aria-hidden`. */
|
|
1406
1420
|
title = input(/* @ts-ignore */
|
|
1407
1421
|
...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
@@ -1417,6 +1431,12 @@ class FoldIconComponent {
|
|
|
1417
1431
|
return typeof s === "number" ? `${s}px` : SIZE_VAR[s];
|
|
1418
1432
|
}, /* @ts-ignore */
|
|
1419
1433
|
...(ngDevMode ? [{ debugName: "sizeVar" }] : /* istanbul ignore next */ []));
|
|
1434
|
+
/** The tone's colour token, or null to inherit `currentColor` (no override). */
|
|
1435
|
+
toneColor = computed(() => {
|
|
1436
|
+
const t = this.tone();
|
|
1437
|
+
return t ? TONE_COLOR[t] : null;
|
|
1438
|
+
}, /* @ts-ignore */
|
|
1439
|
+
...(ngDevMode ? [{ debugName: "toneColor" }] : /* istanbul ignore next */ []));
|
|
1420
1440
|
constructor() {
|
|
1421
1441
|
// Mount the shown icon's symbol in the shared sprite (a DOM side effect, so
|
|
1422
1442
|
// it lives here and not in `href`), and warn on an unknown name. Reactive:
|
|
@@ -1433,12 +1453,16 @@ class FoldIconComponent {
|
|
|
1433
1453
|
});
|
|
1434
1454
|
}
|
|
1435
1455
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1436
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldIconComponent, isStandalone: true, selector: "fold-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n class=\"icon-root\"\n role=\"img\"\n [attr.aria-label]=\"title() || null\"\n [attr.aria-hidden]=\"title() ? null : 'true'\"\n [style.--icon-size]=\"sizeVar()\"\n>\n @if (href(); as ref) {\n <use [attr.href]=\"ref\" />\n }\n</svg>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;line-height:0;color:inherit}.icon-root{display:block;width:var(--icon-size, 20px);height:var(--icon-size, 20px);fill:currentColor}\n"] });
|
|
1456
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldIconComponent, isStandalone: true, selector: "fold-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.color": "toneColor()" } }, ngImport: i0, template: "<svg\n class=\"icon-root\"\n role=\"img\"\n [attr.aria-label]=\"title() || null\"\n [attr.aria-hidden]=\"title() ? null : 'true'\"\n [style.--icon-size]=\"sizeVar()\"\n>\n @if (href(); as ref) {\n <use [attr.href]=\"ref\" />\n }\n</svg>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;line-height:0;color:inherit}.icon-root{display:block;width:var(--icon-size, 20px);height:var(--icon-size, 20px);fill:currentColor}\n"] });
|
|
1437
1457
|
}
|
|
1438
1458
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldIconComponent, decorators: [{
|
|
1439
1459
|
type: Component,
|
|
1440
|
-
args: [{ selector: "fold-icon", standalone: true,
|
|
1441
|
-
|
|
1460
|
+
args: [{ selector: "fold-icon", standalone: true, host: {
|
|
1461
|
+
// Paint the tone colour on the host so it flows into the SVG via
|
|
1462
|
+
// currentColor; unset → no inline colour, the icon inherits its context.
|
|
1463
|
+
"[style.color]": "toneColor()",
|
|
1464
|
+
}, template: "<svg\n class=\"icon-root\"\n role=\"img\"\n [attr.aria-label]=\"title() || null\"\n [attr.aria-hidden]=\"title() ? null : 'true'\"\n [style.--icon-size]=\"sizeVar()\"\n>\n @if (href(); as ref) {\n <use [attr.href]=\"ref\" />\n }\n</svg>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;line-height:0;color:inherit}.icon-root{display:block;width:var(--icon-size, 20px);height:var(--icon-size, 20px);fill:currentColor}\n"] }]
|
|
1465
|
+
}], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] } });
|
|
1442
1466
|
|
|
1443
1467
|
/**
|
|
1444
1468
|
* The design tokens, as a typed source-of-truth.
|
|
@@ -1545,7 +1569,17 @@ const FOLD_TEXT_TOKENS = ["xs", "sm", "md", "lg", "xl"];
|
|
|
1545
1569
|
/** Icon-size scale — the length a `fold-icon` renders at, per size preset. */
|
|
1546
1570
|
const FOLD_ICON_SIZE_TOKENS = ["xs", "sm", "md", "lg", "xl"];
|
|
1547
1571
|
/** Space (gap / padding / margin) scale. */
|
|
1548
|
-
const FOLD_SPACE_TOKENS = [
|
|
1572
|
+
const FOLD_SPACE_TOKENS = [
|
|
1573
|
+
"xs",
|
|
1574
|
+
"sm",
|
|
1575
|
+
"md",
|
|
1576
|
+
"lg",
|
|
1577
|
+
"xl",
|
|
1578
|
+
"2xl",
|
|
1579
|
+
"3xl",
|
|
1580
|
+
"4xl",
|
|
1581
|
+
"5xl",
|
|
1582
|
+
];
|
|
1549
1583
|
/** Rail-width scale — the nav-rail hierarchy's shared widths, named to pair with
|
|
1550
1584
|
* the `--fold-color-bg-rail-*` colours (primary app menu → secondary workspace /
|
|
1551
1585
|
* aside → tertiary in-page nav). */
|
|
@@ -1750,7 +1784,7 @@ class FoldButtonComponent {
|
|
|
1750
1784
|
}
|
|
1751
1785
|
}
|
|
1752
1786
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1753
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldButtonComponent, isStandalone: true, selector: "button[foldButton], a[foldButton]", inputs: { emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, intent: { classPropertyName: "intent", publicName: "intent", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "\"fold-button \" + emphasis() + \" \" + intent() + \" \" + size() + \" \" + shape()", "class.block": "block()", "class.is-disabled": "disabled()", "class.is-loading": "loading()", "attr.disabled": "isButton && blocked() ? true : null", "attr.type": "isButton ? type() : null", "attr.aria-disabled": "!isButton && blocked() ? true : null", "attr.aria-busy": "loading() ? true : null", "attr.tabindex": "!isButton && blocked() ? -1 : null" } }, ngImport: i0, template: "@if (loading()) {\n <fold-spinner [size]=\"iconSize()\" aria-hidden=\"true\" />\n} @else if (icon(); as ic) {\n <fold-icon [name]=\"ic\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n}\n<ng-content />\n@if (iconTrailing(); as ic) {\n <fold-icon [name]=\"ic\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n}\n", styles: [":host{all:unset;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;gap:.4em;white-space:nowrap;font-family:inherit;font-weight:600;transition:background var(--fold-motion-fast),border-color var(--fold-motion-fast),color var(--fold-motion-fast),transform var(--fold-motion-fast)}:host(.block){display:flex;width:100%}:host(:disabled),:host(.is-disabled){opacity:.4;pointer-events:none;cursor:not-allowed}:host(.is-loading){opacity:1;pointer-events:none;cursor:progress}:host(:active):not(:disabled):not(.is-disabled){transform:scale(.97)}:host(:focus-visible){outline:2px solid var(--fold-color-primary);outline-offset:2px}:host(.sm){font-size:var(--fold-text-sm);padding:.3rem .7rem;border-radius:var(--fold-radius-xs)}:host(.md){font-size:var(--fold-text-md);padding:.45rem 1rem;border-radius:var(--fold-radius-sm)}:host(.lg){font-size:var(--fold-text-md);padding:.6rem 1.3rem;border-radius:var(--fold-radius-sm)}:host(.pill){border-radius:var(--fold-radius-pill);padding-inline:1.25em}:host(.primary){--b-base: var(--fold-color-primary);--b-strong: var(--fold-color-primary-strong);--b-on: var(--fold-color-on-primary);--b-text: var(--fold-color-primary-text);--b-text-strong: var(--fold-color-primary-text);--b-surface: var(--fold-color-primary-surface);--b-border: var(--fold-color-primary-border)}:host(.warning){--b-base: var(--fold-color-warning);--b-strong: color-mix( in srgb, var(--fold-color-warning) 84%, var(--fold-color-bg-page) );--b-on: var(--fold-color-on-primary);--b-text: var(--fold-color-warning-text);--b-text-strong: var(--fold-color-warning-text);--b-surface: var(--fold-color-warning-surface);--b-border: var(--fold-color-warning-border)}:host(.danger){--b-base: var(--fold-color-alert);--b-strong: color-mix( in srgb, var(--fold-color-alert) 84%, var(--fold-color-bg-page) );--b-on: var(--fold-color-on-primary);--b-text: var(--fold-color-alert-text);--b-text-strong: var(--fold-color-alert-text);--b-surface: var(--fold-color-alert-surface);--b-border: var(--fold-color-alert-border)}:host(.neutral){--b-base: var(--fold-color-text-muted);--b-strong: var(--fold-color-surface-hover);--b-on: var(--fold-color-text);--b-text: var(--fold-color-text-secondary);--b-text-strong: var(--fold-color-text);--b-surface: var(--fold-color-surface-hover);--b-border: var(--fold-color-border)}:host(.soft){color:var(--b-text);background:var(--b-surface);border:1px solid var(--b-border)}:host(.soft):hover:not(:disabled):not(.is-disabled){background:color-mix(in srgb,var(--b-base) 22%,transparent);border-color:color-mix(in srgb,var(--b-base) 52%,transparent)}:host(.solid){color:var(--b-on);background:var(--b-base);border:1px solid transparent}:host(.solid):hover:not(:disabled):not(.is-disabled){background:var(--b-strong)}:host(.outline){color:var(--b-text);background:transparent;border:1px solid var(--b-border)}:host(.outline):hover:not(:disabled):not(.is-disabled){color:var(--b-text-strong);background:var(--fold-color-surface-hover);border-color:var(--b-border)}@media(prefers-reduced-motion:reduce){:host{transition:none}:host(:active):not(:disabled):not(.is-disabled){transform:none}}@media(forced-colors:active){:host{border:1px solid ButtonText}:host(.solid){border-color:ButtonText}:host(:focus-visible){outline-color:CanvasText}:host(:disabled),:host(.is-disabled){color:GrayText;border-color:GrayText}}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "title"] }, { kind: "component", type: FoldSpinnerComponent, selector: "fold-spinner", inputs: ["size", "label"] }] });
|
|
1787
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldButtonComponent, isStandalone: true, selector: "button[foldButton], a[foldButton]", inputs: { emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, intent: { classPropertyName: "intent", publicName: "intent", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "\"fold-button \" + emphasis() + \" \" + intent() + \" \" + size() + \" \" + shape()", "class.block": "block()", "class.is-disabled": "disabled()", "class.is-loading": "loading()", "attr.disabled": "isButton && blocked() ? true : null", "attr.type": "isButton ? type() : null", "attr.aria-disabled": "!isButton && blocked() ? true : null", "attr.aria-busy": "loading() ? true : null", "attr.tabindex": "!isButton && blocked() ? -1 : null" } }, ngImport: i0, template: "@if (loading()) {\n <fold-spinner [size]=\"iconSize()\" aria-hidden=\"true\" />\n} @else if (icon(); as ic) {\n <fold-icon [name]=\"ic\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n}\n<ng-content />\n@if (iconTrailing(); as ic) {\n <fold-icon [name]=\"ic\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n}\n", styles: [":host{all:unset;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;gap:.4em;white-space:nowrap;font-family:inherit;font-weight:600;transition:background var(--fold-motion-fast),border-color var(--fold-motion-fast),color var(--fold-motion-fast),transform var(--fold-motion-fast)}:host(.block){display:flex;width:100%}:host(:disabled),:host(.is-disabled){opacity:.4;pointer-events:none;cursor:not-allowed}:host(.is-loading){opacity:1;pointer-events:none;cursor:progress}:host(:active):not(:disabled):not(.is-disabled){transform:scale(.97)}:host(:focus-visible){outline:2px solid var(--fold-color-primary);outline-offset:2px}:host(.sm){font-size:var(--fold-text-sm);padding:.3rem .7rem;border-radius:var(--fold-radius-xs)}:host(.md){font-size:var(--fold-text-md);padding:.45rem 1rem;border-radius:var(--fold-radius-sm)}:host(.lg){font-size:var(--fold-text-md);padding:.6rem 1.3rem;border-radius:var(--fold-radius-sm)}:host(.pill){border-radius:var(--fold-radius-pill);padding-inline:1.25em}:host(.primary){--b-base: var(--fold-color-primary);--b-strong: var(--fold-color-primary-strong);--b-on: var(--fold-color-on-primary);--b-text: var(--fold-color-primary-text);--b-text-strong: var(--fold-color-primary-text);--b-surface: var(--fold-color-primary-surface);--b-border: var(--fold-color-primary-border)}:host(.warning){--b-base: var(--fold-color-warning);--b-strong: color-mix( in srgb, var(--fold-color-warning) 84%, var(--fold-color-bg-page) );--b-on: var(--fold-color-on-primary);--b-text: var(--fold-color-warning-text);--b-text-strong: var(--fold-color-warning-text);--b-surface: var(--fold-color-warning-surface);--b-border: var(--fold-color-warning-border)}:host(.danger){--b-base: var(--fold-color-alert);--b-strong: color-mix( in srgb, var(--fold-color-alert) 84%, var(--fold-color-bg-page) );--b-on: var(--fold-color-on-primary);--b-text: var(--fold-color-alert-text);--b-text-strong: var(--fold-color-alert-text);--b-surface: var(--fold-color-alert-surface);--b-border: var(--fold-color-alert-border)}:host(.neutral){--b-base: var(--fold-color-text-muted);--b-strong: var(--fold-color-surface-hover);--b-on: var(--fold-color-text);--b-text: var(--fold-color-text-secondary);--b-text-strong: var(--fold-color-text);--b-surface: var(--fold-color-surface-hover);--b-border: var(--fold-color-border)}:host(.soft){color:var(--b-text);background:var(--b-surface);border:1px solid var(--b-border)}:host(.soft):hover:not(:disabled):not(.is-disabled){background:color-mix(in srgb,var(--b-base) 22%,transparent);border-color:color-mix(in srgb,var(--b-base) 52%,transparent)}:host(.solid){color:var(--b-on);background:var(--b-base);border:1px solid transparent}:host(.solid):hover:not(:disabled):not(.is-disabled){background:var(--b-strong)}:host(.outline){color:var(--b-text);background:transparent;border:1px solid var(--b-border)}:host(.outline):hover:not(:disabled):not(.is-disabled){color:var(--b-text-strong);background:var(--fold-color-surface-hover);border-color:var(--b-border)}@media(prefers-reduced-motion:reduce){:host{transition:none}:host(:active):not(:disabled):not(.is-disabled){transform:none}}@media(forced-colors:active){:host{border:1px solid ButtonText}:host(.solid){border-color:ButtonText}:host(:focus-visible){outline-color:CanvasText}:host(:disabled),:host(.is-disabled){color:GrayText;border-color:GrayText}}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldSpinnerComponent, selector: "fold-spinner", inputs: ["size", "label"] }] });
|
|
1754
1788
|
}
|
|
1755
1789
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldButtonComponent, decorators: [{
|
|
1756
1790
|
type: Component,
|
|
@@ -1838,7 +1872,7 @@ class FoldButtonIconComponent {
|
|
|
1838
1872
|
this.clicked.emit(e);
|
|
1839
1873
|
}
|
|
1840
1874
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldButtonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1841
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldButtonIconComponent, isStandalone: true, selector: "fold-button-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-shape": "shape()", "attr.data-size": "size()", "attr.data-tone": "tone()", "attr.data-loading": "loading() ? '' : null" } }, ngImport: i0, template: "<button\n [type]=\"type()\"\n [disabled]=\"disabled() || loading()\"\n [attr.title]=\"tooltip() || null\"\n [attr.aria-label]=\"tooltip() || null\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n (click)=\"onClick($event)\"\n>\n @if (loading()) {\n <fold-spinner [size]=\"iconSize()\" aria-hidden=\"true\" />\n } @else {\n <fold-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n }\n</button>\n", styles: [":host{display:inline-flex}:host[data-size=xs]{--bi-size: 22px;--bi-radius: var(--fold-radius-xs)}:host[data-size=sm]{--bi-size: 28px;--bi-radius: var(--fold-radius-sm)}:host[data-size=md]{--bi-size: 32px;--bi-radius: var(--fold-radius-md)}:host[data-size=lg]{--bi-size: 38px;--bi-radius: var(--fold-radius-md)}:host[data-shape=round]{--bi-radius: 50%}:host[data-tone=ghost]{--bi-color: var(--fold-color-text-muted);--bi-color-hover: var(--fold-color-text);--bi-bg: transparent;--bi-bg-hover: var(--fold-color-primary-surface);--bi-bg-active: var(--fold-color-primary-surface);--bi-color-active: var(--fold-color-primary)}:host[data-tone=accent]{--bi-color: var(--fold-color-on-primary);--bi-color-hover: var(--fold-color-on-primary);--bi-bg: var(--fold-color-primary);--bi-bg-hover: var(--fold-color-primary-strong);--bi-bg-active: var(--fold-color-primary-strong);--bi-color-active: var(--fold-color-on-primary)}:host[data-tone=critical]{--bi-color: var(--fold-color-alert);--bi-color-hover: var(--fold-color-alert);--bi-bg: transparent;--bi-bg-hover: color-mix(in srgb, var(--fold-color-alert) 12%, transparent);--bi-bg-active: color-mix( in srgb, var(--fold-color-alert) 18%, transparent );--bi-color-active: var(--fold-color-alert)}button{all:unset;display:inline-flex;align-items:center;justify-content:center;width:var(--bi-size);height:var(--bi-size);border-radius:var(--bi-radius);background:var(--bi-bg);color:var(--bi-color);cursor:pointer;flex-shrink:0;transition:background var(--fold-motion-fast),color var(--fold-motion-fast),transform var(--fold-motion-fast)}button:hover:not(:disabled){background:var(--bi-bg-hover);color:var(--bi-color-hover)}button:active:not(:disabled){transform:scale(.94)}button:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:1px}button:disabled{cursor:not-allowed;opacity:.4}:host([data-loading]) button:disabled{opacity:1;cursor:progress}@media(forced-colors:active){button{border:1px solid ButtonText}button:focus-visible{outline-color:CanvasText}button:disabled{color:GrayText;border-color:GrayText}}@media(prefers-reduced-motion:reduce){button{transition:none}button:active:not(:disabled){transform:none}}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "title"] }, { kind: "component", type: FoldSpinnerComponent, selector: "fold-spinner", inputs: ["size", "label"] }] });
|
|
1875
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldButtonIconComponent, isStandalone: true, selector: "fold-button-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-shape": "shape()", "attr.data-size": "size()", "attr.data-tone": "tone()", "attr.data-loading": "loading() ? '' : null" } }, ngImport: i0, template: "<button\n [type]=\"type()\"\n [disabled]=\"disabled() || loading()\"\n [attr.title]=\"tooltip() || null\"\n [attr.aria-label]=\"tooltip() || null\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n (click)=\"onClick($event)\"\n>\n @if (loading()) {\n <fold-spinner [size]=\"iconSize()\" aria-hidden=\"true\" />\n } @else {\n <fold-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n }\n</button>\n", styles: [":host{display:inline-flex}:host[data-size=xs]{--bi-size: 22px;--bi-radius: var(--fold-radius-xs)}:host[data-size=sm]{--bi-size: 28px;--bi-radius: var(--fold-radius-sm)}:host[data-size=md]{--bi-size: 32px;--bi-radius: var(--fold-radius-md)}:host[data-size=lg]{--bi-size: 38px;--bi-radius: var(--fold-radius-md)}:host[data-shape=round]{--bi-radius: 50%}:host[data-tone=ghost]{--bi-color: var(--fold-color-text-muted);--bi-color-hover: var(--fold-color-text);--bi-bg: transparent;--bi-bg-hover: var(--fold-color-primary-surface);--bi-bg-active: var(--fold-color-primary-surface);--bi-color-active: var(--fold-color-primary)}:host[data-tone=accent]{--bi-color: var(--fold-color-on-primary);--bi-color-hover: var(--fold-color-on-primary);--bi-bg: var(--fold-color-primary);--bi-bg-hover: var(--fold-color-primary-strong);--bi-bg-active: var(--fold-color-primary-strong);--bi-color-active: var(--fold-color-on-primary)}:host[data-tone=critical]{--bi-color: var(--fold-color-alert);--bi-color-hover: var(--fold-color-alert);--bi-bg: transparent;--bi-bg-hover: color-mix(in srgb, var(--fold-color-alert) 12%, transparent);--bi-bg-active: color-mix( in srgb, var(--fold-color-alert) 18%, transparent );--bi-color-active: var(--fold-color-alert)}button{all:unset;display:inline-flex;align-items:center;justify-content:center;width:var(--bi-size);height:var(--bi-size);border-radius:var(--bi-radius);background:var(--bi-bg);color:var(--bi-color);cursor:pointer;flex-shrink:0;transition:background var(--fold-motion-fast),color var(--fold-motion-fast),transform var(--fold-motion-fast)}button:hover:not(:disabled){background:var(--bi-bg-hover);color:var(--bi-color-hover)}button:active:not(:disabled){transform:scale(.94)}button:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:1px}button:disabled{cursor:not-allowed;opacity:.4}:host([data-loading]) button:disabled{opacity:1;cursor:progress}@media(forced-colors:active){button{border:1px solid ButtonText}button:focus-visible{outline-color:CanvasText}button:disabled{color:GrayText;border-color:GrayText}}@media(prefers-reduced-motion:reduce){button{transition:none}button:active:not(:disabled){transform:none}}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldSpinnerComponent, selector: "fold-spinner", inputs: ["size", "label"] }] });
|
|
1842
1876
|
}
|
|
1843
1877
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldButtonIconComponent, decorators: [{
|
|
1844
1878
|
type: Component,
|
|
@@ -1920,7 +1954,7 @@ class FoldToggleIconComponent {
|
|
|
1920
1954
|
this.toggled.emit(e);
|
|
1921
1955
|
}
|
|
1922
1956
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldToggleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1923
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldToggleIconComponent, isStandalone: true, selector: "fold-toggle-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", toggled: "toggled" }, host: { properties: { "attr.data-shape": "shape()", "attr.data-size": "size()", "attr.data-tone": "tone()", "attr.data-active": "active() ? \"\" : null", "attr.data-loading": "loading() ? '' : null" } }, ngImport: i0, template: "<button\n [type]=\"type()\"\n [disabled]=\"disabled() || loading()\"\n [attr.title]=\"tooltip() || null\"\n [attr.aria-label]=\"tooltip() || null\"\n [attr.aria-pressed]=\"active() ? 'true' : 'false'\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n (click)=\"onClick($event)\"\n>\n @if (loading()) {\n <fold-spinner [size]=\"iconSize()\" aria-hidden=\"true\" />\n } @else {\n <fold-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n }\n</button>\n", styles: [":host{display:inline-flex}:host[data-size=xs]{--bi-size: 22px;--bi-radius: var(--fold-radius-xs)}:host[data-size=sm]{--bi-size: 28px;--bi-radius: var(--fold-radius-sm)}:host[data-size=md]{--bi-size: 32px;--bi-radius: var(--fold-radius-md)}:host[data-size=lg]{--bi-size: 38px;--bi-radius: var(--fold-radius-md)}:host[data-shape=round]{--bi-radius: 50%}:host[data-tone=ghost]{--bi-color: var(--fold-color-text-muted);--bi-color-hover: var(--fold-color-text);--bi-bg: transparent;--bi-bg-hover: var(--fold-color-primary-surface);--bi-bg-active: var(--fold-color-primary-surface);--bi-color-active: var(--fold-color-primary)}:host[data-tone=accent]{--bi-color: var(--fold-color-on-primary);--bi-color-hover: var(--fold-color-on-primary);--bi-bg: var(--fold-color-primary);--bi-bg-hover: var(--fold-color-primary-strong);--bi-bg-active: var(--fold-color-primary-strong);--bi-color-active: var(--fold-color-on-primary)}:host[data-tone=critical]{--bi-color: var(--fold-color-alert);--bi-color-hover: var(--fold-color-alert);--bi-bg: transparent;--bi-bg-hover: color-mix(in srgb, var(--fold-color-alert) 12%, transparent);--bi-bg-active: color-mix( in srgb, var(--fold-color-alert) 18%, transparent );--bi-color-active: var(--fold-color-alert)}button{all:unset;display:inline-flex;align-items:center;justify-content:center;width:var(--bi-size);height:var(--bi-size);border-radius:var(--bi-radius);background:var(--bi-bg);color:var(--bi-color);cursor:pointer;flex-shrink:0;transition:background var(--fold-motion-fast),color var(--fold-motion-fast),transform var(--fold-motion-fast)}button:hover:not(:disabled){background:var(--bi-bg-hover);color:var(--bi-color-hover)}button:active:not(:disabled){transform:scale(.94)}button:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:1px}button:disabled{cursor:not-allowed;opacity:.4}:host([data-loading]) button:disabled{opacity:1;cursor:progress}@media(forced-colors:active){button{border:1px solid ButtonText}button:focus-visible{outline-color:CanvasText}button:disabled{color:GrayText;border-color:GrayText}}@media(prefers-reduced-motion:reduce){button{transition:none}button:active:not(:disabled){transform:none}}:host([data-active]) button{background:var(--bi-bg-active);color:var(--bi-color-active)}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "title"] }, { kind: "component", type: FoldSpinnerComponent, selector: "fold-spinner", inputs: ["size", "label"] }] });
|
|
1957
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldToggleIconComponent, isStandalone: true, selector: "fold-toggle-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", toggled: "toggled" }, host: { properties: { "attr.data-shape": "shape()", "attr.data-size": "size()", "attr.data-tone": "tone()", "attr.data-active": "active() ? \"\" : null", "attr.data-loading": "loading() ? '' : null" } }, ngImport: i0, template: "<button\n [type]=\"type()\"\n [disabled]=\"disabled() || loading()\"\n [attr.title]=\"tooltip() || null\"\n [attr.aria-label]=\"tooltip() || null\"\n [attr.aria-pressed]=\"active() ? 'true' : 'false'\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n (click)=\"onClick($event)\"\n>\n @if (loading()) {\n <fold-spinner [size]=\"iconSize()\" aria-hidden=\"true\" />\n } @else {\n <fold-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n }\n</button>\n", styles: [":host{display:inline-flex}:host[data-size=xs]{--bi-size: 22px;--bi-radius: var(--fold-radius-xs)}:host[data-size=sm]{--bi-size: 28px;--bi-radius: var(--fold-radius-sm)}:host[data-size=md]{--bi-size: 32px;--bi-radius: var(--fold-radius-md)}:host[data-size=lg]{--bi-size: 38px;--bi-radius: var(--fold-radius-md)}:host[data-shape=round]{--bi-radius: 50%}:host[data-tone=ghost]{--bi-color: var(--fold-color-text-muted);--bi-color-hover: var(--fold-color-text);--bi-bg: transparent;--bi-bg-hover: var(--fold-color-primary-surface);--bi-bg-active: var(--fold-color-primary-surface);--bi-color-active: var(--fold-color-primary)}:host[data-tone=accent]{--bi-color: var(--fold-color-on-primary);--bi-color-hover: var(--fold-color-on-primary);--bi-bg: var(--fold-color-primary);--bi-bg-hover: var(--fold-color-primary-strong);--bi-bg-active: var(--fold-color-primary-strong);--bi-color-active: var(--fold-color-on-primary)}:host[data-tone=critical]{--bi-color: var(--fold-color-alert);--bi-color-hover: var(--fold-color-alert);--bi-bg: transparent;--bi-bg-hover: color-mix(in srgb, var(--fold-color-alert) 12%, transparent);--bi-bg-active: color-mix( in srgb, var(--fold-color-alert) 18%, transparent );--bi-color-active: var(--fold-color-alert)}button{all:unset;display:inline-flex;align-items:center;justify-content:center;width:var(--bi-size);height:var(--bi-size);border-radius:var(--bi-radius);background:var(--bi-bg);color:var(--bi-color);cursor:pointer;flex-shrink:0;transition:background var(--fold-motion-fast),color var(--fold-motion-fast),transform var(--fold-motion-fast)}button:hover:not(:disabled){background:var(--bi-bg-hover);color:var(--bi-color-hover)}button:active:not(:disabled){transform:scale(.94)}button:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:1px}button:disabled{cursor:not-allowed;opacity:.4}:host([data-loading]) button:disabled{opacity:1;cursor:progress}@media(forced-colors:active){button{border:1px solid ButtonText}button:focus-visible{outline-color:CanvasText}button:disabled{color:GrayText;border-color:GrayText}}@media(prefers-reduced-motion:reduce){button{transition:none}button:active:not(:disabled){transform:none}}:host([data-active]) button{background:var(--bi-bg-active);color:var(--bi-color-active)}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldSpinnerComponent, selector: "fold-spinner", inputs: ["size", "label"] }] });
|
|
1924
1958
|
}
|
|
1925
1959
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldToggleIconComponent, decorators: [{
|
|
1926
1960
|
type: Component,
|
|
@@ -1964,7 +1998,7 @@ class FoldLabelComponent {
|
|
|
1964
1998
|
} @else if (optional()) {
|
|
1965
1999
|
<span class="opt">({{ optionalLabel() }})</span>
|
|
1966
2000
|
}
|
|
1967
|
-
</label>`, isInline: true, styles: [":host{display:block}label{font-size:var(--fold-text-xs);font-weight:600;color:var(--fold-color-text-secondary)}.req{color:var(--fold-color-alert-text);margin-left:2px}.opt{margin-left:
|
|
2001
|
+
</label>`, isInline: true, styles: [":host{display:block}label{font-size:var(--fold-text-xs);font-weight:600;color:var(--fold-color-text-secondary)}.req{color:var(--fold-color-alert-text);margin-left:2px}.opt{margin-left:var(--fold-space-xs);font-weight:500;color:var(--fold-color-text-faded)}\n"] });
|
|
1968
2002
|
}
|
|
1969
2003
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldLabelComponent, decorators: [{
|
|
1970
2004
|
type: Component,
|
|
@@ -1975,7 +2009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1975
2009
|
} @else if (optional()) {
|
|
1976
2010
|
<span class="opt">({{ optionalLabel() }})</span>
|
|
1977
2011
|
}
|
|
1978
|
-
</label>`, styles: [":host{display:block}label{font-size:var(--fold-text-xs);font-weight:600;color:var(--fold-color-text-secondary)}.req{color:var(--fold-color-alert-text);margin-left:2px}.opt{margin-left:
|
|
2012
|
+
</label>`, styles: [":host{display:block}label{font-size:var(--fold-text-xs);font-weight:600;color:var(--fold-color-text-secondary)}.req{color:var(--fold-color-alert-text);margin-left:2px}.opt{margin-left:var(--fold-space-xs);font-weight:500;color:var(--fold-color-text-faded)}\n"] }]
|
|
1979
2013
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], optionalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabel", required: false }] }] } });
|
|
1980
2014
|
|
|
1981
2015
|
/**
|
|
@@ -2013,11 +2047,11 @@ class FoldInputBaseComponent {
|
|
|
2013
2047
|
error = input(/* @ts-ignore */
|
|
2014
2048
|
...(ngDevMode ? [undefined, { debugName: "error" }] : /* istanbul ignore next */ []));
|
|
2015
2049
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldInputBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2016
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldInputBaseComponent, isStandalone: true, selector: "fold-input-base", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (label(); as labelText) {\n <fold-label\n [text]=\"labelText\"\n [for]=\"for()\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n />\n}\n\n<ng-content />\n\n@if (error(); as errorText) {\n <p\n class=\"ib-msg ib-error\"\n role=\"alert\"\n [attr.id]=\"for() ? for() + '-error' : null\"\n >\n {{ errorText }}\n </p>\n} @else if (hint(); as hintText) {\n <p class=\"ib-msg ib-hint\" [attr.id]=\"for() ? for() + '-hint' : null\">\n {{ hintText }}\n </p>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:
|
|
2050
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldInputBaseComponent, isStandalone: true, selector: "fold-input-base", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (label(); as labelText) {\n <fold-label\n [text]=\"labelText\"\n [for]=\"for()\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n />\n}\n\n<ng-content />\n\n@if (error(); as errorText) {\n <p\n class=\"ib-msg ib-error\"\n role=\"alert\"\n [attr.id]=\"for() ? for() + '-error' : null\"\n >\n {{ errorText }}\n </p>\n} @else if (hint(); as hintText) {\n <p class=\"ib-msg ib-hint\" [attr.id]=\"for() ? for() + '-hint' : null\">\n {{ hintText }}\n </p>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--fold-space-xs);min-width:0}.ib-msg{margin:0;font-size:var(--fold-text-xs)}.ib-hint{color:var(--fold-color-text-muted)}.ib-error{color:var(--fold-color-alert-text)}\n"], dependencies: [{ kind: "component", type: FoldLabelComponent, selector: "fold-label", inputs: ["text", "for", "required", "optional", "optionalLabel"] }] });
|
|
2017
2051
|
}
|
|
2018
2052
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldInputBaseComponent, decorators: [{
|
|
2019
2053
|
type: Component,
|
|
2020
|
-
args: [{ selector: "fold-input-base", standalone: true, imports: [FoldLabelComponent], template: "@if (label(); as labelText) {\n <fold-label\n [text]=\"labelText\"\n [for]=\"for()\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n />\n}\n\n<ng-content />\n\n@if (error(); as errorText) {\n <p\n class=\"ib-msg ib-error\"\n role=\"alert\"\n [attr.id]=\"for() ? for() + '-error' : null\"\n >\n {{ errorText }}\n </p>\n} @else if (hint(); as hintText) {\n <p class=\"ib-msg ib-hint\" [attr.id]=\"for() ? for() + '-hint' : null\">\n {{ hintText }}\n </p>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:
|
|
2054
|
+
args: [{ selector: "fold-input-base", standalone: true, imports: [FoldLabelComponent], template: "@if (label(); as labelText) {\n <fold-label\n [text]=\"labelText\"\n [for]=\"for()\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n />\n}\n\n<ng-content />\n\n@if (error(); as errorText) {\n <p\n class=\"ib-msg ib-error\"\n role=\"alert\"\n [attr.id]=\"for() ? for() + '-error' : null\"\n >\n {{ errorText }}\n </p>\n} @else if (hint(); as hintText) {\n <p class=\"ib-msg ib-hint\" [attr.id]=\"for() ? for() + '-hint' : null\">\n {{ hintText }}\n </p>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--fold-space-xs);min-width:0}.ib-msg{margin:0;font-size:var(--fold-text-xs)}.ib-hint{color:var(--fold-color-text-muted)}.ib-error{color:var(--fold-color-alert-text)}\n"] }]
|
|
2021
2055
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], optionalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }] } });
|
|
2022
2056
|
|
|
2023
2057
|
/** Read `.value` off an input/select event target as a string, without `$any()`. */
|
|
@@ -2199,13 +2233,13 @@ class FoldInputComponent {
|
|
|
2199
2233
|
this.touched.set(true);
|
|
2200
2234
|
}
|
|
2201
2235
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2202
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldInputComponent, isStandalone: true, selector: "fold-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, revealable: { classPropertyName: "revealable", publicName: "revealable", isSignal: true, isRequired: false, transformFunction: null }, revealLabel: { classPropertyName: "revealLabel", publicName: "revealLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "size() + \" \" + align() + \" \" + variant()" } }, ngImport: i0, template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <div class=\"in-field\">\n <input\n [id]=\"inputId\"\n [class.has-reveal]=\"showReveal()\"\n [attr.type]=\"effectiveType()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.readonly]=\"readOnly() || null\"\n [attr.disabled]=\"disabled() || null\"\n [attr.required]=\"required() || null\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.autocomplete]=\"autocomplete()\"\n [value]=\"value()\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur()\"\n />\n @if (showReveal()) {\n <button\n type=\"button\"\n class=\"in-reveal\"\n [attr.aria-label]=\"revealAria()\"\n [attr.aria-pressed]=\"revealed()\"\n [disabled]=\"disabled() || readOnly()\"\n (click)=\"toggleReveal()\"\n >\n <fold-icon\n [name]=\"revealed() ? 'eye-off' : 'eye'\"\n size=\"sm\"\n aria-hidden=\"true\"\n />\n </button>\n }\n </div>\n</fold-input-base>\n", styles: [":host{display:block}input,select{all:unset;box-sizing:border-box;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}input::placeholder,select::placeholder{color:var(--fold-color-text-faded)}input:hover:not(:disabled):not(:read-only):not(:focus),select:hover:not(:disabled):not(:read-only):not(:focus){border-color:var(--fold-color-border)}input:focus,select:focus{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}input:disabled,select:disabled{opacity:.4;cursor:not-allowed}input:read-only,select:read-only{opacity:.6;cursor:default}input[type=number],select[type=number]{appearance:textfield;-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button,select[type=number]::-webkit-inner-spin-button,select[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host(.sm) input,:host(.sm) select{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) input,:host(.md) select{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) input,:host(.lg) select{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.center) input{text-align:center}:host(.panel) input,:host(.panel) select{height:auto;padding:
|
|
2236
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldInputComponent, isStandalone: true, selector: "fold-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, revealable: { classPropertyName: "revealable", publicName: "revealable", isSignal: true, isRequired: false, transformFunction: null }, revealLabel: { classPropertyName: "revealLabel", publicName: "revealLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "size() + \" \" + align() + \" \" + variant()" } }, ngImport: i0, template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <div class=\"in-field\">\n <input\n [id]=\"inputId\"\n [class.has-reveal]=\"showReveal()\"\n [attr.type]=\"effectiveType()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.readonly]=\"readOnly() || null\"\n [attr.disabled]=\"disabled() || null\"\n [attr.required]=\"required() || null\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.autocomplete]=\"autocomplete()\"\n [value]=\"value()\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur()\"\n />\n @if (showReveal()) {\n <button\n type=\"button\"\n class=\"in-reveal\"\n [attr.aria-label]=\"revealAria()\"\n [attr.aria-pressed]=\"revealed()\"\n [disabled]=\"disabled() || readOnly()\"\n (click)=\"toggleReveal()\"\n >\n <fold-icon\n [name]=\"revealed() ? 'eye-off' : 'eye'\"\n size=\"sm\"\n aria-hidden=\"true\"\n />\n </button>\n }\n </div>\n</fold-input-base>\n", styles: [":host{display:block}input,select{all:unset;box-sizing:border-box;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}input::placeholder,select::placeholder{color:var(--fold-color-text-faded)}input:hover:not(:disabled):not(:read-only):not(:focus),select:hover:not(:disabled):not(:read-only):not(:focus){border-color:var(--fold-color-border)}input:focus,select:focus{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}input:disabled,select:disabled{opacity:.4;cursor:not-allowed}input:read-only,select:read-only{opacity:.6;cursor:default}input[type=number],select[type=number]{appearance:textfield;-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button,select[type=number]::-webkit-inner-spin-button,select[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host(.sm) input,:host(.sm) select{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) input,:host(.md) select{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) input,:host(.lg) select{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.center) input{text-align:center}:host(.panel) input,:host(.panel) select{height:auto;padding:var(--fold-space-sm) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised)}:host(.panel) input:focus,:host(.panel) select:focus{box-shadow:none}.in-field{position:relative}:host input.has-reveal{padding-inline-end:2.1rem}.in-reveal{all:unset;position:absolute;inset-inline-end:.4rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;padding:.2rem;border-radius:var(--fold-radius-xs);color:var(--fold-color-text-muted);cursor:pointer}.in-reveal:hover:not(:disabled),.in-reveal:focus-visible{color:var(--fold-color-text);background:var(--fold-color-surface-hover)}.in-reveal:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:1px}.in-reveal:disabled{cursor:not-allowed;opacity:.4}@media(forced-colors:active){.in-reveal:focus-visible{outline-color:Highlight}}\n"], dependencies: [{ kind: "component", type: FoldInputBaseComponent, selector: "fold-input-base", inputs: ["label", "for", "required", "optional", "optionalLabel", "hint", "error"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
2203
2237
|
}
|
|
2204
2238
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldInputComponent, decorators: [{
|
|
2205
2239
|
type: Component,
|
|
2206
2240
|
args: [{ selector: "fold-input", standalone: true, imports: [FoldInputBaseComponent, FoldIconComponent], host: {
|
|
2207
2241
|
"[class]": 'size() + " " + align() + " " + variant()',
|
|
2208
|
-
}, template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <div class=\"in-field\">\n <input\n [id]=\"inputId\"\n [class.has-reveal]=\"showReveal()\"\n [attr.type]=\"effectiveType()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.readonly]=\"readOnly() || null\"\n [attr.disabled]=\"disabled() || null\"\n [attr.required]=\"required() || null\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.autocomplete]=\"autocomplete()\"\n [value]=\"value()\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur()\"\n />\n @if (showReveal()) {\n <button\n type=\"button\"\n class=\"in-reveal\"\n [attr.aria-label]=\"revealAria()\"\n [attr.aria-pressed]=\"revealed()\"\n [disabled]=\"disabled() || readOnly()\"\n (click)=\"toggleReveal()\"\n >\n <fold-icon\n [name]=\"revealed() ? 'eye-off' : 'eye'\"\n size=\"sm\"\n aria-hidden=\"true\"\n />\n </button>\n }\n </div>\n</fold-input-base>\n", styles: [":host{display:block}input,select{all:unset;box-sizing:border-box;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}input::placeholder,select::placeholder{color:var(--fold-color-text-faded)}input:hover:not(:disabled):not(:read-only):not(:focus),select:hover:not(:disabled):not(:read-only):not(:focus){border-color:var(--fold-color-border)}input:focus,select:focus{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}input:disabled,select:disabled{opacity:.4;cursor:not-allowed}input:read-only,select:read-only{opacity:.6;cursor:default}input[type=number],select[type=number]{appearance:textfield;-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button,select[type=number]::-webkit-inner-spin-button,select[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host(.sm) input,:host(.sm) select{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) input,:host(.md) select{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) input,:host(.lg) select{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.center) input{text-align:center}:host(.panel) input,:host(.panel) select{height:auto;padding:
|
|
2242
|
+
}, template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <div class=\"in-field\">\n <input\n [id]=\"inputId\"\n [class.has-reveal]=\"showReveal()\"\n [attr.type]=\"effectiveType()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.readonly]=\"readOnly() || null\"\n [attr.disabled]=\"disabled() || null\"\n [attr.required]=\"required() || null\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.autocomplete]=\"autocomplete()\"\n [value]=\"value()\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur()\"\n />\n @if (showReveal()) {\n <button\n type=\"button\"\n class=\"in-reveal\"\n [attr.aria-label]=\"revealAria()\"\n [attr.aria-pressed]=\"revealed()\"\n [disabled]=\"disabled() || readOnly()\"\n (click)=\"toggleReveal()\"\n >\n <fold-icon\n [name]=\"revealed() ? 'eye-off' : 'eye'\"\n size=\"sm\"\n aria-hidden=\"true\"\n />\n </button>\n }\n </div>\n</fold-input-base>\n", styles: [":host{display:block}input,select{all:unset;box-sizing:border-box;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}input::placeholder,select::placeholder{color:var(--fold-color-text-faded)}input:hover:not(:disabled):not(:read-only):not(:focus),select:hover:not(:disabled):not(:read-only):not(:focus){border-color:var(--fold-color-border)}input:focus,select:focus{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}input:disabled,select:disabled{opacity:.4;cursor:not-allowed}input:read-only,select:read-only{opacity:.6;cursor:default}input[type=number],select[type=number]{appearance:textfield;-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button,select[type=number]::-webkit-inner-spin-button,select[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host(.sm) input,:host(.sm) select{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) input,:host(.md) select{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) input,:host(.lg) select{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.center) input{text-align:center}:host(.panel) input,:host(.panel) select{height:auto;padding:var(--fold-space-sm) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised)}:host(.panel) input:focus,:host(.panel) select:focus{box-shadow:none}.in-field{position:relative}:host input.has-reveal{padding-inline-end:2.1rem}.in-reveal{all:unset;position:absolute;inset-inline-end:.4rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;padding:.2rem;border-radius:var(--fold-radius-xs);color:var(--fold-color-text-muted);cursor:pointer}.in-reveal:hover:not(:disabled),.in-reveal:focus-visible{color:var(--fold-color-text);background:var(--fold-color-surface-hover)}.in-reveal:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:1px}.in-reveal:disabled{cursor:not-allowed;opacity:.4}@media(forced-colors:active){.in-reveal:focus-visible{outline-color:Highlight}}\n"] }]
|
|
2209
2243
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], revealable: [{ type: i0.Input, args: [{ isSignal: true, alias: "revealable", required: false }] }], revealLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "revealLabel", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], optionalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }] } });
|
|
2210
2244
|
|
|
2211
2245
|
/** The English defaults — the base every override merges onto. */
|
|
@@ -2660,7 +2694,7 @@ class FoldElementTitleComponent {
|
|
|
2660
2694
|
iconSize = computed(() => this.variant() === "title" ? "md" : "sm", /* @ts-ignore */
|
|
2661
2695
|
...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
2662
2696
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldElementTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2663
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldElementTitleComponent, isStandalone: true, selector: "fold-element-title", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTone: { classPropertyName: "iconTone", publicName: "iconTone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, headingId: { classPropertyName: "headingId", publicName: "headingId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.v-bar": "variant() === 'bar'", "class.v-title": "variant() === 'title'", "class.it-primary": "iconTone() === 'primary'", "class.it-faded": "iconTone() === 'faded'", "attr.title": "null" } }, ngImport: i0, template: "@if (icon(); as ic) {\n <span class=\"et-icon\"><fold-icon [name]=\"ic\" [size]=\"iconSize()\" /></span>\n}\n<span class=\"et-main\">\n <span class=\"et-row\">\n <span\n class=\"et-label\"\n role=\"heading\"\n [attr.id]=\"headingId()\"\n [attr.aria-level]=\"level()\"\n >{{ title() }}</span\n >\n <span class=\"et-action\"><ng-content select=\"[titleAction]\" /></span>\n </span>\n @if (subtitle(); as s) {\n <span class=\"et-sub\">{{ s }}</span>\n }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:
|
|
2697
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldElementTitleComponent, isStandalone: true, selector: "fold-element-title", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTone: { classPropertyName: "iconTone", publicName: "iconTone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, headingId: { classPropertyName: "headingId", publicName: "headingId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.v-bar": "variant() === 'bar'", "class.v-title": "variant() === 'title'", "class.it-primary": "iconTone() === 'primary'", "class.it-faded": "iconTone() === 'faded'", "attr.title": "null" } }, ngImport: i0, template: "@if (icon(); as ic) {\n <span class=\"et-icon\"><fold-icon [name]=\"ic\" [size]=\"iconSize()\" /></span>\n}\n<span class=\"et-main\">\n <span class=\"et-row\">\n <span\n class=\"et-label\"\n role=\"heading\"\n [attr.id]=\"headingId()\"\n [attr.aria-level]=\"level()\"\n >{{ title() }}</span\n >\n <span class=\"et-action\"><ng-content select=\"[titleAction]\" /></span>\n </span>\n @if (subtitle(); as s) {\n <span class=\"et-sub\">{{ s }}</span>\n }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--fold-space-md);margin:0}.et-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.et-row{display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-sm)}.et-label{min-width:0;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fold-color-text-muted)}:host(.v-bar) .et-label{font-size:11px;color:var(--fold-color-text-secondary)}:host(.v-title) .et-label{font-size:var(--fold-text-md);letter-spacing:normal;text-transform:none;color:var(--fold-color-text)}.et-sub{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted)}.et-action{flex:none;display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.et-action:empty{display:none}.et-icon{flex:none;display:grid;place-items:center;color:var(--fold-color-primary)}:host(.v-title) .et-icon{width:40px;height:40px;border-radius:var(--fold-radius-md);border:1px solid var(--fold-color-border);background:var(--fold-color-surface-raised)}:host(.v-title.it-primary) .et-icon{background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}:host(.v-title.it-faded) .et-icon{background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle);color:var(--fold-color-text-muted)}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
2664
2698
|
}
|
|
2665
2699
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldElementTitleComponent, decorators: [{
|
|
2666
2700
|
type: Component,
|
|
@@ -2672,7 +2706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
2672
2706
|
// `title` is a heading input — strip the reflected native attribute so it
|
|
2673
2707
|
// never doubles as a browser tooltip.
|
|
2674
2708
|
"[attr.title]": "null",
|
|
2675
|
-
}, template: "@if (icon(); as ic) {\n <span class=\"et-icon\"><fold-icon [name]=\"ic\" [size]=\"iconSize()\" /></span>\n}\n<span class=\"et-main\">\n <span class=\"et-row\">\n <span\n class=\"et-label\"\n role=\"heading\"\n [attr.id]=\"headingId()\"\n [attr.aria-level]=\"level()\"\n >{{ title() }}</span\n >\n <span class=\"et-action\"><ng-content select=\"[titleAction]\" /></span>\n </span>\n @if (subtitle(); as s) {\n <span class=\"et-sub\">{{ s }}</span>\n }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:
|
|
2709
|
+
}, template: "@if (icon(); as ic) {\n <span class=\"et-icon\"><fold-icon [name]=\"ic\" [size]=\"iconSize()\" /></span>\n}\n<span class=\"et-main\">\n <span class=\"et-row\">\n <span\n class=\"et-label\"\n role=\"heading\"\n [attr.id]=\"headingId()\"\n [attr.aria-level]=\"level()\"\n >{{ title() }}</span\n >\n <span class=\"et-action\"><ng-content select=\"[titleAction]\" /></span>\n </span>\n @if (subtitle(); as s) {\n <span class=\"et-sub\">{{ s }}</span>\n }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--fold-space-md);margin:0}.et-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.et-row{display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-sm)}.et-label{min-width:0;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fold-color-text-muted)}:host(.v-bar) .et-label{font-size:11px;color:var(--fold-color-text-secondary)}:host(.v-title) .et-label{font-size:var(--fold-text-md);letter-spacing:normal;text-transform:none;color:var(--fold-color-text)}.et-sub{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted)}.et-action{flex:none;display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.et-action:empty{display:none}.et-icon{flex:none;display:grid;place-items:center;color:var(--fold-color-primary)}:host(.v-title) .et-icon{width:40px;height:40px;border-radius:var(--fold-radius-md);border:1px solid var(--fold-color-border);background:var(--fold-color-surface-raised)}:host(.v-title.it-primary) .et-icon{background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}:host(.v-title.it-faded) .et-icon{background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle);color:var(--fold-color-text-muted)}\n"] }]
|
|
2676
2710
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], headingId: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingId", required: false }] }] } });
|
|
2677
2711
|
|
|
2678
2712
|
/**
|
|
@@ -2710,11 +2744,11 @@ class FoldContextCardComponent {
|
|
|
2710
2744
|
subtitle = input(/* @ts-ignore */
|
|
2711
2745
|
...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
|
|
2712
2746
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldContextCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2713
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldContextCardComponent, isStandalone: true, selector: "fold-context-card", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTone: { classPropertyName: "iconTone", publicName: "iconTone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.title": "null" } }, ngImport: i0, template: "<fold-card padding=\"none\">\n <div class=\"cc-head\">\n <fold-element-title\n variant=\"title\"\n [level]=\"3\"\n [icon]=\"icon()\"\n [iconTone]=\"iconTone()\"\n [title]=\"title()\"\n [subtitle]=\"subtitle()\"\n />\n </div>\n <div class=\"cc-body\"><ng-content /></div>\n <div class=\"cc-foot\"><ng-content select=\"[footer]\" /></div>\n</fold-card>\n", styles: ["@charset \"UTF-8\";:host{display:block}.cc-head{padding:
|
|
2747
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldContextCardComponent, isStandalone: true, selector: "fold-context-card", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTone: { classPropertyName: "iconTone", publicName: "iconTone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.title": "null" } }, ngImport: i0, template: "<fold-card padding=\"none\">\n <div class=\"cc-head\">\n <fold-element-title\n variant=\"title\"\n [level]=\"3\"\n [icon]=\"icon()\"\n [iconTone]=\"iconTone()\"\n [title]=\"title()\"\n [subtitle]=\"subtitle()\"\n />\n </div>\n <div class=\"cc-body\"><ng-content /></div>\n <div class=\"cc-foot\"><ng-content select=\"[footer]\" /></div>\n</fold-card>\n", styles: ["@charset \"UTF-8\";:host{display:block}.cc-head{padding:var(--fold-space-lg);border-bottom:1px solid var(--fold-color-border-subtle)}.cc-body{padding:2px var(--fold-space-lg)}.cc-foot{display:flex;justify-content:center;padding:var(--fold-space-md) var(--fold-space-lg);border-top:1px solid var(--fold-color-border-subtle)}.cc-foot:empty{display:none}\n"], dependencies: [{ kind: "component", type: FoldCardComponent, selector: "fold-card", inputs: ["surface", "radius", "padding", "interactive", "ariaLabel", "separators", "raisedBands"], outputs: ["activated"] }, { kind: "component", type: FoldElementTitleComponent, selector: "fold-element-title", inputs: ["icon", "iconTone", "title", "subtitle", "variant", "level", "headingId"] }] });
|
|
2714
2748
|
}
|
|
2715
2749
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldContextCardComponent, decorators: [{
|
|
2716
2750
|
type: Component,
|
|
2717
|
-
args: [{ selector: "fold-context-card", standalone: true, imports: [FoldCardComponent, FoldElementTitleComponent], host: { "[attr.title]": "null" }, template: "<fold-card padding=\"none\">\n <div class=\"cc-head\">\n <fold-element-title\n variant=\"title\"\n [level]=\"3\"\n [icon]=\"icon()\"\n [iconTone]=\"iconTone()\"\n [title]=\"title()\"\n [subtitle]=\"subtitle()\"\n />\n </div>\n <div class=\"cc-body\"><ng-content /></div>\n <div class=\"cc-foot\"><ng-content select=\"[footer]\" /></div>\n</fold-card>\n", styles: ["@charset \"UTF-8\";:host{display:block}.cc-head{padding:
|
|
2751
|
+
args: [{ selector: "fold-context-card", standalone: true, imports: [FoldCardComponent, FoldElementTitleComponent], host: { "[attr.title]": "null" }, template: "<fold-card padding=\"none\">\n <div class=\"cc-head\">\n <fold-element-title\n variant=\"title\"\n [level]=\"3\"\n [icon]=\"icon()\"\n [iconTone]=\"iconTone()\"\n [title]=\"title()\"\n [subtitle]=\"subtitle()\"\n />\n </div>\n <div class=\"cc-body\"><ng-content /></div>\n <div class=\"cc-foot\"><ng-content select=\"[footer]\" /></div>\n</fold-card>\n", styles: ["@charset \"UTF-8\";:host{display:block}.cc-head{padding:var(--fold-space-lg);border-bottom:1px solid var(--fold-color-border-subtle)}.cc-body{padding:2px var(--fold-space-lg)}.cc-foot{display:flex;justify-content:center;padding:var(--fold-space-md) var(--fold-space-lg);border-top:1px solid var(--fold-color-border-subtle)}.cc-foot:empty{display:none}\n"] }]
|
|
2718
2752
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }] } });
|
|
2719
2753
|
|
|
2720
2754
|
/**
|
|
@@ -2839,11 +2873,11 @@ class FoldFileDropzoneComponent {
|
|
|
2839
2873
|
this.filesPicked.emit(Array.from(files));
|
|
2840
2874
|
}
|
|
2841
2875
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldFileDropzoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2842
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldFileDropzoneComponent, isStandalone: true, selector: "fold-file-dropzone", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, busyLabel: { classPropertyName: "busyLabel", publicName: "busyLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesPicked: "filesPicked" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"dropzone\"\n [class.over]=\"isDragOver()\"\n [class.busy]=\"busy()\"\n [class.disabled]=\"disabled()\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-disabled]=\"disabled() || busy()\"\n (click)=\"openFilePicker()\"\n (keydown.enter)=\"openFilePicker()\"\n (keydown.space)=\"openFilePicker(); $event.preventDefault()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event)\"\n>\n <fold-icon name=\"upload\" [size]=\"22\" />\n @if (busy()) {\n <span class=\"label\">{{ busyLabel() }}</span>\n } @else {\n <span class=\"label\">{{ label() }}</span>\n @if (hint(); as h) {\n <small class=\"hint\">{{ h }}</small>\n }\n }\n <input\n #fileInput\n type=\"file\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled() || busy()\"\n hidden\n (change)=\"onFilesSelected($event.target)\"\n />\n</div>\n", styles: [":host{display:block}.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:
|
|
2876
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldFileDropzoneComponent, isStandalone: true, selector: "fold-file-dropzone", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, busyLabel: { classPropertyName: "busyLabel", publicName: "busyLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesPicked: "filesPicked" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"dropzone\"\n [class.over]=\"isDragOver()\"\n [class.busy]=\"busy()\"\n [class.disabled]=\"disabled()\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-disabled]=\"disabled() || busy()\"\n (click)=\"openFilePicker()\"\n (keydown.enter)=\"openFilePicker()\"\n (keydown.space)=\"openFilePicker(); $event.preventDefault()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event)\"\n>\n <fold-icon name=\"upload\" [size]=\"22\" />\n @if (busy()) {\n <span class=\"label\">{{ busyLabel() }}</span>\n } @else {\n <span class=\"label\">{{ label() }}</span>\n @if (hint(); as h) {\n <small class=\"hint\">{{ h }}</small>\n }\n }\n <input\n #fileInput\n type=\"file\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled() || busy()\"\n hidden\n (change)=\"onFilesSelected($event.target)\"\n />\n</div>\n", styles: [":host{display:block}.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-lg) var(--fold-space-md);background:var(--fold-color-surface-hover);border:1px dashed var(--fold-color-border);border-radius:var(--fold-radius-md);color:var(--fold-color-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center;outline:none;transition:background var(--fold-motion-fast),border-color var(--fold-motion-fast),color var(--fold-motion-fast),transform var(--fold-motion-fast)}.dropzone:hover,.dropzone:focus-visible{background:var(--fold-color-surface-card);border-color:var(--fold-color-primary-border);color:var(--fold-color-text)}.dropzone:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:2px}.dropzone.over{background:var(--fold-color-primary-surface);border-color:var(--fold-color-primary);color:var(--fold-color-primary-text);transform:scale(1.005)}.dropzone.busy{cursor:progress;pointer-events:none;opacity:.85}.dropzone.disabled,.dropzone[aria-disabled=true]{cursor:not-allowed;opacity:.55}.dropzone .label{font-size:var(--fold-text-sm);font-weight:500}.dropzone .hint{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted)}\n"], dependencies: [{ kind: "directive", type: FoldFieldIdDirective, selector: "input:not([id]):not([name]),select:not([id]):not([name]),textarea:not([id]):not([name])" }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
2843
2877
|
}
|
|
2844
2878
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldFileDropzoneComponent, decorators: [{
|
|
2845
2879
|
type: Component,
|
|
2846
|
-
args: [{ selector: "fold-file-dropzone", standalone: true, imports: [FoldFieldIdDirective, FoldIconComponent], template: "<div\n class=\"dropzone\"\n [class.over]=\"isDragOver()\"\n [class.busy]=\"busy()\"\n [class.disabled]=\"disabled()\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-disabled]=\"disabled() || busy()\"\n (click)=\"openFilePicker()\"\n (keydown.enter)=\"openFilePicker()\"\n (keydown.space)=\"openFilePicker(); $event.preventDefault()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event)\"\n>\n <fold-icon name=\"upload\" [size]=\"22\" />\n @if (busy()) {\n <span class=\"label\">{{ busyLabel() }}</span>\n } @else {\n <span class=\"label\">{{ label() }}</span>\n @if (hint(); as h) {\n <small class=\"hint\">{{ h }}</small>\n }\n }\n <input\n #fileInput\n type=\"file\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled() || busy()\"\n hidden\n (change)=\"onFilesSelected($event.target)\"\n />\n</div>\n", styles: [":host{display:block}.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:
|
|
2880
|
+
args: [{ selector: "fold-file-dropzone", standalone: true, imports: [FoldFieldIdDirective, FoldIconComponent], template: "<div\n class=\"dropzone\"\n [class.over]=\"isDragOver()\"\n [class.busy]=\"busy()\"\n [class.disabled]=\"disabled()\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-disabled]=\"disabled() || busy()\"\n (click)=\"openFilePicker()\"\n (keydown.enter)=\"openFilePicker()\"\n (keydown.space)=\"openFilePicker(); $event.preventDefault()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event)\"\n>\n <fold-icon name=\"upload\" [size]=\"22\" />\n @if (busy()) {\n <span class=\"label\">{{ busyLabel() }}</span>\n } @else {\n <span class=\"label\">{{ label() }}</span>\n @if (hint(); as h) {\n <small class=\"hint\">{{ h }}</small>\n }\n }\n <input\n #fileInput\n type=\"file\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled() || busy()\"\n hidden\n (change)=\"onFilesSelected($event.target)\"\n />\n</div>\n", styles: [":host{display:block}.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-lg) var(--fold-space-md);background:var(--fold-color-surface-hover);border:1px dashed var(--fold-color-border);border-radius:var(--fold-radius-md);color:var(--fold-color-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center;outline:none;transition:background var(--fold-motion-fast),border-color var(--fold-motion-fast),color var(--fold-motion-fast),transform var(--fold-motion-fast)}.dropzone:hover,.dropzone:focus-visible{background:var(--fold-color-surface-card);border-color:var(--fold-color-primary-border);color:var(--fold-color-text)}.dropzone:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:2px}.dropzone.over{background:var(--fold-color-primary-surface);border-color:var(--fold-color-primary);color:var(--fold-color-primary-text);transform:scale(1.005)}.dropzone.busy{cursor:progress;pointer-events:none;opacity:.85}.dropzone.disabled,.dropzone[aria-disabled=true]{cursor:not-allowed;opacity:.55}.dropzone .label{font-size:var(--fold-text-sm);font-weight:500}.dropzone .hint{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted)}\n"] }]
|
|
2847
2881
|
}], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], busyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "busyLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filesPicked: [{ type: i0.Output, args: ["filesPicked"] }], fileInput: [{ type: i0.ViewChild, args: ["fileInput", { isSignal: true }] }] } });
|
|
2848
2882
|
|
|
2849
2883
|
/**
|
|
@@ -3003,11 +3037,11 @@ class FoldLinkComponent {
|
|
|
3003
3037
|
resolvedRel = computed(() => this.rel() ?? (this.target() === "_blank" ? "noopener noreferrer" : null), /* @ts-ignore */
|
|
3004
3038
|
...(ngDevMode ? [{ debugName: "resolvedRel" }] : /* istanbul ignore next */ []));
|
|
3005
3039
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3006
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldLinkComponent, isStandalone: true, selector: "fold-link", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.tone-muted": "tone() === 'muted'" } }, ngImport: i0, template: "<ng-template #inner>\n @if (icon(); as i) {\n <fold-icon [name]=\"i\" size=\"sm\" />\n }\n <span class=\"lnk-label\"><ng-content /></span>\n @if (trailingIcon(); as t) {\n <fold-icon [name]=\"t\" size=\"sm\" />\n }\n</ng-template>\n@if (href(); as h) {\n <a\n class=\"lnk\"\n [href]=\"h\"\n [attr.target]=\"target() ?? null\"\n [attr.rel]=\"resolvedRel()\"\n >\n <ng-container [ngTemplateOutlet]=\"inner\" />\n </a>\n} @else {\n <button\n type=\"button\"\n class=\"lnk\"\n [disabled]=\"disabled()\"\n (click)=\"clicked.emit($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"inner\" />\n </button>\n}\n", styles: [":host{display:inline-flex;min-width:0}.lnk{display:inline-flex;align-items:center;gap:
|
|
3040
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldLinkComponent, isStandalone: true, selector: "fold-link", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.tone-muted": "tone() === 'muted'" } }, ngImport: i0, template: "<ng-template #inner>\n @if (icon(); as i) {\n <fold-icon [name]=\"i\" size=\"sm\" />\n }\n <span class=\"lnk-label\"><ng-content /></span>\n @if (trailingIcon(); as t) {\n <fold-icon [name]=\"t\" size=\"sm\" />\n }\n</ng-template>\n@if (href(); as h) {\n <a\n class=\"lnk\"\n [href]=\"h\"\n [attr.target]=\"target() ?? null\"\n [attr.rel]=\"resolvedRel()\"\n >\n <ng-container [ngTemplateOutlet]=\"inner\" />\n </a>\n} @else {\n <button\n type=\"button\"\n class=\"lnk\"\n [disabled]=\"disabled()\"\n (click)=\"clicked.emit($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"inner\" />\n </button>\n}\n", styles: [":host{display:inline-flex;min-width:0}.lnk{display:inline-flex;align-items:center;gap:var(--fold-space-sm);min-width:0;padding:0;border:0;background:none;font-family:inherit;font-size:var(--fold-text-xs);font-weight:600;color:var(--fold-color-primary);text-decoration:none;cursor:pointer;transition:color var(--fold-motion-fast)}:host(.tone-muted) .lnk{color:var(--fold-color-text-secondary)}.lnk:hover .lnk-label{text-decoration:underline}.lnk:disabled{color:var(--fold-color-text-muted);cursor:not-allowed}.lnk:disabled .lnk-label{text-decoration:none}.lnk-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
3007
3041
|
}
|
|
3008
3042
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldLinkComponent, decorators: [{
|
|
3009
3043
|
type: Component,
|
|
3010
|
-
args: [{ selector: "fold-link", standalone: true, imports: [NgTemplateOutlet, FoldIconComponent], host: { "[class.tone-muted]": "tone() === 'muted'" }, template: "<ng-template #inner>\n @if (icon(); as i) {\n <fold-icon [name]=\"i\" size=\"sm\" />\n }\n <span class=\"lnk-label\"><ng-content /></span>\n @if (trailingIcon(); as t) {\n <fold-icon [name]=\"t\" size=\"sm\" />\n }\n</ng-template>\n@if (href(); as h) {\n <a\n class=\"lnk\"\n [href]=\"h\"\n [attr.target]=\"target() ?? null\"\n [attr.rel]=\"resolvedRel()\"\n >\n <ng-container [ngTemplateOutlet]=\"inner\" />\n </a>\n} @else {\n <button\n type=\"button\"\n class=\"lnk\"\n [disabled]=\"disabled()\"\n (click)=\"clicked.emit($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"inner\" />\n </button>\n}\n", styles: [":host{display:inline-flex;min-width:0}.lnk{display:inline-flex;align-items:center;gap:
|
|
3044
|
+
args: [{ selector: "fold-link", standalone: true, imports: [NgTemplateOutlet, FoldIconComponent], host: { "[class.tone-muted]": "tone() === 'muted'" }, template: "<ng-template #inner>\n @if (icon(); as i) {\n <fold-icon [name]=\"i\" size=\"sm\" />\n }\n <span class=\"lnk-label\"><ng-content /></span>\n @if (trailingIcon(); as t) {\n <fold-icon [name]=\"t\" size=\"sm\" />\n }\n</ng-template>\n@if (href(); as h) {\n <a\n class=\"lnk\"\n [href]=\"h\"\n [attr.target]=\"target() ?? null\"\n [attr.rel]=\"resolvedRel()\"\n >\n <ng-container [ngTemplateOutlet]=\"inner\" />\n </a>\n} @else {\n <button\n type=\"button\"\n class=\"lnk\"\n [disabled]=\"disabled()\"\n (click)=\"clicked.emit($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"inner\" />\n </button>\n}\n", styles: [":host{display:inline-flex;min-width:0}.lnk{display:inline-flex;align-items:center;gap:var(--fold-space-sm);min-width:0;padding:0;border:0;background:none;font-family:inherit;font-size:var(--fold-text-xs);font-weight:600;color:var(--fold-color-primary);text-decoration:none;cursor:pointer;transition:color var(--fold-motion-fast)}:host(.tone-muted) .lnk{color:var(--fold-color-text-secondary)}.lnk:hover .lnk-label{text-decoration:underline}.lnk:disabled{color:var(--fold-color-text-muted);cursor:not-allowed}.lnk:disabled .lnk-label{text-decoration:none}.lnk-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
3011
3045
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
3012
3046
|
|
|
3013
3047
|
/**
|
|
@@ -3019,9 +3053,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
3019
3053
|
*
|
|
3020
3054
|
* ## Options
|
|
3021
3055
|
* - `collapsible` — render a chevron toggle that flips `expanded`.
|
|
3022
|
-
* - `expanded` (two-way) — `
|
|
3023
|
-
* icon-only
|
|
3024
|
-
*
|
|
3056
|
+
* - `expanded` (two-way) — `true` widens the rail and reveals inline labels;
|
|
3057
|
+
* `false` is the icon rail (icon-only, hover tooltips). **Left unbound it
|
|
3058
|
+
* follows `collapsible`:** `<fold-menu collapsible>` boots **expanded** (you
|
|
3059
|
+
* added a way to collapse, so open is the natural start), a bare `<fold-menu>`
|
|
3060
|
+
* boots the icon rail. Bind it (`[expanded]` / `[(expanded)]`) to be
|
|
3061
|
+
* authoritative — an explicit value always wins.
|
|
3025
3062
|
*
|
|
3026
3063
|
* ## Slots
|
|
3027
3064
|
* | Attribute | Band |
|
|
@@ -3048,11 +3085,13 @@ class FoldMenuComponent {
|
|
|
3048
3085
|
/** Show a chevron toggle that flips `expanded`. */
|
|
3049
3086
|
collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3050
3087
|
/**
|
|
3051
|
-
* Two-way
|
|
3052
|
-
*
|
|
3053
|
-
*
|
|
3088
|
+
* Two-way. `true` widens the rail and reveals inline labels; `false` is the
|
|
3089
|
+
* icon rail. **`undefined` (the default) means "unset"** — the effective state
|
|
3090
|
+
* then follows `collapsible` (see {@link isExpanded}), so a bare `collapsible`
|
|
3091
|
+
* menu opens without the consumer having to bind it. A bound value is always
|
|
3092
|
+
* authoritative.
|
|
3054
3093
|
*/
|
|
3055
|
-
expanded = model(
|
|
3094
|
+
expanded = model(undefined, /* @ts-ignore */
|
|
3056
3095
|
...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
|
|
3057
3096
|
/** How items tint on hover / when active (`follow` = section colour). */
|
|
3058
3097
|
tint = input("follow", /* @ts-ignore */
|
|
@@ -3071,6 +3110,14 @@ class FoldMenuComponent {
|
|
|
3071
3110
|
...(ngDevMode ? [{ debugName: "hasHeader" }] : /* istanbul ignore next */ []));
|
|
3072
3111
|
hasFooter = signal(false, /* @ts-ignore */
|
|
3073
3112
|
...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
|
|
3113
|
+
/**
|
|
3114
|
+
* The effective expanded state everything renders from: the bound `expanded`
|
|
3115
|
+
* when set, else it follows `collapsible` (a collapsible rail boots open, a
|
|
3116
|
+
* plain one boots as the icon rail). Encodes the sensible default without a
|
|
3117
|
+
* warning — the short `<fold-menu collapsible>` Just Works.
|
|
3118
|
+
*/
|
|
3119
|
+
isExpanded = computed(() => this.expanded() ?? this.collapsible(), /* @ts-ignore */
|
|
3120
|
+
...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
|
|
3074
3121
|
/**
|
|
3075
3122
|
* The band the toggle renders into: the `togglePlacement` override when set,
|
|
3076
3123
|
* else auto — first in the footer, else last in the header, else the body.
|
|
@@ -3109,18 +3156,18 @@ class FoldMenuComponent {
|
|
|
3109
3156
|
return false;
|
|
3110
3157
|
}
|
|
3111
3158
|
toggle() {
|
|
3112
|
-
this.expanded.
|
|
3159
|
+
this.expanded.set(!this.isExpanded());
|
|
3113
3160
|
}
|
|
3114
3161
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3115
|
-
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 } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class.expanded": "
|
|
3162
|
+
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 } }, 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\">\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%}:host(.expanded) .menu-body{align-items:stretch;width:auto;padding:0 var(--fold-space-sm);min-height:0;overflow-y:auto;overscroll-behavior:contain;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"] }] });
|
|
3116
3163
|
}
|
|
3117
3164
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldMenuComponent, decorators: [{
|
|
3118
3165
|
type: Component,
|
|
3119
3166
|
args: [{ selector: "fold-menu", standalone: true, imports: [FoldIconComponent, NgTemplateOutlet], host: {
|
|
3120
|
-
"[class.expanded]": "
|
|
3167
|
+
"[class.expanded]": "isExpanded()",
|
|
3121
3168
|
"[attr.data-tint]": "tint()",
|
|
3122
3169
|
"[attr.data-level]": "level()",
|
|
3123
|
-
}, 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\">\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]=\"
|
|
3170
|
+
}, 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\">\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%}:host(.expanded) .menu-body{align-items:stretch;width:auto;padding:0 var(--fold-space-sm);min-height:0;overflow-y:auto;overscroll-behavior:contain;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"] }]
|
|
3124
3171
|
}], 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 }] }], headRef: [{ type: i0.ViewChild, args: ["head", { isSignal: true }] }], footRef: [{ type: i0.ViewChild, args: ["foot", { isSignal: true }] }] } });
|
|
3125
3172
|
|
|
3126
3173
|
/** Solid accent colour per semantic tone (drives the dot + follow-pill). */
|
|
@@ -3218,7 +3265,7 @@ class FoldMenuItemComponent {
|
|
|
3218
3265
|
ariaLabel = computed(() => this.hasBadge() ? `${this.label()}, ${this.badgeText()}` : null, /* @ts-ignore */
|
|
3219
3266
|
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
3220
3267
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3221
|
-
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
|
|
3268
|
+
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:10px;font-weight:600;line-height:1;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:500;line-height:1.5;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:absolute;left:calc(100% + 8px);top:50%;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"] }] });
|
|
3222
3269
|
}
|
|
3223
3270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldMenuItemComponent, decorators: [{
|
|
3224
3271
|
type: Component,
|
|
@@ -3226,7 +3273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
3226
3273
|
"[class.is-active]": "active()",
|
|
3227
3274
|
"[attr.aria-label]": "ariaLabel()",
|
|
3228
3275
|
"[style.--mi-badge-accent]": "badgeAccent()",
|
|
3229
|
-
}, 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
|
|
3276
|
+
}, 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:10px;font-weight:600;line-height:1;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:500;line-height:1.5;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:absolute;left:calc(100% + 8px);top:50%;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"] }]
|
|
3230
3277
|
}], 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 }] }] } });
|
|
3231
3278
|
|
|
3232
3279
|
/**
|
|
@@ -3251,11 +3298,11 @@ class FoldMenuSeparatorComponent {
|
|
|
3251
3298
|
color = input(/* @ts-ignore */
|
|
3252
3299
|
...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
|
|
3253
3300
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldMenuSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3254
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldMenuSeparatorComponent, isStandalone: true, selector: "fold-menu-separator", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"sep-mark\" [style.background]=\"color() || null\"></span>\n@if (label()) {\n <span class=\"sep-label\">{{ label() }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;justify-content:center;width:100%;height:12px;margin:
|
|
3301
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldMenuSeparatorComponent, isStandalone: true, selector: "fold-menu-separator", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"sep-mark\" [style.background]=\"color() || null\"></span>\n@if (label()) {\n <span class=\"sep-label\">{{ label() }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;justify-content:center;width:100%;height:12px;margin:var(--fold-space-xs) 0 2px}.sep-mark{flex-shrink:0;width:16px;height:3px;border-radius:2px;background:var(--fold-color-border);opacity:.85}.sep-label{display:none}:host-context(fold-menu.expanded){justify-content:flex-start;gap:var(--fold-space-sm);height:auto;padding:var(--fold-space-md) var(--fold-space-md) var(--fold-space-xs)}:host-context(fold-menu.expanded) .sep-mark{width:6px;height:6px;border-radius:50%;opacity:1}:host-context(fold-menu.expanded) .sep-label{display:inline;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--fold-color-text-muted)}\n"] });
|
|
3255
3302
|
}
|
|
3256
3303
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldMenuSeparatorComponent, decorators: [{
|
|
3257
3304
|
type: Component,
|
|
3258
|
-
args: [{ selector: "fold-menu-separator", standalone: true, template: "<span class=\"sep-mark\" [style.background]=\"color() || null\"></span>\n@if (label()) {\n <span class=\"sep-label\">{{ label() }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;justify-content:center;width:100%;height:12px;margin:
|
|
3305
|
+
args: [{ selector: "fold-menu-separator", standalone: true, template: "<span class=\"sep-mark\" [style.background]=\"color() || null\"></span>\n@if (label()) {\n <span class=\"sep-label\">{{ label() }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;justify-content:center;width:100%;height:12px;margin:var(--fold-space-xs) 0 2px}.sep-mark{flex-shrink:0;width:16px;height:3px;border-radius:2px;background:var(--fold-color-border);opacity:.85}.sep-label{display:none}:host-context(fold-menu.expanded){justify-content:flex-start;gap:var(--fold-space-sm);height:auto;padding:var(--fold-space-md) var(--fold-space-md) var(--fold-space-xs)}:host-context(fold-menu.expanded) .sep-mark{width:6px;height:6px;border-radius:50%;opacity:1}:host-context(fold-menu.expanded) .sep-label{display:inline;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--fold-color-text-muted)}\n"] }]
|
|
3259
3306
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
3260
3307
|
|
|
3261
3308
|
/** Distinct ids for the header → items `aria-controls` link. */
|
|
@@ -3312,11 +3359,11 @@ class FoldMenuSectionComponent {
|
|
|
3312
3359
|
this.collapsed.update((v) => !v);
|
|
3313
3360
|
}
|
|
3314
3361
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldMenuSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3315
|
-
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:
|
|
3362
|
+
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"] }] });
|
|
3316
3363
|
}
|
|
3317
3364
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldMenuSectionComponent, decorators: [{
|
|
3318
3365
|
type: Component,
|
|
3319
|
-
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:
|
|
3366
|
+
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"] }]
|
|
3320
3367
|
}], 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), { ...{
|
|
3321
3368
|
descendants: true,
|
|
3322
3369
|
}, isSignal: true }] }] } });
|
|
@@ -3403,7 +3450,7 @@ class FoldNavTileComponent {
|
|
|
3403
3450
|
/** Lights the active indicator — the current destination. */
|
|
3404
3451
|
active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3405
3452
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldNavTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3406
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldNavTileComponent, isStandalone: true, selector: "a[fold-nav-tile], button[fold-nav-tile]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-filled": "variant() === 'filled'", "class.is-active": "active()", "attr.aria-current": "active() ? 'page' : null" }, classAttribute: "fold-nav-tile" }, ngImport: i0, template: "<fold-icon [name]=\"icon()\" [size]=\"26\" class=\"nt-icon\" />\n<span class=\"nt-label\">{{ label() }}</span>\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:
|
|
3453
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldNavTileComponent, isStandalone: true, selector: "a[fold-nav-tile], button[fold-nav-tile]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-filled": "variant() === 'filled'", "class.is-active": "active()", "attr.aria-current": "active() ? 'page' : null" }, classAttribute: "fold-nav-tile" }, ngImport: i0, template: "<fold-icon [name]=\"icon()\" [size]=\"26\" class=\"nt-icon\" />\n<span class=\"nt-label\">{{ label() }}</span>\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fold-space-sm);aspect-ratio:1;padding:var(--fold-space-md);border-radius:var(--fold-radius-lg);background:var(--fold-color-surface-raised);border:1px solid var(--fold-color-border);color:var(--fold-color-text-secondary);text-decoration:none;cursor:pointer;opacity:0;animation:fold-nav-tile-in .26s ease forwards;transition:transform .14s ease,background .14s ease,border-color .14s ease,color .14s ease}:host(:hover){transform:translateY(-2px);background:var(--fold-color-surface-hover);border-color:var(--fold-color-primary);color:var(--fold-color-text)}:host(:active){transform:scale(.97)}:host(.is-active){border-color:var(--fold-color-primary);color:var(--fold-color-primary-text)}:host(.is-filled){background:var(--fold-color-primary);border-color:transparent;color:var(--fold-color-on-primary)}:host(.is-filled:hover){background:var(--fold-color-primary-strong);border-color:transparent;color:var(--fold-color-on-primary)}:host(.is-filled.is-active){outline:2px solid var(--fold-color-on-primary);outline-offset:-5px}.nt-icon{flex:none}.nt-label{font-size:var(--fold-text-xs);font-weight:600;line-height:1.2;text-align:center}:host(:nth-child(1)){animation-delay:0ms}:host(:nth-child(2)){animation-delay:35ms}:host(:nth-child(3)){animation-delay:70ms}:host(:nth-child(4)){animation-delay:105ms}:host(:nth-child(5)){animation-delay:.14s}:host(:nth-child(6)){animation-delay:175ms}:host(:nth-child(7)){animation-delay:.21s}:host(:nth-child(8)){animation-delay:245ms}:host(:nth-child(9)){animation-delay:.28s}:host(:nth-child(10)){animation-delay:315ms}:host(:nth-child(11)){animation-delay:.35s}:host(:nth-child(12)){animation-delay:385ms}@keyframes fold-nav-tile-in{0%{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none;opacity:1}}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
3407
3454
|
}
|
|
3408
3455
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldNavTileComponent, decorators: [{
|
|
3409
3456
|
type: Component,
|
|
@@ -3412,7 +3459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
3412
3459
|
"[class.is-filled]": "variant() === 'filled'",
|
|
3413
3460
|
"[class.is-active]": "active()",
|
|
3414
3461
|
"[attr.aria-current]": "active() ? 'page' : null",
|
|
3415
|
-
}, template: "<fold-icon [name]=\"icon()\" [size]=\"26\" class=\"nt-icon\" />\n<span class=\"nt-label\">{{ label() }}</span>\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:
|
|
3462
|
+
}, template: "<fold-icon [name]=\"icon()\" [size]=\"26\" class=\"nt-icon\" />\n<span class=\"nt-label\">{{ label() }}</span>\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fold-space-sm);aspect-ratio:1;padding:var(--fold-space-md);border-radius:var(--fold-radius-lg);background:var(--fold-color-surface-raised);border:1px solid var(--fold-color-border);color:var(--fold-color-text-secondary);text-decoration:none;cursor:pointer;opacity:0;animation:fold-nav-tile-in .26s ease forwards;transition:transform .14s ease,background .14s ease,border-color .14s ease,color .14s ease}:host(:hover){transform:translateY(-2px);background:var(--fold-color-surface-hover);border-color:var(--fold-color-primary);color:var(--fold-color-text)}:host(:active){transform:scale(.97)}:host(.is-active){border-color:var(--fold-color-primary);color:var(--fold-color-primary-text)}:host(.is-filled){background:var(--fold-color-primary);border-color:transparent;color:var(--fold-color-on-primary)}:host(.is-filled:hover){background:var(--fold-color-primary-strong);border-color:transparent;color:var(--fold-color-on-primary)}:host(.is-filled.is-active){outline:2px solid var(--fold-color-on-primary);outline-offset:-5px}.nt-icon{flex:none}.nt-label{font-size:var(--fold-text-xs);font-weight:600;line-height:1.2;text-align:center}:host(:nth-child(1)){animation-delay:0ms}:host(:nth-child(2)){animation-delay:35ms}:host(:nth-child(3)){animation-delay:70ms}:host(:nth-child(4)){animation-delay:105ms}:host(:nth-child(5)){animation-delay:.14s}:host(:nth-child(6)){animation-delay:175ms}:host(:nth-child(7)){animation-delay:.21s}:host(:nth-child(8)){animation-delay:245ms}:host(:nth-child(9)){animation-delay:.28s}:host(:nth-child(10)){animation-delay:315ms}:host(:nth-child(11)){animation-delay:.35s}:host(:nth-child(12)){animation-delay:385ms}@keyframes fold-nav-tile-in{0%{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none;opacity:1}}\n"] }]
|
|
3416
3463
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
|
|
3417
3464
|
|
|
3418
3465
|
/**
|
|
@@ -3501,11 +3548,11 @@ class FoldNavLauncherComponent {
|
|
|
3501
3548
|
this.open.set(false);
|
|
3502
3549
|
}
|
|
3503
3550
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldNavLauncherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3504
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldNavLauncherComponent, isStandalone: true, selector: "fold-nav-launcher", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "tiles", predicate: FoldNavTileComponent, isSignal: true }], ngImport: i0, template: "@if (open()) {\n <div class=\"nl-scrim\" (click)=\"close()\" aria-hidden=\"true\"></div>\n <div\n class=\"nl-dialog\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"label()\"\n [foldFocusTrap]=\"open()\"\n tabindex=\"-1\"\n >\n <button\n type=\"button\"\n class=\"nl-close\"\n (click)=\"close()\"\n aria-label=\"Close navigation\"\n >\n <fold-icon name=\"close\" size=\"md\" />\n </button>\n <div class=\"nl-grid\" [style.--nav-cols]=\"resolvedCols()\">\n <ng-content />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.nl-scrim{position:fixed;inset:0;z-index:200;background:var(--fold-color-scrim);backdrop-filter:blur(var(--fold-blur-glass));-webkit-backdrop-filter:blur(var(--fold-blur-glass));animation:fold-nl-fade .2s ease}.nl-dialog{position:fixed;inset:0;z-index:201;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:
|
|
3551
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldNavLauncherComponent, isStandalone: true, selector: "fold-nav-launcher", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "tiles", predicate: FoldNavTileComponent, isSignal: true }], ngImport: i0, template: "@if (open()) {\n <div class=\"nl-scrim\" (click)=\"close()\" aria-hidden=\"true\"></div>\n <div\n class=\"nl-dialog\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"label()\"\n [foldFocusTrap]=\"open()\"\n tabindex=\"-1\"\n >\n <button\n type=\"button\"\n class=\"nl-close\"\n (click)=\"close()\"\n aria-label=\"Close navigation\"\n >\n <fold-icon name=\"close\" size=\"md\" />\n </button>\n <div class=\"nl-grid\" [style.--nav-cols]=\"resolvedCols()\">\n <ng-content />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.nl-scrim{position:fixed;inset:0;z-index:200;background:var(--fold-color-scrim);backdrop-filter:blur(var(--fold-blur-glass));-webkit-backdrop-filter:blur(var(--fold-blur-glass));animation:fold-nl-fade .2s ease}.nl-dialog{position:fixed;inset:0;z-index:201;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--fold-space-2xl)}.nl-close{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:var(--fold-radius-md);background:var(--fold-color-surface-raised);color:var(--fold-color-text-secondary);cursor:pointer;transition:background .14s ease,color .14s ease}.nl-close:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.nl-grid{display:grid;grid-template-columns:repeat(var(--nav-cols, 3),1fr);gap:var(--fold-space-md);width:100%;max-width:360px}@media(max-width:360px){.nl-grid{grid-template-columns:repeat(2,1fr)}}@keyframes fold-nl-fade{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.nl-scrim{animation:none}}\n"], dependencies: [{ kind: "directive", type: FocusTrapDirective, selector: "[foldFocusTrap]", inputs: ["foldFocusTrap"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
3505
3552
|
}
|
|
3506
3553
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldNavLauncherComponent, decorators: [{
|
|
3507
3554
|
type: Component,
|
|
3508
|
-
args: [{ selector: "fold-nav-launcher", standalone: true, imports: [FocusTrapDirective, FoldIconComponent], template: "@if (open()) {\n <div class=\"nl-scrim\" (click)=\"close()\" aria-hidden=\"true\"></div>\n <div\n class=\"nl-dialog\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"label()\"\n [foldFocusTrap]=\"open()\"\n tabindex=\"-1\"\n >\n <button\n type=\"button\"\n class=\"nl-close\"\n (click)=\"close()\"\n aria-label=\"Close navigation\"\n >\n <fold-icon name=\"close\" size=\"md\" />\n </button>\n <div class=\"nl-grid\" [style.--nav-cols]=\"resolvedCols()\">\n <ng-content />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.nl-scrim{position:fixed;inset:0;z-index:200;background:var(--fold-color-scrim);backdrop-filter:blur(var(--fold-blur-glass));-webkit-backdrop-filter:blur(var(--fold-blur-glass));animation:fold-nl-fade .2s ease}.nl-dialog{position:fixed;inset:0;z-index:201;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:
|
|
3555
|
+
args: [{ selector: "fold-nav-launcher", standalone: true, imports: [FocusTrapDirective, FoldIconComponent], template: "@if (open()) {\n <div class=\"nl-scrim\" (click)=\"close()\" aria-hidden=\"true\"></div>\n <div\n class=\"nl-dialog\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"label()\"\n [foldFocusTrap]=\"open()\"\n tabindex=\"-1\"\n >\n <button\n type=\"button\"\n class=\"nl-close\"\n (click)=\"close()\"\n aria-label=\"Close navigation\"\n >\n <fold-icon name=\"close\" size=\"md\" />\n </button>\n <div class=\"nl-grid\" [style.--nav-cols]=\"resolvedCols()\">\n <ng-content />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.nl-scrim{position:fixed;inset:0;z-index:200;background:var(--fold-color-scrim);backdrop-filter:blur(var(--fold-blur-glass));-webkit-backdrop-filter:blur(var(--fold-blur-glass));animation:fold-nl-fade .2s ease}.nl-dialog{position:fixed;inset:0;z-index:201;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--fold-space-2xl)}.nl-close{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:var(--fold-radius-md);background:var(--fold-color-surface-raised);color:var(--fold-color-text-secondary);cursor:pointer;transition:background .14s ease,color .14s ease}.nl-close:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.nl-grid{display:grid;grid-template-columns:repeat(var(--nav-cols, 3),1fr);gap:var(--fold-space-md);width:100%;max-width:360px}@media(max-width:360px){.nl-grid{grid-template-columns:repeat(2,1fr)}}@keyframes fold-nl-fade{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.nl-scrim{animation:none}}\n"] }]
|
|
3509
3556
|
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], tiles: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FoldNavTileComponent), { isSignal: true }] }], onEscape: [{
|
|
3510
3557
|
type: HostListener,
|
|
3511
3558
|
args: ["document:keydown.escape"]
|
|
@@ -3552,7 +3599,7 @@ class FoldHeroCardComponent {
|
|
|
3552
3599
|
/** Add a primary accent bar down the left edge (composable with any surface). */
|
|
3553
3600
|
accentBar = input(false, { ...(ngDevMode ? { debugName: "accentBar" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3554
3601
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldHeroCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3555
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldHeroCardComponent, isStandalone: true, selector: "fold-hero-card", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, accentBar: { classPropertyName: "accentBar", publicName: "accentBar", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.s-sunken": "surface() === 'sunken'", "class.s-primary": "surface() === 'primary'", "attr.data-surface": "surface() === 'primary' ? 'accent' : null", "class.a-subtle": "accent() === 'subtle'", "class.a-gradient": "accent() === 'gradient'", "class.has-bar": "accentBar()", "class.p-sm": "padding() === 'sm'", "class.p-md": "padding() === 'md'" } }, ngImport: i0, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;overflow:hidden;isolation:isolate;background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-lg);padding:
|
|
3602
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldHeroCardComponent, isStandalone: true, selector: "fold-hero-card", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, accentBar: { classPropertyName: "accentBar", publicName: "accentBar", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.s-sunken": "surface() === 'sunken'", "class.s-primary": "surface() === 'primary'", "attr.data-surface": "surface() === 'primary' ? 'accent' : null", "class.a-subtle": "accent() === 'subtle'", "class.a-gradient": "accent() === 'gradient'", "class.has-bar": "accentBar()", "class.p-sm": "padding() === 'sm'", "class.p-md": "padding() === 'md'" } }, ngImport: i0, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;overflow:hidden;isolation:isolate;background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-lg);padding:var(--fold-space-xl)}:host(.p-sm){padding:var(--fold-space-sm)}:host(.p-md){padding:var(--fold-space-lg)}:host(.s-sunken){background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle)}:host(.s-primary){background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}:host(.a-subtle):after,:host(.a-gradient):after{content:\"\";position:absolute;inset:0;z-index:-1;pointer-events:none}:host(.a-subtle):after{background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--fold-color-primary) 10%,transparent),transparent 45%),linear-gradient(160deg,transparent 30%,color-mix(in srgb,var(--fold-color-surface-sunken) 50%,transparent))}:host(.a-gradient){border-color:var(--fold-color-primary-border)}:host(.a-gradient):after{background:radial-gradient(260px circle at 90% -10%,color-mix(in srgb,var(--fold-color-primary) 22%,transparent),transparent 68%),linear-gradient(180deg,color-mix(in srgb,var(--fold-color-primary) 8%,transparent),transparent 60%)}:host(.has-bar):before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--fold-color-primary),color-mix(in srgb,var(--fold-color-primary) 30%,transparent))}\n"] });
|
|
3556
3603
|
}
|
|
3557
3604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldHeroCardComponent, decorators: [{
|
|
3558
3605
|
type: Component,
|
|
@@ -3566,7 +3613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
3566
3613
|
"[class.has-bar]": "accentBar()",
|
|
3567
3614
|
"[class.p-sm]": "padding() === 'sm'",
|
|
3568
3615
|
"[class.p-md]": "padding() === 'md'",
|
|
3569
|
-
}, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;overflow:hidden;isolation:isolate;background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-lg);padding:
|
|
3616
|
+
}, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;overflow:hidden;isolation:isolate;background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-lg);padding:var(--fold-space-xl)}:host(.p-sm){padding:var(--fold-space-sm)}:host(.p-md){padding:var(--fold-space-lg)}:host(.s-sunken){background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle)}:host(.s-primary){background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}:host(.a-subtle):after,:host(.a-gradient):after{content:\"\";position:absolute;inset:0;z-index:-1;pointer-events:none}:host(.a-subtle):after{background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--fold-color-primary) 10%,transparent),transparent 45%),linear-gradient(160deg,transparent 30%,color-mix(in srgb,var(--fold-color-surface-sunken) 50%,transparent))}:host(.a-gradient){border-color:var(--fold-color-primary-border)}:host(.a-gradient):after{background:radial-gradient(260px circle at 90% -10%,color-mix(in srgb,var(--fold-color-primary) 22%,transparent),transparent 68%),linear-gradient(180deg,color-mix(in srgb,var(--fold-color-primary) 8%,transparent),transparent 60%)}:host(.has-bar):before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--fold-color-primary),color-mix(in srgb,var(--fold-color-primary) 30%,transparent))}\n"] }]
|
|
3570
3617
|
}], propDecorators: { surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], accentBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentBar", required: false }] }] } });
|
|
3571
3618
|
|
|
3572
3619
|
/**
|
|
@@ -3749,11 +3796,11 @@ class FoldCheckboxComponent {
|
|
|
3749
3796
|
this.touched.set(true);
|
|
3750
3797
|
}
|
|
3751
3798
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3752
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldCheckboxComponent, isStandalone: true, selector: "fold-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange" }, host: { properties: { "class": "size()" } }, ngImport: i0, template: "<label class=\"cb\" [class.is-disabled]=\"disabled()\">\n <input\n #native\n type=\"checkbox\"\n class=\"cb-native\"\n [id]=\"inputId\"\n [checked]=\"checked()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n (change)=\"onChange($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"cb-box\" aria-hidden=\"true\">\n <svg class=\"cb-mark cb-check\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M3.5 8.5l3 3 6-6.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg class=\"cb-mark cb-dash\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M4 8h8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n </span>\n @if (label(); as text) {\n <span class=\"cb-label\"\n >{{ text }}\n @if (required()) {\n <span class=\"cb-req\" aria-hidden=\"true\"> *</span>\n }\n </span>\n }\n</label>\n@if (message(); as msg) {\n <span\n class=\"cb-msg\"\n [class.is-error]=\"errorMessage()\"\n [id]=\"errorMessage() ? inputId + '-error' : inputId + '-hint'\"\n >{{ msg }}</span\n >\n}\n", styles: ["@charset \"UTF-8\";:host{--cb-size: 18px;display:inline-flex;flex-direction:column;gap:
|
|
3799
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldCheckboxComponent, isStandalone: true, selector: "fold-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange" }, host: { properties: { "class": "size()" } }, ngImport: i0, template: "<label class=\"cb\" [class.is-disabled]=\"disabled()\">\n <input\n #native\n type=\"checkbox\"\n class=\"cb-native\"\n [id]=\"inputId\"\n [checked]=\"checked()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n (change)=\"onChange($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"cb-box\" aria-hidden=\"true\">\n <svg class=\"cb-mark cb-check\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M3.5 8.5l3 3 6-6.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg class=\"cb-mark cb-dash\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M4 8h8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n </span>\n @if (label(); as text) {\n <span class=\"cb-label\"\n >{{ text }}\n @if (required()) {\n <span class=\"cb-req\" aria-hidden=\"true\"> *</span>\n }\n </span>\n }\n</label>\n@if (message(); as msg) {\n <span\n class=\"cb-msg\"\n [class.is-error]=\"errorMessage()\"\n [id]=\"errorMessage() ? inputId + '-error' : inputId + '-hint'\"\n >{{ msg }}</span\n >\n}\n", styles: ["@charset \"UTF-8\";:host{--cb-size: 18px;display:inline-flex;flex-direction:column;gap:var(--fold-space-xs)}:host(.sm){--cb-size: 15px}.cb{position:relative;display:inline-flex;align-items:center;gap:var(--fold-space-sm);cursor:pointer;font-size:var(--fold-text-sm);color:var(--fold-color-text);-webkit-user-select:none;user-select:none}.cb.is-disabled{cursor:not-allowed;color:var(--fold-color-text-muted)}.cb-native{position:absolute;top:0;left:0;width:var(--cb-size);height:var(--cb-size);margin:0;opacity:0;cursor:inherit}.cb-box{position:relative;flex-shrink:0;display:inline-grid;place-items:center;width:var(--cb-size);height:var(--cb-size);border:1.5px solid var(--fold-color-border);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-card);color:var(--fold-color-on-primary);transition:background var(--fold-motion-fast),border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}.cb:hover .cb-native:not(:disabled)~.cb-box{border-color:var(--fold-color-primary)}.cb-native:checked~.cb-box,.cb-native:indeterminate~.cb-box{background:var(--fold-color-primary);border-color:var(--fold-color-primary)}.cb-native:focus-visible~.cb-box{box-shadow:0 0 0 3px color-mix(in srgb,var(--fold-color-primary) 35%,transparent)}.cb-mark{grid-area:1/1;width:100%;height:100%;opacity:0;transform:scale(.6);transition:opacity var(--fold-motion-fast),transform var(--fold-motion-fast)}.cb-native:checked~.cb-box .cb-check{opacity:1;transform:none}.cb-native:indeterminate~.cb-box .cb-check{opacity:0}.cb-native:indeterminate~.cb-box .cb-dash{opacity:1;transform:none}.cb-native:disabled~.cb-box{background:var(--fold-color-surface-raised);border-color:var(--fold-color-border-subtle)}.cb-native:checked:disabled~.cb-box,.cb-native:indeterminate:disabled~.cb-box{background:color-mix(in srgb,var(--fold-color-primary) 45%,var(--fold-color-surface-sunken));border-color:transparent}.cb-label{line-height:1.3}.cb-req{color:var(--fold-color-alert)}.cb-msg{padding-left:calc(var(--cb-size) + var(--fold-space-sm));font-size:var(--fold-text-xs);color:var(--fold-color-text-muted)}.cb-msg.is-error{color:var(--fold-color-alert)}@media(prefers-reduced-motion:reduce){.cb-box,.cb-mark{transition:none}}@media(forced-colors:active){.cb-box{border-color:CanvasText}.cb-native:checked~.cb-box,.cb-native:indeterminate~.cb-box{background:Highlight;border-color:Highlight}.cb-mark{color:HighlightText}.cb-native:focus-visible~.cb-box{outline:2px solid CanvasText;outline-offset:2px}}\n"] });
|
|
3753
3800
|
}
|
|
3754
3801
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCheckboxComponent, decorators: [{
|
|
3755
3802
|
type: Component,
|
|
3756
|
-
args: [{ selector: "fold-checkbox", standalone: true, host: { "[class]": "size()" }, template: "<label class=\"cb\" [class.is-disabled]=\"disabled()\">\n <input\n #native\n type=\"checkbox\"\n class=\"cb-native\"\n [id]=\"inputId\"\n [checked]=\"checked()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n (change)=\"onChange($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"cb-box\" aria-hidden=\"true\">\n <svg class=\"cb-mark cb-check\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M3.5 8.5l3 3 6-6.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg class=\"cb-mark cb-dash\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M4 8h8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n </span>\n @if (label(); as text) {\n <span class=\"cb-label\"\n >{{ text }}\n @if (required()) {\n <span class=\"cb-req\" aria-hidden=\"true\"> *</span>\n }\n </span>\n }\n</label>\n@if (message(); as msg) {\n <span\n class=\"cb-msg\"\n [class.is-error]=\"errorMessage()\"\n [id]=\"errorMessage() ? inputId + '-error' : inputId + '-hint'\"\n >{{ msg }}</span\n >\n}\n", styles: ["@charset \"UTF-8\";:host{--cb-size: 18px;display:inline-flex;flex-direction:column;gap:
|
|
3803
|
+
args: [{ selector: "fold-checkbox", standalone: true, host: { "[class]": "size()" }, template: "<label class=\"cb\" [class.is-disabled]=\"disabled()\">\n <input\n #native\n type=\"checkbox\"\n class=\"cb-native\"\n [id]=\"inputId\"\n [checked]=\"checked()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n (change)=\"onChange($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"cb-box\" aria-hidden=\"true\">\n <svg class=\"cb-mark cb-check\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M3.5 8.5l3 3 6-6.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg class=\"cb-mark cb-dash\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M4 8h8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n </span>\n @if (label(); as text) {\n <span class=\"cb-label\"\n >{{ text }}\n @if (required()) {\n <span class=\"cb-req\" aria-hidden=\"true\"> *</span>\n }\n </span>\n }\n</label>\n@if (message(); as msg) {\n <span\n class=\"cb-msg\"\n [class.is-error]=\"errorMessage()\"\n [id]=\"errorMessage() ? inputId + '-error' : inputId + '-hint'\"\n >{{ msg }}</span\n >\n}\n", styles: ["@charset \"UTF-8\";:host{--cb-size: 18px;display:inline-flex;flex-direction:column;gap:var(--fold-space-xs)}:host(.sm){--cb-size: 15px}.cb{position:relative;display:inline-flex;align-items:center;gap:var(--fold-space-sm);cursor:pointer;font-size:var(--fold-text-sm);color:var(--fold-color-text);-webkit-user-select:none;user-select:none}.cb.is-disabled{cursor:not-allowed;color:var(--fold-color-text-muted)}.cb-native{position:absolute;top:0;left:0;width:var(--cb-size);height:var(--cb-size);margin:0;opacity:0;cursor:inherit}.cb-box{position:relative;flex-shrink:0;display:inline-grid;place-items:center;width:var(--cb-size);height:var(--cb-size);border:1.5px solid var(--fold-color-border);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-card);color:var(--fold-color-on-primary);transition:background var(--fold-motion-fast),border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}.cb:hover .cb-native:not(:disabled)~.cb-box{border-color:var(--fold-color-primary)}.cb-native:checked~.cb-box,.cb-native:indeterminate~.cb-box{background:var(--fold-color-primary);border-color:var(--fold-color-primary)}.cb-native:focus-visible~.cb-box{box-shadow:0 0 0 3px color-mix(in srgb,var(--fold-color-primary) 35%,transparent)}.cb-mark{grid-area:1/1;width:100%;height:100%;opacity:0;transform:scale(.6);transition:opacity var(--fold-motion-fast),transform var(--fold-motion-fast)}.cb-native:checked~.cb-box .cb-check{opacity:1;transform:none}.cb-native:indeterminate~.cb-box .cb-check{opacity:0}.cb-native:indeterminate~.cb-box .cb-dash{opacity:1;transform:none}.cb-native:disabled~.cb-box{background:var(--fold-color-surface-raised);border-color:var(--fold-color-border-subtle)}.cb-native:checked:disabled~.cb-box,.cb-native:indeterminate:disabled~.cb-box{background:color-mix(in srgb,var(--fold-color-primary) 45%,var(--fold-color-surface-sunken));border-color:transparent}.cb-label{line-height:1.3}.cb-req{color:var(--fold-color-alert)}.cb-msg{padding-left:calc(var(--cb-size) + var(--fold-space-sm));font-size:var(--fold-text-xs);color:var(--fold-color-text-muted)}.cb-msg.is-error{color:var(--fold-color-alert)}@media(prefers-reduced-motion:reduce){.cb-box,.cb-mark{transition:none}}@media(forced-colors:active){.cb-box{border-color:CanvasText}.cb-native:checked~.cb-box,.cb-native:indeterminate~.cb-box{background:Highlight;border-color:Highlight}.cb-mark{color:HighlightText}.cb-native:focus-visible~.cb-box{outline:2px solid CanvasText;outline-offset:2px}}\n"] }]
|
|
3757
3804
|
}], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
3758
3805
|
|
|
3759
3806
|
/** The English defaults — the base every override merges onto. */
|
|
@@ -3793,10 +3840,11 @@ function provideFoldDataTableLabels(labels) {
|
|
|
3793
3840
|
* owns the chrome (sticky sortable header, row tone accents, focus/click, the
|
|
3794
3841
|
* mobile card layout, the loading + empty states).
|
|
3795
3842
|
*
|
|
3796
|
-
* Selection
|
|
3797
|
-
*
|
|
3798
|
-
* select-all (with an indeterminate state over the
|
|
3799
|
-
* selected-row tint
|
|
3843
|
+
* Selection is a two-way model: bind `[(selected)]` with a set of row keys and
|
|
3844
|
+
* the table writes the next set back on any checkbox toggle — it renders the
|
|
3845
|
+
* checkbox column, the header select-all (with an indeterminate state over the
|
|
3846
|
+
* current rows), and the selected-row tint. Bind it one-way (`[selected]`) to
|
|
3847
|
+
* stay fully controlled.
|
|
3800
3848
|
*
|
|
3801
3849
|
* The narrow-screen behaviour is the parent's choice, not an imposed one, via
|
|
3802
3850
|
* `mobileLayout`: `scroll` (default — stay tabular, scroll horizontally),
|
|
@@ -3856,8 +3904,13 @@ class FoldDataTableComponent {
|
|
|
3856
3904
|
stickyFirst = input(false, { ...(ngDevMode ? { debugName: "stickyFirst" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3857
3905
|
/** Renders the checkbox column + header select-all. */
|
|
3858
3906
|
selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3859
|
-
/**
|
|
3860
|
-
|
|
3907
|
+
/**
|
|
3908
|
+
* Selected row keys, as a **two-way model** — bind `[(selected)]` and the
|
|
3909
|
+
* table writes the next set back on any toggle (it never mutates the set in
|
|
3910
|
+
* place). One-way `[selected]` stays fully controlled. The one source of
|
|
3911
|
+
* selection: there is no separate change output.
|
|
3912
|
+
*/
|
|
3913
|
+
selected = model(new Set(), /* @ts-ignore */
|
|
3861
3914
|
...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
3862
3915
|
/** Accessible label for a row's checkbox, e.g. `(row) => row.name`. */
|
|
3863
3916
|
selectionLabel = input(/* @ts-ignore */
|
|
@@ -3865,8 +3918,6 @@ class FoldDataTableComponent {
|
|
|
3865
3918
|
/** Per-instance label overrides (merged over the app-wide / English defaults). */
|
|
3866
3919
|
labels = input(/* @ts-ignore */
|
|
3867
3920
|
...(ngDevMode ? [undefined, { debugName: "labels" }] : /* istanbul ignore next */ []));
|
|
3868
|
-
/** Emits the next selection set on any checkbox toggle (never mutates input). */
|
|
3869
|
-
selectionChange = output();
|
|
3870
3921
|
/** Emits the clicked sortable column's `key`. */
|
|
3871
3922
|
sortChange = output();
|
|
3872
3923
|
rowClick = output();
|
|
@@ -4018,7 +4069,7 @@ class FoldDataTableComponent {
|
|
|
4018
4069
|
else {
|
|
4019
4070
|
next.add(key);
|
|
4020
4071
|
}
|
|
4021
|
-
this.
|
|
4072
|
+
this.selected.set(next);
|
|
4022
4073
|
}
|
|
4023
4074
|
/** Select-all toggles every current row; if all are already in, clears them. */
|
|
4024
4075
|
toggleAll() {
|
|
@@ -4033,7 +4084,7 @@ class FoldDataTableComponent {
|
|
|
4033
4084
|
next.delete(key);
|
|
4034
4085
|
}
|
|
4035
4086
|
});
|
|
4036
|
-
this.
|
|
4087
|
+
this.selected.set(next);
|
|
4037
4088
|
}
|
|
4038
4089
|
labelFor(row) {
|
|
4039
4090
|
return this.selectionLabel()?.(row) ?? this.l().selectRow;
|
|
@@ -4085,7 +4136,7 @@ class FoldDataTableComponent {
|
|
|
4085
4136
|
}
|
|
4086
4137
|
}
|
|
4087
4138
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4088
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldDataTableComponent, isStandalone: true, selector: "fold-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, rowTone: { classPropertyName: "rowTone", publicName: "rowTone", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, zebra: { classPropertyName: "zebra", publicName: "zebra", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, mobileLayout: { classPropertyName: "mobileLayout", publicName: "mobileLayout", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, stickyFirst: { classPropertyName: "stickyFirst", publicName: "stickyFirst", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selectionLabel: { classPropertyName: "selectionLabel", publicName: "selectionLabel", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, toolbarSurface: { classPropertyName: "toolbarSurface", publicName: "toolbarSurface", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", sortChange: "sortChange", rowClick: "rowClick" }, queries: [{ propertyName: "cells", predicate: FoldDataTableCellDirective, isSignal: true }, { propertyName: "rowCard", first: true, predicate: FoldDataTableRowCardDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"folddt-wrap\"\n [class.folddt--zebra]=\"zebra()\"\n [class.folddt--hover]=\"hover()\"\n [class.folddt--cards]=\"mobileLayout() === 'auto-cards'\"\n [class.folddt--custom]=\"mobileLayout() === 'custom'\"\n [class.folddt--compact]=\"density() === 'compact'\"\n [class.folddt--sticky-first]=\"stickyFirst()\"\n [class.folddt--select]=\"selectable()\"\n>\n <div\n class=\"folddt-toolbar\"\n [class.folddt-toolbar--sunken]=\"toolbarSurface() === 'sunken'\"\n [class.folddt-toolbar--raised]=\"toolbarSurface() === 'raised'\"\n [class.folddt-toolbar--accent]=\"toolbarSurface() === 'accent'\"\n [attr.data-surface]=\"toolbarSurface() === 'accent' ? 'accent' : null\"\n >\n <ng-content select=\"[foldToolbar]\" />\n </div>\n <div class=\"folddt-scroll\">\n <table class=\"folddt\" [attr.aria-colcount]=\"colCount()\">\n @if (caption(); as cap) {\n <caption class=\"folddt-caption\">\n {{\n cap\n }}\n </caption>\n }\n <thead>\n <tr>\n @if (selectable()) {\n <th scope=\"col\" class=\"folddt-select-h\">\n <fold-checkbox\n size=\"sm\"\n [ariaLabel]=\"l().selectAll\"\n [checked]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (checkedChange)=\"toggleAll()\"\n />\n </th>\n }\n @for (col of columns(); track col.key) {\n <th\n scope=\"col\"\n [class.is-primary-h]=\"col.key === primaryKey()\"\n [style.width]=\"col.width || null\"\n [attr.aria-sort]=\"col.sortable ? ariaSort(col.key) : null\"\n >\n @if (col.sortable) {\n <button\n type=\"button\"\n class=\"folddt-th-sort\"\n [class.right]=\"col.align === 'right'\"\n [class.center]=\"col.align === 'center'\"\n [attr.aria-label]=\"l().sortBy(col.label)\"\n (click)=\"sortChange.emit(col.key)\"\n >\n <span>{{ col.label }}</span>\n <fold-icon\n class=\"folddt-arrow\"\n [class.on]=\"isSorted(col.key)\"\n [name]=\"sortIcon(col.key)\"\n [size]=\"14\"\n />\n </button>\n } @else {\n <span\n class=\"folddt-th-plain\"\n [class.right]=\"col.align === 'right'\"\n [class.center]=\"col.align === 'center'\"\n >{{ col.label }}</span\n >\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of rows(); track keyOf(row, $index); let i = $index) {\n @let tone = toneOf(row);\n <tr\n class=\"folddt-row\"\n [class.tone-warning]=\"tone === 'warning'\"\n [class.tone-alert]=\"tone === 'alert'\"\n [class.tone-success]=\"tone === 'success'\"\n [class.clickable]=\"clickable()\"\n [class.is-selected]=\"selectable() && isRowSelected(row, i)\"\n [attr.tabindex]=\"rowTabIndex(row, i)\"\n [attr.aria-selected]=\"selectable() ? isRowSelected(row, i) : null\"\n (click)=\"onRowActivate(row)\"\n (focus)=\"onRowFocus(row, i)\"\n (keydown)=\"onRowKeydown($event, row)\"\n >\n @if (selectable()) {\n <td class=\"folddt-cell folddt-cell--select\">\n <fold-checkbox\n size=\"sm\"\n [ariaLabel]=\"labelFor(row)\"\n [checked]=\"isRowSelected(row, i)\"\n (click)=\"$event.stopPropagation()\"\n (checkedChange)=\"toggleRow(row, i)\"\n />\n </td>\n }\n @for (col of columns(); track col.key) {\n @if (col.key === primaryKey()) {\n <th\n scope=\"row\"\n class=\"folddt-cell is-primary\"\n [class.right]=\"col.align === 'right'\"\n [class.center]=\"col.align === 'center'\"\n [class.truncate]=\"col.truncate\"\n [ngClass]=\"col.cellClass || ''\"\n [attr.data-label]=\"col.label\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate(col.key)\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n />\n </th>\n } @else {\n <td\n class=\"folddt-cell\"\n [class.right]=\"col.align === 'right'\"\n [class.center]=\"col.align === 'center'\"\n [class.truncate]=\"col.truncate\"\n [ngClass]=\"col.cellClass || ''\"\n [attr.data-label]=\"col.label\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate(col.key)\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n />\n </td>\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n @if (isNarrow() && rowCardTemplate(); as card) {\n <div class=\"folddt-cardlist\" role=\"list\">\n @for (row of rows(); track keyOf(row, $index); let i = $index) {\n <div class=\"folddt-cardlist-item\" role=\"listitem\">\n <ng-container\n [ngTemplateOutlet]=\"card\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n />\n </div>\n }\n </div>\n }\n\n @if (loading()) {\n <div class=\"folddt-loading\">\n <fold-spinner [label]=\"l().loading\" />\n </div>\n } @else if (rows().length === 0 && empty(); as e) {\n <div class=\"folddt-empty\">\n <div class=\"folddt-empty-t\">{{ e.title }}</div>\n @if (e.subtitle) {\n <div class=\"folddt-empty-s\">{{ e.subtitle }}</div>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0}.folddt-wrap{--folddt-sel-w: 0px;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden;border:1px solid var(--fold-color-border-subtle);border-radius:var(--fold-radius-lg);background:var(--fold-color-surface-sunken);box-shadow:var(--fold-shadow-md)}.folddt--select{--folddt-sel-w: 44px}.folddt-scroll{flex:1 1 auto;min-height:0;overflow:auto}.folddt-toolbar{padding:12px 16px;border-bottom:1px solid var(--fold-color-border);color:var(--fold-color-text);background:color-mix(in srgb,var(--fold-color-surface-sunken) 50%,var(--fold-color-surface-card))}.folddt-toolbar:not(:has(*)){display:none}.folddt-toolbar--sunken{background:var(--fold-color-surface-sunken)}.folddt-toolbar--raised{background:var(--fold-color-surface-raised)}.folddt-toolbar--accent{background:var(--fold-color-primary);border-bottom-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}.folddt{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fold-text-sm)}.folddt-caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.folddt thead th{position:sticky;top:0;z-index:2;padding:0;text-align:left;background:color-mix(in srgb,var(--fold-color-surface-sunken) 50%,var(--fold-color-surface-card));border-bottom:1px solid var(--fold-color-border)}.folddt-th-sort,.folddt-th-plain{display:inline-flex;align-items:center;padding:12px 18px;color:var(--fold-color-text-muted);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}.folddt-th-sort{gap:6px;width:100%;border:0;background:transparent;cursor:pointer;transition:color var(--fold-motion-fast)}.folddt-th-sort:hover{color:var(--fold-color-text)}.folddt-th-sort.right{justify-content:flex-end}.folddt-th-plain.right{justify-content:flex-end;width:100%}.folddt-arrow{display:inline-flex;color:var(--fold-color-text-faded);transition:color var(--fold-motion-fast)}.folddt-arrow.on{color:var(--fold-color-primary-text)}.folddt-row{transition:background var(--fold-motion-fast)}.folddt-row.clickable{cursor:pointer}.folddt-row .folddt-cell{border-bottom:1px solid var(--fold-color-border-subtle)}.folddt-row:last-child .folddt-cell{border-bottom:0}.folddt-row:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-2px}.folddt--zebra .folddt-row:nth-child(2n):not(.tone-warning):not(.tone-alert):not(.tone-success) .folddt-cell{background:var(--fold-color-surface-subtle)}.folddt--hover .folddt-row:hover .folddt-cell{background:var(--fold-color-surface-raised)}.folddt--hover .folddt-row.tone-warning:hover .folddt-cell{background:color-mix(in srgb,var(--fold-color-warning) 16%,transparent)}.folddt--hover .folddt-row.tone-alert:hover .folddt-cell{background:color-mix(in srgb,var(--fold-color-alert) 17%,transparent)}.folddt-cell{padding:11px 18px;color:var(--fold-color-text);font-weight:inherit;text-align:left;white-space:nowrap;vertical-align:middle}.folddt-cell.right{text-align:right}.folddt-cell.center{text-align:center}.folddt-cell.truncate{max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.folddt-row.tone-warning .folddt-cell:first-child{box-shadow:inset 3px 0 0 var(--fold-color-warning)}.folddt-row.tone-warning .folddt-cell{background:color-mix(in srgb,var(--fold-color-warning) 10%,transparent)}.folddt-row.tone-alert .folddt-cell:first-child{box-shadow:inset 3px 0 0 var(--fold-color-alert)}.folddt-row.tone-alert .folddt-cell{background:color-mix(in srgb,var(--fold-color-alert) 11%,transparent)}.folddt-row.tone-success .folddt-cell:first-child{box-shadow:inset 3px 0 0 var(--fold-color-success)}.folddt-row.tone-success .folddt-cell{background:color-mix(in srgb,var(--fold-color-success) 9%,transparent)}.folddt-loading{display:flex;align-items:center;justify-content:center;padding:48px 24px}.folddt-empty{padding:48px 24px;text-align:center}.folddt-empty-t{font-size:var(--fold-text-md);font-weight:600;color:var(--fold-color-text)}.folddt-empty-s{font-size:var(--fold-text-sm);color:var(--fold-color-text-muted);margin-top:4px}.folddt-cardlist{display:none}.folddt-select-h,.folddt-cell--select{width:var(--folddt-sel-w);padding-left:16px;padding-right:0;text-align:left;white-space:nowrap}.folddt-select-h{vertical-align:middle}.folddt-row.is-selected .folddt-cell{background:color-mix(in srgb,var(--fold-color-primary) 8%,transparent)}.folddt-row.is-selected .folddt-cell:first-child{box-shadow:inset 3px 0 0 var(--fold-color-primary)}.folddt--compact .folddt-cell{padding:6px 14px}.folddt--compact .folddt-th-sort,.folddt--compact .folddt-th-plain{padding:8px 14px}.folddt--compact .folddt-cell--select{padding-left:12px;padding-right:0}.folddt--sticky-first .folddt-cell--select,.folddt--sticky-first .folddt-select-h{position:sticky;left:0;background:var(--fold-color-surface-sunken)}.folddt--sticky-first .folddt-select-h{z-index:3}.folddt--sticky-first .folddt-cell.is-primary{position:sticky;left:var(--folddt-sel-w);z-index:1;background:var(--fold-color-surface-sunken)}.folddt--sticky-first thead th.is-primary-h{position:sticky;left:var(--folddt-sel-w);z-index:3}.folddt--sticky-first .folddt-row.tone-warning .folddt-cell.is-primary{background:color-mix(in srgb,var(--fold-color-warning) 10%,var(--fold-color-surface-sunken))}.folddt--sticky-first .folddt-row.tone-alert .folddt-cell.is-primary{background:color-mix(in srgb,var(--fold-color-alert) 11%,var(--fold-color-surface-sunken))}.folddt--sticky-first .folddt-row.tone-success .folddt-cell.is-primary{background:color-mix(in srgb,var(--fold-color-success) 9%,var(--fold-color-surface-sunken))}.folddt--sticky-first .folddt-row.is-selected .folddt-cell.is-primary{background:color-mix(in srgb,var(--fold-color-primary) 8%,var(--fold-color-surface-sunken))}@media(prefers-reduced-motion:reduce){.folddt-row,.folddt-th-sort,.folddt-arrow{transition:none}}@media(forced-colors:active){.folddt-row.is-selected .folddt-cell:first-child,.folddt-row.tone-warning .folddt-cell:first-child,.folddt-row.tone-alert .folddt-cell:first-child,.folddt-row.tone-success .folddt-cell:first-child{border-inline-start:3px solid Highlight}.folddt-row:focus-visible{outline-color:Highlight}}@media(max-width:700px){.folddt--cards{overflow-x:hidden;border:0;border-radius:0;background:transparent;box-shadow:none}.folddt--cards .folddt{display:block;width:100%}.folddt--cards thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.folddt--cards tbody{display:flex;flex-direction:column;gap:10px}.folddt--cards .folddt-row{display:block;border:1px solid var(--fold-color-border-subtle);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-sunken);padding:4px 14px 8px;box-shadow:var(--fold-shadow-sm)}.folddt--cards .folddt-row.tone-warning{border-left:3px solid var(--fold-color-warning)}.folddt--cards .folddt-row.tone-alert{border-left:3px solid var(--fold-color-alert)}.folddt--cards .folddt-row.tone-success{border-left:3px solid var(--fold-color-success)}.folddt--cards .folddt-row .folddt-cell:first-child{box-shadow:none}.folddt--cards .folddt-cell{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;white-space:normal;border-bottom:1px solid var(--fold-color-border-subtle)}.folddt--cards .folddt-cell:last-child{border-bottom:0}.folddt--cards .folddt-cell:before{content:attr(data-label);flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fold-color-text-faded)}.folddt--cards .folddt-cell.right{text-align:left}.folddt--cards .folddt-cell.is-primary{justify-content:flex-start;padding:8px 0 10px;border-bottom:1px solid var(--fold-color-border)}.folddt--cards .folddt-cell.is-primary:before{display:none}.folddt--cards .folddt-cell--select{width:auto;justify-content:flex-start;padding:8px 0}.folddt--cards .folddt-cell--select:before{display:none}.folddt--cards .folddt-cell--select,.folddt--cards .folddt-cell.is-primary,.folddt--cards.folddt--sticky-first .folddt-cell{position:static}.folddt--custom{overflow-x:hidden;border:0;border-radius:0;background:transparent;box-shadow:none}.folddt--custom .folddt{display:none}.folddt--custom .folddt-cardlist{display:flex;flex-direction:column;gap:10px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "title"] }, { kind: "component", type: FoldSpinnerComponent, selector: "fold-spinner", inputs: ["size", "label"] }, { kind: "component", type: FoldCheckboxComponent, selector: "fold-checkbox", inputs: ["checked", "disabled", "touched", "errors", "indeterminate", "label", "ariaLabel", "hint", "required", "size"], outputs: ["checkedChange", "touchedChange"] }] });
|
|
4139
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldDataTableComponent, isStandalone: true, selector: "fold-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, rowTone: { classPropertyName: "rowTone", publicName: "rowTone", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, zebra: { classPropertyName: "zebra", publicName: "zebra", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, mobileLayout: { classPropertyName: "mobileLayout", publicName: "mobileLayout", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, stickyFirst: { classPropertyName: "stickyFirst", publicName: "stickyFirst", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selectionLabel: { classPropertyName: "selectionLabel", publicName: "selectionLabel", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, toolbarSurface: { classPropertyName: "toolbarSurface", publicName: "toolbarSurface", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", sortChange: "sortChange", rowClick: "rowClick" }, queries: [{ propertyName: "cells", predicate: FoldDataTableCellDirective, isSignal: true }, { propertyName: "rowCard", first: true, predicate: FoldDataTableRowCardDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"folddt-wrap\"\n [class.folddt--zebra]=\"zebra()\"\n [class.folddt--hover]=\"hover()\"\n [class.folddt--cards]=\"mobileLayout() === 'auto-cards'\"\n [class.folddt--custom]=\"mobileLayout() === 'custom'\"\n [class.folddt--compact]=\"density() === 'compact'\"\n [class.folddt--sticky-first]=\"stickyFirst()\"\n [class.folddt--select]=\"selectable()\"\n>\n <div\n class=\"folddt-toolbar\"\n [class.folddt-toolbar--sunken]=\"toolbarSurface() === 'sunken'\"\n [class.folddt-toolbar--raised]=\"toolbarSurface() === 'raised'\"\n [class.folddt-toolbar--accent]=\"toolbarSurface() === 'accent'\"\n [attr.data-surface]=\"toolbarSurface() === 'accent' ? 'accent' : null\"\n >\n <ng-content select=\"[foldToolbar]\" />\n </div>\n <div class=\"folddt-scroll\">\n <table class=\"folddt\" [attr.aria-colcount]=\"colCount()\">\n @if (caption(); as cap) {\n <caption class=\"folddt-caption\">\n {{\n cap\n }}\n </caption>\n }\n <thead>\n <tr>\n @if (selectable()) {\n <th scope=\"col\" class=\"folddt-select-h\">\n <fold-checkbox\n size=\"sm\"\n [ariaLabel]=\"l().selectAll\"\n [checked]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (checkedChange)=\"toggleAll()\"\n />\n </th>\n }\n @for (col of columns(); track col.key) {\n <th\n scope=\"col\"\n [class.is-primary-h]=\"col.key === primaryKey()\"\n [style.width]=\"col.width || null\"\n [attr.aria-sort]=\"col.sortable ? ariaSort(col.key) : null\"\n >\n @if (col.sortable) {\n <button\n type=\"button\"\n class=\"folddt-th-sort\"\n [class.right]=\"col.align === 'right'\"\n [class.center]=\"col.align === 'center'\"\n [attr.aria-label]=\"l().sortBy(col.label)\"\n (click)=\"sortChange.emit(col.key)\"\n >\n <span>{{ col.label }}</span>\n <fold-icon\n class=\"folddt-arrow\"\n [class.on]=\"isSorted(col.key)\"\n [name]=\"sortIcon(col.key)\"\n [size]=\"14\"\n />\n </button>\n } @else {\n <span\n class=\"folddt-th-plain\"\n [class.right]=\"col.align === 'right'\"\n [class.center]=\"col.align === 'center'\"\n >{{ col.label }}</span\n >\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of rows(); track keyOf(row, $index); let i = $index) {\n @let tone = toneOf(row);\n <tr\n class=\"folddt-row\"\n [class.tone-warning]=\"tone === 'warning'\"\n [class.tone-alert]=\"tone === 'alert'\"\n [class.tone-success]=\"tone === 'success'\"\n [class.clickable]=\"clickable()\"\n [class.is-selected]=\"selectable() && isRowSelected(row, i)\"\n [attr.tabindex]=\"rowTabIndex(row, i)\"\n [attr.aria-selected]=\"selectable() ? isRowSelected(row, i) : null\"\n (click)=\"onRowActivate(row)\"\n (focus)=\"onRowFocus(row, i)\"\n (keydown)=\"onRowKeydown($event, row)\"\n >\n @if (selectable()) {\n <td class=\"folddt-cell folddt-cell--select\">\n <fold-checkbox\n size=\"sm\"\n [ariaLabel]=\"labelFor(row)\"\n [checked]=\"isRowSelected(row, i)\"\n (click)=\"$event.stopPropagation()\"\n (checkedChange)=\"toggleRow(row, i)\"\n />\n </td>\n }\n @for (col of columns(); track col.key) {\n @if (col.key === primaryKey()) {\n <th\n scope=\"row\"\n class=\"folddt-cell is-primary\"\n [class.right]=\"col.align === 'right'\"\n [class.center]=\"col.align === 'center'\"\n [class.truncate]=\"col.truncate\"\n [ngClass]=\"col.cellClass || ''\"\n [attr.data-label]=\"col.label\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate(col.key)\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n />\n </th>\n } @else {\n <td\n class=\"folddt-cell\"\n [class.right]=\"col.align === 'right'\"\n [class.center]=\"col.align === 'center'\"\n [class.truncate]=\"col.truncate\"\n [ngClass]=\"col.cellClass || ''\"\n [attr.data-label]=\"col.label\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate(col.key)\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n />\n </td>\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n @if (isNarrow() && rowCardTemplate(); as card) {\n <div class=\"folddt-cardlist\" role=\"list\">\n @for (row of rows(); track keyOf(row, $index); let i = $index) {\n <div class=\"folddt-cardlist-item\" role=\"listitem\">\n <ng-container\n [ngTemplateOutlet]=\"card\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n />\n </div>\n }\n </div>\n }\n\n @if (loading()) {\n <div class=\"folddt-loading\">\n <fold-spinner [label]=\"l().loading\" />\n </div>\n } @else if (rows().length === 0 && empty(); as e) {\n <div class=\"folddt-empty\">\n <div class=\"folddt-empty-t\">{{ e.title }}</div>\n @if (e.subtitle) {\n <div class=\"folddt-empty-s\">{{ e.subtitle }}</div>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0}.folddt-wrap{--folddt-sel-w: 0px;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden;border:1px solid var(--fold-color-border-subtle);border-radius:var(--fold-radius-lg);background:var(--fold-color-surface-sunken);box-shadow:var(--fold-shadow-md)}.folddt--select{--folddt-sel-w: 44px}.folddt-scroll{flex:1 1 auto;min-height:0;overflow:auto}.folddt-toolbar{padding:var(--fold-space-md) var(--fold-space-lg);border-bottom:1px solid var(--fold-color-border);color:var(--fold-color-text);background:color-mix(in srgb,var(--fold-color-surface-sunken) 50%,var(--fold-color-surface-card))}.folddt-toolbar:not(:has(*)){display:none}.folddt-toolbar--sunken{background:var(--fold-color-surface-sunken)}.folddt-toolbar--raised{background:var(--fold-color-surface-raised)}.folddt-toolbar--accent{background:var(--fold-color-primary);border-bottom-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}.folddt{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fold-text-sm)}.folddt-caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.folddt thead th{position:sticky;top:0;z-index:2;padding:0;text-align:left;background:color-mix(in srgb,var(--fold-color-surface-sunken) 50%,var(--fold-color-surface-card));border-bottom:1px solid var(--fold-color-border)}.folddt-th-sort,.folddt-th-plain{display:inline-flex;align-items:center;padding:var(--fold-space-md) var(--fold-space-lg);color:var(--fold-color-text-muted);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}.folddt-th-sort{gap:var(--fold-space-sm);width:100%;border:0;background:transparent;cursor:pointer;transition:color var(--fold-motion-fast)}.folddt-th-sort:hover{color:var(--fold-color-text)}.folddt-th-sort.right{justify-content:flex-end}.folddt-th-plain.right{justify-content:flex-end;width:100%}.folddt-arrow{display:inline-flex;color:var(--fold-color-text-faded);transition:color var(--fold-motion-fast)}.folddt-arrow.on{color:var(--fold-color-primary-text)}.folddt-row{transition:background var(--fold-motion-fast)}.folddt-row.clickable{cursor:pointer}.folddt-row .folddt-cell{border-bottom:1px solid var(--fold-color-border-subtle)}.folddt-row:last-child .folddt-cell{border-bottom:0}.folddt-row:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-2px}.folddt--zebra .folddt-row:nth-child(2n):not(.tone-warning):not(.tone-alert):not(.tone-success) .folddt-cell{background:var(--fold-color-surface-subtle)}.folddt--hover .folddt-row:hover .folddt-cell{background:var(--fold-color-surface-raised)}.folddt--hover .folddt-row.tone-warning:hover .folddt-cell{background:color-mix(in srgb,var(--fold-color-warning) 16%,transparent)}.folddt--hover .folddt-row.tone-alert:hover .folddt-cell{background:color-mix(in srgb,var(--fold-color-alert) 17%,transparent)}.folddt-cell{padding:var(--fold-space-md) var(--fold-space-lg);color:var(--fold-color-text);font-weight:inherit;text-align:left;white-space:nowrap;vertical-align:middle}.folddt-cell.right{text-align:right}.folddt-cell.center{text-align:center}.folddt-cell.truncate{max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.folddt-row.tone-warning .folddt-cell:first-child{box-shadow:inset 3px 0 0 var(--fold-color-warning)}.folddt-row.tone-warning .folddt-cell{background:color-mix(in srgb,var(--fold-color-warning) 10%,transparent)}.folddt-row.tone-alert .folddt-cell:first-child{box-shadow:inset 3px 0 0 var(--fold-color-alert)}.folddt-row.tone-alert .folddt-cell{background:color-mix(in srgb,var(--fold-color-alert) 11%,transparent)}.folddt-row.tone-success .folddt-cell:first-child{box-shadow:inset 3px 0 0 var(--fold-color-success)}.folddt-row.tone-success .folddt-cell{background:color-mix(in srgb,var(--fold-color-success) 9%,transparent)}.folddt-loading{display:flex;align-items:center;justify-content:center;padding:var(--fold-space-5xl) var(--fold-space-2xl)}.folddt-empty{padding:var(--fold-space-5xl) var(--fold-space-2xl);text-align:center}.folddt-empty-t{font-size:var(--fold-text-md);font-weight:600;color:var(--fold-color-text)}.folddt-empty-s{font-size:var(--fold-text-sm);color:var(--fold-color-text-muted);margin-top:var(--fold-space-xs)}.folddt-cardlist{display:none}.folddt-select-h,.folddt-cell--select{width:var(--folddt-sel-w);padding-left:var(--fold-space-lg);padding-right:0;text-align:left;white-space:nowrap}.folddt-select-h{vertical-align:middle}.folddt-row.is-selected .folddt-cell{background:color-mix(in srgb,var(--fold-color-primary) 8%,transparent)}.folddt-row.is-selected .folddt-cell:first-child{box-shadow:inset 3px 0 0 var(--fold-color-primary)}.folddt--compact .folddt-cell,.folddt--compact .folddt-th-sort,.folddt--compact .folddt-th-plain{padding:var(--fold-space-sm) var(--fold-space-md)}.folddt--compact .folddt-cell--select{padding-left:var(--fold-space-md);padding-right:0}.folddt--sticky-first .folddt-cell--select,.folddt--sticky-first .folddt-select-h{position:sticky;left:0;background:var(--fold-color-surface-sunken)}.folddt--sticky-first .folddt-select-h{z-index:3}.folddt--sticky-first .folddt-cell.is-primary{position:sticky;left:var(--folddt-sel-w);z-index:1;background:var(--fold-color-surface-sunken)}.folddt--sticky-first thead th.is-primary-h{position:sticky;left:var(--folddt-sel-w);z-index:3}.folddt--sticky-first .folddt-row.tone-warning .folddt-cell.is-primary{background:color-mix(in srgb,var(--fold-color-warning) 10%,var(--fold-color-surface-sunken))}.folddt--sticky-first .folddt-row.tone-alert .folddt-cell.is-primary{background:color-mix(in srgb,var(--fold-color-alert) 11%,var(--fold-color-surface-sunken))}.folddt--sticky-first .folddt-row.tone-success .folddt-cell.is-primary{background:color-mix(in srgb,var(--fold-color-success) 9%,var(--fold-color-surface-sunken))}.folddt--sticky-first .folddt-row.is-selected .folddt-cell.is-primary{background:color-mix(in srgb,var(--fold-color-primary) 8%,var(--fold-color-surface-sunken))}@media(prefers-reduced-motion:reduce){.folddt-row,.folddt-th-sort,.folddt-arrow{transition:none}}@media(forced-colors:active){.folddt-row.is-selected .folddt-cell:first-child,.folddt-row.tone-warning .folddt-cell:first-child,.folddt-row.tone-alert .folddt-cell:first-child,.folddt-row.tone-success .folddt-cell:first-child{border-inline-start:3px solid Highlight}.folddt-row:focus-visible{outline-color:Highlight}}@media(max-width:700px){.folddt--cards{overflow-x:hidden;border:0;border-radius:0;background:transparent;box-shadow:none}.folddt--cards .folddt{display:block;width:100%}.folddt--cards thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.folddt--cards tbody{display:flex;flex-direction:column;gap:var(--fold-space-sm)}.folddt--cards .folddt-row{display:block;border:1px solid var(--fold-color-border-subtle);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-sunken);padding:var(--fold-space-xs) var(--fold-space-md) var(--fold-space-sm);box-shadow:var(--fold-shadow-sm)}.folddt--cards .folddt-row.tone-warning{border-left:3px solid var(--fold-color-warning)}.folddt--cards .folddt-row.tone-alert{border-left:3px solid var(--fold-color-alert)}.folddt--cards .folddt-row.tone-success{border-left:3px solid var(--fold-color-success)}.folddt--cards .folddt-row .folddt-cell:first-child{box-shadow:none}.folddt--cards .folddt-cell{display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-md);padding:var(--fold-space-sm) 0;white-space:normal;border-bottom:1px solid var(--fold-color-border-subtle)}.folddt--cards .folddt-cell:last-child{border-bottom:0}.folddt--cards .folddt-cell:before{content:attr(data-label);flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fold-color-text-faded)}.folddt--cards .folddt-cell.right{text-align:left}.folddt--cards .folddt-cell.is-primary{justify-content:flex-start;padding:var(--fold-space-sm) 0 var(--fold-space-sm);border-bottom:1px solid var(--fold-color-border)}.folddt--cards .folddt-cell.is-primary:before{display:none}.folddt--cards .folddt-cell--select{width:auto;justify-content:flex-start;padding:var(--fold-space-sm) 0}.folddt--cards .folddt-cell--select:before{display:none}.folddt--cards .folddt-cell--select,.folddt--cards .folddt-cell.is-primary,.folddt--cards.folddt--sticky-first .folddt-cell{position:static}.folddt--custom{overflow-x:hidden;border:0;border-radius:0;background:transparent;box-shadow:none}.folddt--custom .folddt{display:none}.folddt--custom .folddt-cardlist{display:flex;flex-direction:column;gap:var(--fold-space-sm)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldSpinnerComponent, selector: "fold-spinner", inputs: ["size", "label"] }, { kind: "component", type: FoldCheckboxComponent, selector: "fold-checkbox", inputs: ["checked", "disabled", "touched", "errors", "indeterminate", "label", "ariaLabel", "hint", "required", "size"], outputs: ["checkedChange", "touchedChange"] }] });
|
|
4089
4140
|
}
|
|
4090
4141
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldDataTableComponent, decorators: [{
|
|
4091
4142
|
type: Component,
|
|
@@ -4095,8 +4146,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
4095
4146
|
FoldIconComponent,
|
|
4096
4147
|
FoldSpinnerComponent,
|
|
4097
4148
|
FoldCheckboxComponent,
|
|
4098
|
-
], template: "<div\n class=\"folddt-wrap\"\n [class.folddt--zebra]=\"zebra()\"\n [class.folddt--hover]=\"hover()\"\n [class.folddt--cards]=\"mobileLayout() === 'auto-cards'\"\n [class.folddt--custom]=\"mobileLayout() === 'custom'\"\n [class.folddt--compact]=\"density() === 'compact'\"\n [class.folddt--sticky-first]=\"stickyFirst()\"\n [class.folddt--select]=\"selectable()\"\n>\n <div\n class=\"folddt-toolbar\"\n [class.folddt-toolbar--sunken]=\"toolbarSurface() === 'sunken'\"\n [class.folddt-toolbar--raised]=\"toolbarSurface() === 'raised'\"\n [class.folddt-toolbar--accent]=\"toolbarSurface() === 'accent'\"\n [attr.data-surface]=\"toolbarSurface() === 'accent' ? 'accent' : null\"\n >\n <ng-content select=\"[foldToolbar]\" />\n </div>\n <div class=\"folddt-scroll\">\n <table class=\"folddt\" [attr.aria-colcount]=\"colCount()\">\n @if (caption(); as cap) {\n <caption class=\"folddt-caption\">\n {{\n cap\n }}\n </caption>\n }\n <thead>\n <tr>\n @if (selectable()) {\n <th scope=\"col\" class=\"folddt-select-h\">\n <fold-checkbox\n size=\"sm\"\n [ariaLabel]=\"l().selectAll\"\n [checked]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (checkedChange)=\"toggleAll()\"\n />\n </th>\n }\n @for (col of columns(); track col.key) {\n <th\n scope=\"col\"\n [class.is-primary-h]=\"col.key === primaryKey()\"\n [style.width]=\"col.width || null\"\n [attr.aria-sort]=\"col.sortable ? ariaSort(col.key) : null\"\n >\n @if (col.sortable) {\n <button\n type=\"button\"\n class=\"folddt-th-sort\"\n [class.right]=\"col.align === 'right'\"\n [class.center]=\"col.align === 'center'\"\n [attr.aria-label]=\"l().sortBy(col.label)\"\n (click)=\"sortChange.emit(col.key)\"\n >\n <span>{{ col.label }}</span>\n <fold-icon\n class=\"folddt-arrow\"\n [class.on]=\"isSorted(col.key)\"\n [name]=\"sortIcon(col.key)\"\n [size]=\"14\"\n />\n </button>\n } @else {\n <span\n class=\"folddt-th-plain\"\n [class.right]=\"col.align === 'right'\"\n [class.center]=\"col.align === 'center'\"\n >{{ col.label }}</span\n >\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of rows(); track keyOf(row, $index); let i = $index) {\n @let tone = toneOf(row);\n <tr\n class=\"folddt-row\"\n [class.tone-warning]=\"tone === 'warning'\"\n [class.tone-alert]=\"tone === 'alert'\"\n [class.tone-success]=\"tone === 'success'\"\n [class.clickable]=\"clickable()\"\n [class.is-selected]=\"selectable() && isRowSelected(row, i)\"\n [attr.tabindex]=\"rowTabIndex(row, i)\"\n [attr.aria-selected]=\"selectable() ? isRowSelected(row, i) : null\"\n (click)=\"onRowActivate(row)\"\n (focus)=\"onRowFocus(row, i)\"\n (keydown)=\"onRowKeydown($event, row)\"\n >\n @if (selectable()) {\n <td class=\"folddt-cell folddt-cell--select\">\n <fold-checkbox\n size=\"sm\"\n [ariaLabel]=\"labelFor(row)\"\n [checked]=\"isRowSelected(row, i)\"\n (click)=\"$event.stopPropagation()\"\n (checkedChange)=\"toggleRow(row, i)\"\n />\n </td>\n }\n @for (col of columns(); track col.key) {\n @if (col.key === primaryKey()) {\n <th\n scope=\"row\"\n class=\"folddt-cell is-primary\"\n [class.right]=\"col.align === 'right'\"\n [class.center]=\"col.align === 'center'\"\n [class.truncate]=\"col.truncate\"\n [ngClass]=\"col.cellClass || ''\"\n [attr.data-label]=\"col.label\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate(col.key)\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n />\n </th>\n } @else {\n <td\n class=\"folddt-cell\"\n [class.right]=\"col.align === 'right'\"\n [class.center]=\"col.align === 'center'\"\n [class.truncate]=\"col.truncate\"\n [ngClass]=\"col.cellClass || ''\"\n [attr.data-label]=\"col.label\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate(col.key)\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n />\n </td>\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n @if (isNarrow() && rowCardTemplate(); as card) {\n <div class=\"folddt-cardlist\" role=\"list\">\n @for (row of rows(); track keyOf(row, $index); let i = $index) {\n <div class=\"folddt-cardlist-item\" role=\"listitem\">\n <ng-container\n [ngTemplateOutlet]=\"card\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n />\n </div>\n }\n </div>\n }\n\n @if (loading()) {\n <div class=\"folddt-loading\">\n <fold-spinner [label]=\"l().loading\" />\n </div>\n } @else if (rows().length === 0 && empty(); as e) {\n <div class=\"folddt-empty\">\n <div class=\"folddt-empty-t\">{{ e.title }}</div>\n @if (e.subtitle) {\n <div class=\"folddt-empty-s\">{{ e.subtitle }}</div>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0}.folddt-wrap{--folddt-sel-w: 0px;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden;border:1px solid var(--fold-color-border-subtle);border-radius:var(--fold-radius-lg);background:var(--fold-color-surface-sunken);box-shadow:var(--fold-shadow-md)}.folddt--select{--folddt-sel-w: 44px}.folddt-scroll{flex:1 1 auto;min-height:0;overflow:auto}.folddt-toolbar{padding:12px 16px;border-bottom:1px solid var(--fold-color-border);color:var(--fold-color-text);background:color-mix(in srgb,var(--fold-color-surface-sunken) 50%,var(--fold-color-surface-card))}.folddt-toolbar:not(:has(*)){display:none}.folddt-toolbar--sunken{background:var(--fold-color-surface-sunken)}.folddt-toolbar--raised{background:var(--fold-color-surface-raised)}.folddt-toolbar--accent{background:var(--fold-color-primary);border-bottom-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}.folddt{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fold-text-sm)}.folddt-caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.folddt thead th{position:sticky;top:0;z-index:2;padding:0;text-align:left;background:color-mix(in srgb,var(--fold-color-surface-sunken) 50%,var(--fold-color-surface-card));border-bottom:1px solid var(--fold-color-border)}.folddt-th-sort,.folddt-th-plain{display:inline-flex;align-items:center;padding:12px 18px;color:var(--fold-color-text-muted);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}.folddt-th-sort{gap:6px;width:100%;border:0;background:transparent;cursor:pointer;transition:color var(--fold-motion-fast)}.folddt-th-sort:hover{color:var(--fold-color-text)}.folddt-th-sort.right{justify-content:flex-end}.folddt-th-plain.right{justify-content:flex-end;width:100%}.folddt-arrow{display:inline-flex;color:var(--fold-color-text-faded);transition:color var(--fold-motion-fast)}.folddt-arrow.on{color:var(--fold-color-primary-text)}.folddt-row{transition:background var(--fold-motion-fast)}.folddt-row.clickable{cursor:pointer}.folddt-row .folddt-cell{border-bottom:1px solid var(--fold-color-border-subtle)}.folddt-row:last-child .folddt-cell{border-bottom:0}.folddt-row:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-2px}.folddt--zebra .folddt-row:nth-child(2n):not(.tone-warning):not(.tone-alert):not(.tone-success) .folddt-cell{background:var(--fold-color-surface-subtle)}.folddt--hover .folddt-row:hover .folddt-cell{background:var(--fold-color-surface-raised)}.folddt--hover .folddt-row.tone-warning:hover .folddt-cell{background:color-mix(in srgb,var(--fold-color-warning) 16%,transparent)}.folddt--hover .folddt-row.tone-alert:hover .folddt-cell{background:color-mix(in srgb,var(--fold-color-alert) 17%,transparent)}.folddt-cell{padding:11px 18px;color:var(--fold-color-text);font-weight:inherit;text-align:left;white-space:nowrap;vertical-align:middle}.folddt-cell.right{text-align:right}.folddt-cell.center{text-align:center}.folddt-cell.truncate{max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.folddt-row.tone-warning .folddt-cell:first-child{box-shadow:inset 3px 0 0 var(--fold-color-warning)}.folddt-row.tone-warning .folddt-cell{background:color-mix(in srgb,var(--fold-color-warning) 10%,transparent)}.folddt-row.tone-alert .folddt-cell:first-child{box-shadow:inset 3px 0 0 var(--fold-color-alert)}.folddt-row.tone-alert .folddt-cell{background:color-mix(in srgb,var(--fold-color-alert) 11%,transparent)}.folddt-row.tone-success .folddt-cell:first-child{box-shadow:inset 3px 0 0 var(--fold-color-success)}.folddt-row.tone-success .folddt-cell{background:color-mix(in srgb,var(--fold-color-success) 9%,transparent)}.folddt-loading{display:flex;align-items:center;justify-content:center;padding:48px 24px}.folddt-empty{padding:48px 24px;text-align:center}.folddt-empty-t{font-size:var(--fold-text-md);font-weight:600;color:var(--fold-color-text)}.folddt-empty-s{font-size:var(--fold-text-sm);color:var(--fold-color-text-muted);margin-top:4px}.folddt-cardlist{display:none}.folddt-select-h,.folddt-cell--select{width:var(--folddt-sel-w);padding-left:16px;padding-right:0;text-align:left;white-space:nowrap}.folddt-select-h{vertical-align:middle}.folddt-row.is-selected .folddt-cell{background:color-mix(in srgb,var(--fold-color-primary) 8%,transparent)}.folddt-row.is-selected .folddt-cell:first-child{box-shadow:inset 3px 0 0 var(--fold-color-primary)}.folddt--compact .folddt-cell{padding:6px 14px}.folddt--compact .folddt-th-sort,.folddt--compact .folddt-th-plain{padding:8px 14px}.folddt--compact .folddt-cell--select{padding-left:12px;padding-right:0}.folddt--sticky-first .folddt-cell--select,.folddt--sticky-first .folddt-select-h{position:sticky;left:0;background:var(--fold-color-surface-sunken)}.folddt--sticky-first .folddt-select-h{z-index:3}.folddt--sticky-first .folddt-cell.is-primary{position:sticky;left:var(--folddt-sel-w);z-index:1;background:var(--fold-color-surface-sunken)}.folddt--sticky-first thead th.is-primary-h{position:sticky;left:var(--folddt-sel-w);z-index:3}.folddt--sticky-first .folddt-row.tone-warning .folddt-cell.is-primary{background:color-mix(in srgb,var(--fold-color-warning) 10%,var(--fold-color-surface-sunken))}.folddt--sticky-first .folddt-row.tone-alert .folddt-cell.is-primary{background:color-mix(in srgb,var(--fold-color-alert) 11%,var(--fold-color-surface-sunken))}.folddt--sticky-first .folddt-row.tone-success .folddt-cell.is-primary{background:color-mix(in srgb,var(--fold-color-success) 9%,var(--fold-color-surface-sunken))}.folddt--sticky-first .folddt-row.is-selected .folddt-cell.is-primary{background:color-mix(in srgb,var(--fold-color-primary) 8%,var(--fold-color-surface-sunken))}@media(prefers-reduced-motion:reduce){.folddt-row,.folddt-th-sort,.folddt-arrow{transition:none}}@media(forced-colors:active){.folddt-row.is-selected .folddt-cell:first-child,.folddt-row.tone-warning .folddt-cell:first-child,.folddt-row.tone-alert .folddt-cell:first-child,.folddt-row.tone-success .folddt-cell:first-child{border-inline-start:3px solid Highlight}.folddt-row:focus-visible{outline-color:Highlight}}@media(max-width:700px){.folddt--cards{overflow-x:hidden;border:0;border-radius:0;background:transparent;box-shadow:none}.folddt--cards .folddt{display:block;width:100%}.folddt--cards thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.folddt--cards tbody{display:flex;flex-direction:column;gap:10px}.folddt--cards .folddt-row{display:block;border:1px solid var(--fold-color-border-subtle);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-sunken);padding:4px 14px 8px;box-shadow:var(--fold-shadow-sm)}.folddt--cards .folddt-row.tone-warning{border-left:3px solid var(--fold-color-warning)}.folddt--cards .folddt-row.tone-alert{border-left:3px solid var(--fold-color-alert)}.folddt--cards .folddt-row.tone-success{border-left:3px solid var(--fold-color-success)}.folddt--cards .folddt-row .folddt-cell:first-child{box-shadow:none}.folddt--cards .folddt-cell{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;white-space:normal;border-bottom:1px solid var(--fold-color-border-subtle)}.folddt--cards .folddt-cell:last-child{border-bottom:0}.folddt--cards .folddt-cell:before{content:attr(data-label);flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fold-color-text-faded)}.folddt--cards .folddt-cell.right{text-align:left}.folddt--cards .folddt-cell.is-primary{justify-content:flex-start;padding:8px 0 10px;border-bottom:1px solid var(--fold-color-border)}.folddt--cards .folddt-cell.is-primary:before{display:none}.folddt--cards .folddt-cell--select{width:auto;justify-content:flex-start;padding:8px 0}.folddt--cards .folddt-cell--select:before{display:none}.folddt--cards .folddt-cell--select,.folddt--cards .folddt-cell.is-primary,.folddt--cards.folddt--sticky-first .folddt-cell{position:static}.folddt--custom{overflow-x:hidden;border:0;border-radius:0;background:transparent;box-shadow:none}.folddt--custom .folddt{display:none}.folddt--custom .folddt-cardlist{display:flex;flex-direction:column;gap:10px}}\n"] }]
|
|
4099
|
-
}], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], rowTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowTone", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], zebra: [{ type: i0.Input, args: [{ isSignal: true, alias: "zebra", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], mobileLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileLayout", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], stickyFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFirst", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLabel", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }],
|
|
4149
|
+
], template: "<div\n class=\"folddt-wrap\"\n [class.folddt--zebra]=\"zebra()\"\n [class.folddt--hover]=\"hover()\"\n [class.folddt--cards]=\"mobileLayout() === 'auto-cards'\"\n [class.folddt--custom]=\"mobileLayout() === 'custom'\"\n [class.folddt--compact]=\"density() === 'compact'\"\n [class.folddt--sticky-first]=\"stickyFirst()\"\n [class.folddt--select]=\"selectable()\"\n>\n <div\n class=\"folddt-toolbar\"\n [class.folddt-toolbar--sunken]=\"toolbarSurface() === 'sunken'\"\n [class.folddt-toolbar--raised]=\"toolbarSurface() === 'raised'\"\n [class.folddt-toolbar--accent]=\"toolbarSurface() === 'accent'\"\n [attr.data-surface]=\"toolbarSurface() === 'accent' ? 'accent' : null\"\n >\n <ng-content select=\"[foldToolbar]\" />\n </div>\n <div class=\"folddt-scroll\">\n <table class=\"folddt\" [attr.aria-colcount]=\"colCount()\">\n @if (caption(); as cap) {\n <caption class=\"folddt-caption\">\n {{\n cap\n }}\n </caption>\n }\n <thead>\n <tr>\n @if (selectable()) {\n <th scope=\"col\" class=\"folddt-select-h\">\n <fold-checkbox\n size=\"sm\"\n [ariaLabel]=\"l().selectAll\"\n [checked]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (checkedChange)=\"toggleAll()\"\n />\n </th>\n }\n @for (col of columns(); track col.key) {\n <th\n scope=\"col\"\n [class.is-primary-h]=\"col.key === primaryKey()\"\n [style.width]=\"col.width || null\"\n [attr.aria-sort]=\"col.sortable ? ariaSort(col.key) : null\"\n >\n @if (col.sortable) {\n <button\n type=\"button\"\n class=\"folddt-th-sort\"\n [class.right]=\"col.align === 'right'\"\n [class.center]=\"col.align === 'center'\"\n [attr.aria-label]=\"l().sortBy(col.label)\"\n (click)=\"sortChange.emit(col.key)\"\n >\n <span>{{ col.label }}</span>\n <fold-icon\n class=\"folddt-arrow\"\n [class.on]=\"isSorted(col.key)\"\n [name]=\"sortIcon(col.key)\"\n [size]=\"14\"\n />\n </button>\n } @else {\n <span\n class=\"folddt-th-plain\"\n [class.right]=\"col.align === 'right'\"\n [class.center]=\"col.align === 'center'\"\n >{{ col.label }}</span\n >\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of rows(); track keyOf(row, $index); let i = $index) {\n @let tone = toneOf(row);\n <tr\n class=\"folddt-row\"\n [class.tone-warning]=\"tone === 'warning'\"\n [class.tone-alert]=\"tone === 'alert'\"\n [class.tone-success]=\"tone === 'success'\"\n [class.clickable]=\"clickable()\"\n [class.is-selected]=\"selectable() && isRowSelected(row, i)\"\n [attr.tabindex]=\"rowTabIndex(row, i)\"\n [attr.aria-selected]=\"selectable() ? isRowSelected(row, i) : null\"\n (click)=\"onRowActivate(row)\"\n (focus)=\"onRowFocus(row, i)\"\n (keydown)=\"onRowKeydown($event, row)\"\n >\n @if (selectable()) {\n <td class=\"folddt-cell folddt-cell--select\">\n <fold-checkbox\n size=\"sm\"\n [ariaLabel]=\"labelFor(row)\"\n [checked]=\"isRowSelected(row, i)\"\n (click)=\"$event.stopPropagation()\"\n (checkedChange)=\"toggleRow(row, i)\"\n />\n </td>\n }\n @for (col of columns(); track col.key) {\n @if (col.key === primaryKey()) {\n <th\n scope=\"row\"\n class=\"folddt-cell is-primary\"\n [class.right]=\"col.align === 'right'\"\n [class.center]=\"col.align === 'center'\"\n [class.truncate]=\"col.truncate\"\n [ngClass]=\"col.cellClass || ''\"\n [attr.data-label]=\"col.label\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate(col.key)\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n />\n </th>\n } @else {\n <td\n class=\"folddt-cell\"\n [class.right]=\"col.align === 'right'\"\n [class.center]=\"col.align === 'center'\"\n [class.truncate]=\"col.truncate\"\n [ngClass]=\"col.cellClass || ''\"\n [attr.data-label]=\"col.label\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate(col.key)\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n />\n </td>\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n @if (isNarrow() && rowCardTemplate(); as card) {\n <div class=\"folddt-cardlist\" role=\"list\">\n @for (row of rows(); track keyOf(row, $index); let i = $index) {\n <div class=\"folddt-cardlist-item\" role=\"listitem\">\n <ng-container\n [ngTemplateOutlet]=\"card\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n />\n </div>\n }\n </div>\n }\n\n @if (loading()) {\n <div class=\"folddt-loading\">\n <fold-spinner [label]=\"l().loading\" />\n </div>\n } @else if (rows().length === 0 && empty(); as e) {\n <div class=\"folddt-empty\">\n <div class=\"folddt-empty-t\">{{ e.title }}</div>\n @if (e.subtitle) {\n <div class=\"folddt-empty-s\">{{ e.subtitle }}</div>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0}.folddt-wrap{--folddt-sel-w: 0px;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden;border:1px solid var(--fold-color-border-subtle);border-radius:var(--fold-radius-lg);background:var(--fold-color-surface-sunken);box-shadow:var(--fold-shadow-md)}.folddt--select{--folddt-sel-w: 44px}.folddt-scroll{flex:1 1 auto;min-height:0;overflow:auto}.folddt-toolbar{padding:var(--fold-space-md) var(--fold-space-lg);border-bottom:1px solid var(--fold-color-border);color:var(--fold-color-text);background:color-mix(in srgb,var(--fold-color-surface-sunken) 50%,var(--fold-color-surface-card))}.folddt-toolbar:not(:has(*)){display:none}.folddt-toolbar--sunken{background:var(--fold-color-surface-sunken)}.folddt-toolbar--raised{background:var(--fold-color-surface-raised)}.folddt-toolbar--accent{background:var(--fold-color-primary);border-bottom-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}.folddt{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fold-text-sm)}.folddt-caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.folddt thead th{position:sticky;top:0;z-index:2;padding:0;text-align:left;background:color-mix(in srgb,var(--fold-color-surface-sunken) 50%,var(--fold-color-surface-card));border-bottom:1px solid var(--fold-color-border)}.folddt-th-sort,.folddt-th-plain{display:inline-flex;align-items:center;padding:var(--fold-space-md) var(--fold-space-lg);color:var(--fold-color-text-muted);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}.folddt-th-sort{gap:var(--fold-space-sm);width:100%;border:0;background:transparent;cursor:pointer;transition:color var(--fold-motion-fast)}.folddt-th-sort:hover{color:var(--fold-color-text)}.folddt-th-sort.right{justify-content:flex-end}.folddt-th-plain.right{justify-content:flex-end;width:100%}.folddt-arrow{display:inline-flex;color:var(--fold-color-text-faded);transition:color var(--fold-motion-fast)}.folddt-arrow.on{color:var(--fold-color-primary-text)}.folddt-row{transition:background var(--fold-motion-fast)}.folddt-row.clickable{cursor:pointer}.folddt-row .folddt-cell{border-bottom:1px solid var(--fold-color-border-subtle)}.folddt-row:last-child .folddt-cell{border-bottom:0}.folddt-row:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-2px}.folddt--zebra .folddt-row:nth-child(2n):not(.tone-warning):not(.tone-alert):not(.tone-success) .folddt-cell{background:var(--fold-color-surface-subtle)}.folddt--hover .folddt-row:hover .folddt-cell{background:var(--fold-color-surface-raised)}.folddt--hover .folddt-row.tone-warning:hover .folddt-cell{background:color-mix(in srgb,var(--fold-color-warning) 16%,transparent)}.folddt--hover .folddt-row.tone-alert:hover .folddt-cell{background:color-mix(in srgb,var(--fold-color-alert) 17%,transparent)}.folddt-cell{padding:var(--fold-space-md) var(--fold-space-lg);color:var(--fold-color-text);font-weight:inherit;text-align:left;white-space:nowrap;vertical-align:middle}.folddt-cell.right{text-align:right}.folddt-cell.center{text-align:center}.folddt-cell.truncate{max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.folddt-row.tone-warning .folddt-cell:first-child{box-shadow:inset 3px 0 0 var(--fold-color-warning)}.folddt-row.tone-warning .folddt-cell{background:color-mix(in srgb,var(--fold-color-warning) 10%,transparent)}.folddt-row.tone-alert .folddt-cell:first-child{box-shadow:inset 3px 0 0 var(--fold-color-alert)}.folddt-row.tone-alert .folddt-cell{background:color-mix(in srgb,var(--fold-color-alert) 11%,transparent)}.folddt-row.tone-success .folddt-cell:first-child{box-shadow:inset 3px 0 0 var(--fold-color-success)}.folddt-row.tone-success .folddt-cell{background:color-mix(in srgb,var(--fold-color-success) 9%,transparent)}.folddt-loading{display:flex;align-items:center;justify-content:center;padding:var(--fold-space-5xl) var(--fold-space-2xl)}.folddt-empty{padding:var(--fold-space-5xl) var(--fold-space-2xl);text-align:center}.folddt-empty-t{font-size:var(--fold-text-md);font-weight:600;color:var(--fold-color-text)}.folddt-empty-s{font-size:var(--fold-text-sm);color:var(--fold-color-text-muted);margin-top:var(--fold-space-xs)}.folddt-cardlist{display:none}.folddt-select-h,.folddt-cell--select{width:var(--folddt-sel-w);padding-left:var(--fold-space-lg);padding-right:0;text-align:left;white-space:nowrap}.folddt-select-h{vertical-align:middle}.folddt-row.is-selected .folddt-cell{background:color-mix(in srgb,var(--fold-color-primary) 8%,transparent)}.folddt-row.is-selected .folddt-cell:first-child{box-shadow:inset 3px 0 0 var(--fold-color-primary)}.folddt--compact .folddt-cell,.folddt--compact .folddt-th-sort,.folddt--compact .folddt-th-plain{padding:var(--fold-space-sm) var(--fold-space-md)}.folddt--compact .folddt-cell--select{padding-left:var(--fold-space-md);padding-right:0}.folddt--sticky-first .folddt-cell--select,.folddt--sticky-first .folddt-select-h{position:sticky;left:0;background:var(--fold-color-surface-sunken)}.folddt--sticky-first .folddt-select-h{z-index:3}.folddt--sticky-first .folddt-cell.is-primary{position:sticky;left:var(--folddt-sel-w);z-index:1;background:var(--fold-color-surface-sunken)}.folddt--sticky-first thead th.is-primary-h{position:sticky;left:var(--folddt-sel-w);z-index:3}.folddt--sticky-first .folddt-row.tone-warning .folddt-cell.is-primary{background:color-mix(in srgb,var(--fold-color-warning) 10%,var(--fold-color-surface-sunken))}.folddt--sticky-first .folddt-row.tone-alert .folddt-cell.is-primary{background:color-mix(in srgb,var(--fold-color-alert) 11%,var(--fold-color-surface-sunken))}.folddt--sticky-first .folddt-row.tone-success .folddt-cell.is-primary{background:color-mix(in srgb,var(--fold-color-success) 9%,var(--fold-color-surface-sunken))}.folddt--sticky-first .folddt-row.is-selected .folddt-cell.is-primary{background:color-mix(in srgb,var(--fold-color-primary) 8%,var(--fold-color-surface-sunken))}@media(prefers-reduced-motion:reduce){.folddt-row,.folddt-th-sort,.folddt-arrow{transition:none}}@media(forced-colors:active){.folddt-row.is-selected .folddt-cell:first-child,.folddt-row.tone-warning .folddt-cell:first-child,.folddt-row.tone-alert .folddt-cell:first-child,.folddt-row.tone-success .folddt-cell:first-child{border-inline-start:3px solid Highlight}.folddt-row:focus-visible{outline-color:Highlight}}@media(max-width:700px){.folddt--cards{overflow-x:hidden;border:0;border-radius:0;background:transparent;box-shadow:none}.folddt--cards .folddt{display:block;width:100%}.folddt--cards thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.folddt--cards tbody{display:flex;flex-direction:column;gap:var(--fold-space-sm)}.folddt--cards .folddt-row{display:block;border:1px solid var(--fold-color-border-subtle);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-sunken);padding:var(--fold-space-xs) var(--fold-space-md) var(--fold-space-sm);box-shadow:var(--fold-shadow-sm)}.folddt--cards .folddt-row.tone-warning{border-left:3px solid var(--fold-color-warning)}.folddt--cards .folddt-row.tone-alert{border-left:3px solid var(--fold-color-alert)}.folddt--cards .folddt-row.tone-success{border-left:3px solid var(--fold-color-success)}.folddt--cards .folddt-row .folddt-cell:first-child{box-shadow:none}.folddt--cards .folddt-cell{display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-md);padding:var(--fold-space-sm) 0;white-space:normal;border-bottom:1px solid var(--fold-color-border-subtle)}.folddt--cards .folddt-cell:last-child{border-bottom:0}.folddt--cards .folddt-cell:before{content:attr(data-label);flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fold-color-text-faded)}.folddt--cards .folddt-cell.right{text-align:left}.folddt--cards .folddt-cell.is-primary{justify-content:flex-start;padding:var(--fold-space-sm) 0 var(--fold-space-sm);border-bottom:1px solid var(--fold-color-border)}.folddt--cards .folddt-cell.is-primary:before{display:none}.folddt--cards .folddt-cell--select{width:auto;justify-content:flex-start;padding:var(--fold-space-sm) 0}.folddt--cards .folddt-cell--select:before{display:none}.folddt--cards .folddt-cell--select,.folddt--cards .folddt-cell.is-primary,.folddt--cards.folddt--sticky-first .folddt-cell{position:static}.folddt--custom{overflow-x:hidden;border:0;border-radius:0;background:transparent;box-shadow:none}.folddt--custom .folddt{display:none}.folddt--custom .folddt-cardlist{display:flex;flex-direction:column;gap:var(--fold-space-sm)}}\n"] }]
|
|
4150
|
+
}], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], rowTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowTone", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], zebra: [{ type: i0.Input, args: [{ isSignal: true, alias: "zebra", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], mobileLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileLayout", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], stickyFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFirst", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], selectionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLabel", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FoldDataTableCellDirective), { isSignal: true }] }], rowCard: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FoldDataTableRowCardDirective), { isSignal: true }] }], toolbarSurface: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarSurface", required: false }] }] } });
|
|
4100
4151
|
|
|
4101
4152
|
/**
|
|
4102
4153
|
* `[foldStickyColumn]` — turns its host into a sticky side column: a vertical
|
|
@@ -4243,11 +4294,11 @@ class FoldChoiceRowComponent {
|
|
|
4243
4294
|
/** Emits the `key` of the clicked option. */
|
|
4244
4295
|
selected = output();
|
|
4245
4296
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldChoiceRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4246
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldChoiceRowComponent, isStandalone: true, selector: "fold-choice-row", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "<div\n class=\"choice-row\"\n role=\"group\"\n [class.segmented]=\"layout() === 'segmented'\"\n [class.chips]=\"layout() === 'chips'\"\n [attr.aria-label]=\"ariaLabel() || null\"\n>\n @for (opt of options(); track opt.key) {\n <button\n type=\"button\"\n class=\"choice\"\n [class.is-active]=\"activeKey() === opt.key\"\n [attr.aria-pressed]=\"activeKey() === opt.key\"\n (click)=\"selected.emit(opt.key)\"\n >\n <span>{{ opt.label }}</span>\n @if (opt.count !== undefined) {\n <span class=\"choice-count\">{{ opt.count }}</span>\n }\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.choice-row{display:flex;gap:
|
|
4297
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldChoiceRowComponent, isStandalone: true, selector: "fold-choice-row", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "<div\n class=\"choice-row\"\n role=\"group\"\n [class.segmented]=\"layout() === 'segmented'\"\n [class.chips]=\"layout() === 'chips'\"\n [attr.aria-label]=\"ariaLabel() || null\"\n>\n @for (opt of options(); track opt.key) {\n <button\n type=\"button\"\n class=\"choice\"\n [class.is-active]=\"activeKey() === opt.key\"\n [attr.aria-pressed]=\"activeKey() === opt.key\"\n (click)=\"selected.emit(opt.key)\"\n >\n <span>{{ opt.label }}</span>\n @if (opt.count !== undefined) {\n <span class=\"choice-count\">{{ opt.count }}</span>\n }\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.choice-row{display:flex;gap:var(--fold-space-xs);-webkit-user-select:none;user-select:none}.choice-row.chips{flex-wrap:wrap}.choice{display:inline-flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);cursor:pointer;border:1px solid var(--fold-color-border);color:var(--fold-color-text-muted);transition:color .1s ease,background .1s ease,border-color .1s ease}.choice-count{color:var(--fold-color-text-faded);font-variant-numeric:tabular-nums}.choice.is-active .choice-count{color:var(--fold-color-primary-text)}.choice-row.segmented .choice{flex:1;padding:var(--fold-space-xs) 0;text-align:center;text-transform:capitalize;background:var(--fold-color-surface-subtle);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-xs);font-weight:600}.choice-row.segmented .choice:hover:not(.is-active){background:var(--fold-color-surface-raised)}.choice-row.segmented .choice.is-active{background:var(--fold-color-primary-surface);border-color:var(--fold-color-primary-border);color:var(--fold-color-primary)}.choice-row.chips .choice{padding:var(--fold-space-xs) var(--fold-space-md);background:transparent;border-radius:var(--fold-radius-pill);color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm)}.choice-row.chips .choice:hover:not(.is-active){color:var(--fold-color-text);border-color:var(--fold-color-primary-border)}.choice-row.chips .choice.is-active{background:var(--fold-color-primary-surface);border-color:var(--fold-color-primary-border);color:var(--fold-color-primary-text);font-weight:600}\n"] });
|
|
4247
4298
|
}
|
|
4248
4299
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldChoiceRowComponent, decorators: [{
|
|
4249
4300
|
type: Component,
|
|
4250
|
-
args: [{ selector: "fold-choice-row", standalone: true, template: "<div\n class=\"choice-row\"\n role=\"group\"\n [class.segmented]=\"layout() === 'segmented'\"\n [class.chips]=\"layout() === 'chips'\"\n [attr.aria-label]=\"ariaLabel() || null\"\n>\n @for (opt of options(); track opt.key) {\n <button\n type=\"button\"\n class=\"choice\"\n [class.is-active]=\"activeKey() === opt.key\"\n [attr.aria-pressed]=\"activeKey() === opt.key\"\n (click)=\"selected.emit(opt.key)\"\n >\n <span>{{ opt.label }}</span>\n @if (opt.count !== undefined) {\n <span class=\"choice-count\">{{ opt.count }}</span>\n }\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.choice-row{display:flex;gap:
|
|
4301
|
+
args: [{ selector: "fold-choice-row", standalone: true, template: "<div\n class=\"choice-row\"\n role=\"group\"\n [class.segmented]=\"layout() === 'segmented'\"\n [class.chips]=\"layout() === 'chips'\"\n [attr.aria-label]=\"ariaLabel() || null\"\n>\n @for (opt of options(); track opt.key) {\n <button\n type=\"button\"\n class=\"choice\"\n [class.is-active]=\"activeKey() === opt.key\"\n [attr.aria-pressed]=\"activeKey() === opt.key\"\n (click)=\"selected.emit(opt.key)\"\n >\n <span>{{ opt.label }}</span>\n @if (opt.count !== undefined) {\n <span class=\"choice-count\">{{ opt.count }}</span>\n }\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.choice-row{display:flex;gap:var(--fold-space-xs);-webkit-user-select:none;user-select:none}.choice-row.chips{flex-wrap:wrap}.choice{display:inline-flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);cursor:pointer;border:1px solid var(--fold-color-border);color:var(--fold-color-text-muted);transition:color .1s ease,background .1s ease,border-color .1s ease}.choice-count{color:var(--fold-color-text-faded);font-variant-numeric:tabular-nums}.choice.is-active .choice-count{color:var(--fold-color-primary-text)}.choice-row.segmented .choice{flex:1;padding:var(--fold-space-xs) 0;text-align:center;text-transform:capitalize;background:var(--fold-color-surface-subtle);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-xs);font-weight:600}.choice-row.segmented .choice:hover:not(.is-active){background:var(--fold-color-surface-raised)}.choice-row.segmented .choice.is-active{background:var(--fold-color-primary-surface);border-color:var(--fold-color-primary-border);color:var(--fold-color-primary)}.choice-row.chips .choice{padding:var(--fold-space-xs) var(--fold-space-md);background:transparent;border-radius:var(--fold-radius-pill);color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm)}.choice-row.chips .choice:hover:not(.is-active){color:var(--fold-color-text);border-color:var(--fold-color-primary-border)}.choice-row.chips .choice.is-active{background:var(--fold-color-primary-surface);border-color:var(--fold-color-primary-border);color:var(--fold-color-primary-text);font-weight:600}\n"] }]
|
|
4251
4302
|
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
|
|
4252
4303
|
|
|
4253
4304
|
/**
|
|
@@ -4674,7 +4725,7 @@ class FoldNumberInputComponent {
|
|
|
4674
4725
|
}
|
|
4675
4726
|
}
|
|
4676
4727
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4677
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldNumberInputComponent, isStandalone: true, selector: "fold-number-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, spinner: { classPropertyName: "spinner", publicName: "spinner", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, showStep: { classPropertyName: "showStep", publicName: "showStep", isSignal: true, isRequired: false, transformFunction: null }, snapToStep: { classPropertyName: "snapToStep", publicName: "snapToStep", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, integer: { classPropertyName: "integer", publicName: "integer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "size() + \" \" + align() + \" \" + variant()" } }, ngImport: i0, template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <ng-template\n #stepBtn\n let-dir=\"dir\"\n let-size=\"size\"\n let-cls=\"cls\"\n let-off=\"off\"\n >\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [class]=\"cls\"\n [disabled]=\"off\"\n [attr.aria-label]=\"dir === 1 ? 'Increment' : 'Decrement'\"\n foldRepeatPress\n [foldRepeatPressDisabled]=\"off\"\n (foldRepeatPress)=\"stepBy(dir)\"\n (click)=\"onButtonClick(dir, $event)\"\n >\n <fold-icon [name]=\"iconFor(dir)\" [size]=\"size\" />\n </button>\n </ng-template>\n\n <div\n class=\"ni-field\"\n [class.ni-inside]=\"controls() === 'inside'\"\n [class.ni-outside]=\"controls() === 'outside'\"\n >\n @if (hasControls() && controls() === \"outside\") {\n <ng-container\n *ngTemplateOutlet=\"\n stepBtn;\n context: {\n dir: -1,\n size: 'sm',\n cls: 'ni-btn ni-dec',\n off: decDisabled(),\n }\n \"\n />\n }\n\n <div class=\"ni-box\">\n <input\n [id]=\"inputId\"\n type=\"number\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.step]=\"nativeStep()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.readonly]=\"readOnly() || null\"\n [attr.disabled]=\"disabled() || null\"\n [attr.required]=\"required() || null\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [value]=\"value()\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur()\"\n (keydown.arrowUp)=\"onArrow(1, $event)\"\n (keydown.arrowDown)=\"onArrow(-1, $event)\"\n (wheel)=\"onWheel($event)\"\n />\n\n @if (showStep() && step() != null) {\n <span class=\"ni-step\" aria-hidden=\"true\">{{ step() }}</span>\n }\n\n @if (hasControls() && controls() === \"inside\") {\n <span class=\"ni-stack\">\n <ng-container\n *ngTemplateOutlet=\"\n stepBtn;\n context: {\n dir: 1,\n size: 'xs',\n cls: 'ni-stack-btn ni-inc',\n off: incDisabled(),\n }\n \"\n />\n <ng-container\n *ngTemplateOutlet=\"\n stepBtn;\n context: {\n dir: -1,\n size: 'xs',\n cls: 'ni-stack-btn ni-dec',\n off: decDisabled(),\n }\n \"\n />\n </span>\n }\n </div>\n\n @if (hasControls() && controls() === \"outside\") {\n <ng-container\n *ngTemplateOutlet=\"\n stepBtn;\n context: {\n dir: 1,\n size: 'sm',\n cls: 'ni-btn ni-inc',\n off: incDisabled(),\n }\n \"\n />\n }\n </div>\n</fold-input-base>\n", styles: [":host{display:block}input,select{all:unset;box-sizing:border-box;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}input::placeholder,select::placeholder{color:var(--fold-color-text-faded)}input:hover:not(:disabled):not(:read-only):not(:focus),select:hover:not(:disabled):not(:read-only):not(:focus){border-color:var(--fold-color-border)}input:focus,select:focus{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}input:disabled,select:disabled{opacity:.4;cursor:not-allowed}input:read-only,select:read-only{opacity:.6;cursor:default}input[type=number],select[type=number]{appearance:textfield;-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button,select[type=number]::-webkit-inner-spin-button,select[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host(.sm) input,:host(.sm) select{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) input,:host(.md) select{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) input,:host(.lg) select{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.center) input{text-align:center}:host(.panel) input,:host(.panel) select{height:auto;padding:7px 10px;border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised)}:host(.panel) input:focus,:host(.panel) select:focus{box-shadow:none}.ni-field.ni-inside{display:block}.ni-field.ni-outside{display:flex;align-items:stretch;gap:6px}.ni-box{position:relative;min-width:0}.ni-outside .ni-box{flex:1 1 auto}.ni-box input{width:100%}.ni-inside .ni-box input{padding-right:1.7rem}.ni-stack{position:absolute;top:1px;right:1px;bottom:1px;width:1.5rem;display:flex;flex-direction:column;border-left:1px solid var(--fold-color-border-subtle)}.ni-stack-btn{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--fold-color-text-muted);cursor:pointer;transition:color var(--fold-motion-fast),background var(--fold-motion-fast)}.ni-stack-btn:hover:not(:disabled){color:var(--fold-color-text);background:var(--fold-color-surface-hover)}.ni-stack-btn:disabled{opacity:.3;cursor:not-allowed}.ni-stack-btn:first-child{border-top-right-radius:var(--fold-radius-sm)}.ni-stack-btn:last-child{border-bottom-right-radius:var(--fold-radius-sm)}.ni-btn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;border:1px solid var(--fold-color-border-subtle);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-card);color:var(--fold-color-text);cursor:pointer;transition:border-color var(--fold-motion-fast),background var(--fold-motion-fast)}.ni-btn:hover:not(:disabled){border-color:var(--fold-color-border);background:var(--fold-color-surface-hover)}.ni-btn:disabled{opacity:.4;cursor:not-allowed}:host(.sm) .ni-btn{width:1.75rem}:host(.md) .ni-btn{width:2.25rem}:host(.lg) .ni-btn{width:2.75rem}.ni-step{position:absolute;top:50%;right:.6rem;transform:translateY(-50%);font-size:var(--fold-text-xs);color:var(--fold-color-text-faded);pointer-events:none}.ni-box:has(.ni-step) input{padding-right:2.2rem}.ni-inside .ni-box:has(.ni-step) input{padding-right:3.4rem}.ni-inside .ni-step{right:2rem}\n"], dependencies: [{ kind: "component", type: FoldInputBaseComponent, selector: "fold-input-base", inputs: ["label", "for", "required", "optional", "optionalLabel", "hint", "error"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "title"] }, { kind: "directive", type: FoldRepeatPressDirective, selector: "[foldRepeatPress]", inputs: ["foldRepeatPressDisabled", "foldRepeatPressDelay", "foldRepeatPressPeriod"], outputs: ["foldRepeatPress"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
4728
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldNumberInputComponent, isStandalone: true, selector: "fold-number-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, spinner: { classPropertyName: "spinner", publicName: "spinner", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, showStep: { classPropertyName: "showStep", publicName: "showStep", isSignal: true, isRequired: false, transformFunction: null }, snapToStep: { classPropertyName: "snapToStep", publicName: "snapToStep", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, integer: { classPropertyName: "integer", publicName: "integer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "size() + \" \" + align() + \" \" + variant()" } }, ngImport: i0, template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <ng-template\n #stepBtn\n let-dir=\"dir\"\n let-size=\"size\"\n let-cls=\"cls\"\n let-off=\"off\"\n >\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [class]=\"cls\"\n [disabled]=\"off\"\n [attr.aria-label]=\"dir === 1 ? 'Increment' : 'Decrement'\"\n foldRepeatPress\n [foldRepeatPressDisabled]=\"off\"\n (foldRepeatPress)=\"stepBy(dir)\"\n (click)=\"onButtonClick(dir, $event)\"\n >\n <fold-icon [name]=\"iconFor(dir)\" [size]=\"size\" />\n </button>\n </ng-template>\n\n <div\n class=\"ni-field\"\n [class.ni-inside]=\"controls() === 'inside'\"\n [class.ni-outside]=\"controls() === 'outside'\"\n >\n @if (hasControls() && controls() === \"outside\") {\n <ng-container\n *ngTemplateOutlet=\"\n stepBtn;\n context: {\n dir: -1,\n size: 'sm',\n cls: 'ni-btn ni-dec',\n off: decDisabled(),\n }\n \"\n />\n }\n\n <div class=\"ni-box\">\n <input\n [id]=\"inputId\"\n type=\"number\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.step]=\"nativeStep()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.readonly]=\"readOnly() || null\"\n [attr.disabled]=\"disabled() || null\"\n [attr.required]=\"required() || null\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [value]=\"value()\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur()\"\n (keydown.arrowUp)=\"onArrow(1, $event)\"\n (keydown.arrowDown)=\"onArrow(-1, $event)\"\n (wheel)=\"onWheel($event)\"\n />\n\n @if (showStep() && step() != null) {\n <span class=\"ni-step\" aria-hidden=\"true\">{{ step() }}</span>\n }\n\n @if (hasControls() && controls() === \"inside\") {\n <span class=\"ni-stack\">\n <ng-container\n *ngTemplateOutlet=\"\n stepBtn;\n context: {\n dir: 1,\n size: 'xs',\n cls: 'ni-stack-btn ni-inc',\n off: incDisabled(),\n }\n \"\n />\n <ng-container\n *ngTemplateOutlet=\"\n stepBtn;\n context: {\n dir: -1,\n size: 'xs',\n cls: 'ni-stack-btn ni-dec',\n off: decDisabled(),\n }\n \"\n />\n </span>\n }\n </div>\n\n @if (hasControls() && controls() === \"outside\") {\n <ng-container\n *ngTemplateOutlet=\"\n stepBtn;\n context: {\n dir: 1,\n size: 'sm',\n cls: 'ni-btn ni-inc',\n off: incDisabled(),\n }\n \"\n />\n }\n </div>\n</fold-input-base>\n", styles: [":host{display:block}input,select{all:unset;box-sizing:border-box;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}input::placeholder,select::placeholder{color:var(--fold-color-text-faded)}input:hover:not(:disabled):not(:read-only):not(:focus),select:hover:not(:disabled):not(:read-only):not(:focus){border-color:var(--fold-color-border)}input:focus,select:focus{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}input:disabled,select:disabled{opacity:.4;cursor:not-allowed}input:read-only,select:read-only{opacity:.6;cursor:default}input[type=number],select[type=number]{appearance:textfield;-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button,select[type=number]::-webkit-inner-spin-button,select[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host(.sm) input,:host(.sm) select{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) input,:host(.md) select{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) input,:host(.lg) select{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.center) input{text-align:center}:host(.panel) input,:host(.panel) select{height:auto;padding:var(--fold-space-sm) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised)}:host(.panel) input:focus,:host(.panel) select:focus{box-shadow:none}.ni-field.ni-inside{display:block}.ni-field.ni-outside{display:flex;align-items:stretch;gap:var(--fold-space-sm)}.ni-box{position:relative;min-width:0}.ni-outside .ni-box{flex:1 1 auto}.ni-box input{width:100%}.ni-inside .ni-box input{padding-right:1.7rem}.ni-stack{position:absolute;top:1px;right:1px;bottom:1px;width:1.5rem;display:flex;flex-direction:column;border-left:1px solid var(--fold-color-border-subtle)}.ni-stack-btn{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--fold-color-text-muted);cursor:pointer;transition:color var(--fold-motion-fast),background var(--fold-motion-fast)}.ni-stack-btn:hover:not(:disabled){color:var(--fold-color-text);background:var(--fold-color-surface-hover)}.ni-stack-btn:disabled{opacity:.3;cursor:not-allowed}.ni-stack-btn:first-child{border-top-right-radius:var(--fold-radius-sm)}.ni-stack-btn:last-child{border-bottom-right-radius:var(--fold-radius-sm)}.ni-btn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;border:1px solid var(--fold-color-border-subtle);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-card);color:var(--fold-color-text);cursor:pointer;transition:border-color var(--fold-motion-fast),background var(--fold-motion-fast)}.ni-btn:hover:not(:disabled){border-color:var(--fold-color-border);background:var(--fold-color-surface-hover)}.ni-btn:disabled{opacity:.4;cursor:not-allowed}:host(.sm) .ni-btn{width:1.75rem}:host(.md) .ni-btn{width:2.25rem}:host(.lg) .ni-btn{width:2.75rem}.ni-step{position:absolute;top:50%;right:.6rem;transform:translateY(-50%);font-size:var(--fold-text-xs);color:var(--fold-color-text-faded);pointer-events:none}.ni-box:has(.ni-step) input{padding-right:2.2rem}.ni-inside .ni-box:has(.ni-step) input{padding-right:3.4rem}.ni-inside .ni-step{right:2rem}\n"], dependencies: [{ kind: "component", type: FoldInputBaseComponent, selector: "fold-input-base", inputs: ["label", "for", "required", "optional", "optionalLabel", "hint", "error"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "directive", type: FoldRepeatPressDirective, selector: "[foldRepeatPress]", inputs: ["foldRepeatPressDisabled", "foldRepeatPressDelay", "foldRepeatPressPeriod"], outputs: ["foldRepeatPress"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
4678
4729
|
}
|
|
4679
4730
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldNumberInputComponent, decorators: [{
|
|
4680
4731
|
type: Component,
|
|
@@ -4685,7 +4736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
4685
4736
|
NgTemplateOutlet,
|
|
4686
4737
|
], host: {
|
|
4687
4738
|
"[class]": 'size() + " " + align() + " " + variant()',
|
|
4688
|
-
}, template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <ng-template\n #stepBtn\n let-dir=\"dir\"\n let-size=\"size\"\n let-cls=\"cls\"\n let-off=\"off\"\n >\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [class]=\"cls\"\n [disabled]=\"off\"\n [attr.aria-label]=\"dir === 1 ? 'Increment' : 'Decrement'\"\n foldRepeatPress\n [foldRepeatPressDisabled]=\"off\"\n (foldRepeatPress)=\"stepBy(dir)\"\n (click)=\"onButtonClick(dir, $event)\"\n >\n <fold-icon [name]=\"iconFor(dir)\" [size]=\"size\" />\n </button>\n </ng-template>\n\n <div\n class=\"ni-field\"\n [class.ni-inside]=\"controls() === 'inside'\"\n [class.ni-outside]=\"controls() === 'outside'\"\n >\n @if (hasControls() && controls() === \"outside\") {\n <ng-container\n *ngTemplateOutlet=\"\n stepBtn;\n context: {\n dir: -1,\n size: 'sm',\n cls: 'ni-btn ni-dec',\n off: decDisabled(),\n }\n \"\n />\n }\n\n <div class=\"ni-box\">\n <input\n [id]=\"inputId\"\n type=\"number\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.step]=\"nativeStep()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.readonly]=\"readOnly() || null\"\n [attr.disabled]=\"disabled() || null\"\n [attr.required]=\"required() || null\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [value]=\"value()\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur()\"\n (keydown.arrowUp)=\"onArrow(1, $event)\"\n (keydown.arrowDown)=\"onArrow(-1, $event)\"\n (wheel)=\"onWheel($event)\"\n />\n\n @if (showStep() && step() != null) {\n <span class=\"ni-step\" aria-hidden=\"true\">{{ step() }}</span>\n }\n\n @if (hasControls() && controls() === \"inside\") {\n <span class=\"ni-stack\">\n <ng-container\n *ngTemplateOutlet=\"\n stepBtn;\n context: {\n dir: 1,\n size: 'xs',\n cls: 'ni-stack-btn ni-inc',\n off: incDisabled(),\n }\n \"\n />\n <ng-container\n *ngTemplateOutlet=\"\n stepBtn;\n context: {\n dir: -1,\n size: 'xs',\n cls: 'ni-stack-btn ni-dec',\n off: decDisabled(),\n }\n \"\n />\n </span>\n }\n </div>\n\n @if (hasControls() && controls() === \"outside\") {\n <ng-container\n *ngTemplateOutlet=\"\n stepBtn;\n context: {\n dir: 1,\n size: 'sm',\n cls: 'ni-btn ni-inc',\n off: incDisabled(),\n }\n \"\n />\n }\n </div>\n</fold-input-base>\n", styles: [":host{display:block}input,select{all:unset;box-sizing:border-box;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}input::placeholder,select::placeholder{color:var(--fold-color-text-faded)}input:hover:not(:disabled):not(:read-only):not(:focus),select:hover:not(:disabled):not(:read-only):not(:focus){border-color:var(--fold-color-border)}input:focus,select:focus{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}input:disabled,select:disabled{opacity:.4;cursor:not-allowed}input:read-only,select:read-only{opacity:.6;cursor:default}input[type=number],select[type=number]{appearance:textfield;-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button,select[type=number]::-webkit-inner-spin-button,select[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host(.sm) input,:host(.sm) select{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) input,:host(.md) select{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) input,:host(.lg) select{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.center) input{text-align:center}:host(.panel) input,:host(.panel) select{height:auto;padding:
|
|
4739
|
+
}, template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <ng-template\n #stepBtn\n let-dir=\"dir\"\n let-size=\"size\"\n let-cls=\"cls\"\n let-off=\"off\"\n >\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [class]=\"cls\"\n [disabled]=\"off\"\n [attr.aria-label]=\"dir === 1 ? 'Increment' : 'Decrement'\"\n foldRepeatPress\n [foldRepeatPressDisabled]=\"off\"\n (foldRepeatPress)=\"stepBy(dir)\"\n (click)=\"onButtonClick(dir, $event)\"\n >\n <fold-icon [name]=\"iconFor(dir)\" [size]=\"size\" />\n </button>\n </ng-template>\n\n <div\n class=\"ni-field\"\n [class.ni-inside]=\"controls() === 'inside'\"\n [class.ni-outside]=\"controls() === 'outside'\"\n >\n @if (hasControls() && controls() === \"outside\") {\n <ng-container\n *ngTemplateOutlet=\"\n stepBtn;\n context: {\n dir: -1,\n size: 'sm',\n cls: 'ni-btn ni-dec',\n off: decDisabled(),\n }\n \"\n />\n }\n\n <div class=\"ni-box\">\n <input\n [id]=\"inputId\"\n type=\"number\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.step]=\"nativeStep()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.readonly]=\"readOnly() || null\"\n [attr.disabled]=\"disabled() || null\"\n [attr.required]=\"required() || null\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [value]=\"value()\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur()\"\n (keydown.arrowUp)=\"onArrow(1, $event)\"\n (keydown.arrowDown)=\"onArrow(-1, $event)\"\n (wheel)=\"onWheel($event)\"\n />\n\n @if (showStep() && step() != null) {\n <span class=\"ni-step\" aria-hidden=\"true\">{{ step() }}</span>\n }\n\n @if (hasControls() && controls() === \"inside\") {\n <span class=\"ni-stack\">\n <ng-container\n *ngTemplateOutlet=\"\n stepBtn;\n context: {\n dir: 1,\n size: 'xs',\n cls: 'ni-stack-btn ni-inc',\n off: incDisabled(),\n }\n \"\n />\n <ng-container\n *ngTemplateOutlet=\"\n stepBtn;\n context: {\n dir: -1,\n size: 'xs',\n cls: 'ni-stack-btn ni-dec',\n off: decDisabled(),\n }\n \"\n />\n </span>\n }\n </div>\n\n @if (hasControls() && controls() === \"outside\") {\n <ng-container\n *ngTemplateOutlet=\"\n stepBtn;\n context: {\n dir: 1,\n size: 'sm',\n cls: 'ni-btn ni-inc',\n off: incDisabled(),\n }\n \"\n />\n }\n </div>\n</fold-input-base>\n", styles: [":host{display:block}input,select{all:unset;box-sizing:border-box;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}input::placeholder,select::placeholder{color:var(--fold-color-text-faded)}input:hover:not(:disabled):not(:read-only):not(:focus),select:hover:not(:disabled):not(:read-only):not(:focus){border-color:var(--fold-color-border)}input:focus,select:focus{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}input:disabled,select:disabled{opacity:.4;cursor:not-allowed}input:read-only,select:read-only{opacity:.6;cursor:default}input[type=number],select[type=number]{appearance:textfield;-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button,select[type=number]::-webkit-inner-spin-button,select[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host(.sm) input,:host(.sm) select{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) input,:host(.md) select{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) input,:host(.lg) select{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.center) input{text-align:center}:host(.panel) input,:host(.panel) select{height:auto;padding:var(--fold-space-sm) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised)}:host(.panel) input:focus,:host(.panel) select:focus{box-shadow:none}.ni-field.ni-inside{display:block}.ni-field.ni-outside{display:flex;align-items:stretch;gap:var(--fold-space-sm)}.ni-box{position:relative;min-width:0}.ni-outside .ni-box{flex:1 1 auto}.ni-box input{width:100%}.ni-inside .ni-box input{padding-right:1.7rem}.ni-stack{position:absolute;top:1px;right:1px;bottom:1px;width:1.5rem;display:flex;flex-direction:column;border-left:1px solid var(--fold-color-border-subtle)}.ni-stack-btn{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--fold-color-text-muted);cursor:pointer;transition:color var(--fold-motion-fast),background var(--fold-motion-fast)}.ni-stack-btn:hover:not(:disabled){color:var(--fold-color-text);background:var(--fold-color-surface-hover)}.ni-stack-btn:disabled{opacity:.3;cursor:not-allowed}.ni-stack-btn:first-child{border-top-right-radius:var(--fold-radius-sm)}.ni-stack-btn:last-child{border-bottom-right-radius:var(--fold-radius-sm)}.ni-btn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;border:1px solid var(--fold-color-border-subtle);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-card);color:var(--fold-color-text);cursor:pointer;transition:border-color var(--fold-motion-fast),background var(--fold-motion-fast)}.ni-btn:hover:not(:disabled){border-color:var(--fold-color-border);background:var(--fold-color-surface-hover)}.ni-btn:disabled{opacity:.4;cursor:not-allowed}:host(.sm) .ni-btn{width:1.75rem}:host(.md) .ni-btn{width:2.25rem}:host(.lg) .ni-btn{width:2.75rem}.ni-step{position:absolute;top:50%;right:.6rem;transform:translateY(-50%);font-size:var(--fold-text-xs);color:var(--fold-color-text-faded);pointer-events:none}.ni-box:has(.ni-step) input{padding-right:2.2rem}.ni-inside .ni-box:has(.ni-step) input{padding-right:3.4rem}.ni-inside .ni-step{right:2rem}\n"] }]
|
|
4689
4740
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], optionalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], spinner: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinner", required: false }] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], showStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStep", required: false }] }], snapToStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToStep", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], integer: [{ type: i0.Input, args: [{ isSignal: true, alias: "integer", required: false }] }] } });
|
|
4690
4741
|
|
|
4691
4742
|
/**
|
|
@@ -4853,13 +4904,13 @@ class FoldSelectComponent {
|
|
|
4853
4904
|
this.touched.set(true);
|
|
4854
4905
|
}
|
|
4855
4906
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4856
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldSelectComponent, isStandalone: true, selector: "fold-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "size() + \" \" + variant()" } }, ngImport: i0, template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <div class=\"sel-wrap\">\n <select\n [id]=\"inputId\"\n class=\"sel\"\n [disabled]=\"disabled()\"\n [attr.required]=\"required() || null\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [value]=\"value()\"\n (change)=\"onChange($event)\"\n (blur)=\"onBlur()\"\n >\n @if (placeholder(); as ph) {\n <option value=\"\" disabled hidden>{{ ph }}</option>\n }\n <ng-content />\n </select>\n <fold-icon\n name=\"chevron-down\"\n size=\"sm\"\n class=\"sel-caret\"\n aria-hidden=\"true\"\n />\n </div>\n</fold-input-base>\n", styles: [":host{display:block}input,select{all:unset;box-sizing:border-box;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}input::placeholder,select::placeholder{color:var(--fold-color-text-faded)}input:hover:not(:disabled):not(:read-only):not(:focus),select:hover:not(:disabled):not(:read-only):not(:focus){border-color:var(--fold-color-border)}input:focus,select:focus{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}input:disabled,select:disabled{opacity:.4;cursor:not-allowed}input:read-only,select:read-only{opacity:.6;cursor:default}input[type=number],select[type=number]{appearance:textfield;-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button,select[type=number]::-webkit-inner-spin-button,select[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host(.sm) input,:host(.sm) select{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) input,:host(.md) select{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) input,:host(.lg) select{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.center) input{text-align:center}:host(.panel) input,:host(.panel) select{height:auto;padding:
|
|
4907
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldSelectComponent, isStandalone: true, selector: "fold-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "size() + \" \" + variant()" } }, ngImport: i0, template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <div class=\"sel-wrap\">\n <select\n [id]=\"inputId\"\n class=\"sel\"\n [disabled]=\"disabled()\"\n [attr.required]=\"required() || null\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [value]=\"value()\"\n (change)=\"onChange($event)\"\n (blur)=\"onBlur()\"\n >\n @if (placeholder(); as ph) {\n <option value=\"\" disabled hidden>{{ ph }}</option>\n }\n <ng-content />\n </select>\n <fold-icon\n name=\"chevron-down\"\n size=\"sm\"\n class=\"sel-caret\"\n aria-hidden=\"true\"\n />\n </div>\n</fold-input-base>\n", styles: [":host{display:block}input,select{all:unset;box-sizing:border-box;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}input::placeholder,select::placeholder{color:var(--fold-color-text-faded)}input:hover:not(:disabled):not(:read-only):not(:focus),select:hover:not(:disabled):not(:read-only):not(:focus){border-color:var(--fold-color-border)}input:focus,select:focus{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}input:disabled,select:disabled{opacity:.4;cursor:not-allowed}input:read-only,select:read-only{opacity:.6;cursor:default}input[type=number],select[type=number]{appearance:textfield;-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button,select[type=number]::-webkit-inner-spin-button,select[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host(.sm) input,:host(.sm) select{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) input,:host(.md) select{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) input,:host(.lg) select{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.center) input{text-align:center}:host(.panel) input,:host(.panel) select{height:auto;padding:var(--fold-space-sm) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised)}:host(.panel) input:focus,:host(.panel) select:focus{box-shadow:none}.sel-wrap{position:relative}.sel{appearance:none;-webkit-appearance:none;padding-right:1.85rem;cursor:pointer}.sel:disabled{cursor:not-allowed}.sel-caret{position:absolute;top:50%;right:.6rem;transform:translateY(-50%);pointer-events:none;color:var(--fold-color-text-muted)}\n"], dependencies: [{ kind: "component", type: FoldInputBaseComponent, selector: "fold-input-base", inputs: ["label", "for", "required", "optional", "optionalLabel", "hint", "error"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
4857
4908
|
}
|
|
4858
4909
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldSelectComponent, decorators: [{
|
|
4859
4910
|
type: Component,
|
|
4860
4911
|
args: [{ selector: "fold-select", standalone: true, imports: [FoldInputBaseComponent, FoldIconComponent], host: {
|
|
4861
4912
|
"[class]": 'size() + " " + variant()',
|
|
4862
|
-
}, template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <div class=\"sel-wrap\">\n <select\n [id]=\"inputId\"\n class=\"sel\"\n [disabled]=\"disabled()\"\n [attr.required]=\"required() || null\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [value]=\"value()\"\n (change)=\"onChange($event)\"\n (blur)=\"onBlur()\"\n >\n @if (placeholder(); as ph) {\n <option value=\"\" disabled hidden>{{ ph }}</option>\n }\n <ng-content />\n </select>\n <fold-icon\n name=\"chevron-down\"\n size=\"sm\"\n class=\"sel-caret\"\n aria-hidden=\"true\"\n />\n </div>\n</fold-input-base>\n", styles: [":host{display:block}input,select{all:unset;box-sizing:border-box;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}input::placeholder,select::placeholder{color:var(--fold-color-text-faded)}input:hover:not(:disabled):not(:read-only):not(:focus),select:hover:not(:disabled):not(:read-only):not(:focus){border-color:var(--fold-color-border)}input:focus,select:focus{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}input:disabled,select:disabled{opacity:.4;cursor:not-allowed}input:read-only,select:read-only{opacity:.6;cursor:default}input[type=number],select[type=number]{appearance:textfield;-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button,select[type=number]::-webkit-inner-spin-button,select[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host(.sm) input,:host(.sm) select{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) input,:host(.md) select{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) input,:host(.lg) select{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.center) input{text-align:center}:host(.panel) input,:host(.panel) select{height:auto;padding:
|
|
4913
|
+
}, template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <div class=\"sel-wrap\">\n <select\n [id]=\"inputId\"\n class=\"sel\"\n [disabled]=\"disabled()\"\n [attr.required]=\"required() || null\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [value]=\"value()\"\n (change)=\"onChange($event)\"\n (blur)=\"onBlur()\"\n >\n @if (placeholder(); as ph) {\n <option value=\"\" disabled hidden>{{ ph }}</option>\n }\n <ng-content />\n </select>\n <fold-icon\n name=\"chevron-down\"\n size=\"sm\"\n class=\"sel-caret\"\n aria-hidden=\"true\"\n />\n </div>\n</fold-input-base>\n", styles: [":host{display:block}input,select{all:unset;box-sizing:border-box;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}input::placeholder,select::placeholder{color:var(--fold-color-text-faded)}input:hover:not(:disabled):not(:read-only):not(:focus),select:hover:not(:disabled):not(:read-only):not(:focus){border-color:var(--fold-color-border)}input:focus,select:focus{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}input:disabled,select:disabled{opacity:.4;cursor:not-allowed}input:read-only,select:read-only{opacity:.6;cursor:default}input[type=number],select[type=number]{appearance:textfield;-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button,select[type=number]::-webkit-inner-spin-button,select[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host(.sm) input,:host(.sm) select{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) input,:host(.md) select{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) input,:host(.lg) select{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.center) input{text-align:center}:host(.panel) input,:host(.panel) select{height:auto;padding:var(--fold-space-sm) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised)}:host(.panel) input:focus,:host(.panel) select:focus{box-shadow:none}.sel-wrap{position:relative}.sel{appearance:none;-webkit-appearance:none;padding-right:1.85rem;cursor:pointer}.sel:disabled{cursor:not-allowed}.sel-caret{position:absolute;top:50%;right:.6rem;transform:translateY(-50%);pointer-events:none;color:var(--fold-color-text-muted)}\n"] }]
|
|
4863
4914
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], optionalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
|
|
4864
4915
|
|
|
4865
4916
|
/**
|
|
@@ -5841,7 +5892,7 @@ class FoldListboxComponent {
|
|
|
5841
5892
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldListboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5842
5893
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldListboxComponent, isStandalone: true, selector: "fold-listbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", open: "openChange", selectionChange: "selectionChange" }, host: { properties: { "class": "size() + \" \" + variant()" } }, providers: [
|
|
5843
5894
|
{ provide: FOLD_LISTBOX_OWNER, useExisting: FoldListboxComponent },
|
|
5844
|
-
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true, isSignal: true }, { propertyName: "projectedOptions", predicate: FoldOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "renderedOptions", predicate: FoldOptionComponent, descendants: true, isSignal: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <fold-popover\n [(open)]=\"open\"\n [autoFocus]=\"false\"\n [ariaControls]=\"listId\"\n [placement]=\"placement()\"\n [fallbackPlacements]=\"['top-start', 'bottom-end', 'top-end']\"\n >\n <div class=\"lb-field\">\n <button\n type=\"button\"\n class=\"lb-trigger\"\n [class.has-clear]=\"showClear()\"\n [id]=\"inputId\"\n foldPopoverTrigger=\"listbox\"\n [disabled]=\"disabled()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (selectedLabel(); as lbl) {\n <span class=\"lb-value\">{{ lbl }}</span>\n } @else {\n <span class=\"lb-placeholder\">{{ placeholder() }}</span>\n }\n <fold-icon\n name=\"chevron-down\"\n size=\"sm\"\n class=\"lb-caret\"\n aria-hidden=\"true\"\n />\n </button>\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"lb-clear\"\n [attr.aria-label]=\"clearLabel()\"\n (click)=\"clear($event)\"\n >\n <fold-icon name=\"close\" size=\"sm\" aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <div\n #list\n foldPopoverPanel\n class=\"lb-list\"\n role=\"listbox\"\n tabindex=\"-1\"\n [id]=\"listId\"\n [attr.aria-label]=\"label()\"\n [attr.aria-activedescendant]=\"activeId()\"\n (keydown)=\"onListKeydown($event)\"\n (click)=\"onListClick($event)\"\n (pointermove)=\"onListPointermove($event)\"\n >\n @if (options(); as opts) {\n @for (o of opts; track o.value) {\n <fold-option [value]=\"o.value\" [disabled]=\"o.disabled ?? false\">\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: o }\"\n />\n } @else {\n {{ o.label }}\n }\n </fold-option>\n }\n } @else {\n <ng-content />\n }\n </div>\n </fold-popover>\n</fold-input-base>\n", styles: [":host{display:block}.lb-trigger{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:.5rem;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);cursor:pointer;transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}@media(prefers-reduced-motion:reduce){.lb-trigger{transition:none}}.lb-trigger:hover:not(:disabled){border-color:var(--fold-color-border)}.lb-trigger:focus-visible{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}.lb-trigger:disabled{opacity:.4;cursor:not-allowed}.lb-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-placeholder{color:var(--fold-color-text-faded)}.lb-caret{margin-inline-start:auto;color:var(--fold-color-text-muted)}.lb-field{position:relative}.lb-trigger.has-clear .lb-caret{visibility:hidden}.lb-clear{all:unset;position:absolute;inset-inline-end:.4rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;padding:.15rem;border-radius:var(--fold-radius-xs);color:var(--fold-color-text-muted);cursor:pointer}.lb-clear:hover,.lb-clear:focus-visible{color:var(--fold-color-text);background:var(--fold-color-surface-hover)}:host(.sm) .lb-trigger{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) .lb-trigger{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) .lb-trigger{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.panel) .lb-trigger{height:auto;padding:
|
|
5895
|
+
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true, isSignal: true }, { propertyName: "projectedOptions", predicate: FoldOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "renderedOptions", predicate: FoldOptionComponent, descendants: true, isSignal: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <fold-popover\n [(open)]=\"open\"\n [autoFocus]=\"false\"\n [ariaControls]=\"listId\"\n [placement]=\"placement()\"\n [fallbackPlacements]=\"['top-start', 'bottom-end', 'top-end']\"\n >\n <div class=\"lb-field\">\n <button\n type=\"button\"\n class=\"lb-trigger\"\n [class.has-clear]=\"showClear()\"\n [id]=\"inputId\"\n foldPopoverTrigger=\"listbox\"\n [disabled]=\"disabled()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (selectedLabel(); as lbl) {\n <span class=\"lb-value\">{{ lbl }}</span>\n } @else {\n <span class=\"lb-placeholder\">{{ placeholder() }}</span>\n }\n <fold-icon\n name=\"chevron-down\"\n size=\"sm\"\n class=\"lb-caret\"\n aria-hidden=\"true\"\n />\n </button>\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"lb-clear\"\n [attr.aria-label]=\"clearLabel()\"\n (click)=\"clear($event)\"\n >\n <fold-icon name=\"close\" size=\"sm\" aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <div\n #list\n foldPopoverPanel\n class=\"lb-list\"\n role=\"listbox\"\n tabindex=\"-1\"\n [id]=\"listId\"\n [attr.aria-label]=\"label()\"\n [attr.aria-activedescendant]=\"activeId()\"\n (keydown)=\"onListKeydown($event)\"\n (click)=\"onListClick($event)\"\n (pointermove)=\"onListPointermove($event)\"\n >\n @if (options(); as opts) {\n @for (o of opts; track o.value) {\n <fold-option [value]=\"o.value\" [disabled]=\"o.disabled ?? false\">\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: o }\"\n />\n } @else {\n {{ o.label }}\n }\n </fold-option>\n }\n } @else {\n <ng-content />\n }\n </div>\n </fold-popover>\n</fold-input-base>\n", styles: [":host{display:block}.lb-trigger{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:.5rem;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);cursor:pointer;transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}@media(prefers-reduced-motion:reduce){.lb-trigger{transition:none}}.lb-trigger:hover:not(:disabled){border-color:var(--fold-color-border)}.lb-trigger:focus-visible{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}.lb-trigger:disabled{opacity:.4;cursor:not-allowed}.lb-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-placeholder{color:var(--fold-color-text-faded)}.lb-caret{margin-inline-start:auto;color:var(--fold-color-text-muted)}.lb-field{position:relative}.lb-trigger.has-clear .lb-caret{visibility:hidden}.lb-clear{all:unset;position:absolute;inset-inline-end:.4rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;padding:.15rem;border-radius:var(--fold-radius-xs);color:var(--fold-color-text-muted);cursor:pointer}.lb-clear:hover,.lb-clear:focus-visible{color:var(--fold-color-text);background:var(--fold-color-surface-hover)}:host(.sm) .lb-trigger{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) .lb-trigger{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) .lb-trigger{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.panel) .lb-trigger{height:auto;padding:var(--fold-space-sm) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised)}:host(.panel) .lb-trigger:focus-visible{box-shadow:none}.lb-list{display:flex;flex-direction:column;gap:1px;min-width:var(--fold-popover-anchor-width, 11rem);outline:none}\n"], dependencies: [{ kind: "component", type: FoldInputBaseComponent, selector: "fold-input-base", inputs: ["label", "for", "required", "optional", "optionalLabel", "hint", "error"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldOptionComponent, selector: "fold-option", inputs: ["value", "disabled"] }, { kind: "component", type: FoldPopoverComponent, selector: "fold-popover", inputs: ["placement", "fallbackPlacements", "offset", "padding", "autoFocus", "arrow", "open", "ariaControls"], outputs: ["openChange"] }, { kind: "directive", type: FoldPopoverTriggerDirective, selector: "[foldPopoverTrigger]", inputs: ["foldPopoverTrigger"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
5845
5896
|
}
|
|
5846
5897
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldListboxComponent, decorators: [{
|
|
5847
5898
|
type: Component,
|
|
@@ -5854,7 +5905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
5854
5905
|
NgTemplateOutlet,
|
|
5855
5906
|
], host: { "[class]": 'size() + " " + variant()' }, providers: [
|
|
5856
5907
|
{ provide: FOLD_LISTBOX_OWNER, useExisting: FoldListboxComponent },
|
|
5857
|
-
], template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <fold-popover\n [(open)]=\"open\"\n [autoFocus]=\"false\"\n [ariaControls]=\"listId\"\n [placement]=\"placement()\"\n [fallbackPlacements]=\"['top-start', 'bottom-end', 'top-end']\"\n >\n <div class=\"lb-field\">\n <button\n type=\"button\"\n class=\"lb-trigger\"\n [class.has-clear]=\"showClear()\"\n [id]=\"inputId\"\n foldPopoverTrigger=\"listbox\"\n [disabled]=\"disabled()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (selectedLabel(); as lbl) {\n <span class=\"lb-value\">{{ lbl }}</span>\n } @else {\n <span class=\"lb-placeholder\">{{ placeholder() }}</span>\n }\n <fold-icon\n name=\"chevron-down\"\n size=\"sm\"\n class=\"lb-caret\"\n aria-hidden=\"true\"\n />\n </button>\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"lb-clear\"\n [attr.aria-label]=\"clearLabel()\"\n (click)=\"clear($event)\"\n >\n <fold-icon name=\"close\" size=\"sm\" aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <div\n #list\n foldPopoverPanel\n class=\"lb-list\"\n role=\"listbox\"\n tabindex=\"-1\"\n [id]=\"listId\"\n [attr.aria-label]=\"label()\"\n [attr.aria-activedescendant]=\"activeId()\"\n (keydown)=\"onListKeydown($event)\"\n (click)=\"onListClick($event)\"\n (pointermove)=\"onListPointermove($event)\"\n >\n @if (options(); as opts) {\n @for (o of opts; track o.value) {\n <fold-option [value]=\"o.value\" [disabled]=\"o.disabled ?? false\">\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: o }\"\n />\n } @else {\n {{ o.label }}\n }\n </fold-option>\n }\n } @else {\n <ng-content />\n }\n </div>\n </fold-popover>\n</fold-input-base>\n", styles: [":host{display:block}.lb-trigger{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:.5rem;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);cursor:pointer;transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}@media(prefers-reduced-motion:reduce){.lb-trigger{transition:none}}.lb-trigger:hover:not(:disabled){border-color:var(--fold-color-border)}.lb-trigger:focus-visible{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}.lb-trigger:disabled{opacity:.4;cursor:not-allowed}.lb-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-placeholder{color:var(--fold-color-text-faded)}.lb-caret{margin-inline-start:auto;color:var(--fold-color-text-muted)}.lb-field{position:relative}.lb-trigger.has-clear .lb-caret{visibility:hidden}.lb-clear{all:unset;position:absolute;inset-inline-end:.4rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;padding:.15rem;border-radius:var(--fold-radius-xs);color:var(--fold-color-text-muted);cursor:pointer}.lb-clear:hover,.lb-clear:focus-visible{color:var(--fold-color-text);background:var(--fold-color-surface-hover)}:host(.sm) .lb-trigger{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) .lb-trigger{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) .lb-trigger{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.panel) .lb-trigger{height:auto;padding:
|
|
5908
|
+
], template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <fold-popover\n [(open)]=\"open\"\n [autoFocus]=\"false\"\n [ariaControls]=\"listId\"\n [placement]=\"placement()\"\n [fallbackPlacements]=\"['top-start', 'bottom-end', 'top-end']\"\n >\n <div class=\"lb-field\">\n <button\n type=\"button\"\n class=\"lb-trigger\"\n [class.has-clear]=\"showClear()\"\n [id]=\"inputId\"\n foldPopoverTrigger=\"listbox\"\n [disabled]=\"disabled()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (selectedLabel(); as lbl) {\n <span class=\"lb-value\">{{ lbl }}</span>\n } @else {\n <span class=\"lb-placeholder\">{{ placeholder() }}</span>\n }\n <fold-icon\n name=\"chevron-down\"\n size=\"sm\"\n class=\"lb-caret\"\n aria-hidden=\"true\"\n />\n </button>\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"lb-clear\"\n [attr.aria-label]=\"clearLabel()\"\n (click)=\"clear($event)\"\n >\n <fold-icon name=\"close\" size=\"sm\" aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <div\n #list\n foldPopoverPanel\n class=\"lb-list\"\n role=\"listbox\"\n tabindex=\"-1\"\n [id]=\"listId\"\n [attr.aria-label]=\"label()\"\n [attr.aria-activedescendant]=\"activeId()\"\n (keydown)=\"onListKeydown($event)\"\n (click)=\"onListClick($event)\"\n (pointermove)=\"onListPointermove($event)\"\n >\n @if (options(); as opts) {\n @for (o of opts; track o.value) {\n <fold-option [value]=\"o.value\" [disabled]=\"o.disabled ?? false\">\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: o }\"\n />\n } @else {\n {{ o.label }}\n }\n </fold-option>\n }\n } @else {\n <ng-content />\n }\n </div>\n </fold-popover>\n</fold-input-base>\n", styles: [":host{display:block}.lb-trigger{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:.5rem;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);cursor:pointer;transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}@media(prefers-reduced-motion:reduce){.lb-trigger{transition:none}}.lb-trigger:hover:not(:disabled){border-color:var(--fold-color-border)}.lb-trigger:focus-visible{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}.lb-trigger:disabled{opacity:.4;cursor:not-allowed}.lb-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-placeholder{color:var(--fold-color-text-faded)}.lb-caret{margin-inline-start:auto;color:var(--fold-color-text-muted)}.lb-field{position:relative}.lb-trigger.has-clear .lb-caret{visibility:hidden}.lb-clear{all:unset;position:absolute;inset-inline-end:.4rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;padding:.15rem;border-radius:var(--fold-radius-xs);color:var(--fold-color-text-muted);cursor:pointer}.lb-clear:hover,.lb-clear:focus-visible{color:var(--fold-color-text);background:var(--fold-color-surface-hover)}:host(.sm) .lb-trigger{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) .lb-trigger{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) .lb-trigger{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.panel) .lb-trigger{height:auto;padding:var(--fold-space-sm) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised)}:host(.panel) .lb-trigger:focus-visible{box-shadow:none}.lb-list{display:flex;flex-direction:column;gap:1px;min-width:var(--fold-popover-anchor-width, 11rem);outline:none}\n"] }]
|
|
5858
5909
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], optionalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], allowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClear", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], optionTemplate: [{ type: i0.ContentChild, args: ["option", { isSignal: true }] }], projectedOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FoldOptionComponent), { isSignal: true }] }], renderedOptions: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => FoldOptionComponent), { isSignal: true }] }], list: [{ type: i0.ViewChild, args: ["list", { isSignal: true }] }] } });
|
|
5859
5910
|
|
|
5860
5911
|
/** Labels beyond this count collapse to a "+N" tail on the trigger summary. */
|
|
@@ -6096,7 +6147,7 @@ class FoldMultiselectComponent {
|
|
|
6096
6147
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6097
6148
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldMultiselectComponent, isStandalone: true, selector: "fold-multiselect", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", open: "openChange" }, host: { properties: { "class": "size() + \" \" + variant()" } }, providers: [
|
|
6098
6149
|
{ provide: FOLD_LISTBOX_OWNER, useExisting: FoldMultiselectComponent },
|
|
6099
|
-
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true, isSignal: true }, { propertyName: "projectedOptions", predicate: FoldOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "renderedOptions", predicate: FoldOptionComponent, descendants: true, isSignal: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <fold-popover\n [(open)]=\"open\"\n [autoFocus]=\"false\"\n [ariaControls]=\"listId\"\n [placement]=\"placement()\"\n [fallbackPlacements]=\"['top-start', 'bottom-end', 'top-end']\"\n >\n <button\n type=\"button\"\n class=\"lb-trigger\"\n [id]=\"inputId\"\n foldPopoverTrigger=\"listbox\"\n [disabled]=\"disabled()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (summaryLabel(); as lbl) {\n <span class=\"lb-value\">{{ lbl }}</span>\n } @else {\n <span class=\"lb-placeholder\">{{ placeholder() }}</span>\n }\n <fold-icon\n name=\"chevron-down\"\n size=\"sm\"\n class=\"lb-caret\"\n aria-hidden=\"true\"\n />\n </button>\n\n <div\n #list\n foldPopoverPanel\n class=\"lb-list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n tabindex=\"-1\"\n [id]=\"listId\"\n [attr.aria-label]=\"label()\"\n [attr.aria-activedescendant]=\"activeId()\"\n (keydown)=\"onListKeydown($event)\"\n (click)=\"onListClick($event)\"\n (pointermove)=\"onListPointermove($event)\"\n >\n @if (options(); as opts) {\n @for (o of opts; track o.value) {\n <fold-option [value]=\"o.value\" [disabled]=\"o.disabled ?? false\">\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: o }\"\n />\n } @else {\n {{ o.label }}\n }\n </fold-option>\n }\n } @else {\n <ng-content />\n }\n </div>\n </fold-popover>\n</fold-input-base>\n", styles: [":host{display:block}.lb-trigger{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:.5rem;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);cursor:pointer;transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}@media(prefers-reduced-motion:reduce){.lb-trigger{transition:none}}.lb-trigger:hover:not(:disabled){border-color:var(--fold-color-border)}.lb-trigger:focus-visible{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}.lb-trigger:disabled{opacity:.4;cursor:not-allowed}.lb-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-placeholder{color:var(--fold-color-text-faded)}.lb-caret{margin-inline-start:auto;color:var(--fold-color-text-muted)}.lb-field{position:relative}.lb-trigger.has-clear .lb-caret{visibility:hidden}.lb-clear{all:unset;position:absolute;inset-inline-end:.4rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;padding:.15rem;border-radius:var(--fold-radius-xs);color:var(--fold-color-text-muted);cursor:pointer}.lb-clear:hover,.lb-clear:focus-visible{color:var(--fold-color-text);background:var(--fold-color-surface-hover)}:host(.sm) .lb-trigger{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) .lb-trigger{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) .lb-trigger{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.panel) .lb-trigger{height:auto;padding:
|
|
6150
|
+
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true, isSignal: true }, { propertyName: "projectedOptions", predicate: FoldOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "renderedOptions", predicate: FoldOptionComponent, descendants: true, isSignal: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <fold-popover\n [(open)]=\"open\"\n [autoFocus]=\"false\"\n [ariaControls]=\"listId\"\n [placement]=\"placement()\"\n [fallbackPlacements]=\"['top-start', 'bottom-end', 'top-end']\"\n >\n <button\n type=\"button\"\n class=\"lb-trigger\"\n [id]=\"inputId\"\n foldPopoverTrigger=\"listbox\"\n [disabled]=\"disabled()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (summaryLabel(); as lbl) {\n <span class=\"lb-value\">{{ lbl }}</span>\n } @else {\n <span class=\"lb-placeholder\">{{ placeholder() }}</span>\n }\n <fold-icon\n name=\"chevron-down\"\n size=\"sm\"\n class=\"lb-caret\"\n aria-hidden=\"true\"\n />\n </button>\n\n <div\n #list\n foldPopoverPanel\n class=\"lb-list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n tabindex=\"-1\"\n [id]=\"listId\"\n [attr.aria-label]=\"label()\"\n [attr.aria-activedescendant]=\"activeId()\"\n (keydown)=\"onListKeydown($event)\"\n (click)=\"onListClick($event)\"\n (pointermove)=\"onListPointermove($event)\"\n >\n @if (options(); as opts) {\n @for (o of opts; track o.value) {\n <fold-option [value]=\"o.value\" [disabled]=\"o.disabled ?? false\">\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: o }\"\n />\n } @else {\n {{ o.label }}\n }\n </fold-option>\n }\n } @else {\n <ng-content />\n }\n </div>\n </fold-popover>\n</fold-input-base>\n", styles: [":host{display:block}.lb-trigger{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:.5rem;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);cursor:pointer;transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}@media(prefers-reduced-motion:reduce){.lb-trigger{transition:none}}.lb-trigger:hover:not(:disabled){border-color:var(--fold-color-border)}.lb-trigger:focus-visible{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}.lb-trigger:disabled{opacity:.4;cursor:not-allowed}.lb-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-placeholder{color:var(--fold-color-text-faded)}.lb-caret{margin-inline-start:auto;color:var(--fold-color-text-muted)}.lb-field{position:relative}.lb-trigger.has-clear .lb-caret{visibility:hidden}.lb-clear{all:unset;position:absolute;inset-inline-end:.4rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;padding:.15rem;border-radius:var(--fold-radius-xs);color:var(--fold-color-text-muted);cursor:pointer}.lb-clear:hover,.lb-clear:focus-visible{color:var(--fold-color-text);background:var(--fold-color-surface-hover)}:host(.sm) .lb-trigger{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) .lb-trigger{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) .lb-trigger{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.panel) .lb-trigger{height:auto;padding:var(--fold-space-sm) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised)}:host(.panel) .lb-trigger:focus-visible{box-shadow:none}.lb-list{display:flex;flex-direction:column;gap:1px;min-width:var(--fold-popover-anchor-width, 11rem);outline:none}\n"], dependencies: [{ kind: "component", type: FoldInputBaseComponent, selector: "fold-input-base", inputs: ["label", "for", "required", "optional", "optionalLabel", "hint", "error"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldOptionComponent, selector: "fold-option", inputs: ["value", "disabled"] }, { kind: "component", type: FoldPopoverComponent, selector: "fold-popover", inputs: ["placement", "fallbackPlacements", "offset", "padding", "autoFocus", "arrow", "open", "ariaControls"], outputs: ["openChange"] }, { kind: "directive", type: FoldPopoverTriggerDirective, selector: "[foldPopoverTrigger]", inputs: ["foldPopoverTrigger"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
6100
6151
|
}
|
|
6101
6152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldMultiselectComponent, decorators: [{
|
|
6102
6153
|
type: Component,
|
|
@@ -6109,7 +6160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
6109
6160
|
NgTemplateOutlet,
|
|
6110
6161
|
], host: { "[class]": 'size() + " " + variant()' }, providers: [
|
|
6111
6162
|
{ provide: FOLD_LISTBOX_OWNER, useExisting: FoldMultiselectComponent },
|
|
6112
|
-
], template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <fold-popover\n [(open)]=\"open\"\n [autoFocus]=\"false\"\n [ariaControls]=\"listId\"\n [placement]=\"placement()\"\n [fallbackPlacements]=\"['top-start', 'bottom-end', 'top-end']\"\n >\n <button\n type=\"button\"\n class=\"lb-trigger\"\n [id]=\"inputId\"\n foldPopoverTrigger=\"listbox\"\n [disabled]=\"disabled()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (summaryLabel(); as lbl) {\n <span class=\"lb-value\">{{ lbl }}</span>\n } @else {\n <span class=\"lb-placeholder\">{{ placeholder() }}</span>\n }\n <fold-icon\n name=\"chevron-down\"\n size=\"sm\"\n class=\"lb-caret\"\n aria-hidden=\"true\"\n />\n </button>\n\n <div\n #list\n foldPopoverPanel\n class=\"lb-list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n tabindex=\"-1\"\n [id]=\"listId\"\n [attr.aria-label]=\"label()\"\n [attr.aria-activedescendant]=\"activeId()\"\n (keydown)=\"onListKeydown($event)\"\n (click)=\"onListClick($event)\"\n (pointermove)=\"onListPointermove($event)\"\n >\n @if (options(); as opts) {\n @for (o of opts; track o.value) {\n <fold-option [value]=\"o.value\" [disabled]=\"o.disabled ?? false\">\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: o }\"\n />\n } @else {\n {{ o.label }}\n }\n </fold-option>\n }\n } @else {\n <ng-content />\n }\n </div>\n </fold-popover>\n</fold-input-base>\n", styles: [":host{display:block}.lb-trigger{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:.5rem;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);cursor:pointer;transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}@media(prefers-reduced-motion:reduce){.lb-trigger{transition:none}}.lb-trigger:hover:not(:disabled){border-color:var(--fold-color-border)}.lb-trigger:focus-visible{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}.lb-trigger:disabled{opacity:.4;cursor:not-allowed}.lb-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-placeholder{color:var(--fold-color-text-faded)}.lb-caret{margin-inline-start:auto;color:var(--fold-color-text-muted)}.lb-field{position:relative}.lb-trigger.has-clear .lb-caret{visibility:hidden}.lb-clear{all:unset;position:absolute;inset-inline-end:.4rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;padding:.15rem;border-radius:var(--fold-radius-xs);color:var(--fold-color-text-muted);cursor:pointer}.lb-clear:hover,.lb-clear:focus-visible{color:var(--fold-color-text);background:var(--fold-color-surface-hover)}:host(.sm) .lb-trigger{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) .lb-trigger{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) .lb-trigger{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.panel) .lb-trigger{height:auto;padding:
|
|
6163
|
+
], template: "<fold-input-base\n [label]=\"label()\"\n [for]=\"inputId\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [optionalLabel]=\"optionalLabel()\"\n [hint]=\"hint()\"\n [error]=\"errorMessage()\"\n>\n <fold-popover\n [(open)]=\"open\"\n [autoFocus]=\"false\"\n [ariaControls]=\"listId\"\n [placement]=\"placement()\"\n [fallbackPlacements]=\"['top-start', 'bottom-end', 'top-end']\"\n >\n <button\n type=\"button\"\n class=\"lb-trigger\"\n [id]=\"inputId\"\n foldPopoverTrigger=\"listbox\"\n [disabled]=\"disabled()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (summaryLabel(); as lbl) {\n <span class=\"lb-value\">{{ lbl }}</span>\n } @else {\n <span class=\"lb-placeholder\">{{ placeholder() }}</span>\n }\n <fold-icon\n name=\"chevron-down\"\n size=\"sm\"\n class=\"lb-caret\"\n aria-hidden=\"true\"\n />\n </button>\n\n <div\n #list\n foldPopoverPanel\n class=\"lb-list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n tabindex=\"-1\"\n [id]=\"listId\"\n [attr.aria-label]=\"label()\"\n [attr.aria-activedescendant]=\"activeId()\"\n (keydown)=\"onListKeydown($event)\"\n (click)=\"onListClick($event)\"\n (pointermove)=\"onListPointermove($event)\"\n >\n @if (options(); as opts) {\n @for (o of opts; track o.value) {\n <fold-option [value]=\"o.value\" [disabled]=\"o.disabled ?? false\">\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: o }\"\n />\n } @else {\n {{ o.label }}\n }\n </fold-option>\n }\n } @else {\n <ng-content />\n }\n </div>\n </fold-popover>\n</fold-input-base>\n", styles: [":host{display:block}.lb-trigger{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:.5rem;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);cursor:pointer;transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}@media(prefers-reduced-motion:reduce){.lb-trigger{transition:none}}.lb-trigger:hover:not(:disabled){border-color:var(--fold-color-border)}.lb-trigger:focus-visible{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}.lb-trigger:disabled{opacity:.4;cursor:not-allowed}.lb-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-placeholder{color:var(--fold-color-text-faded)}.lb-caret{margin-inline-start:auto;color:var(--fold-color-text-muted)}.lb-field{position:relative}.lb-trigger.has-clear .lb-caret{visibility:hidden}.lb-clear{all:unset;position:absolute;inset-inline-end:.4rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;padding:.15rem;border-radius:var(--fold-radius-xs);color:var(--fold-color-text-muted);cursor:pointer}.lb-clear:hover,.lb-clear:focus-visible{color:var(--fold-color-text);background:var(--fold-color-surface-hover)}:host(.sm) .lb-trigger{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) .lb-trigger{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) .lb-trigger{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.panel) .lb-trigger{height:auto;padding:var(--fold-space-sm) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised)}:host(.panel) .lb-trigger:focus-visible{box-shadow:none}.lb-list{display:flex;flex-direction:column;gap:1px;min-width:var(--fold-popover-anchor-width, 11rem);outline:none}\n"] }]
|
|
6113
6164
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], optionalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], optionTemplate: [{ type: i0.ContentChild, args: ["option", { isSignal: true }] }], projectedOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FoldOptionComponent), { isSignal: true }] }], renderedOptions: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => FoldOptionComponent), { isSignal: true }] }], list: [{ type: i0.ViewChild, args: ["list", { isSignal: true }] }] } });
|
|
6114
6165
|
|
|
6115
6166
|
/** Build a rule from a `RegExp` — the common case. */
|
|
@@ -6223,7 +6274,7 @@ class FoldPasswordFieldComponent {
|
|
|
6223
6274
|
effect(() => this.validChange.emit(this.allValid()));
|
|
6224
6275
|
}
|
|
6225
6276
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPasswordFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6226
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPasswordFieldComponent, isStandalone: true, selector: "fold-password-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, revealable: { classPropertyName: "revealable", publicName: "revealable", isSignal: true, isRequired: false, transformFunction: null }, revealLabel: { classPropertyName: "revealLabel", publicName: "revealLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, rules: { classPropertyName: "rules", publicName: "rules", isSignal: true, isRequired: false, transformFunction: null }, marker: { classPropertyName: "marker", publicName: "marker", isSignal: true, isRequired: false, transformFunction: null }, rulesLabel: { classPropertyName: "rulesLabel", publicName: "rulesLabel", isSignal: true, isRequired: false, transformFunction: null }, metLabel: { classPropertyName: "metLabel", publicName: "metLabel", isSignal: true, isRequired: false, transformFunction: null }, unmetLabel: { classPropertyName: "unmetLabel", publicName: "unmetLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", validChange: "validChange" }, exportAs: ["foldPasswordField"], ngImport: i0, template: "<fold-input\n type=\"password\"\n [label]=\"label()\"\n [placeholder]=\"placeholder()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [size]=\"size()\"\n [variant]=\"variant()\"\n [disabled]=\"disabled()\"\n [revealable]=\"revealable()\"\n [revealLabel]=\"revealLabel()\"\n [hideLabel]=\"hideLabel()\"\n [autocomplete]=\"autocomplete()\"\n [errors]=\"errors()\"\n [(value)]=\"value\"\n [(touched)]=\"touched\"\n/>\n\n<!-- Project into `[rules]` to redesign the checklist off the same state\n (`#pw=\"foldPasswordField\"` \u2192 `pw.checklist()`); otherwise the default list\n below is the fallback content. -->\n<ng-content select=\"[rules]\">\n @if (checklist().length) {\n <ul class=\"pw-rules\" [attr.aria-label]=\"rulesLabel()\" aria-live=\"polite\">\n @for (rule of checklist(); track rule.label) {\n <li class=\"pw-rule\" [class.is-met]=\"rule.met\">\n @if (marker() === \"check\") {\n <span class=\"pw-mark\" aria-hidden=\"true\">\n @if (rule.met) {\n <fold-icon name=\"check\" size=\"sm\" />\n }\n </span>\n } @else {\n <span class=\"pw-dot\" aria-hidden=\"true\"></span>\n }\n <span class=\"pw-rule-label\">{{ rule.label }}</span>\n <!-- The met/unmet word is real text (not just an attribute), so the\n aria-live region actually announces a rule flipping. -->\n <span class=\"pw-sr\"\n >\u2014 {{ rule.met ? metLabel() : unmetLabel() }}</span\n >\n </li>\n }\n </ul>\n }\n</ng-content>\n", styles: [":host{display:block}.pw-rules{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.25rem}.pw-rule{display:flex;align-items:center;gap:.45rem;font-size:var(--fold-text-xs);color:var(--fold-color-text-muted);transition:color var(--fold-motion-fast)}.pw-dot{flex:none;width:.5rem;height:.5rem;border-radius:var(--fold-radius-round);border:1.5px solid var(--fold-color-text-faded);box-sizing:border-box;transition:background var(--fold-motion-fast),border-color var(--fold-motion-fast)}.pw-rule.is-met{color:var(--fold-color-text)}.pw-rule.is-met .pw-dot{border-color:var(--fold-color-primary);background:var(--fold-color-primary)}.pw-mark{flex:none;width:.85rem;height:.85rem;display:grid;place-items:center;color:var(--fold-color-primary)}.pw-rule:not(.is-met) .pw-mark{border:1.5px solid var(--fold-color-text-faded);border-radius:var(--fold-radius-round);box-sizing:border-box}@media(forced-colors:active){.pw-rule.is-met .pw-dot{background:Highlight;border-color:Highlight}.pw-mark{color:Highlight}}.pw-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: FoldInputComponent, selector: "fold-input", inputs: ["value", "disabled", "touched", "errors", "type", "revealable", "revealLabel", "hideLabel", "size", "align", "variant", "label", "required", "optional", "optionalLabel", "hint", "placeholder", "readOnly", "autofocus", "autocomplete"], outputs: ["valueChange", "touchedChange"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "title"] }] });
|
|
6277
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPasswordFieldComponent, isStandalone: true, selector: "fold-password-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, revealable: { classPropertyName: "revealable", publicName: "revealable", isSignal: true, isRequired: false, transformFunction: null }, revealLabel: { classPropertyName: "revealLabel", publicName: "revealLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, rules: { classPropertyName: "rules", publicName: "rules", isSignal: true, isRequired: false, transformFunction: null }, marker: { classPropertyName: "marker", publicName: "marker", isSignal: true, isRequired: false, transformFunction: null }, rulesLabel: { classPropertyName: "rulesLabel", publicName: "rulesLabel", isSignal: true, isRequired: false, transformFunction: null }, metLabel: { classPropertyName: "metLabel", publicName: "metLabel", isSignal: true, isRequired: false, transformFunction: null }, unmetLabel: { classPropertyName: "unmetLabel", publicName: "unmetLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", validChange: "validChange" }, exportAs: ["foldPasswordField"], ngImport: i0, template: "<fold-input\n type=\"password\"\n [label]=\"label()\"\n [placeholder]=\"placeholder()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [size]=\"size()\"\n [variant]=\"variant()\"\n [disabled]=\"disabled()\"\n [revealable]=\"revealable()\"\n [revealLabel]=\"revealLabel()\"\n [hideLabel]=\"hideLabel()\"\n [autocomplete]=\"autocomplete()\"\n [errors]=\"errors()\"\n [(value)]=\"value\"\n [(touched)]=\"touched\"\n/>\n\n<!-- Project into `[rules]` to redesign the checklist off the same state\n (`#pw=\"foldPasswordField\"` \u2192 `pw.checklist()`); otherwise the default list\n below is the fallback content. -->\n<ng-content select=\"[rules]\">\n @if (checklist().length) {\n <ul class=\"pw-rules\" [attr.aria-label]=\"rulesLabel()\" aria-live=\"polite\">\n @for (rule of checklist(); track rule.label) {\n <li class=\"pw-rule\" [class.is-met]=\"rule.met\">\n @if (marker() === \"check\") {\n <span class=\"pw-mark\" aria-hidden=\"true\">\n @if (rule.met) {\n <fold-icon name=\"check\" size=\"sm\" />\n }\n </span>\n } @else {\n <span class=\"pw-dot\" aria-hidden=\"true\"></span>\n }\n <span class=\"pw-rule-label\">{{ rule.label }}</span>\n <!-- The met/unmet word is real text (not just an attribute), so the\n aria-live region actually announces a rule flipping. -->\n <span class=\"pw-sr\"\n >\u2014 {{ rule.met ? metLabel() : unmetLabel() }}</span\n >\n </li>\n }\n </ul>\n }\n</ng-content>\n", styles: [":host{display:block}.pw-rules{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.25rem}.pw-rule{display:flex;align-items:center;gap:.45rem;font-size:var(--fold-text-xs);color:var(--fold-color-text-muted);transition:color var(--fold-motion-fast)}.pw-dot{flex:none;width:.5rem;height:.5rem;border-radius:var(--fold-radius-round);border:1.5px solid var(--fold-color-text-faded);box-sizing:border-box;transition:background var(--fold-motion-fast),border-color var(--fold-motion-fast)}.pw-rule.is-met{color:var(--fold-color-text)}.pw-rule.is-met .pw-dot{border-color:var(--fold-color-primary);background:var(--fold-color-primary)}.pw-mark{flex:none;width:.85rem;height:.85rem;display:grid;place-items:center;color:var(--fold-color-primary)}.pw-rule:not(.is-met) .pw-mark{border:1.5px solid var(--fold-color-text-faded);border-radius:var(--fold-radius-round);box-sizing:border-box}@media(forced-colors:active){.pw-rule.is-met .pw-dot{background:Highlight;border-color:Highlight}.pw-mark{color:Highlight}}.pw-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: FoldInputComponent, selector: "fold-input", inputs: ["value", "disabled", "touched", "errors", "type", "revealable", "revealLabel", "hideLabel", "size", "align", "variant", "label", "required", "optional", "optionalLabel", "hint", "placeholder", "readOnly", "autofocus", "autocomplete"], outputs: ["valueChange", "touchedChange"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
6227
6278
|
}
|
|
6228
6279
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPasswordFieldComponent, decorators: [{
|
|
6229
6280
|
type: Component,
|
|
@@ -6336,7 +6387,7 @@ class FoldViewToggleComponent {
|
|
|
6336
6387
|
buttons.item(index)?.focus();
|
|
6337
6388
|
}
|
|
6338
6389
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldViewToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6339
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldViewToggleComponent, isStandalone: true, selector: "fold-view-toggle", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, activeStyle: { classPropertyName: "activeStyle", publicName: "activeStyle", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "size() + ' a-' + activeStyle()" } }, ngImport: i0, template: "<div\n class=\"vt\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel()\"\n (keydown)=\"onKeydown($event)\"\n>\n @for (option of options(); track option.value) {\n <button\n type=\"button\"\n role=\"radio\"\n class=\"vt-btn\"\n [class.is-on]=\"value() === option.value\"\n [class.icon-only]=\"iconOnly() || !option.label\"\n [attr.aria-checked]=\"value() === option.value\"\n [attr.aria-label]=\"option.ariaLabel ?? option.label ?? null\"\n [attr.tabindex]=\"rovingValue() === option.value ? 0 : -1\"\n [disabled]=\"option.disabled || null\"\n [attr.title]=\"iconOnly() ? (option.label ?? option.ariaLabel) : null\"\n (click)=\"select(option)\"\n >\n @if (option.icon) {\n <fold-icon [name]=\"option.icon\" size=\"sm\" aria-hidden=\"true\" />\n }\n @if (option.label && !iconOnly()) {\n <span class=\"vt-label\">{{ option.label }}</span>\n }\n </button>\n }\n</div>\n", styles: [":host{display:inline-block}.vt{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--fold-color-border-subtle);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-sunken)}.vt-btn{all:unset;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.3rem .65rem;border-radius:var(--fold-radius-xs);font-size:var(--fold-text-sm);color:var(--fold-color-text-muted);cursor:pointer;transition:color var(--fold-motion-fast),background var(--fold-motion-fast)}.vt-btn.icon-only{padding:.3rem .45rem}.vt-btn:hover:not(:disabled){color:var(--fold-color-text)}.vt-btn:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:1px}.vt-btn.is-on{background:var(--fold-color-surface-card);color:var(--fold-color-text);box-shadow:var(--fold-shadow-sm)}.vt-btn:disabled{opacity:.4;cursor:not-allowed}:host(.a-accent) .vt-btn.is-on{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);box-shadow:none}:host(.sm) .vt-btn{padding:.2rem .5rem;font-size:var(--fold-text-xs)}@media(forced-colors:active){.vt-btn.is-on{outline:1px solid Highlight;color:Highlight}}@media(prefers-reduced-motion:reduce){.vt-btn{transition:none}}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "title"] }] });
|
|
6390
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldViewToggleComponent, isStandalone: true, selector: "fold-view-toggle", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, activeStyle: { classPropertyName: "activeStyle", publicName: "activeStyle", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "size() + ' a-' + activeStyle()" } }, ngImport: i0, template: "<div\n class=\"vt\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel()\"\n (keydown)=\"onKeydown($event)\"\n>\n @for (option of options(); track option.value) {\n <button\n type=\"button\"\n role=\"radio\"\n class=\"vt-btn\"\n [class.is-on]=\"value() === option.value\"\n [class.icon-only]=\"iconOnly() || !option.label\"\n [attr.aria-checked]=\"value() === option.value\"\n [attr.aria-label]=\"option.ariaLabel ?? option.label ?? null\"\n [attr.tabindex]=\"rovingValue() === option.value ? 0 : -1\"\n [disabled]=\"option.disabled || null\"\n [attr.title]=\"iconOnly() ? (option.label ?? option.ariaLabel) : null\"\n (click)=\"select(option)\"\n >\n @if (option.icon) {\n <fold-icon [name]=\"option.icon\" size=\"sm\" aria-hidden=\"true\" />\n }\n @if (option.label && !iconOnly()) {\n <span class=\"vt-label\">{{ option.label }}</span>\n }\n </button>\n }\n</div>\n", styles: [":host{display:inline-block}.vt{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--fold-color-border-subtle);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-sunken)}.vt-btn{all:unset;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.3rem .65rem;border-radius:var(--fold-radius-xs);font-size:var(--fold-text-sm);color:var(--fold-color-text-muted);cursor:pointer;transition:color var(--fold-motion-fast),background var(--fold-motion-fast)}.vt-btn.icon-only{padding:.3rem .45rem}.vt-btn:hover:not(:disabled){color:var(--fold-color-text)}.vt-btn:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:1px}.vt-btn.is-on{background:var(--fold-color-surface-card);color:var(--fold-color-text);box-shadow:var(--fold-shadow-sm)}.vt-btn:disabled{opacity:.4;cursor:not-allowed}:host(.a-accent) .vt-btn.is-on{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);box-shadow:none}:host(.sm) .vt-btn{padding:.2rem .5rem;font-size:var(--fold-text-xs)}@media(forced-colors:active){.vt-btn.is-on{outline:1px solid Highlight;color:Highlight}}@media(prefers-reduced-motion:reduce){.vt-btn{transition:none}}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
6340
6391
|
}
|
|
6341
6392
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldViewToggleComponent, decorators: [{
|
|
6342
6393
|
type: Component,
|
|
@@ -6447,11 +6498,11 @@ class FoldSliderComponent {
|
|
|
6447
6498
|
this.touched.set(true);
|
|
6448
6499
|
}
|
|
6449
6500
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6450
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldSliderComponent, isStandalone: true, selector: "fold-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<div class=\"sl\">\n @if (label() || showValue()) {\n <div class=\"sl-head\">\n @if (label(); as text) {\n <label class=\"sl-label\" [for]=\"inputId\">{{ text }}</label>\n }\n @if (showValue()) {\n <span class=\"sl-value\">{{ display() }}</span>\n }\n </div>\n }\n <input\n [id]=\"inputId\"\n class=\"sl-input\"\n type=\"range\"\n [min]=\"rMin()\"\n [max]=\"rMax()\"\n [step]=\"rStep()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [style.--sl-pct]=\"percent() + '%'\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-valuetext]=\"valueText() ?? null\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n @if (message(); as msg) {\n <span\n class=\"sl-msg\"\n [class.is-error]=\"errorMessage()\"\n [id]=\"errorMessage() ? inputId + '-error' : inputId + '-hint'\"\n >{{ msg }}</span\n >\n }\n</div>\n", styles: [":host{display:block}.sl{display:flex;flex-direction:column;gap:
|
|
6501
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldSliderComponent, isStandalone: true, selector: "fold-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<div class=\"sl\">\n @if (label() || showValue()) {\n <div class=\"sl-head\">\n @if (label(); as text) {\n <label class=\"sl-label\" [for]=\"inputId\">{{ text }}</label>\n }\n @if (showValue()) {\n <span class=\"sl-value\">{{ display() }}</span>\n }\n </div>\n }\n <input\n [id]=\"inputId\"\n class=\"sl-input\"\n type=\"range\"\n [min]=\"rMin()\"\n [max]=\"rMax()\"\n [step]=\"rStep()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [style.--sl-pct]=\"percent() + '%'\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-valuetext]=\"valueText() ?? null\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n @if (message(); as msg) {\n <span\n class=\"sl-msg\"\n [class.is-error]=\"errorMessage()\"\n [id]=\"errorMessage() ? inputId + '-error' : inputId + '-hint'\"\n >{{ msg }}</span\n >\n }\n</div>\n", styles: [":host{display:block}.sl{display:flex;flex-direction:column;gap:var(--fold-space-sm)}.sl-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--fold-space-sm)}.sl-label{font-size:var(--fold-text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fold-color-text-muted)}.sl-value{font-size:var(--fold-text-sm);font-weight:600;color:var(--fold-color-text);font-variant-numeric:tabular-nums}.sl-input{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;cursor:pointer;background:linear-gradient(to right,var(--fold-color-primary) 0 var(--sl-pct, 0%),var(--fold-color-border-subtle) var(--sl-pct, 0%) 100%)}.sl-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--fold-color-primary);border:2px solid var(--fold-color-surface-card);cursor:pointer;pointer-events:auto;transition:transform var(--fold-motion-fast)}.sl-input::-webkit-slider-thumb:hover{transform:scale(1.2)}.sl-input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--fold-color-primary);border:2px solid var(--fold-color-surface-card);cursor:pointer;pointer-events:auto}.sl-input:focus-visible{outline:none}.sl-input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--fold-color-primary) 30%,transparent)}.sl-input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--fold-color-primary) 30%,transparent)}@media(prefers-reduced-motion:reduce){.sl-input::-webkit-slider-thumb{transition:none}.sl-input::-webkit-slider-thumb:hover{transform:none}}@media(forced-colors:active){.sl-input::-webkit-slider-thumb{background:ButtonText;border-color:Canvas}.sl-input::-moz-range-thumb{background:ButtonText;border-color:Canvas}.sl-input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px CanvasText}}.sl-input:disabled{opacity:.5;cursor:not-allowed}.sl-msg{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted)}.sl-msg.is-error{color:var(--fold-color-alert)}\n"] });
|
|
6451
6502
|
}
|
|
6452
6503
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldSliderComponent, decorators: [{
|
|
6453
6504
|
type: Component,
|
|
6454
|
-
args: [{ selector: "fold-slider", standalone: true, template: "<div class=\"sl\">\n @if (label() || showValue()) {\n <div class=\"sl-head\">\n @if (label(); as text) {\n <label class=\"sl-label\" [for]=\"inputId\">{{ text }}</label>\n }\n @if (showValue()) {\n <span class=\"sl-value\">{{ display() }}</span>\n }\n </div>\n }\n <input\n [id]=\"inputId\"\n class=\"sl-input\"\n type=\"range\"\n [min]=\"rMin()\"\n [max]=\"rMax()\"\n [step]=\"rStep()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [style.--sl-pct]=\"percent() + '%'\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-valuetext]=\"valueText() ?? null\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n @if (message(); as msg) {\n <span\n class=\"sl-msg\"\n [class.is-error]=\"errorMessage()\"\n [id]=\"errorMessage() ? inputId + '-error' : inputId + '-hint'\"\n >{{ msg }}</span\n >\n }\n</div>\n", styles: [":host{display:block}.sl{display:flex;flex-direction:column;gap:
|
|
6505
|
+
args: [{ selector: "fold-slider", standalone: true, template: "<div class=\"sl\">\n @if (label() || showValue()) {\n <div class=\"sl-head\">\n @if (label(); as text) {\n <label class=\"sl-label\" [for]=\"inputId\">{{ text }}</label>\n }\n @if (showValue()) {\n <span class=\"sl-value\">{{ display() }}</span>\n }\n </div>\n }\n <input\n [id]=\"inputId\"\n class=\"sl-input\"\n type=\"range\"\n [min]=\"rMin()\"\n [max]=\"rMax()\"\n [step]=\"rStep()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [style.--sl-pct]=\"percent() + '%'\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-valuetext]=\"valueText() ?? null\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n @if (message(); as msg) {\n <span\n class=\"sl-msg\"\n [class.is-error]=\"errorMessage()\"\n [id]=\"errorMessage() ? inputId + '-error' : inputId + '-hint'\"\n >{{ msg }}</span\n >\n }\n</div>\n", styles: [":host{display:block}.sl{display:flex;flex-direction:column;gap:var(--fold-space-sm)}.sl-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--fold-space-sm)}.sl-label{font-size:var(--fold-text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fold-color-text-muted)}.sl-value{font-size:var(--fold-text-sm);font-weight:600;color:var(--fold-color-text);font-variant-numeric:tabular-nums}.sl-input{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;cursor:pointer;background:linear-gradient(to right,var(--fold-color-primary) 0 var(--sl-pct, 0%),var(--fold-color-border-subtle) var(--sl-pct, 0%) 100%)}.sl-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--fold-color-primary);border:2px solid var(--fold-color-surface-card);cursor:pointer;pointer-events:auto;transition:transform var(--fold-motion-fast)}.sl-input::-webkit-slider-thumb:hover{transform:scale(1.2)}.sl-input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--fold-color-primary);border:2px solid var(--fold-color-surface-card);cursor:pointer;pointer-events:auto}.sl-input:focus-visible{outline:none}.sl-input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--fold-color-primary) 30%,transparent)}.sl-input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--fold-color-primary) 30%,transparent)}@media(prefers-reduced-motion:reduce){.sl-input::-webkit-slider-thumb{transition:none}.sl-input::-webkit-slider-thumb:hover{transform:none}}@media(forced-colors:active){.sl-input::-webkit-slider-thumb{background:ButtonText;border-color:Canvas}.sl-input::-moz-range-thumb{background:ButtonText;border-color:Canvas}.sl-input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px CanvasText}}.sl-input:disabled{opacity:.5;cursor:not-allowed}.sl-msg{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted)}.sl-msg.is-error{color:var(--fold-color-alert)}\n"] }]
|
|
6455
6506
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueText", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
|
|
6456
6507
|
|
|
6457
6508
|
/**
|
|
@@ -6656,7 +6707,7 @@ class FoldCalloutComponent {
|
|
|
6656
6707
|
}, /* @ts-ignore */
|
|
6657
6708
|
...(ngDevMode ? [{ debugName: "ariaLive" }] : /* istanbul ignore next */ []));
|
|
6658
6709
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6659
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldCalloutComponent, isStandalone: true, selector: "fold-callout", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, announce: { classPropertyName: "announce", publicName: "announce", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "role()", "attr.aria-live": "ariaLive()", "class.v-neutral": "variant() === 'neutral'", "class.v-accent": "variant() === 'accent'", "class.v-info": "variant() === 'info'", "class.v-success": "variant() === 'success'", "class.v-warning": "variant() === 'warning'", "class.v-alert": "variant() === 'alert'", "class.is-flat": "appearance() === 'flat'" } }, exportAs: ["foldCallout"], ngImport: i0, template: "<fold-icon class=\"callout-icon\" [name]=\"iconName()\" [size]=\"15\" />\n<span class=\"callout-body\"><ng-content /></span>\n<span class=\"callout-actions\"><ng-content select=\"[actions]\" /></span>\n", styles: ["@charset \"UTF-8\";:host{--_surface: var(--fold-color-surface-subtle);--_border: var(--fold-color-border-subtle);--_text: var(--fold-color-text-secondary);--_glyph: var(--fold-color-text-muted);display:flex;align-items:center;gap:var(--fold-space-sm);padding:
|
|
6710
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldCalloutComponent, isStandalone: true, selector: "fold-callout", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, announce: { classPropertyName: "announce", publicName: "announce", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "role()", "attr.aria-live": "ariaLive()", "class.v-neutral": "variant() === 'neutral'", "class.v-accent": "variant() === 'accent'", "class.v-info": "variant() === 'info'", "class.v-success": "variant() === 'success'", "class.v-warning": "variant() === 'warning'", "class.v-alert": "variant() === 'alert'", "class.is-flat": "appearance() === 'flat'" } }, exportAs: ["foldCallout"], ngImport: i0, template: "<fold-icon class=\"callout-icon\" [name]=\"iconName()\" [size]=\"15\" />\n<span class=\"callout-body\"><ng-content /></span>\n<span class=\"callout-actions\"><ng-content select=\"[actions]\" /></span>\n", styles: ["@charset \"UTF-8\";:host{--_surface: var(--fold-color-surface-subtle);--_border: var(--fold-color-border-subtle);--_text: var(--fold-color-text-secondary);--_glyph: var(--fold-color-text-muted);display:flex;align-items:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-md);border:1px solid var(--_border);border-radius:var(--fold-radius-md);background:var(--_surface);color:var(--_text);font-size:var(--fold-text-sm);font-weight:500;line-height:1.45}:host(.is-flat){border-radius:0;border-left:none;border-right:none}.callout-icon{flex:none;color:var(--_glyph)}.callout-body{flex:1 1 auto;min-width:0}.callout-actions{flex:none;display:flex;align-items:center;gap:var(--fold-space-xs);margin-left:var(--fold-space-sm)}.callout-actions:empty{display:none}:host(.v-accent){--_surface: var(--fold-color-primary-surface);--_border: var(--fold-color-primary-border);--_text: var(--fold-color-primary-text);--_glyph: var(--fold-color-primary-text)}:host(.v-info){--_surface: var(--fold-color-info-surface);--_border: var(--fold-color-info-border);--_text: var(--fold-color-info-text);--_glyph: var(--fold-color-info-text)}:host(.v-success){--_surface: var(--fold-color-success-surface);--_border: var(--fold-color-success-border);--_text: var(--fold-color-success-text);--_glyph: var(--fold-color-success-text)}:host(.v-warning){--_surface: var(--fold-color-warning-surface);--_border: var(--fold-color-warning-border);--_text: var(--fold-color-warning-text);--_glyph: var(--fold-color-warning-text)}:host(.v-alert){--_surface: var(--fold-color-alert-surface);--_border: var(--fold-color-alert-border);--_text: var(--fold-color-alert-text);--_glyph: var(--fold-color-alert-text)}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
6660
6711
|
}
|
|
6661
6712
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalloutComponent, decorators: [{
|
|
6662
6713
|
type: Component,
|
|
@@ -6670,7 +6721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
6670
6721
|
"[class.v-warning]": "variant() === 'warning'",
|
|
6671
6722
|
"[class.v-alert]": "variant() === 'alert'",
|
|
6672
6723
|
"[class.is-flat]": "appearance() === 'flat'",
|
|
6673
|
-
}, template: "<fold-icon class=\"callout-icon\" [name]=\"iconName()\" [size]=\"15\" />\n<span class=\"callout-body\"><ng-content /></span>\n<span class=\"callout-actions\"><ng-content select=\"[actions]\" /></span>\n", styles: ["@charset \"UTF-8\";:host{--_surface: var(--fold-color-surface-subtle);--_border: var(--fold-color-border-subtle);--_text: var(--fold-color-text-secondary);--_glyph: var(--fold-color-text-muted);display:flex;align-items:center;gap:var(--fold-space-sm);padding:
|
|
6724
|
+
}, template: "<fold-icon class=\"callout-icon\" [name]=\"iconName()\" [size]=\"15\" />\n<span class=\"callout-body\"><ng-content /></span>\n<span class=\"callout-actions\"><ng-content select=\"[actions]\" /></span>\n", styles: ["@charset \"UTF-8\";:host{--_surface: var(--fold-color-surface-subtle);--_border: var(--fold-color-border-subtle);--_text: var(--fold-color-text-secondary);--_glyph: var(--fold-color-text-muted);display:flex;align-items:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-md);border:1px solid var(--_border);border-radius:var(--fold-radius-md);background:var(--_surface);color:var(--_text);font-size:var(--fold-text-sm);font-weight:500;line-height:1.45}:host(.is-flat){border-radius:0;border-left:none;border-right:none}.callout-icon{flex:none;color:var(--_glyph)}.callout-body{flex:1 1 auto;min-width:0}.callout-actions{flex:none;display:flex;align-items:center;gap:var(--fold-space-xs);margin-left:var(--fold-space-sm)}.callout-actions:empty{display:none}:host(.v-accent){--_surface: var(--fold-color-primary-surface);--_border: var(--fold-color-primary-border);--_text: var(--fold-color-primary-text);--_glyph: var(--fold-color-primary-text)}:host(.v-info){--_surface: var(--fold-color-info-surface);--_border: var(--fold-color-info-border);--_text: var(--fold-color-info-text);--_glyph: var(--fold-color-info-text)}:host(.v-success){--_surface: var(--fold-color-success-surface);--_border: var(--fold-color-success-border);--_text: var(--fold-color-success-text);--_glyph: var(--fold-color-success-text)}:host(.v-warning){--_surface: var(--fold-color-warning-surface);--_border: var(--fold-color-warning-border);--_text: var(--fold-color-warning-text);--_glyph: var(--fold-color-warning-text)}:host(.v-alert){--_surface: var(--fold-color-alert-surface);--_border: var(--fold-color-alert-border);--_text: var(--fold-color-alert-text);--_glyph: var(--fold-color-alert-text)}\n"] }]
|
|
6674
6725
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], announce: [{ type: i0.Input, args: [{ isSignal: true, alias: "announce", required: false }] }] } });
|
|
6675
6726
|
|
|
6676
6727
|
/**
|
|
@@ -6718,11 +6769,11 @@ class FoldDisclosureComponent {
|
|
|
6718
6769
|
this.open.update((v) => !v);
|
|
6719
6770
|
}
|
|
6720
6771
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldDisclosureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6721
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldDisclosureComponent, isStandalone: true, selector: "fold-disclosure", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "class.is-open": "open()" } }, exportAs: ["foldDisclosure"], ngImport: i0, template: "<button\n type=\"button\"\n class=\"disc-summary\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"panelId\"\n (click)=\"toggle()\"\n>\n <span class=\"disc-label\"><ng-content select=\"[summary]\" /></span>\n <fold-icon class=\"disc-chevron\" name=\"chevron-down\" size=\"sm\" />\n</button>\n<div\n class=\"disc-panel\"\n [id]=\"panelId\"\n role=\"region\"\n [attr.aria-hidden]=\"!open()\"\n>\n <div class=\"disc-panel-clip\">\n <div class=\"disc-panel-content\"><ng-content /></div>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);overflow:clip}.disc-summary{width:100%;display:flex;align-items:center;justify-content:space-between;gap:
|
|
6772
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldDisclosureComponent, isStandalone: true, selector: "fold-disclosure", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "class.is-open": "open()" } }, exportAs: ["foldDisclosure"], ngImport: i0, template: "<button\n type=\"button\"\n class=\"disc-summary\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"panelId\"\n (click)=\"toggle()\"\n>\n <span class=\"disc-label\"><ng-content select=\"[summary]\" /></span>\n <fold-icon class=\"disc-chevron\" name=\"chevron-down\" size=\"sm\" />\n</button>\n<div\n class=\"disc-panel\"\n [id]=\"panelId\"\n role=\"region\"\n [attr.aria-hidden]=\"!open()\"\n>\n <div class=\"disc-panel-clip\">\n <div class=\"disc-panel-content\"><ng-content /></div>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);overflow:clip}.disc-summary{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-md);padding:var(--fold-space-md) var(--fold-space-lg);border:none;background:var(--fold-disclosure-summary-bg, transparent);color:var(--fold-disclosure-summary-color, var(--fold-color-text));font:inherit;font-weight:700;text-align:left;cursor:pointer}.disc-summary:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.disc-label{min-width:0}.disc-chevron{flex:none;transition:transform .2s ease}:host(.is-open) .disc-chevron{transform:rotate(180deg)}.disc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}:host(.is-open) .disc-panel{grid-template-rows:1fr}.disc-panel-clip{min-height:0;overflow:hidden}.disc-panel-content{padding:var(--fold-space-lg);border-top:1px solid var(--fold-color-border-subtle)}@media(prefers-reduced-motion:reduce){.disc-panel,.disc-chevron{transition:none}}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
6722
6773
|
}
|
|
6723
6774
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldDisclosureComponent, decorators: [{
|
|
6724
6775
|
type: Component,
|
|
6725
|
-
args: [{ selector: "fold-disclosure", standalone: true, imports: [FoldIconComponent], exportAs: "foldDisclosure", host: { "[class.is-open]": "open()" }, template: "<button\n type=\"button\"\n class=\"disc-summary\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"panelId\"\n (click)=\"toggle()\"\n>\n <span class=\"disc-label\"><ng-content select=\"[summary]\" /></span>\n <fold-icon class=\"disc-chevron\" name=\"chevron-down\" size=\"sm\" />\n</button>\n<div\n class=\"disc-panel\"\n [id]=\"panelId\"\n role=\"region\"\n [attr.aria-hidden]=\"!open()\"\n>\n <div class=\"disc-panel-clip\">\n <div class=\"disc-panel-content\"><ng-content /></div>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);overflow:clip}.disc-summary{width:100%;display:flex;align-items:center;justify-content:space-between;gap:
|
|
6776
|
+
args: [{ selector: "fold-disclosure", standalone: true, imports: [FoldIconComponent], exportAs: "foldDisclosure", host: { "[class.is-open]": "open()" }, template: "<button\n type=\"button\"\n class=\"disc-summary\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"panelId\"\n (click)=\"toggle()\"\n>\n <span class=\"disc-label\"><ng-content select=\"[summary]\" /></span>\n <fold-icon class=\"disc-chevron\" name=\"chevron-down\" size=\"sm\" />\n</button>\n<div\n class=\"disc-panel\"\n [id]=\"panelId\"\n role=\"region\"\n [attr.aria-hidden]=\"!open()\"\n>\n <div class=\"disc-panel-clip\">\n <div class=\"disc-panel-content\"><ng-content /></div>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);overflow:clip}.disc-summary{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-md);padding:var(--fold-space-md) var(--fold-space-lg);border:none;background:var(--fold-disclosure-summary-bg, transparent);color:var(--fold-disclosure-summary-color, var(--fold-color-text));font:inherit;font-weight:700;text-align:left;cursor:pointer}.disc-summary:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.disc-label{min-width:0}.disc-chevron{flex:none;transition:transform .2s ease}:host(.is-open) .disc-chevron{transform:rotate(180deg)}.disc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}:host(.is-open) .disc-panel{grid-template-rows:1fr}.disc-panel-clip{min-height:0;overflow:hidden}.disc-panel-content{padding:var(--fold-space-lg);border-top:1px solid var(--fold-color-border-subtle)}@media(prefers-reduced-motion:reduce){.disc-panel,.disc-chevron{transition:none}}\n"] }]
|
|
6726
6777
|
}], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
|
|
6727
6778
|
|
|
6728
6779
|
/**
|
|
@@ -6767,11 +6818,11 @@ class FoldStatusBadgeComponent {
|
|
|
6767
6818
|
}, /* @ts-ignore */
|
|
6768
6819
|
...(ngDevMode ? [{ debugName: "normalizedStatus" }] : /* istanbul ignore next */ []));
|
|
6769
6820
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldStatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6770
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldStatusBadgeComponent, isStandalone: true, selector: "fold-status-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"badge\" [attr.data-status]=\"normalizedStatus()\">{{\n label() || status()\n}}</span>\n", styles: ["@charset \"UTF-8\";.badge{display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;padding:2px
|
|
6821
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldStatusBadgeComponent, isStandalone: true, selector: "fold-status-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"badge\" [attr.data-status]=\"normalizedStatus()\">{{\n label() || status()\n}}</span>\n", styles: ["@charset \"UTF-8\";.badge{display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;padding:2px var(--fold-space-sm);border-radius:var(--fold-radius-pill);font-size:var(--fold-text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.badge[data-status=active]{background:var(--fold-color-success-surface);color:var(--fold-color-success-text);border:1px solid var(--fold-color-success-border)}.badge[data-status=draft],.badge[data-status=pending]{background:var(--fold-color-warning-surface);color:var(--fold-color-warning-text);border:1px solid var(--fold-color-warning-border)}.badge[data-status=suspended]{background:var(--fold-color-alert-surface);color:var(--fold-color-alert-text);border:1px solid var(--fold-color-alert-border)}.badge[data-status=coming-soon]{background:var(--fold-color-surface-raised);color:var(--fold-color-text-muted);border:1px solid var(--fold-color-border)}.badge:not([data-status=active]):not([data-status=draft]):not([data-status=pending]):not([data-status=suspended]):not([data-status=coming-soon]){background:var(--fold-color-surface-raised);color:var(--fold-color-text-secondary);border:1px solid var(--fold-color-border)}\n"] });
|
|
6771
6822
|
}
|
|
6772
6823
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldStatusBadgeComponent, decorators: [{
|
|
6773
6824
|
type: Component,
|
|
6774
|
-
args: [{ selector: "fold-status-badge", standalone: true, template: "<span class=\"badge\" [attr.data-status]=\"normalizedStatus()\">{{\n label() || status()\n}}</span>\n", styles: ["@charset \"UTF-8\";.badge{display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;padding:2px
|
|
6825
|
+
args: [{ selector: "fold-status-badge", standalone: true, template: "<span class=\"badge\" [attr.data-status]=\"normalizedStatus()\">{{\n label() || status()\n}}</span>\n", styles: ["@charset \"UTF-8\";.badge{display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;padding:2px var(--fold-space-sm);border-radius:var(--fold-radius-pill);font-size:var(--fold-text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.badge[data-status=active]{background:var(--fold-color-success-surface);color:var(--fold-color-success-text);border:1px solid var(--fold-color-success-border)}.badge[data-status=draft],.badge[data-status=pending]{background:var(--fold-color-warning-surface);color:var(--fold-color-warning-text);border:1px solid var(--fold-color-warning-border)}.badge[data-status=suspended]{background:var(--fold-color-alert-surface);color:var(--fold-color-alert-text);border:1px solid var(--fold-color-alert-border)}.badge[data-status=coming-soon]{background:var(--fold-color-surface-raised);color:var(--fold-color-text-muted);border:1px solid var(--fold-color-border)}.badge:not([data-status=active]):not([data-status=draft]):not([data-status=pending]):not([data-status=suspended]):not([data-status=coming-soon]){background:var(--fold-color-surface-raised);color:var(--fold-color-text-secondary);border:1px solid var(--fold-color-border)}\n"] }]
|
|
6775
6826
|
}], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
|
|
6776
6827
|
|
|
6777
6828
|
/**
|
|
@@ -6909,11 +6960,11 @@ class FoldTimelineComponent {
|
|
|
6909
6960
|
}
|
|
6910
6961
|
}
|
|
6911
6962
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6912
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldTimelineComponent, isStandalone: true, selector: "fold-timeline", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, nodeTitle: { classPropertyName: "nodeTitle", publicName: "nodeTitle", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, datePlacement: { classPropertyName: "datePlacement", publicName: "datePlacement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick" }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: ["node"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Shared inner content of a node (dot + date + label). -->\n<ng-template #dot let-n>\n <span class=\"dot\">\n @if (n.icon; as ic) {\n <fold-icon [name]=\"ic\" [size]=\"11\" />\n }\n </span>\n <span class=\"txt\">\n @if (datePlacement() !== \"hidden\") {\n @if (n.displayDate; as dd) {\n <span class=\"date\">{{ dd }}</span>\n } @else if (n.date; as d) {\n <span class=\"date\">{{ d | date: \"mediumDate\" }}</span>\n }\n }\n @if (nodeTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: n }\"\n />\n } @else {\n <span class=\"nlabel\">{{ n.label }}</span>\n }\n </span>\n</ng-template>\n\n<!-- The progress rail + the nodes \u2014 reused in both containers. -->\n<ng-template #body>\n @if (orientation() === \"horizontal\") {\n <span\n class=\"rail\"\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"fillNow()\"\n [attr.aria-valuetext]=\"stepText()\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <span class=\"rail-fill\" [style.width.%]=\"fillPct()\"></span>\n </span>\n }\n @for (n of nodes(); track n.key) {\n @if (isClickable(n)) {\n <button\n type=\"button\"\n class=\"node\"\n [class.filled]=\"isFilled(n)\"\n [class.hollow]=\"isHollow(n)\"\n [title]=\"nodeTitle()\"\n (click)=\"onNode(n)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"dot\"\n [ngTemplateOutletContext]=\"{ $implicit: n }\"\n />\n </button>\n } @else {\n <div\n class=\"node inert\"\n [class.filled]=\"isFilled(n)\"\n [class.hollow]=\"isHollow(n)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"dot\"\n [ngTemplateOutletContext]=\"{ $implicit: n }\"\n />\n </div>\n }\n }\n</ng-template>\n\n@if (interactive()) {\n <nav\n class=\"tlv\"\n [class.h]=\"orientation() === 'horizontal'\"\n [class.square]=\"square()\"\n [class.date-above]=\"datePlacement() === 'above'\"\n [class.date-inline]=\"datePlacement() === 'inline'\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <ng-container [ngTemplateOutlet]=\"body\" />\n </nav>\n} @else {\n <div\n class=\"tlv\"\n role=\"group\"\n [class.h]=\"orientation() === 'horizontal'\"\n [class.square]=\"square()\"\n [class.date-above]=\"datePlacement() === 'above'\"\n [class.date-inline]=\"datePlacement() === 'inline'\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <ng-container [ngTemplateOutlet]=\"body\" />\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;-webkit-user-select:none;user-select:none}.tlv{position:relative;display:flex;flex-direction:column;gap:
|
|
6963
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldTimelineComponent, isStandalone: true, selector: "fold-timeline", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, nodeTitle: { classPropertyName: "nodeTitle", publicName: "nodeTitle", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, datePlacement: { classPropertyName: "datePlacement", publicName: "datePlacement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick" }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: ["node"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Shared inner content of a node (dot + date + label). -->\n<ng-template #dot let-n>\n <span class=\"dot\">\n @if (n.icon; as ic) {\n <fold-icon [name]=\"ic\" [size]=\"11\" />\n }\n </span>\n <span class=\"txt\">\n @if (datePlacement() !== \"hidden\") {\n @if (n.displayDate; as dd) {\n <span class=\"date\">{{ dd }}</span>\n } @else if (n.date; as d) {\n <span class=\"date\">{{ d | date: \"mediumDate\" }}</span>\n }\n }\n @if (nodeTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: n }\"\n />\n } @else {\n <span class=\"nlabel\">{{ n.label }}</span>\n }\n </span>\n</ng-template>\n\n<!-- The progress rail + the nodes \u2014 reused in both containers. -->\n<ng-template #body>\n @if (orientation() === \"horizontal\") {\n <span\n class=\"rail\"\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"fillNow()\"\n [attr.aria-valuetext]=\"stepText()\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <span class=\"rail-fill\" [style.width.%]=\"fillPct()\"></span>\n </span>\n }\n @for (n of nodes(); track n.key) {\n @if (isClickable(n)) {\n <button\n type=\"button\"\n class=\"node\"\n [class.filled]=\"isFilled(n)\"\n [class.hollow]=\"isHollow(n)\"\n [title]=\"nodeTitle()\"\n (click)=\"onNode(n)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"dot\"\n [ngTemplateOutletContext]=\"{ $implicit: n }\"\n />\n </button>\n } @else {\n <div\n class=\"node inert\"\n [class.filled]=\"isFilled(n)\"\n [class.hollow]=\"isHollow(n)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"dot\"\n [ngTemplateOutletContext]=\"{ $implicit: n }\"\n />\n </div>\n }\n }\n</ng-template>\n\n@if (interactive()) {\n <nav\n class=\"tlv\"\n [class.h]=\"orientation() === 'horizontal'\"\n [class.square]=\"square()\"\n [class.date-above]=\"datePlacement() === 'above'\"\n [class.date-inline]=\"datePlacement() === 'inline'\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <ng-container [ngTemplateOutlet]=\"body\" />\n </nav>\n} @else {\n <div\n class=\"tlv\"\n role=\"group\"\n [class.h]=\"orientation() === 'horizontal'\"\n [class.square]=\"square()\"\n [class.date-above]=\"datePlacement() === 'above'\"\n [class.date-inline]=\"datePlacement() === 'inline'\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <ng-container [ngTemplateOutlet]=\"body\" />\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;-webkit-user-select:none;user-select:none}.tlv{position:relative;display:flex;flex-direction:column;gap:var(--fold-space-xs)}.tlv:not(.h):before{content:\"\";position:absolute;left:12px;top:12px;bottom:12px;width:2px;background:var(--fold-color-border);border-radius:2px}.node{position:relative;z-index:1;display:flex;align-items:flex-start;gap:var(--fold-space-md);padding:var(--fold-space-sm) var(--fold-space-sm);border:0;background:none;border-radius:var(--fold-radius-sm);cursor:pointer;text-align:left;transition:background var(--fold-motion-fast)}.node.inert{cursor:default}.node:not(.inert):hover{background:var(--fold-color-surface-raised)}.dot{flex-shrink:0;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--fold-color-surface-raised);border:2px solid var(--fold-color-border);color:var(--fold-color-text-muted);transition:border-color var(--fold-motion-fast),color var(--fold-motion-fast),background var(--fold-motion-fast)}.node.filled .dot{background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}.node.hollow.filled .dot{background:var(--fold-color-surface-raised);border-color:var(--fold-color-primary);color:var(--fold-color-primary-text)}.node:not(.inert):not(.filled) .dot{border-color:color-mix(in srgb,var(--fold-color-primary) 45%,var(--fold-color-border));color:var(--fold-color-primary-text)}.node:not(.inert):hover .dot{background:var(--fold-color-primary-surface);border-color:var(--fold-color-primary)}.tlv.square .dot{border-radius:var(--fold-radius-sm)}.txt{display:flex;flex-direction:column;gap:2px;padding-top:1px;min-width:0}.date{font-size:10px;color:var(--fold-color-text-muted);font-variant-numeric:tabular-nums;order:1}.nlabel{font-size:var(--fold-text-xs);font-weight:600;color:var(--fold-color-text-secondary);line-height:1.3}.node.filled .nlabel,.node:not(.inert):hover .nlabel{color:var(--fold-color-text)}.tlv.date-above .date{order:0}.tlv.date-inline .txt{flex-direction:row;align-items:baseline;gap:var(--fold-space-sm)}.tlv.h{flex-direction:row;justify-content:space-between;gap:0}.tlv.h .rail{position:absolute;top:13px;left:13px;right:13px;height:2px;background:var(--fold-color-border);border-radius:2px}.tlv.h .rail-fill{position:absolute;inset:0 auto 0 0;height:100%;background:var(--fold-color-primary);border-radius:2px;transition:width var(--fold-motion-base)}.tlv.h .node{flex:1;flex-direction:column;align-items:center;gap:var(--fold-space-sm);padding:0;text-align:center}.tlv.h .txt{align-items:center;padding-top:0;text-align:center}@media(max-width:700px){.tlv.h{flex-direction:column;gap:0;align-items:stretch}.tlv.h .rail{inset:16px auto 16px 12px;width:2px;height:auto}.tlv.h .rail-fill{display:none}.tlv.h .node{flex:none;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--fold-space-md);padding:var(--fold-space-sm) 0;text-align:left}.tlv.h .txt{align-items:flex-start;text-align:left}.tlv.h .date{order:0;margin-left:auto}}@media(prefers-reduced-motion:reduce){.node,.dot,.rail-fill{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
6913
6964
|
}
|
|
6914
6965
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldTimelineComponent, decorators: [{
|
|
6915
6966
|
type: Component,
|
|
6916
|
-
args: [{ selector: "fold-timeline", standalone: true, imports: [DatePipe, NgTemplateOutlet, FoldIconComponent], template: "<!-- Shared inner content of a node (dot + date + label). -->\n<ng-template #dot let-n>\n <span class=\"dot\">\n @if (n.icon; as ic) {\n <fold-icon [name]=\"ic\" [size]=\"11\" />\n }\n </span>\n <span class=\"txt\">\n @if (datePlacement() !== \"hidden\") {\n @if (n.displayDate; as dd) {\n <span class=\"date\">{{ dd }}</span>\n } @else if (n.date; as d) {\n <span class=\"date\">{{ d | date: \"mediumDate\" }}</span>\n }\n }\n @if (nodeTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: n }\"\n />\n } @else {\n <span class=\"nlabel\">{{ n.label }}</span>\n }\n </span>\n</ng-template>\n\n<!-- The progress rail + the nodes \u2014 reused in both containers. -->\n<ng-template #body>\n @if (orientation() === \"horizontal\") {\n <span\n class=\"rail\"\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"fillNow()\"\n [attr.aria-valuetext]=\"stepText()\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <span class=\"rail-fill\" [style.width.%]=\"fillPct()\"></span>\n </span>\n }\n @for (n of nodes(); track n.key) {\n @if (isClickable(n)) {\n <button\n type=\"button\"\n class=\"node\"\n [class.filled]=\"isFilled(n)\"\n [class.hollow]=\"isHollow(n)\"\n [title]=\"nodeTitle()\"\n (click)=\"onNode(n)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"dot\"\n [ngTemplateOutletContext]=\"{ $implicit: n }\"\n />\n </button>\n } @else {\n <div\n class=\"node inert\"\n [class.filled]=\"isFilled(n)\"\n [class.hollow]=\"isHollow(n)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"dot\"\n [ngTemplateOutletContext]=\"{ $implicit: n }\"\n />\n </div>\n }\n }\n</ng-template>\n\n@if (interactive()) {\n <nav\n class=\"tlv\"\n [class.h]=\"orientation() === 'horizontal'\"\n [class.square]=\"square()\"\n [class.date-above]=\"datePlacement() === 'above'\"\n [class.date-inline]=\"datePlacement() === 'inline'\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <ng-container [ngTemplateOutlet]=\"body\" />\n </nav>\n} @else {\n <div\n class=\"tlv\"\n role=\"group\"\n [class.h]=\"orientation() === 'horizontal'\"\n [class.square]=\"square()\"\n [class.date-above]=\"datePlacement() === 'above'\"\n [class.date-inline]=\"datePlacement() === 'inline'\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <ng-container [ngTemplateOutlet]=\"body\" />\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;-webkit-user-select:none;user-select:none}.tlv{position:relative;display:flex;flex-direction:column;gap:
|
|
6967
|
+
args: [{ selector: "fold-timeline", standalone: true, imports: [DatePipe, NgTemplateOutlet, FoldIconComponent], template: "<!-- Shared inner content of a node (dot + date + label). -->\n<ng-template #dot let-n>\n <span class=\"dot\">\n @if (n.icon; as ic) {\n <fold-icon [name]=\"ic\" [size]=\"11\" />\n }\n </span>\n <span class=\"txt\">\n @if (datePlacement() !== \"hidden\") {\n @if (n.displayDate; as dd) {\n <span class=\"date\">{{ dd }}</span>\n } @else if (n.date; as d) {\n <span class=\"date\">{{ d | date: \"mediumDate\" }}</span>\n }\n }\n @if (nodeTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: n }\"\n />\n } @else {\n <span class=\"nlabel\">{{ n.label }}</span>\n }\n </span>\n</ng-template>\n\n<!-- The progress rail + the nodes \u2014 reused in both containers. -->\n<ng-template #body>\n @if (orientation() === \"horizontal\") {\n <span\n class=\"rail\"\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"fillNow()\"\n [attr.aria-valuetext]=\"stepText()\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <span class=\"rail-fill\" [style.width.%]=\"fillPct()\"></span>\n </span>\n }\n @for (n of nodes(); track n.key) {\n @if (isClickable(n)) {\n <button\n type=\"button\"\n class=\"node\"\n [class.filled]=\"isFilled(n)\"\n [class.hollow]=\"isHollow(n)\"\n [title]=\"nodeTitle()\"\n (click)=\"onNode(n)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"dot\"\n [ngTemplateOutletContext]=\"{ $implicit: n }\"\n />\n </button>\n } @else {\n <div\n class=\"node inert\"\n [class.filled]=\"isFilled(n)\"\n [class.hollow]=\"isHollow(n)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"dot\"\n [ngTemplateOutletContext]=\"{ $implicit: n }\"\n />\n </div>\n }\n }\n</ng-template>\n\n@if (interactive()) {\n <nav\n class=\"tlv\"\n [class.h]=\"orientation() === 'horizontal'\"\n [class.square]=\"square()\"\n [class.date-above]=\"datePlacement() === 'above'\"\n [class.date-inline]=\"datePlacement() === 'inline'\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <ng-container [ngTemplateOutlet]=\"body\" />\n </nav>\n} @else {\n <div\n class=\"tlv\"\n role=\"group\"\n [class.h]=\"orientation() === 'horizontal'\"\n [class.square]=\"square()\"\n [class.date-above]=\"datePlacement() === 'above'\"\n [class.date-inline]=\"datePlacement() === 'inline'\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <ng-container [ngTemplateOutlet]=\"body\" />\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;-webkit-user-select:none;user-select:none}.tlv{position:relative;display:flex;flex-direction:column;gap:var(--fold-space-xs)}.tlv:not(.h):before{content:\"\";position:absolute;left:12px;top:12px;bottom:12px;width:2px;background:var(--fold-color-border);border-radius:2px}.node{position:relative;z-index:1;display:flex;align-items:flex-start;gap:var(--fold-space-md);padding:var(--fold-space-sm) var(--fold-space-sm);border:0;background:none;border-radius:var(--fold-radius-sm);cursor:pointer;text-align:left;transition:background var(--fold-motion-fast)}.node.inert{cursor:default}.node:not(.inert):hover{background:var(--fold-color-surface-raised)}.dot{flex-shrink:0;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--fold-color-surface-raised);border:2px solid var(--fold-color-border);color:var(--fold-color-text-muted);transition:border-color var(--fold-motion-fast),color var(--fold-motion-fast),background var(--fold-motion-fast)}.node.filled .dot{background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}.node.hollow.filled .dot{background:var(--fold-color-surface-raised);border-color:var(--fold-color-primary);color:var(--fold-color-primary-text)}.node:not(.inert):not(.filled) .dot{border-color:color-mix(in srgb,var(--fold-color-primary) 45%,var(--fold-color-border));color:var(--fold-color-primary-text)}.node:not(.inert):hover .dot{background:var(--fold-color-primary-surface);border-color:var(--fold-color-primary)}.tlv.square .dot{border-radius:var(--fold-radius-sm)}.txt{display:flex;flex-direction:column;gap:2px;padding-top:1px;min-width:0}.date{font-size:10px;color:var(--fold-color-text-muted);font-variant-numeric:tabular-nums;order:1}.nlabel{font-size:var(--fold-text-xs);font-weight:600;color:var(--fold-color-text-secondary);line-height:1.3}.node.filled .nlabel,.node:not(.inert):hover .nlabel{color:var(--fold-color-text)}.tlv.date-above .date{order:0}.tlv.date-inline .txt{flex-direction:row;align-items:baseline;gap:var(--fold-space-sm)}.tlv.h{flex-direction:row;justify-content:space-between;gap:0}.tlv.h .rail{position:absolute;top:13px;left:13px;right:13px;height:2px;background:var(--fold-color-border);border-radius:2px}.tlv.h .rail-fill{position:absolute;inset:0 auto 0 0;height:100%;background:var(--fold-color-primary);border-radius:2px;transition:width var(--fold-motion-base)}.tlv.h .node{flex:1;flex-direction:column;align-items:center;gap:var(--fold-space-sm);padding:0;text-align:center}.tlv.h .txt{align-items:center;padding-top:0;text-align:center}@media(max-width:700px){.tlv.h{flex-direction:column;gap:0;align-items:stretch}.tlv.h .rail{inset:16px auto 16px 12px;width:2px;height:auto}.tlv.h .rail-fill{display:none}.tlv.h .node{flex:none;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--fold-space-md);padding:var(--fold-space-sm) 0;text-align:left}.tlv.h .txt{align-items:flex-start;text-align:left}.tlv.h .date{order:0;margin-left:auto}}@media(prefers-reduced-motion:reduce){.node,.dot,.rail-fill{transition:none}}\n"] }]
|
|
6917
6968
|
}], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], nodeTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTitle", required: false }] }], square: [{ type: i0.Input, args: [{ isSignal: true, alias: "square", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], datePlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "datePlacement", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeTemplate: [{ type: i0.ContentChild, args: ["node", { isSignal: true }] }] } });
|
|
6918
6969
|
|
|
6919
6970
|
/**
|
|
@@ -6988,11 +7039,11 @@ class FoldEmptyStateComponent {
|
|
|
6988
7039
|
tone = input("neutral", /* @ts-ignore */
|
|
6989
7040
|
...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
|
|
6990
7041
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6991
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldEmptyStateComponent, isStandalone: true, selector: "fold-empty-state", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.alert": "tone() === 'alert'", "attr.title": "null" } }, ngImport: i0, template: "<div class=\"empty\">\n <div class=\"empty-icon\">\n <ng-content select=\"[empty-icon]\" />\n </div>\n <p class=\"empty-title\">{{ title() }}</p>\n @if (subtitle()) {\n <p class=\"empty-sub\">{{ subtitle() }}</p>\n }\n <div class=\"empty-action\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:center;flex:1}.empty{display:flex;flex-direction:column;align-items:center;gap:
|
|
7042
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldEmptyStateComponent, isStandalone: true, selector: "fold-empty-state", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.alert": "tone() === 'alert'", "attr.title": "null" } }, ngImport: i0, template: "<div class=\"empty\">\n <div class=\"empty-icon\">\n <ng-content select=\"[empty-icon]\" />\n </div>\n <p class=\"empty-title\">{{ title() }}</p>\n @if (subtitle()) {\n <p class=\"empty-sub\">{{ subtitle() }}</p>\n }\n <div class=\"empty-action\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:center;flex:1}.empty{display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-sm);padding:var(--fold-space-4xl) var(--fold-space-2xl)}.empty-icon{color:var(--fold-color-text-faded);margin-bottom:var(--fold-space-xs)}.empty-icon:empty{display:none}.empty-title{font-size:var(--fold-text-sm);font-weight:600;color:var(--fold-color-text);margin:0}.empty-sub{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted);margin:0;text-align:center;max-width:320px;line-height:1.6}.empty-action{margin-top:var(--fold-space-xs)}.empty-action:empty{display:none}:host(.alert) .empty-icon,:host(.alert) .empty-title{color:var(--fold-color-alert-text)}\n"] });
|
|
6992
7043
|
}
|
|
6993
7044
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldEmptyStateComponent, decorators: [{
|
|
6994
7045
|
type: Component,
|
|
6995
|
-
args: [{ selector: "fold-empty-state", standalone: true, host: { "[class.alert]": "tone() === 'alert'", "[attr.title]": "null" }, template: "<div class=\"empty\">\n <div class=\"empty-icon\">\n <ng-content select=\"[empty-icon]\" />\n </div>\n <p class=\"empty-title\">{{ title() }}</p>\n @if (subtitle()) {\n <p class=\"empty-sub\">{{ subtitle() }}</p>\n }\n <div class=\"empty-action\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:center;flex:1}.empty{display:flex;flex-direction:column;align-items:center;gap:
|
|
7046
|
+
args: [{ selector: "fold-empty-state", standalone: true, host: { "[class.alert]": "tone() === 'alert'", "[attr.title]": "null" }, template: "<div class=\"empty\">\n <div class=\"empty-icon\">\n <ng-content select=\"[empty-icon]\" />\n </div>\n <p class=\"empty-title\">{{ title() }}</p>\n @if (subtitle()) {\n <p class=\"empty-sub\">{{ subtitle() }}</p>\n }\n <div class=\"empty-action\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:center;flex:1}.empty{display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-sm);padding:var(--fold-space-4xl) var(--fold-space-2xl)}.empty-icon{color:var(--fold-color-text-faded);margin-bottom:var(--fold-space-xs)}.empty-icon:empty{display:none}.empty-title{font-size:var(--fold-text-sm);font-weight:600;color:var(--fold-color-text);margin:0}.empty-sub{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted);margin:0;text-align:center;max-width:320px;line-height:1.6}.empty-action{margin-top:var(--fold-space-xs)}.empty-action:empty{display:none}:host(.alert) .empty-icon,:host(.alert) .empty-title{color:var(--fold-color-alert-text)}\n"] }]
|
|
6996
7047
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
|
|
6997
7048
|
|
|
6998
7049
|
/**
|
|
@@ -7274,12 +7325,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
7274
7325
|
* given**. It does *not* cap the column — narrowing a block to a readable measure
|
|
7275
7326
|
* is the content's job (wrap that block in your own max-width container), never
|
|
7276
7327
|
* the page scaffold's. The *horizontal* gutter is a single token,
|
|
7277
|
-
* `--fold-page-gutter` (default `
|
|
7278
|
-
* `0` for a bleeding dashboard. A
|
|
7279
|
-
* cancels exactly that token to
|
|
7280
|
-
* amid padded content), so the two
|
|
7281
|
-
* The *vertical* rhythm between
|
|
7282
|
-
* `--fold-page-gap` (default
|
|
7328
|
+
* `--fold-page-gutter` (fluid default `clamp(1rem, 4vw, 2rem)` — 16→32px) —
|
|
7329
|
+
* retune it per page/theme, or set it to `0` for a bleeding dashboard. A
|
|
7330
|
+
* {@link FoldPageSectionComponent} with `bleed` cancels exactly that token to
|
|
7331
|
+
* span the page edge-to-edge (a full-width band amid padded content), so the two
|
|
7332
|
+
* never desync — including on the fluid gutter. The *vertical* rhythm between
|
|
7333
|
+
* stacked elements is its own token, `--fold-page-gap` (fluid default
|
|
7334
|
+
* `clamp(1.25rem, 3vw, 2rem)` — 20→32px, a gentler curve than the gutter),
|
|
7335
|
+
* retunable the same way.
|
|
7283
7336
|
*
|
|
7284
7337
|
* Content projection:
|
|
7285
7338
|
* - default slot → the page body (sections, cards, banners…).
|
|
@@ -7322,29 +7375,38 @@ class FoldPageLayoutComponent {
|
|
|
7322
7375
|
customTitle = contentChild(FoldPageTitleDirective, /* @ts-ignore */
|
|
7323
7376
|
...(ngDevMode ? [{ debugName: "customTitle" }] : /* istanbul ignore next */ []));
|
|
7324
7377
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7325
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPageLayoutComponent, isStandalone: true, selector: "fold-page-layout", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.title": "null" } }, queries: [{ propertyName: "customTitle", first: true, predicate: FoldPageTitleDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (title() || customTitle()) {\n <header class=\"page-head\">\n <div class=\"page-head-text\">\n <h1 class=\"page-title\">\n @if (title(); as t) {\n @if (icon(); as ic) {\n <fold-icon class=\"page-icon\" [name]=\"ic\" [size]=\"22\" />\n }\n <span>{{ t }}</span>\n }\n <ng-content select=\"[pageTitle]\" />\n <span class=\"page-title-badge\"\n ><ng-content select=\"[titleBadge]\"\n /></span>\n </h1>\n <div class=\"page-desc\"><ng-content select=\"p[description]\" /></div>\n </div>\n <div class=\"page-actions\"><ng-content select=\"[pageActions]\" /></div>\n </header>\n}\n<div class=\"page-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px);box-sizing:border-box;padding-block:var(--fold-page-pad-top, 28px) var(--fold-page-pad-bottom, 40px);padding-inline:var(--fold-page-gutter, 32px);flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:
|
|
7378
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPageLayoutComponent, isStandalone: true, selector: "fold-page-layout", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.title": "null" } }, queries: [{ propertyName: "customTitle", first: true, predicate: FoldPageTitleDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (title() || customTitle()) {\n <header class=\"page-head\">\n <div class=\"page-head-text\">\n <h1 class=\"page-title\">\n @if (title(); as t) {\n @if (icon(); as ic) {\n <fold-icon class=\"page-icon\" [name]=\"ic\" [size]=\"22\" />\n }\n <span>{{ t }}</span>\n }\n <ng-content select=\"[pageTitle]\" />\n <span class=\"page-title-badge\"\n ><ng-content select=\"[titleBadge]\"\n /></span>\n </h1>\n <div class=\"page-desc\"><ng-content select=\"p[description]\" /></div>\n </div>\n <div class=\"page-actions\"><ng-content select=\"[pageActions]\" /></div>\n </header>\n}\n<div class=\"page-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px);box-sizing:border-box;padding-block:var(--fold-page-pad-top, 28px) var(--fold-page-pad-bottom, 40px);padding-inline:var(--fold-page-gutter, 32px);flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fold-space-lg)}.page-head-text{display:flex;flex-direction:column;gap:var(--fold-space-xs);min-width:0}.page-title{margin:0;display:flex;align-items:center;gap:var(--fold-space-sm);font-size:var(--fold-text-xl);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--fold-color-text)}.page-icon{flex:none;color:var(--fold-color-primary-text)}.page-title-badge{display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.page-title-badge:empty{display:none}.page-desc{font-size:var(--fold-text-sm);line-height:1.5;max-width:var(--fold-page-desc-measure, none);color:var(--fold-color-text-muted)}.page-desc:empty{display:none}.page-desc>*{margin:0}.page-actions{flex:none;display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.page-actions:empty{display:none}.page-body{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px)}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
7326
7379
|
}
|
|
7327
7380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPageLayoutComponent, decorators: [{
|
|
7328
7381
|
type: Component,
|
|
7329
|
-
args: [{ selector: "fold-page-layout", standalone: true, imports: [FoldIconComponent], host: { "[attr.title]": "null" }, template: "@if (title() || customTitle()) {\n <header class=\"page-head\">\n <div class=\"page-head-text\">\n <h1 class=\"page-title\">\n @if (title(); as t) {\n @if (icon(); as ic) {\n <fold-icon class=\"page-icon\" [name]=\"ic\" [size]=\"22\" />\n }\n <span>{{ t }}</span>\n }\n <ng-content select=\"[pageTitle]\" />\n <span class=\"page-title-badge\"\n ><ng-content select=\"[titleBadge]\"\n /></span>\n </h1>\n <div class=\"page-desc\"><ng-content select=\"p[description]\" /></div>\n </div>\n <div class=\"page-actions\"><ng-content select=\"[pageActions]\" /></div>\n </header>\n}\n<div class=\"page-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px);box-sizing:border-box;padding-block:var(--fold-page-pad-top, 28px) var(--fold-page-pad-bottom, 40px);padding-inline:var(--fold-page-gutter, 32px);flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:
|
|
7382
|
+
args: [{ selector: "fold-page-layout", standalone: true, imports: [FoldIconComponent], host: { "[attr.title]": "null" }, template: "@if (title() || customTitle()) {\n <header class=\"page-head\">\n <div class=\"page-head-text\">\n <h1 class=\"page-title\">\n @if (title(); as t) {\n @if (icon(); as ic) {\n <fold-icon class=\"page-icon\" [name]=\"ic\" [size]=\"22\" />\n }\n <span>{{ t }}</span>\n }\n <ng-content select=\"[pageTitle]\" />\n <span class=\"page-title-badge\"\n ><ng-content select=\"[titleBadge]\"\n /></span>\n </h1>\n <div class=\"page-desc\"><ng-content select=\"p[description]\" /></div>\n </div>\n <div class=\"page-actions\"><ng-content select=\"[pageActions]\" /></div>\n </header>\n}\n<div class=\"page-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px);box-sizing:border-box;padding-block:var(--fold-page-pad-top, 28px) var(--fold-page-pad-bottom, 40px);padding-inline:var(--fold-page-gutter, 32px);flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fold-space-lg)}.page-head-text{display:flex;flex-direction:column;gap:var(--fold-space-xs);min-width:0}.page-title{margin:0;display:flex;align-items:center;gap:var(--fold-space-sm);font-size:var(--fold-text-xl);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--fold-color-text)}.page-icon{flex:none;color:var(--fold-color-primary-text)}.page-title-badge{display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.page-title-badge:empty{display:none}.page-desc{font-size:var(--fold-text-sm);line-height:1.5;max-width:var(--fold-page-desc-measure, none);color:var(--fold-color-text-muted)}.page-desc:empty{display:none}.page-desc>*{margin:0}.page-actions{flex:none;display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.page-actions:empty{display:none}.page-body{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px)}\n"] }]
|
|
7330
7383
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], customTitle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FoldPageTitleDirective), { isSignal: true }] }] } });
|
|
7331
7384
|
|
|
7332
7385
|
/**
|
|
7333
7386
|
* `<fold-page-section>` — a titled, semantic **`<section>`** grouping of page
|
|
7334
|
-
* content inside a {@link FoldPageLayoutComponent}:
|
|
7387
|
+
* content inside a {@link FoldPageLayoutComponent}: a `title` + optional
|
|
7335
7388
|
* `description`, a right-aligned actions slot, and the content below.
|
|
7336
7389
|
*
|
|
7337
|
-
* **It is structure, not a box.** The title
|
|
7338
|
-
*
|
|
7339
|
-
*
|
|
7340
|
-
*
|
|
7341
|
-
*
|
|
7342
|
-
*
|
|
7390
|
+
* **It is structure, not a box.** The `title` renders a real **`<h2>`** (a
|
|
7391
|
+
* genuine section heading under the page's `<h1>`, not a decorative eyebrow) and
|
|
7392
|
+
* the region is a `<section>` named by it (`aria-labelledby`) — so a page reads
|
|
7393
|
+
* as an outline to assistive tech. Set `headingLevel` to correct the `aria-level`
|
|
7394
|
+
* where a section nests deeper. It paints nothing: transparent, no border, no
|
|
7395
|
+
* radius. For a **visual box**, wrap the content in a {@link FoldCardComponent} —
|
|
7396
|
+
* the two are orthogonal and compose (a section can hold a card; a card never
|
|
7397
|
+
* needs to know about the page).
|
|
7343
7398
|
*
|
|
7344
7399
|
* Content projection:
|
|
7345
7400
|
* - default slot → the section content.
|
|
7346
|
-
* - `[sectionActions]` → the right-aligned header slot
|
|
7347
|
-
*
|
|
7401
|
+
* - `[sectionActions]` → the right-aligned header slot, beside the `title`.
|
|
7402
|
+
* - `[sectionHeader]` → a **bespoke** header, used *instead of* `title` when the
|
|
7403
|
+
* default `<h2>` isn't enough (e.g. project a {@link FoldElementTitleComponent}
|
|
7404
|
+
* with an icon tile + subtitle). The projected header owns its own heading
|
|
7405
|
+
* semantics.
|
|
7406
|
+
*
|
|
7407
|
+
* The section's vertical rhythm — the head↔body gap, and the `stack` body's
|
|
7408
|
+
* item gap — is a single token, `--fold-page-section-gap` (default the `lg`
|
|
7409
|
+
* space); retune it per section or theme.
|
|
7348
7410
|
*
|
|
7349
7411
|
* Two orthogonal helpers, both independent of the title:
|
|
7350
7412
|
* - `stack` — lay the body out as an evenly-spaced vertical stack (form fields).
|
|
@@ -7362,6 +7424,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
7362
7424
|
* …
|
|
7363
7425
|
* </fold-page-section>
|
|
7364
7426
|
*
|
|
7427
|
+
* <!-- bespoke header instead of the default h2 -->
|
|
7428
|
+
* <fold-page-section>
|
|
7429
|
+
* <fold-element-title sectionHeader variant="title" icon="company" title="Contexte" />
|
|
7430
|
+
* …
|
|
7431
|
+
* </fold-page-section>
|
|
7432
|
+
*
|
|
7365
7433
|
* <!-- need a box? compose with fold-card -->
|
|
7366
7434
|
* <fold-page-section title="Documents">
|
|
7367
7435
|
* <fold-card surface="sunken">…</fold-card>
|
|
@@ -7377,6 +7445,10 @@ class FoldPageSectionComponent {
|
|
|
7377
7445
|
/** An optional leading icon beside the title. */
|
|
7378
7446
|
icon = input(/* @ts-ignore */
|
|
7379
7447
|
...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
7448
|
+
/** Tint of the leading icon — forwarded to `fold-icon`'s `tone`. Defaults to
|
|
7449
|
+
* `secondary` (a muted ink, a step below the title). */
|
|
7450
|
+
iconTone = input("secondary", /* @ts-ignore */
|
|
7451
|
+
...(ngDevMode ? [{ debugName: "iconTone" }] : /* istanbul ignore next */ []));
|
|
7380
7452
|
/** A one-line description under the title. */
|
|
7381
7453
|
description = input(/* @ts-ignore */
|
|
7382
7454
|
...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
|
|
@@ -7395,18 +7467,18 @@ class FoldPageSectionComponent {
|
|
|
7395
7467
|
* `aria-labelledby` (only when there's a title). */
|
|
7396
7468
|
headingId = inject(FoldIdService).next("fold-page-section");
|
|
7397
7469
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPageSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7398
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPageSectionComponent, isStandalone: true, selector: "fold-page-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null }, bleed: { classPropertyName: "bleed", publicName: "bleed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.stack": "stack()", "class.is-bleed": "bleed()", "attr.title": "null" } }, ngImport: i0, template: "<section class=\"ps-root\" [attr.aria-labelledby]=\"title() ? headingId : null\">\n @if (title() || description()) {\n <div class=\"section-head\">\n @if (title(); as t) {\n <
|
|
7470
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPageSectionComponent, isStandalone: true, selector: "fold-page-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTone: { classPropertyName: "iconTone", publicName: "iconTone", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null }, bleed: { classPropertyName: "bleed", publicName: "bleed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.stack": "stack()", "class.is-bleed": "bleed()", "attr.title": "null" } }, ngImport: i0, template: "<section class=\"ps-root\" [attr.aria-labelledby]=\"title() ? headingId : null\">\n @if (title() || description()) {\n <div class=\"section-head\">\n @if (title(); as t) {\n <div class=\"section-head-row\">\n <h2\n class=\"section-title\"\n [id]=\"headingId\"\n [attr.aria-level]=\"headingLevel() === 2 ? null : headingLevel()\"\n >\n @if (icon(); as ic) {\n <fold-icon [name]=\"ic\" size=\"sm\" [tone]=\"iconTone()\" />\n }\n <span class=\"section-title-text\">{{ t }}</span>\n </h2>\n <div class=\"section-actions\">\n <ng-content select=\"[sectionActions]\" />\n </div>\n </div>\n }\n @if (description()) {\n <p class=\"section-desc\">{{ description() }}</p>\n }\n </div>\n }\n <!-- A bespoke header \u2014 project [sectionHeader] (e.g. a fold-element-title with\n an icon tile) INSTEAD of `title` when the default h2 isn't enough. The\n parent owns its heading semantics. -->\n <ng-content select=\"[sectionHeader]\" />\n <div class=\"section-body\"><ng-content /></div>\n</section>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.is-bleed){margin-inline:calc(-1 * var(--fold-page-gutter, 32px))}:host(.is-bleed):first-child{margin-top:calc(-1 * var(--fold-page-pad-top, 28px))}:host(.is-bleed):last-child{margin-bottom:calc(-1 * var(--fold-page-pad-bottom, 40px))}.ps-root{display:flex;flex-direction:column;gap:var(--fold-page-section-gap, var(--fold-space-lg))}.section-head{display:flex;flex-direction:column;gap:var(--fold-space-sm);min-width:0}.section-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fold-space-md);min-width:0}.section-title{margin:0;display:inline-flex;align-items:center;gap:var(--fold-space-sm);min-width:0;font-size:var(--fold-text-md);font-weight:600;line-height:1.3;color:var(--fold-color-text)}.section-title fold-icon{flex:0 0 auto}.section-title-text{min-width:0}.section-actions{flex:0 0 auto;display:flex;align-items:center;gap:var(--fold-space-sm)}.section-desc{margin:0;font-size:var(--fold-text-sm);line-height:1.5;max-width:62ch;color:var(--fold-color-text-secondary)}.section-body{min-width:0}:host(.stack) .section-body{display:flex;flex-direction:column;gap:var(--fold-page-section-gap, var(--fold-space-lg))}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
7399
7471
|
}
|
|
7400
7472
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPageSectionComponent, decorators: [{
|
|
7401
7473
|
type: Component,
|
|
7402
|
-
args: [{ selector: "fold-page-section", standalone: true, imports: [
|
|
7474
|
+
args: [{ selector: "fold-page-section", standalone: true, imports: [FoldIconComponent], host: {
|
|
7403
7475
|
"[class.stack]": "stack()",
|
|
7404
7476
|
"[class.is-bleed]": "bleed()",
|
|
7405
7477
|
// `title` is a heading input — strip the reflected native attribute so it
|
|
7406
7478
|
// never doubles as a browser tooltip.
|
|
7407
7479
|
"[attr.title]": "null",
|
|
7408
|
-
}, template: "<section class=\"ps-root\" [attr.aria-labelledby]=\"title() ? headingId : null\">\n @if (title() || description()) {\n <div class=\"section-head\">\n @if (title(); as t) {\n <
|
|
7409
|
-
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], stack: [{ type: i0.Input, args: [{ isSignal: true, alias: "stack", required: false }] }], bleed: [{ type: i0.Input, args: [{ isSignal: true, alias: "bleed", required: false }] }] } });
|
|
7480
|
+
}, template: "<section class=\"ps-root\" [attr.aria-labelledby]=\"title() ? headingId : null\">\n @if (title() || description()) {\n <div class=\"section-head\">\n @if (title(); as t) {\n <div class=\"section-head-row\">\n <h2\n class=\"section-title\"\n [id]=\"headingId\"\n [attr.aria-level]=\"headingLevel() === 2 ? null : headingLevel()\"\n >\n @if (icon(); as ic) {\n <fold-icon [name]=\"ic\" size=\"sm\" [tone]=\"iconTone()\" />\n }\n <span class=\"section-title-text\">{{ t }}</span>\n </h2>\n <div class=\"section-actions\">\n <ng-content select=\"[sectionActions]\" />\n </div>\n </div>\n }\n @if (description()) {\n <p class=\"section-desc\">{{ description() }}</p>\n }\n </div>\n }\n <!-- A bespoke header \u2014 project [sectionHeader] (e.g. a fold-element-title with\n an icon tile) INSTEAD of `title` when the default h2 isn't enough. The\n parent owns its heading semantics. -->\n <ng-content select=\"[sectionHeader]\" />\n <div class=\"section-body\"><ng-content /></div>\n</section>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.is-bleed){margin-inline:calc(-1 * var(--fold-page-gutter, 32px))}:host(.is-bleed):first-child{margin-top:calc(-1 * var(--fold-page-pad-top, 28px))}:host(.is-bleed):last-child{margin-bottom:calc(-1 * var(--fold-page-pad-bottom, 40px))}.ps-root{display:flex;flex-direction:column;gap:var(--fold-page-section-gap, var(--fold-space-lg))}.section-head{display:flex;flex-direction:column;gap:var(--fold-space-sm);min-width:0}.section-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fold-space-md);min-width:0}.section-title{margin:0;display:inline-flex;align-items:center;gap:var(--fold-space-sm);min-width:0;font-size:var(--fold-text-md);font-weight:600;line-height:1.3;color:var(--fold-color-text)}.section-title fold-icon{flex:0 0 auto}.section-title-text{min-width:0}.section-actions{flex:0 0 auto;display:flex;align-items:center;gap:var(--fold-space-sm)}.section-desc{margin:0;font-size:var(--fold-text-sm);line-height:1.5;max-width:62ch;color:var(--fold-color-text-secondary)}.section-body{min-width:0}:host(.stack) .section-body{display:flex;flex-direction:column;gap:var(--fold-page-section-gap, var(--fold-space-lg))}\n"] }]
|
|
7481
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTone", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], stack: [{ type: i0.Input, args: [{ isSignal: true, alias: "stack", required: false }] }], bleed: [{ type: i0.Input, args: [{ isSignal: true, alias: "bleed", required: false }] }] } });
|
|
7410
7482
|
|
|
7411
7483
|
/**
|
|
7412
7484
|
* `<fold-hero-section>` — a full-bleed **page splash**: the borderless intro
|
|
@@ -7527,12 +7599,26 @@ class FoldPaginatorComponent {
|
|
|
7527
7599
|
/** Total number of items across all pages (drives `totalPages` + range label). */
|
|
7528
7600
|
totalItems = input.required(/* @ts-ignore */
|
|
7529
7601
|
...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
|
|
7530
|
-
/**
|
|
7531
|
-
|
|
7532
|
-
|
|
7602
|
+
/**
|
|
7603
|
+
* Number of items per page (must be > 0). Optional: when omitted, the first
|
|
7604
|
+
* of {@link pageSizeOptions} is used, so the common case only needs
|
|
7605
|
+
* `currentPage` + `totalItems`. Everything visible derives from the effective
|
|
7606
|
+
* size, so a control-it-later parent stays consistent.
|
|
7607
|
+
*/
|
|
7608
|
+
pageSize = input(/* @ts-ignore */
|
|
7609
|
+
...(ngDevMode ? [undefined, { debugName: "pageSize" }] : /* istanbul ignore next */ []));
|
|
7533
7610
|
/** Selectable page sizes. Set `[]` to hide the size selector entirely. */
|
|
7534
7611
|
pageSizeOptions = input([10, 25, 50, 100], /* @ts-ignore */
|
|
7535
7612
|
...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
|
|
7613
|
+
/** The size actually in effect: the `pageSize` input, else the first option. */
|
|
7614
|
+
effectivePageSize = computed(() => {
|
|
7615
|
+
const size = this.pageSize();
|
|
7616
|
+
if (size !== undefined && size > 0) {
|
|
7617
|
+
return size;
|
|
7618
|
+
}
|
|
7619
|
+
return this.pageSizeOptions()[0] ?? 10;
|
|
7620
|
+
}, /* @ts-ignore */
|
|
7621
|
+
...(ngDevMode ? [{ debugName: "effectivePageSize" }] : /* istanbul ignore next */ []));
|
|
7536
7622
|
/**
|
|
7537
7623
|
* How many page buttons to render on each side of the current page
|
|
7538
7624
|
* between the first/last anchors. Example with `siblingCount: 1`:
|
|
@@ -7561,7 +7647,7 @@ class FoldPaginatorComponent {
|
|
|
7561
7647
|
// ─── Derived state ────────────────────────────────────────────
|
|
7562
7648
|
/** Total pages, minimum 1 so the UI always shows at least "1 of 1". */
|
|
7563
7649
|
totalPages = computed(() => {
|
|
7564
|
-
const size = this.
|
|
7650
|
+
const size = this.effectivePageSize();
|
|
7565
7651
|
const total = this.totalItems();
|
|
7566
7652
|
if (size <= 0 || total <= 0) {
|
|
7567
7653
|
return 1;
|
|
@@ -7581,7 +7667,7 @@ class FoldPaginatorComponent {
|
|
|
7581
7667
|
* `<select>` can never silently show a value the parent isn't using). */
|
|
7582
7668
|
sizeOptions = computed(() => {
|
|
7583
7669
|
const opts = this.pageSizeOptions();
|
|
7584
|
-
const size = this.
|
|
7670
|
+
const size = this.effectivePageSize();
|
|
7585
7671
|
if (opts.includes(size)) {
|
|
7586
7672
|
return opts;
|
|
7587
7673
|
}
|
|
@@ -7593,10 +7679,10 @@ class FoldPaginatorComponent {
|
|
|
7593
7679
|
if (this.totalItems() === 0) {
|
|
7594
7680
|
return 0;
|
|
7595
7681
|
}
|
|
7596
|
-
return (this.page() - 1) * this.
|
|
7682
|
+
return (this.page() - 1) * this.effectivePageSize() + 1;
|
|
7597
7683
|
}, /* @ts-ignore */
|
|
7598
7684
|
...(ngDevMode ? [{ debugName: "rangeStart" }] : /* istanbul ignore next */ []));
|
|
7599
|
-
rangeEnd = computed(() => Math.min(this.page() * this.
|
|
7685
|
+
rangeEnd = computed(() => Math.min(this.page() * this.effectivePageSize(), this.totalItems()), /* @ts-ignore */
|
|
7600
7686
|
...(ngDevMode ? [{ debugName: "rangeEnd" }] : /* istanbul ignore next */ []));
|
|
7601
7687
|
canGoPrev = computed(() => !this.disabled() && this.page() > 1, /* @ts-ignore */
|
|
7602
7688
|
...(ngDevMode ? [{ debugName: "canGoPrev" }] : /* istanbul ignore next */ []));
|
|
@@ -7691,26 +7777,28 @@ class FoldPaginatorComponent {
|
|
|
7691
7777
|
}
|
|
7692
7778
|
onPageSizeChange(raw) {
|
|
7693
7779
|
const size = Number(raw);
|
|
7694
|
-
if (Number.isFinite(size) &&
|
|
7780
|
+
if (Number.isFinite(size) &&
|
|
7781
|
+
size > 0 &&
|
|
7782
|
+
size !== this.effectivePageSize()) {
|
|
7695
7783
|
this.pageSizeChange.emit(size);
|
|
7696
7784
|
}
|
|
7697
7785
|
}
|
|
7698
7786
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7699
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPaginatorComponent, isStandalone: true, selector: "fold-paginator", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: true, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired:
|
|
7787
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPaginatorComponent, isStandalone: true, selector: "fold-paginator", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: true, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "@let labels = l();\n@let sizes = sizeOptions();\n\n<div class=\"paginator-left\">\n @if (pageSizeOptions().length > 0) {\n <label class=\"page-size\">\n <select\n #pageSizeSelect\n class=\"page-size__select\"\n [value]=\"effectivePageSize()\"\n [disabled]=\"disabled()\"\n (change)=\"onPageSizeChange(pageSizeSelect.value)\"\n [attr.aria-label]=\"labels.pageSize\"\n >\n @for (opt of sizes; track opt) {\n <option [value]=\"opt\" [selected]=\"opt === effectivePageSize()\">\n {{ opt }}\n </option>\n }\n </select>\n <span class=\"page-size__label\">{{ labels.perPage }}</span>\n </label>\n }\n\n @if (totalItems() > 0) {\n <span class=\"range\">{{\n labels.range(rangeStart(), rangeEnd(), totalItems())\n }}</span>\n } @else {\n <span class=\"range range--empty\">{{ labels.empty }}</span>\n }\n</div>\n\n<nav class=\"pages\" [attr.aria-label]=\"labels.nav\">\n <button\n type=\"button\"\n class=\"nav-btn nav-btn--prev\"\n [disabled]=\"!canGoPrev()\"\n (click)=\"prev()\"\n [attr.aria-label]=\"labels.previous\"\n >\n <fold-icon name=\"chevron-left\" [size]=\"15\" />\n </button>\n\n @for (item of pageItems(); track $index) {\n @if (item.kind === \"page\") {\n <button\n type=\"button\"\n class=\"page-btn\"\n [class.is-active]=\"item.page === page()\"\n [attr.aria-current]=\"item.page === page() ? 'page' : null\"\n [attr.aria-label]=\"labels.page(item.page)\"\n [disabled]=\"disabled()\"\n (click)=\"goToPage(item.page)\"\n >\n {{ item.page }}\n </button>\n } @else {\n <span class=\"gap\" aria-hidden=\"true\">\u2026</span>\n }\n }\n\n <button\n type=\"button\"\n class=\"nav-btn nav-btn--next\"\n [disabled]=\"!canGoNext()\"\n (click)=\"next()\"\n [attr.aria-label]=\"labels.next\"\n >\n <fold-icon name=\"chevron-right\" [size]=\"15\" />\n </button>\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-lg);flex-wrap:wrap;padding:var(--fold-space-sm) 0 0;color:var(--fold-color-text);font-size:var(--fold-text-sm)}.paginator-left{display:flex;align-items:center;gap:var(--fold-space-md)}.range{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted);font-variant-numeric:tabular-nums}.range--empty{font-style:italic}.page-size{display:inline-flex;align-items:center;gap:var(--fold-space-sm);font-size:var(--fold-text-xs);color:var(--fold-color-text-muted)}.page-size__select{height:30px;padding:0 var(--fold-space-2xl) 0 var(--fold-space-sm);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-card) url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237a7670' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>\") no-repeat right 9px center;color:var(--fold-color-text);font:inherit;font-size:var(--fold-text-sm);font-weight:600;font-variant-numeric:tabular-nums;appearance:none;cursor:pointer;transition:border-color var(--fold-motion-fast)}.page-size__select:hover:not(:disabled){border-color:var(--fold-color-border)}.page-size__select:focus-visible{outline:none;border-color:var(--fold-color-primary-border)}.page-size__select:disabled{opacity:.5;cursor:not-allowed}.page-size__select option{background:var(--fold-color-surface-card)}.page-size__label{color:var(--fold-color-text-muted)}.pages{display:inline-flex;align-items:center;gap:var(--fold-space-xs)}.nav-btn,.page-btn{height:30px;min-width:30px;padding:0 var(--fold-space-sm);display:inline-grid;place-items:center;border:1px solid transparent;border-radius:var(--fold-radius-sm);background:transparent;color:var(--fold-color-text-secondary);font:inherit;font-size:var(--fold-text-sm);font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;transition:background var(--fold-motion-fast),border-color var(--fold-motion-fast),color var(--fold-motion-fast)}.nav-btn:hover:not(:disabled),.page-btn:hover:not(:disabled){background:var(--fold-color-surface-raised);color:var(--fold-color-text)}.nav-btn:focus-visible,.page-btn:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:1px}.nav-btn:disabled,.page-btn:disabled{opacity:.35;cursor:not-allowed}.nav-btn{color:var(--fold-color-text-muted)}.page-btn.is-active,.page-btn.is-active:hover{background:var(--fold-color-primary-surface);border-color:var(--fold-color-primary-border);color:var(--fold-color-primary-text);cursor:default}.gap{min-width:18px;text-align:center;color:var(--fold-color-text-faded);font-size:var(--fold-text-sm);-webkit-user-select:none;user-select:none}@media(max-width:480px){:host{justify-content:center}.page-size__label{display:none}}@media(prefers-reduced-motion:reduce){.page-btn,.page-size__select{transition:none}}@media(forced-colors:active){.page-btn.is-active,.page-btn.is-active:hover{border-color:Highlight;color:Highlight}}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
7700
7788
|
}
|
|
7701
7789
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPaginatorComponent, decorators: [{
|
|
7702
7790
|
type: Component,
|
|
7703
|
-
args: [{ selector: "fold-paginator", standalone: true, imports: [FoldIconComponent], template: "@let labels = l();\n@let sizes = sizeOptions();\n\n<div class=\"paginator-left\">\n @if (pageSizeOptions().length > 0) {\n <label class=\"page-size\">\n <select\n #pageSizeSelect\n class=\"page-size__select\"\n [value]=\"
|
|
7704
|
-
}], ctorParameters: () => [], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: true }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required:
|
|
7791
|
+
args: [{ selector: "fold-paginator", standalone: true, imports: [FoldIconComponent], template: "@let labels = l();\n@let sizes = sizeOptions();\n\n<div class=\"paginator-left\">\n @if (pageSizeOptions().length > 0) {\n <label class=\"page-size\">\n <select\n #pageSizeSelect\n class=\"page-size__select\"\n [value]=\"effectivePageSize()\"\n [disabled]=\"disabled()\"\n (change)=\"onPageSizeChange(pageSizeSelect.value)\"\n [attr.aria-label]=\"labels.pageSize\"\n >\n @for (opt of sizes; track opt) {\n <option [value]=\"opt\" [selected]=\"opt === effectivePageSize()\">\n {{ opt }}\n </option>\n }\n </select>\n <span class=\"page-size__label\">{{ labels.perPage }}</span>\n </label>\n }\n\n @if (totalItems() > 0) {\n <span class=\"range\">{{\n labels.range(rangeStart(), rangeEnd(), totalItems())\n }}</span>\n } @else {\n <span class=\"range range--empty\">{{ labels.empty }}</span>\n }\n</div>\n\n<nav class=\"pages\" [attr.aria-label]=\"labels.nav\">\n <button\n type=\"button\"\n class=\"nav-btn nav-btn--prev\"\n [disabled]=\"!canGoPrev()\"\n (click)=\"prev()\"\n [attr.aria-label]=\"labels.previous\"\n >\n <fold-icon name=\"chevron-left\" [size]=\"15\" />\n </button>\n\n @for (item of pageItems(); track $index) {\n @if (item.kind === \"page\") {\n <button\n type=\"button\"\n class=\"page-btn\"\n [class.is-active]=\"item.page === page()\"\n [attr.aria-current]=\"item.page === page() ? 'page' : null\"\n [attr.aria-label]=\"labels.page(item.page)\"\n [disabled]=\"disabled()\"\n (click)=\"goToPage(item.page)\"\n >\n {{ item.page }}\n </button>\n } @else {\n <span class=\"gap\" aria-hidden=\"true\">\u2026</span>\n }\n }\n\n <button\n type=\"button\"\n class=\"nav-btn nav-btn--next\"\n [disabled]=\"!canGoNext()\"\n (click)=\"next()\"\n [attr.aria-label]=\"labels.next\"\n >\n <fold-icon name=\"chevron-right\" [size]=\"15\" />\n </button>\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-lg);flex-wrap:wrap;padding:var(--fold-space-sm) 0 0;color:var(--fold-color-text);font-size:var(--fold-text-sm)}.paginator-left{display:flex;align-items:center;gap:var(--fold-space-md)}.range{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted);font-variant-numeric:tabular-nums}.range--empty{font-style:italic}.page-size{display:inline-flex;align-items:center;gap:var(--fold-space-sm);font-size:var(--fold-text-xs);color:var(--fold-color-text-muted)}.page-size__select{height:30px;padding:0 var(--fold-space-2xl) 0 var(--fold-space-sm);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-card) url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237a7670' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>\") no-repeat right 9px center;color:var(--fold-color-text);font:inherit;font-size:var(--fold-text-sm);font-weight:600;font-variant-numeric:tabular-nums;appearance:none;cursor:pointer;transition:border-color var(--fold-motion-fast)}.page-size__select:hover:not(:disabled){border-color:var(--fold-color-border)}.page-size__select:focus-visible{outline:none;border-color:var(--fold-color-primary-border)}.page-size__select:disabled{opacity:.5;cursor:not-allowed}.page-size__select option{background:var(--fold-color-surface-card)}.page-size__label{color:var(--fold-color-text-muted)}.pages{display:inline-flex;align-items:center;gap:var(--fold-space-xs)}.nav-btn,.page-btn{height:30px;min-width:30px;padding:0 var(--fold-space-sm);display:inline-grid;place-items:center;border:1px solid transparent;border-radius:var(--fold-radius-sm);background:transparent;color:var(--fold-color-text-secondary);font:inherit;font-size:var(--fold-text-sm);font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;transition:background var(--fold-motion-fast),border-color var(--fold-motion-fast),color var(--fold-motion-fast)}.nav-btn:hover:not(:disabled),.page-btn:hover:not(:disabled){background:var(--fold-color-surface-raised);color:var(--fold-color-text)}.nav-btn:focus-visible,.page-btn:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:1px}.nav-btn:disabled,.page-btn:disabled{opacity:.35;cursor:not-allowed}.nav-btn{color:var(--fold-color-text-muted)}.page-btn.is-active,.page-btn.is-active:hover{background:var(--fold-color-primary-surface);border-color:var(--fold-color-primary-border);color:var(--fold-color-primary-text);cursor:default}.gap{min-width:18px;text-align:center;color:var(--fold-color-text-faded);font-size:var(--fold-text-sm);-webkit-user-select:none;user-select:none}@media(max-width:480px){:host{justify-content:center}.page-size__label{display:none}}@media(prefers-reduced-motion:reduce){.page-btn,.page-size__select{transition:none}}@media(forced-colors:active){.page-btn.is-active,.page-btn.is-active:hover{border-color:Highlight;color:Highlight}}\n"] }]
|
|
7792
|
+
}], ctorParameters: () => [], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: true }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }] } });
|
|
7705
7793
|
|
|
7706
7794
|
/**
|
|
7707
7795
|
* `<fold-view-nav>` — a **navigation** bar styled as tabs: a `<nav>` whose items
|
|
7708
7796
|
* *go somewhere*. Give each item a `link` (or `href`) and it renders a real
|
|
7709
7797
|
* `<a>` — so cmd/middle-click opens a new tab, the URL is a deep link, and the
|
|
7710
7798
|
* active item is driven automatically by `routerLinkActive` +
|
|
7711
|
-
* `aria-current="page"`. Without a link an item is a `<button>` that
|
|
7712
|
-
* `
|
|
7713
|
-
*
|
|
7799
|
+
* `aria-current="page"`. Without a link an item is a `<button>` that drives the
|
|
7800
|
+
* `activeKey` **two-way model** — bind `[(activeKey)]` for view switching with
|
|
7801
|
+
* no route.
|
|
7714
7802
|
*
|
|
7715
7803
|
* **Navigation, not the tabs widget.** Reach for this when a tab routes / switches
|
|
7716
7804
|
* views. When tabs toggle **layered panels in place** (same URL), use
|
|
@@ -7738,10 +7826,12 @@ class FoldViewNavComponent {
|
|
|
7738
7826
|
items = input.required(/* @ts-ignore */
|
|
7739
7827
|
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
7740
7828
|
/**
|
|
7741
|
-
* The active item's `key
|
|
7742
|
-
*
|
|
7829
|
+
* The active item's `key`, as a **two-way model** — for **button** items (no
|
|
7830
|
+
* `link`). Bind `[(activeKey)]` and a click writes the new key back; there is
|
|
7831
|
+
* no separate change output (the model is the one way). Link items ignore it:
|
|
7832
|
+
* their active state comes from the URL via `routerLinkActive`.
|
|
7743
7833
|
*/
|
|
7744
|
-
activeKey =
|
|
7834
|
+
activeKey = model("", /* @ts-ignore */
|
|
7745
7835
|
...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
|
|
7746
7836
|
/** How the active item reads: accent underline, or accent fill. */
|
|
7747
7837
|
activeStyle = input("underline", /* @ts-ignore */
|
|
@@ -7779,8 +7869,6 @@ class FoldViewNavComponent {
|
|
|
7779
7869
|
*/
|
|
7780
7870
|
background = input("transparent", /* @ts-ignore */
|
|
7781
7871
|
...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
|
|
7782
|
-
/** Emits the `key` of a clicked **button** item (link items just navigate). */
|
|
7783
|
-
activeChange = output();
|
|
7784
7872
|
/** The nearest layout, if any — lets `direction="auto"` follow it. */
|
|
7785
7873
|
layout = inject(FOLD_NAV_LAYOUT, { optional: true });
|
|
7786
7874
|
/** `direction` with `auto` resolved against the wrapping layout. */
|
|
@@ -7793,7 +7881,7 @@ class FoldViewNavComponent {
|
|
|
7793
7881
|
}, /* @ts-ignore */
|
|
7794
7882
|
...(ngDevMode ? [{ debugName: "resolvedDirection" }] : /* istanbul ignore next */ []));
|
|
7795
7883
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldViewNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7796
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldViewNavComponent, isStandalone: true, selector: "fold-view-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, activeStyle: { classPropertyName: "activeStyle", publicName: "activeStyle", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeChange: "activeChange" }, ngImport: i0, template: "<nav\n class=\"tab-bar\"\n [class.style-underline]=\"activeStyle() === 'underline'\"\n [class.style-fill]=\"activeStyle() === 'fill'\"\n [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n [class.size-comfortable]=\"size() === 'comfortable'\"\n [class.is-collapsed]=\"collapsed()\"\n [class.bg-surface]=\"background() === 'surface'\"\n>\n @for (item of items(); track item.key) {\n @if (item.disabled) {\n <button\n type=\"button\"\n class=\"tab-bar-item is-disabled\"\n disabled\n aria-disabled=\"true\"\n >\n <ng-container\n [ngTemplateOutlet]=\"body\"\n [ngTemplateOutletContext]=\"{ $implicit: item, active: false }\"\n />\n </button>\n } @else if (item.link !== undefined) {\n <a\n class=\"tab-bar-item\"\n [routerLink]=\"item.link\"\n routerLinkActive=\"is-active\"\n #rla=\"routerLinkActive\"\n [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"body\"\n [ngTemplateOutletContext]=\"{ $implicit: item, active: rla.isActive }\"\n />\n </a>\n } @else if (item.href !== undefined) {\n <a\n class=\"tab-bar-item\"\n [href]=\"item.href\"\n [class.is-active]=\"activeKey() === item.key\"\n [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"body\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n active: activeKey() === item.key,\n }\"\n />\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"tab-bar-item\"\n [class.is-active]=\"activeKey() === item.key\"\n [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n (click)=\"activeChange.emit(item.key)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"body\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n active: activeKey() === item.key,\n }\"\n />\n </button>\n }\n }\n</nav>\n\n<!-- One item's inner content, shared by the link / button branches. -->\n<ng-template #body let-item let-active=\"active\">\n @if (item.icon; as ic) {\n <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n } @else if (collapsed()) {\n <!-- Collapsed needs a fixed glyph; an icon-less item falls back to its\n initial so the rail stays icon-width and the label still tooltips. -->\n <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n item.label.charAt(0)\n }}</span>\n }\n <span class=\"tab-bar-label\">{{ item.label }}</span>\n @if (item.badge !== undefined && item.badge !== null) {\n <fold-badge\n class=\"tab-bar-badge\"\n [content]=\"item.badge + ''\"\n [variant]=\"active ? 'accent' : 'neutral'\"\n />\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:4px 8px 0}.bg-surface.dir-vertical{padding:12px 8px}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:6px 8px;background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:10px;padding:11px 16px;font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:12px 14px;font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:9px 12px;gap:10px;border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:7px}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:4px 8px;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);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}@media(max-width:768px){.dir-vertical{flex-direction:row;align-items:center}.dir-vertical .tab-bar-item{flex:0 0 auto;justify-content:center;text-align:center;padding:8px;gap:0;font-size:var(--fold-text-xs);font-weight:600}.dir-vertical .tab-bar-item .tab-bar-label{display:none}.dir-vertical .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:6px;padding:8px 12px}.dir-vertical .tab-bar-item.is-active .tab-bar-label{display:inline;overflow:hidden;text-overflow:ellipsis}.dir-vertical .tab-bar-badge{display:none}.dir-vertical.style-underline{border-right:none;border-bottom:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-left:none;border-bottom:2px solid transparent;margin-right:0;margin-bottom:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-bottom-color:var(--fold-color-primary)}.dir-vertical.style-fill{border-right:none}}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "title"] }, { kind: "component", type: FoldBadgeComponent, selector: "fold-badge", inputs: ["content", "radius", "variant"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
|
|
7884
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldViewNavComponent, isStandalone: true, selector: "fold-view-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, activeStyle: { classPropertyName: "activeStyle", publicName: "activeStyle", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeKey: "activeKeyChange" }, ngImport: i0, template: "<nav\n class=\"tab-bar\"\n [class.style-underline]=\"activeStyle() === 'underline'\"\n [class.style-fill]=\"activeStyle() === 'fill'\"\n [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n [class.size-comfortable]=\"size() === 'comfortable'\"\n [class.is-collapsed]=\"collapsed()\"\n [class.bg-surface]=\"background() === 'surface'\"\n>\n @for (item of items(); track item.key) {\n @if (item.disabled) {\n <button\n type=\"button\"\n class=\"tab-bar-item is-disabled\"\n disabled\n aria-disabled=\"true\"\n >\n <ng-container\n [ngTemplateOutlet]=\"body\"\n [ngTemplateOutletContext]=\"{ $implicit: item, active: false }\"\n />\n </button>\n } @else if (item.link !== undefined) {\n <a\n class=\"tab-bar-item\"\n [routerLink]=\"item.link\"\n routerLinkActive=\"is-active\"\n #rla=\"routerLinkActive\"\n [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"body\"\n [ngTemplateOutletContext]=\"{ $implicit: item, active: rla.isActive }\"\n />\n </a>\n } @else if (item.href !== undefined) {\n <a\n class=\"tab-bar-item\"\n [href]=\"item.href\"\n [class.is-active]=\"activeKey() === item.key\"\n [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"body\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n active: activeKey() === item.key,\n }\"\n />\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"tab-bar-item\"\n [class.is-active]=\"activeKey() === item.key\"\n [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n (click)=\"activeKey.set(item.key)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"body\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n active: activeKey() === item.key,\n }\"\n />\n </button>\n }\n }\n</nav>\n\n<!-- One item's inner content, shared by the link / button branches. -->\n<ng-template #body let-item let-active=\"active\">\n @if (item.icon; as ic) {\n <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n } @else if (collapsed()) {\n <!-- Collapsed needs a fixed glyph; an icon-less item falls back to its\n initial so the rail stays icon-width and the label still tooltips. -->\n <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n item.label.charAt(0)\n }}</span>\n }\n <span class=\"tab-bar-label\">{{ item.label }}</span>\n @if (item.badge !== undefined && item.badge !== null) {\n <fold-badge\n class=\"tab-bar-badge\"\n [content]=\"item.badge + ''\"\n [variant]=\"active ? 'accent' : 'neutral'\"\n />\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;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);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}@media(max-width:768px){.dir-vertical{flex-direction:row;align-items:center}.dir-vertical .tab-bar-item{flex:0 0 auto;justify-content:center;text-align:center;padding:var(--fold-space-sm);gap:0;font-size:var(--fold-text-xs);font-weight:600}.dir-vertical .tab-bar-item .tab-bar-label{display:none}.dir-vertical .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-md)}.dir-vertical .tab-bar-item.is-active .tab-bar-label{display:inline;overflow:hidden;text-overflow:ellipsis}.dir-vertical .tab-bar-badge{display:none}.dir-vertical.style-underline{border-right:none;border-bottom:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-left:none;border-bottom:2px solid transparent;margin-right:0;margin-bottom:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-bottom-color:var(--fold-color-primary)}.dir-vertical.style-fill{border-right:none}}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldBadgeComponent, selector: "fold-badge", inputs: ["content", "radius", "variant"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
|
|
7797
7885
|
}
|
|
7798
7886
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldViewNavComponent, decorators: [{
|
|
7799
7887
|
type: Component,
|
|
@@ -7803,8 +7891,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
7803
7891
|
FoldBadgeComponent,
|
|
7804
7892
|
RouterLink,
|
|
7805
7893
|
RouterLinkActive,
|
|
7806
|
-
], template: "<nav\n class=\"tab-bar\"\n [class.style-underline]=\"activeStyle() === 'underline'\"\n [class.style-fill]=\"activeStyle() === 'fill'\"\n [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n [class.size-comfortable]=\"size() === 'comfortable'\"\n [class.is-collapsed]=\"collapsed()\"\n [class.bg-surface]=\"background() === 'surface'\"\n>\n @for (item of items(); track item.key) {\n @if (item.disabled) {\n <button\n type=\"button\"\n class=\"tab-bar-item is-disabled\"\n disabled\n aria-disabled=\"true\"\n >\n <ng-container\n [ngTemplateOutlet]=\"body\"\n [ngTemplateOutletContext]=\"{ $implicit: item, active: false }\"\n />\n </button>\n } @else if (item.link !== undefined) {\n <a\n class=\"tab-bar-item\"\n [routerLink]=\"item.link\"\n routerLinkActive=\"is-active\"\n #rla=\"routerLinkActive\"\n [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"body\"\n [ngTemplateOutletContext]=\"{ $implicit: item, active: rla.isActive }\"\n />\n </a>\n } @else if (item.href !== undefined) {\n <a\n class=\"tab-bar-item\"\n [href]=\"item.href\"\n [class.is-active]=\"activeKey() === item.key\"\n [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"body\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n active: activeKey() === item.key,\n }\"\n />\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"tab-bar-item\"\n [class.is-active]=\"activeKey() === item.key\"\n [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n (click)=\"
|
|
7807
|
-
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }], activeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStyle", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }]
|
|
7894
|
+
], template: "<nav\n class=\"tab-bar\"\n [class.style-underline]=\"activeStyle() === 'underline'\"\n [class.style-fill]=\"activeStyle() === 'fill'\"\n [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n [class.size-comfortable]=\"size() === 'comfortable'\"\n [class.is-collapsed]=\"collapsed()\"\n [class.bg-surface]=\"background() === 'surface'\"\n>\n @for (item of items(); track item.key) {\n @if (item.disabled) {\n <button\n type=\"button\"\n class=\"tab-bar-item is-disabled\"\n disabled\n aria-disabled=\"true\"\n >\n <ng-container\n [ngTemplateOutlet]=\"body\"\n [ngTemplateOutletContext]=\"{ $implicit: item, active: false }\"\n />\n </button>\n } @else if (item.link !== undefined) {\n <a\n class=\"tab-bar-item\"\n [routerLink]=\"item.link\"\n routerLinkActive=\"is-active\"\n #rla=\"routerLinkActive\"\n [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"body\"\n [ngTemplateOutletContext]=\"{ $implicit: item, active: rla.isActive }\"\n />\n </a>\n } @else if (item.href !== undefined) {\n <a\n class=\"tab-bar-item\"\n [href]=\"item.href\"\n [class.is-active]=\"activeKey() === item.key\"\n [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"body\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n active: activeKey() === item.key,\n }\"\n />\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"tab-bar-item\"\n [class.is-active]=\"activeKey() === item.key\"\n [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n (click)=\"activeKey.set(item.key)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"body\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n active: activeKey() === item.key,\n }\"\n />\n </button>\n }\n }\n</nav>\n\n<!-- One item's inner content, shared by the link / button branches. -->\n<ng-template #body let-item let-active=\"active\">\n @if (item.icon; as ic) {\n <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n } @else if (collapsed()) {\n <!-- Collapsed needs a fixed glyph; an icon-less item falls back to its\n initial so the rail stays icon-width and the label still tooltips. -->\n <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n item.label.charAt(0)\n }}</span>\n }\n <span class=\"tab-bar-label\">{{ item.label }}</span>\n @if (item.badge !== undefined && item.badge !== null) {\n <fold-badge\n class=\"tab-bar-badge\"\n [content]=\"item.badge + ''\"\n [variant]=\"active ? 'accent' : 'neutral'\"\n />\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;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);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}@media(max-width:768px){.dir-vertical{flex-direction:row;align-items:center}.dir-vertical .tab-bar-item{flex:0 0 auto;justify-content:center;text-align:center;padding:var(--fold-space-sm);gap:0;font-size:var(--fold-text-xs);font-weight:600}.dir-vertical .tab-bar-item .tab-bar-label{display:none}.dir-vertical .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-md)}.dir-vertical .tab-bar-item.is-active .tab-bar-label{display:inline;overflow:hidden;text-overflow:ellipsis}.dir-vertical .tab-bar-badge{display:none}.dir-vertical.style-underline{border-right:none;border-bottom:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-left:none;border-bottom:2px solid transparent;margin-right:0;margin-bottom:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-bottom-color:var(--fold-color-primary)}.dir-vertical.style-fill{border-right:none}}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}\n"] }]
|
|
7895
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }, { type: i0.Output, args: ["activeKeyChange"] }], activeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStyle", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }] } });
|
|
7808
7896
|
|
|
7809
7897
|
/**
|
|
7810
7898
|
* `<fold-tabs>` — the **in-page tabs widget** (the ARIA Tabs pattern): a
|
|
@@ -7819,15 +7907,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
7819
7907
|
* difference is **semantics** — use `fold-tabs` for in-page panel switching, and
|
|
7820
7908
|
* `fold-view-nav` when the tabs actually navigate (route) between views.
|
|
7821
7909
|
*
|
|
7910
|
+
* `activeKey` is a two-way model — the single way to drive selection. Bind
|
|
7911
|
+
* `[(activeKey)]` and the bar writes the new key back on click / arrow keys:
|
|
7912
|
+
*
|
|
7822
7913
|
* ```html
|
|
7823
7914
|
* <fold-nav-layout>
|
|
7824
|
-
* <fold-tabs
|
|
7825
|
-
* nav
|
|
7826
|
-
* #t="foldTabs"
|
|
7827
|
-
* [tabs]="tabs"
|
|
7828
|
-
* [activeKey]="tab()"
|
|
7829
|
-
* (tabChange)="tab.set($event)"
|
|
7830
|
-
* />
|
|
7915
|
+
* <fold-tabs nav #t="foldTabs" [tabs]="tabs" [(activeKey)]="tab" />
|
|
7831
7916
|
* <fold-tab-panel [tabs]="t" key="overview">…</fold-tab-panel>
|
|
7832
7917
|
* <fold-tab-panel [tabs]="t" key="settings">…</fold-tab-panel>
|
|
7833
7918
|
* </fold-nav-layout>
|
|
@@ -7842,8 +7927,14 @@ class FoldTabsComponent {
|
|
|
7842
7927
|
/** The tabs to render, in order. */
|
|
7843
7928
|
tabs = input.required(/* @ts-ignore */
|
|
7844
7929
|
...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
7845
|
-
/**
|
|
7846
|
-
|
|
7930
|
+
/**
|
|
7931
|
+
* The `key` of the active tab (the shown panel), as a **two-way model** — the
|
|
7932
|
+
* single source of selection. Bind `[(activeKey)]` and the bar writes the new
|
|
7933
|
+
* key back on click / arrow keys; to *react* to a change without a writeback,
|
|
7934
|
+
* listen to the model's `(activeKeyChange)`. There is no separate change
|
|
7935
|
+
* output — the model is the one way.
|
|
7936
|
+
*/
|
|
7937
|
+
activeKey = model.required(/* @ts-ignore */
|
|
7847
7938
|
...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
|
|
7848
7939
|
/** How the active tab reads: accent underline, or accent fill. */
|
|
7849
7940
|
activeStyle = input("underline", /* @ts-ignore */
|
|
@@ -7862,8 +7953,6 @@ class FoldTabsComponent {
|
|
|
7862
7953
|
/** `surface` (filled bar, default) or `transparent`. */
|
|
7863
7954
|
background = input("surface", /* @ts-ignore */
|
|
7864
7955
|
...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
|
|
7865
|
-
/** Emits the newly-selected tab's `key`. */
|
|
7866
|
-
tabChange = output();
|
|
7867
7956
|
/** The nearest layout, if any — lets `direction="auto"` follow it. */
|
|
7868
7957
|
layout = inject(FOLD_NAV_LAYOUT, { optional: true });
|
|
7869
7958
|
/** `direction` with `auto` resolved against the wrapping layout. */
|
|
@@ -7886,7 +7975,12 @@ class FoldTabsComponent {
|
|
|
7886
7975
|
return `${this.uid}-panel-${key}`;
|
|
7887
7976
|
}
|
|
7888
7977
|
select(key) {
|
|
7889
|
-
this.
|
|
7978
|
+
this.commit(key);
|
|
7979
|
+
}
|
|
7980
|
+
/** Records a new selection by writing the `activeKey` model — the two-way
|
|
7981
|
+
* binding (or its `activeKeyChange`) carries it to the parent. */
|
|
7982
|
+
commit(key) {
|
|
7983
|
+
this.activeKey.set(key);
|
|
7890
7984
|
}
|
|
7891
7985
|
/**
|
|
7892
7986
|
* Roving-tabindex keyboard model (APG Tabs, automatic activation): arrows move
|
|
@@ -7924,16 +8018,16 @@ class FoldTabsComponent {
|
|
|
7924
8018
|
if (key === undefined) {
|
|
7925
8019
|
return;
|
|
7926
8020
|
}
|
|
7927
|
-
this.
|
|
8021
|
+
this.commit(key);
|
|
7928
8022
|
this.tabButtons()[target]?.nativeElement.focus();
|
|
7929
8023
|
}
|
|
7930
8024
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7931
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldTabsComponent, isStandalone: true, selector: "fold-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: true, transformFunction: null }, activeStyle: { classPropertyName: "activeStyle", publicName: "activeStyle", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, outputs: {
|
|
8025
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldTabsComponent, isStandalone: true, selector: "fold-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: true, transformFunction: null }, activeStyle: { classPropertyName: "activeStyle", publicName: "activeStyle", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeKey: "activeKeyChange" }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabBtn"], descendants: true, isSignal: true }], exportAs: ["foldTabs"], ngImport: i0, template: "<div\n class=\"tab-bar\"\n role=\"tablist\"\n [attr.aria-orientation]=\"\n resolvedDirection() === 'vertical' ? 'vertical' : 'horizontal'\n \"\n [class.style-underline]=\"activeStyle() === 'underline'\"\n [class.style-fill]=\"activeStyle() === 'fill'\"\n [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n [class.size-comfortable]=\"size() === 'comfortable'\"\n [class.is-collapsed]=\"collapsed()\"\n [class.bg-surface]=\"background() === 'surface'\"\n (keydown)=\"onKeydown($event)\"\n>\n @for (tab of tabs(); track tab.key) {\n <button\n #tabBtn\n type=\"button\"\n role=\"tab\"\n class=\"tab-bar-item\"\n [id]=\"tabId(tab.key)\"\n [class.is-active]=\"activeKey() === tab.key\"\n [attr.aria-selected]=\"activeKey() === tab.key\"\n [attr.aria-controls]=\"panelId(tab.key)\"\n [tabindex]=\"activeKey() === tab.key ? 0 : -1\"\n (click)=\"select(tab.key)\"\n >\n @if (tab.icon; as ic) {\n <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n } @else if (collapsed()) {\n <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n tab.label.charAt(0)\n }}</span>\n }\n <span class=\"tab-bar-label\">{{ tab.label }}</span>\n @if (tab.badge !== undefined && tab.badge !== null) {\n <fold-badge\n class=\"tab-bar-badge\"\n [content]=\"tab.badge + ''\"\n [variant]=\"activeKey() === tab.key ? 'accent' : 'neutral'\"\n />\n }\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;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);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}@media(max-width:768px){.dir-vertical{flex-direction:row;align-items:center}.dir-vertical .tab-bar-item{flex:0 0 auto;justify-content:center;text-align:center;padding:var(--fold-space-sm);gap:0;font-size:var(--fold-text-xs);font-weight:600}.dir-vertical .tab-bar-item .tab-bar-label{display:none}.dir-vertical .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-md)}.dir-vertical .tab-bar-item.is-active .tab-bar-label{display:inline;overflow:hidden;text-overflow:ellipsis}.dir-vertical .tab-bar-badge{display:none}.dir-vertical.style-underline{border-right:none;border-bottom:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-left:none;border-bottom:2px solid transparent;margin-right:0;margin-bottom:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-bottom-color:var(--fold-color-primary)}.dir-vertical.style-fill{border-right:none}}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}\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"] }] });
|
|
7932
8026
|
}
|
|
7933
8027
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldTabsComponent, decorators: [{
|
|
7934
8028
|
type: Component,
|
|
7935
|
-
args: [{ selector: "fold-tabs", standalone: true, exportAs: "foldTabs", imports: [FoldIconComponent, FoldBadgeComponent], template: "<div\n class=\"tab-bar\"\n role=\"tablist\"\n [attr.aria-orientation]=\"\n resolvedDirection() === 'vertical' ? 'vertical' : 'horizontal'\n \"\n [class.style-underline]=\"activeStyle() === 'underline'\"\n [class.style-fill]=\"activeStyle() === 'fill'\"\n [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n [class.size-comfortable]=\"size() === 'comfortable'\"\n [class.is-collapsed]=\"collapsed()\"\n [class.bg-surface]=\"background() === 'surface'\"\n (keydown)=\"onKeydown($event)\"\n>\n @for (tab of tabs(); track tab.key) {\n <button\n #tabBtn\n type=\"button\"\n role=\"tab\"\n class=\"tab-bar-item\"\n [id]=\"tabId(tab.key)\"\n [class.is-active]=\"activeKey() === tab.key\"\n [attr.aria-selected]=\"activeKey() === tab.key\"\n [attr.aria-controls]=\"panelId(tab.key)\"\n [tabindex]=\"activeKey() === tab.key ? 0 : -1\"\n (click)=\"select(tab.key)\"\n >\n @if (tab.icon; as ic) {\n <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n } @else if (collapsed()) {\n <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n tab.label.charAt(0)\n }}</span>\n }\n <span class=\"tab-bar-label\">{{ tab.label }}</span>\n @if (tab.badge !== undefined && tab.badge !== null) {\n <fold-badge\n class=\"tab-bar-badge\"\n [content]=\"tab.badge + ''\"\n [variant]=\"activeKey() === tab.key ? 'accent' : 'neutral'\"\n />\n }\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:
|
|
7936
|
-
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: true }] }], activeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStyle", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }],
|
|
8029
|
+
args: [{ selector: "fold-tabs", standalone: true, exportAs: "foldTabs", imports: [FoldIconComponent, FoldBadgeComponent], template: "<div\n class=\"tab-bar\"\n role=\"tablist\"\n [attr.aria-orientation]=\"\n resolvedDirection() === 'vertical' ? 'vertical' : 'horizontal'\n \"\n [class.style-underline]=\"activeStyle() === 'underline'\"\n [class.style-fill]=\"activeStyle() === 'fill'\"\n [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n [class.size-comfortable]=\"size() === 'comfortable'\"\n [class.is-collapsed]=\"collapsed()\"\n [class.bg-surface]=\"background() === 'surface'\"\n (keydown)=\"onKeydown($event)\"\n>\n @for (tab of tabs(); track tab.key) {\n <button\n #tabBtn\n type=\"button\"\n role=\"tab\"\n class=\"tab-bar-item\"\n [id]=\"tabId(tab.key)\"\n [class.is-active]=\"activeKey() === tab.key\"\n [attr.aria-selected]=\"activeKey() === tab.key\"\n [attr.aria-controls]=\"panelId(tab.key)\"\n [tabindex]=\"activeKey() === tab.key ? 0 : -1\"\n (click)=\"select(tab.key)\"\n >\n @if (tab.icon; as ic) {\n <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n } @else if (collapsed()) {\n <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n tab.label.charAt(0)\n }}</span>\n }\n <span class=\"tab-bar-label\">{{ tab.label }}</span>\n @if (tab.badge !== undefined && tab.badge !== null) {\n <fold-badge\n class=\"tab-bar-badge\"\n [content]=\"tab.badge + ''\"\n [variant]=\"activeKey() === tab.key ? 'accent' : 'neutral'\"\n />\n }\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;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);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}@media(max-width:768px){.dir-vertical{flex-direction:row;align-items:center}.dir-vertical .tab-bar-item{flex:0 0 auto;justify-content:center;text-align:center;padding:var(--fold-space-sm);gap:0;font-size:var(--fold-text-xs);font-weight:600}.dir-vertical .tab-bar-item .tab-bar-label{display:none}.dir-vertical .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-md)}.dir-vertical .tab-bar-item.is-active .tab-bar-label{display:inline;overflow:hidden;text-overflow:ellipsis}.dir-vertical .tab-bar-badge{display:none}.dir-vertical.style-underline{border-right:none;border-bottom:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-left:none;border-bottom:2px solid transparent;margin-right:0;margin-bottom:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-bottom-color:var(--fold-color-primary)}.dir-vertical.style-fill{border-right:none}}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}\n"] }]
|
|
8030
|
+
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: true }] }, { type: i0.Output, args: ["activeKeyChange"] }], activeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStyle", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], tabButtons: [{ type: i0.ViewChildren, args: ["tabBtn", { isSignal: true }] }] } });
|
|
7937
8031
|
|
|
7938
8032
|
/**
|
|
7939
8033
|
* `<fold-tab-panel>` — one panel of a {@link FoldTabsComponent}. Handed the bar
|
|
@@ -7946,7 +8040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
7946
8040
|
* content) and still coordinate.
|
|
7947
8041
|
*
|
|
7948
8042
|
* ```html
|
|
7949
|
-
* <fold-tabs #t="foldTabs" [tabs]="tabs" [activeKey]="tab
|
|
8043
|
+
* <fold-tabs #t="foldTabs" [tabs]="tabs" [(activeKey)]="tab" />
|
|
7950
8044
|
* <fold-tab-panel [tabs]="t" key="overview">…</fold-tab-panel>
|
|
7951
8045
|
* ```
|
|
7952
8046
|
*
|
|
@@ -7966,22 +8060,17 @@ class FoldTabPanelComponent {
|
|
|
7966
8060
|
labelledBy = computed(() => this.tabs().tabId(this.key()), /* @ts-ignore */
|
|
7967
8061
|
...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
|
|
7968
8062
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldTabPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7969
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldTabPanelComponent, isStandalone: true, selector: "fold-tab-panel", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "tabpanel" }, properties: { "id": "panelId()", "attr.aria-labelledby": "labelledBy()", "attr.tabindex": "isActive() ? 0 : null", "hidden": "!isActive()" } }, ngImport: i0, template: "<ng-content />", isInline: true });
|
|
8063
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldTabPanelComponent, isStandalone: true, selector: "fold-tab-panel", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "tabpanel" }, properties: { "id": "panelId()", "attr.aria-labelledby": "labelledBy()", "attr.tabindex": "isActive() ? 0 : null", "hidden": "!isActive()" } }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [":host{display:block}:host([hidden]){display:none}\n"] });
|
|
7970
8064
|
}
|
|
7971
8065
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldTabPanelComponent, decorators: [{
|
|
7972
8066
|
type: Component,
|
|
7973
|
-
args: [{
|
|
7974
|
-
selector: "fold-tab-panel",
|
|
7975
|
-
standalone: true,
|
|
7976
|
-
host: {
|
|
8067
|
+
args: [{ selector: "fold-tab-panel", standalone: true, host: {
|
|
7977
8068
|
role: "tabpanel",
|
|
7978
8069
|
"[id]": "panelId()",
|
|
7979
8070
|
"[attr.aria-labelledby]": "labelledBy()",
|
|
7980
8071
|
"[attr.tabindex]": "isActive() ? 0 : null",
|
|
7981
8072
|
"[hidden]": "!isActive()",
|
|
7982
|
-
},
|
|
7983
|
-
template: "<ng-content />",
|
|
7984
|
-
}]
|
|
8073
|
+
}, template: "<ng-content />", styles: [":host{display:block}:host([hidden]){display:none}\n"] }]
|
|
7985
8074
|
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }] } });
|
|
7986
8075
|
|
|
7987
8076
|
/** Variant → leading status icon. */
|
|
@@ -8037,7 +8126,7 @@ class FoldToastComponent {
|
|
|
8037
8126
|
});
|
|
8038
8127
|
}
|
|
8039
8128
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8040
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldToastComponent, isStandalone: true, selector: "fold-toast", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { properties: { "attr.data-variant": "variant()", "attr.role": "variant() === \"error\" ? \"alert\" : \"status\"", "attr.aria-live": "variant() === \"error\" ? \"assertive\" : \"polite\"" } }, ngImport: i0, template: "<fold-icon class=\"toast-icon\" [name]=\"icon()\" [size]=\"16\" aria-hidden=\"true\" />\n\n<span class=\"toast-message\"><ng-content /></span>\n\n@if (dismissible()) {\n <button\n class=\"toast-close\"\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"dismiss.emit()\"\n >\n <fold-icon name=\"close\" [size]=\"14\" aria-hidden=\"true\" />\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--fold-toast-accent: var(--fold-color-primary-text);pointer-events:auto;display:flex;align-items:center;gap:
|
|
8129
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldToastComponent, isStandalone: true, selector: "fold-toast", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { properties: { "attr.data-variant": "variant()", "attr.role": "variant() === \"error\" ? \"alert\" : \"status\"", "attr.aria-live": "variant() === \"error\" ? \"assertive\" : \"polite\"" } }, ngImport: i0, template: "<fold-icon class=\"toast-icon\" [name]=\"icon()\" [size]=\"16\" aria-hidden=\"true\" />\n\n<span class=\"toast-message\"><ng-content /></span>\n\n@if (dismissible()) {\n <button\n class=\"toast-close\"\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"dismiss.emit()\"\n >\n <fold-icon name=\"close\" [size]=\"14\" aria-hidden=\"true\" />\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--fold-toast-accent: var(--fold-color-primary-text);pointer-events:auto;display:flex;align-items:center;gap:var(--fold-space-sm);max-width:380px;padding:var(--fold-space-sm) var(--fold-space-sm) var(--fold-space-sm) var(--fold-space-md);border-radius:var(--fold-radius-md);font-size:var(--fold-text-sm);font-weight:500;color:var(--fold-color-text);background:var(--fold-color-glass);backdrop-filter:blur(var(--fold-blur-glass));-webkit-backdrop-filter:blur(var(--fold-blur-glass));border:1px solid var(--fold-color-glass-border);border-left:3px solid var(--fold-toast-accent);box-shadow:var(--fold-shadow-lg);animation:fold-toast-in .2s cubic-bezier(.4,0,.2,1)}:host([data-variant=success]){--fold-toast-accent: var(--fold-color-success-text)}:host([data-variant=error]){--fold-toast-accent: var(--fold-color-alert-text)}:host([data-variant=warning]){--fold-toast-accent: var(--fold-color-warning-text)}:host([data-variant=info]){--fold-toast-accent: var(--fold-color-primary-text)}.toast-icon{flex-shrink:0;color:var(--fold-toast-accent)}.toast-message{flex:1;min-width:0;line-height:1.4}.toast-close{flex-shrink:0;display:grid;place-items:center;width:22px;height:22px;margin:-2px 0;padding:0;border:none;background:none;border-radius:var(--fold-radius-sm);color:var(--fold-color-text-muted);cursor:pointer;transition:background var(--fold-motion-fast),color var(--fold-motion-fast)}.toast-close:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.toast-close:focus-visible{outline:2px solid var(--fold-toast-accent);outline-offset:1px}@keyframes fold-toast-in{0%{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}:host(.toast-leaving){pointer-events:none;overflow:hidden;animation:fold-toast-out .22s cubic-bezier(.4,0,1,1) forwards}@keyframes fold-toast-out{0%{opacity:1;transform:translate(0);max-height:80px;margin-top:0}55%{opacity:0;transform:translate(28px);max-height:80px}to{opacity:0;transform:translate(28px);max-height:0;margin-top:-var(--fold-space-sm);padding-top:0;padding-bottom:0}}@media(prefers-reduced-motion:reduce){:host,:host(.toast-leaving){animation:none}}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
8041
8130
|
}
|
|
8042
8131
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldToastComponent, decorators: [{
|
|
8043
8132
|
type: Component,
|
|
@@ -8045,7 +8134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
8045
8134
|
"[attr.data-variant]": "variant()",
|
|
8046
8135
|
"[attr.role]": 'variant() === "error" ? "alert" : "status"',
|
|
8047
8136
|
"[attr.aria-live]": 'variant() === "error" ? "assertive" : "polite"',
|
|
8048
|
-
}, template: "<fold-icon class=\"toast-icon\" [name]=\"icon()\" [size]=\"16\" aria-hidden=\"true\" />\n\n<span class=\"toast-message\"><ng-content /></span>\n\n@if (dismissible()) {\n <button\n class=\"toast-close\"\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"dismiss.emit()\"\n >\n <fold-icon name=\"close\" [size]=\"14\" aria-hidden=\"true\" />\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--fold-toast-accent: var(--fold-color-primary-text);pointer-events:auto;display:flex;align-items:center;gap:
|
|
8137
|
+
}, template: "<fold-icon class=\"toast-icon\" [name]=\"icon()\" [size]=\"16\" aria-hidden=\"true\" />\n\n<span class=\"toast-message\"><ng-content /></span>\n\n@if (dismissible()) {\n <button\n class=\"toast-close\"\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"dismiss.emit()\"\n >\n <fold-icon name=\"close\" [size]=\"14\" aria-hidden=\"true\" />\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--fold-toast-accent: var(--fold-color-primary-text);pointer-events:auto;display:flex;align-items:center;gap:var(--fold-space-sm);max-width:380px;padding:var(--fold-space-sm) var(--fold-space-sm) var(--fold-space-sm) var(--fold-space-md);border-radius:var(--fold-radius-md);font-size:var(--fold-text-sm);font-weight:500;color:var(--fold-color-text);background:var(--fold-color-glass);backdrop-filter:blur(var(--fold-blur-glass));-webkit-backdrop-filter:blur(var(--fold-blur-glass));border:1px solid var(--fold-color-glass-border);border-left:3px solid var(--fold-toast-accent);box-shadow:var(--fold-shadow-lg);animation:fold-toast-in .2s cubic-bezier(.4,0,.2,1)}:host([data-variant=success]){--fold-toast-accent: var(--fold-color-success-text)}:host([data-variant=error]){--fold-toast-accent: var(--fold-color-alert-text)}:host([data-variant=warning]){--fold-toast-accent: var(--fold-color-warning-text)}:host([data-variant=info]){--fold-toast-accent: var(--fold-color-primary-text)}.toast-icon{flex-shrink:0;color:var(--fold-toast-accent)}.toast-message{flex:1;min-width:0;line-height:1.4}.toast-close{flex-shrink:0;display:grid;place-items:center;width:22px;height:22px;margin:-2px 0;padding:0;border:none;background:none;border-radius:var(--fold-radius-sm);color:var(--fold-color-text-muted);cursor:pointer;transition:background var(--fold-motion-fast),color var(--fold-motion-fast)}.toast-close:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.toast-close:focus-visible{outline:2px solid var(--fold-toast-accent);outline-offset:1px}@keyframes fold-toast-in{0%{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}:host(.toast-leaving){pointer-events:none;overflow:hidden;animation:fold-toast-out .22s cubic-bezier(.4,0,1,1) forwards}@keyframes fold-toast-out{0%{opacity:1;transform:translate(0);max-height:80px;margin-top:0}55%{opacity:0;transform:translate(28px);max-height:80px}to{opacity:0;transform:translate(28px);max-height:0;margin-top:-var(--fold-space-sm);padding-top:0;padding-bottom:0}}@media(prefers-reduced-motion:reduce){:host,:host(.toast-leaving){animation:none}}\n"] }]
|
|
8049
8138
|
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
|
|
8050
8139
|
|
|
8051
8140
|
/** DI token carrying the app's {@link FoldToastConfig}. Set via {@link provideFoldToasts}. */
|
|
@@ -8143,11 +8232,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
8143
8232
|
class FoldToastContainerComponent {
|
|
8144
8233
|
toastService = inject(FoldToastService);
|
|
8145
8234
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8146
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldToastContainerComponent, isStandalone: true, selector: "fold-toast-container", host: { classAttribute: "toast-host" }, ngImport: i0, template: "@for (toast of toastService.toasts(); track toast.id) {\n <fold-toast\n [variant]=\"toast.variant\"\n [duration]=\"toast.durationMs\"\n animate.leave=\"toast-leaving\"\n (dismiss)=\"toastService.dismiss(toast.id)\"\n >{{ toast.message }}</fold-toast\n >\n}\n", styles: [":host{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column-reverse;gap:
|
|
8235
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldToastContainerComponent, isStandalone: true, selector: "fold-toast-container", host: { classAttribute: "toast-host" }, ngImport: i0, template: "@for (toast of toastService.toasts(); track toast.id) {\n <fold-toast\n [variant]=\"toast.variant\"\n [duration]=\"toast.durationMs\"\n animate.leave=\"toast-leaving\"\n (dismiss)=\"toastService.dismiss(toast.id)\"\n >{{ toast.message }}</fold-toast\n >\n}\n", styles: [":host{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column-reverse;gap:var(--fold-space-sm);pointer-events:none}\n"], dependencies: [{ kind: "component", type: FoldToastComponent, selector: "fold-toast", inputs: ["variant", "dismissible", "duration"], outputs: ["dismiss"] }] });
|
|
8147
8236
|
}
|
|
8148
8237
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldToastContainerComponent, decorators: [{
|
|
8149
8238
|
type: Component,
|
|
8150
|
-
args: [{ selector: "fold-toast-container", standalone: true, imports: [FoldToastComponent], host: { class: "toast-host" }, template: "@for (toast of toastService.toasts(); track toast.id) {\n <fold-toast\n [variant]=\"toast.variant\"\n [duration]=\"toast.durationMs\"\n animate.leave=\"toast-leaving\"\n (dismiss)=\"toastService.dismiss(toast.id)\"\n >{{ toast.message }}</fold-toast\n >\n}\n", styles: [":host{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column-reverse;gap:
|
|
8239
|
+
args: [{ selector: "fold-toast-container", standalone: true, imports: [FoldToastComponent], host: { class: "toast-host" }, template: "@for (toast of toastService.toasts(); track toast.id) {\n <fold-toast\n [variant]=\"toast.variant\"\n [duration]=\"toast.durationMs\"\n animate.leave=\"toast-leaving\"\n (dismiss)=\"toastService.dismiss(toast.id)\"\n >{{ toast.message }}</fold-toast\n >\n}\n", styles: [":host{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column-reverse;gap:var(--fold-space-sm);pointer-events:none}\n"] }]
|
|
8151
8240
|
}] });
|
|
8152
8241
|
|
|
8153
8242
|
/**
|
|
@@ -8332,11 +8421,11 @@ class FoldPanelHeaderComponent {
|
|
|
8332
8421
|
this.panelRef?.close();
|
|
8333
8422
|
}
|
|
8334
8423
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPanelHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8335
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPanelHeaderComponent, isStandalone: true, selector: "fold-panel-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "attr.title": "null" } }, ngImport: i0, template: "<header class=\"ph\" [class.ph--eyebrow]=\"variant() === 'eyebrow'\">\n <div class=\"ph__titles\">\n <div class=\"ph__titleRow\">\n @if (icon(); as ic) {\n <fold-icon class=\"ph__icon\" [name]=\"ic\" [size]=\"iconSize()\" />\n }\n <h2 class=\"ph__title\" [attr.id]=\"titleId()\">{{ title() }}</h2>\n </div>\n @if (subtitle()) {\n <p class=\"ph__subtitle\">{{ subtitle() }}</p>\n }\n <div class=\"ph__desc\"><ng-content /></div>\n </div>\n <div class=\"ph__actions\">\n <ng-content select=\"[actions]\" />\n <button\n type=\"button\"\n class=\"ph__close\"\n [attr.aria-label]=\"effectiveCloseLabel()\"\n (click)=\"onClose()\"\n >\n <fold-icon name=\"close\" size=\"sm\" />\n </button>\n </div>\n</header>\n", styles: ["@charset \"UTF-8\";:host{display:block;flex:none}.ph{display:flex;align-items:flex-start;gap:var(--fold-space-md);padding:var(--fold-space-lg) var(--fold-space-lg) var(--fold-space-md);border-bottom:1px solid var(--fold-color-glass-border)}.ph:not(:has(.ph__subtitle)):not(:has(.ph__desc:not(:empty))){align-items:center}.ph__titles{flex:1 1 auto;display:flex;flex-direction:column;gap:
|
|
8424
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPanelHeaderComponent, isStandalone: true, selector: "fold-panel-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "attr.title": "null" } }, ngImport: i0, template: "<header class=\"ph\" [class.ph--eyebrow]=\"variant() === 'eyebrow'\">\n <div class=\"ph__titles\">\n <div class=\"ph__titleRow\">\n @if (icon(); as ic) {\n <fold-icon class=\"ph__icon\" [name]=\"ic\" [size]=\"iconSize()\" />\n }\n <h2 class=\"ph__title\" [attr.id]=\"titleId()\">{{ title() }}</h2>\n </div>\n @if (subtitle()) {\n <p class=\"ph__subtitle\">{{ subtitle() }}</p>\n }\n <div class=\"ph__desc\"><ng-content /></div>\n </div>\n <div class=\"ph__actions\">\n <ng-content select=\"[actions]\" />\n <button\n type=\"button\"\n class=\"ph__close\"\n [attr.aria-label]=\"effectiveCloseLabel()\"\n (click)=\"onClose()\"\n >\n <fold-icon name=\"close\" size=\"sm\" />\n </button>\n </div>\n</header>\n", styles: ["@charset \"UTF-8\";:host{display:block;flex:none}.ph{display:flex;align-items:flex-start;gap:var(--fold-space-md);padding:var(--fold-space-lg) var(--fold-space-lg) var(--fold-space-md);border-bottom:1px solid var(--fold-color-glass-border)}.ph:not(:has(.ph__subtitle)):not(:has(.ph__desc:not(:empty))){align-items:center}.ph__titles{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--fold-space-xs);min-width:0}.ph__titleRow{display:flex;align-items:center;gap:var(--fold-space-xs);min-width:0}.ph__icon{flex:none;color:var(--fold-color-text-secondary)}.ph__title{margin:0;font-size:var(--fold-text-lg);font-weight:600;color:var(--fold-color-text);letter-spacing:-.005em;line-height:1.25;overflow:hidden;text-overflow:ellipsis}.ph__subtitle{margin:0;font-size:var(--fold-text-xs);color:var(--fold-color-text-faded);font-variant-numeric:tabular-nums}.ph__desc{margin-top:var(--fold-space-sm);font-size:var(--fold-text-sm);color:var(--fold-color-text-secondary);line-height:1.5}.ph__desc:empty{display:none}.ph__actions{flex:none;display:inline-flex;align-items:center;gap:var(--fold-space-xs)}.ph__close{all:unset;box-sizing:border-box;flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--fold-radius-xs);color:var(--fold-color-text-secondary);cursor:pointer;transition:background-color var(--fold-motion-fast),color var(--fold-motion-fast)}.ph__close:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.ph--eyebrow{align-items:center;padding:var(--fold-space-md) var(--fold-space-lg)}.ph--eyebrow .ph__icon{opacity:.75}.ph--eyebrow .ph__title{font-size:var(--fold-text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fold-color-text-muted)}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
8336
8425
|
}
|
|
8337
8426
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPanelHeaderComponent, decorators: [{
|
|
8338
8427
|
type: Component,
|
|
8339
|
-
args: [{ selector: "fold-panel-header", standalone: true, imports: [FoldIconComponent], host: { "[attr.title]": "null" }, template: "<header class=\"ph\" [class.ph--eyebrow]=\"variant() === 'eyebrow'\">\n <div class=\"ph__titles\">\n <div class=\"ph__titleRow\">\n @if (icon(); as ic) {\n <fold-icon class=\"ph__icon\" [name]=\"ic\" [size]=\"iconSize()\" />\n }\n <h2 class=\"ph__title\" [attr.id]=\"titleId()\">{{ title() }}</h2>\n </div>\n @if (subtitle()) {\n <p class=\"ph__subtitle\">{{ subtitle() }}</p>\n }\n <div class=\"ph__desc\"><ng-content /></div>\n </div>\n <div class=\"ph__actions\">\n <ng-content select=\"[actions]\" />\n <button\n type=\"button\"\n class=\"ph__close\"\n [attr.aria-label]=\"effectiveCloseLabel()\"\n (click)=\"onClose()\"\n >\n <fold-icon name=\"close\" size=\"sm\" />\n </button>\n </div>\n</header>\n", styles: ["@charset \"UTF-8\";:host{display:block;flex:none}.ph{display:flex;align-items:flex-start;gap:var(--fold-space-md);padding:var(--fold-space-lg) var(--fold-space-lg) var(--fold-space-md);border-bottom:1px solid var(--fold-color-glass-border)}.ph:not(:has(.ph__subtitle)):not(:has(.ph__desc:not(:empty))){align-items:center}.ph__titles{flex:1 1 auto;display:flex;flex-direction:column;gap:
|
|
8428
|
+
args: [{ selector: "fold-panel-header", standalone: true, imports: [FoldIconComponent], host: { "[attr.title]": "null" }, template: "<header class=\"ph\" [class.ph--eyebrow]=\"variant() === 'eyebrow'\">\n <div class=\"ph__titles\">\n <div class=\"ph__titleRow\">\n @if (icon(); as ic) {\n <fold-icon class=\"ph__icon\" [name]=\"ic\" [size]=\"iconSize()\" />\n }\n <h2 class=\"ph__title\" [attr.id]=\"titleId()\">{{ title() }}</h2>\n </div>\n @if (subtitle()) {\n <p class=\"ph__subtitle\">{{ subtitle() }}</p>\n }\n <div class=\"ph__desc\"><ng-content /></div>\n </div>\n <div class=\"ph__actions\">\n <ng-content select=\"[actions]\" />\n <button\n type=\"button\"\n class=\"ph__close\"\n [attr.aria-label]=\"effectiveCloseLabel()\"\n (click)=\"onClose()\"\n >\n <fold-icon name=\"close\" size=\"sm\" />\n </button>\n </div>\n</header>\n", styles: ["@charset \"UTF-8\";:host{display:block;flex:none}.ph{display:flex;align-items:flex-start;gap:var(--fold-space-md);padding:var(--fold-space-lg) var(--fold-space-lg) var(--fold-space-md);border-bottom:1px solid var(--fold-color-glass-border)}.ph:not(:has(.ph__subtitle)):not(:has(.ph__desc:not(:empty))){align-items:center}.ph__titles{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--fold-space-xs);min-width:0}.ph__titleRow{display:flex;align-items:center;gap:var(--fold-space-xs);min-width:0}.ph__icon{flex:none;color:var(--fold-color-text-secondary)}.ph__title{margin:0;font-size:var(--fold-text-lg);font-weight:600;color:var(--fold-color-text);letter-spacing:-.005em;line-height:1.25;overflow:hidden;text-overflow:ellipsis}.ph__subtitle{margin:0;font-size:var(--fold-text-xs);color:var(--fold-color-text-faded);font-variant-numeric:tabular-nums}.ph__desc{margin-top:var(--fold-space-sm);font-size:var(--fold-text-sm);color:var(--fold-color-text-secondary);line-height:1.5}.ph__desc:empty{display:none}.ph__actions{flex:none;display:inline-flex;align-items:center;gap:var(--fold-space-xs)}.ph__close{all:unset;box-sizing:border-box;flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--fold-radius-xs);color:var(--fold-color-text-secondary);cursor:pointer;transition:background-color var(--fold-motion-fast),color var(--fold-motion-fast)}.ph__close:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.ph--eyebrow{align-items:center;padding:var(--fold-space-md) var(--fold-space-lg)}.ph--eyebrow .ph__icon{opacity:.75}.ph--eyebrow .ph__title{font-size:var(--fold-text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fold-color-text-muted)}\n"] }]
|
|
8340
8429
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
8341
8430
|
|
|
8342
8431
|
/**
|
|
@@ -8544,7 +8633,7 @@ class FoldPanelHostComponent {
|
|
|
8544
8633
|
this.inerted = [];
|
|
8545
8634
|
}
|
|
8546
8635
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPanelHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8547
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPanelHostComponent, isStandalone: true, selector: "fold-panel-host", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@for (panel of panels(); track panel.id) {\n <div\n class=\"panel-dock\"\n [class.panel-dock--left]=\"panel.side === 'left'\"\n (click)=\"onBackdrop($event, panel)\"\n >\n <aside\n class=\"panel\"\n [class.panel--left]=\"panel.side === 'left'\"\n [style.--panel-width.px]=\"panel.width()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel(panel)\"\n [attr.aria-labelledby]=\"ariaLabelledby(panel)\"\n tabindex=\"-1\"\n [foldFocusTrap]=\"isTopMost(panel)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (panel.kind === \"template\") {\n <fold-panel-header\n [title]=\"panel.title()\"\n [subtitle]=\"panel.subtitle()\"\n (closed)=\"panel.onClose()\"\n />\n <div class=\"panel-body\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n } @else {\n <ng-container [foldPanelComponentOutlet]=\"panel\" />\n }\n </aside>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.panel-dock{position:absolute;inset:0;z-index:50;display:flex;justify-content:flex-end}.panel-dock--left{justify-content:flex-start}.panel{--panel-width: 490px;display:flex;flex-direction:column;width:min(var(--panel-width),100%);height:100%;overflow:hidden;font-feature-settings:\"tnum\" on;background:var(--fold-color-glass);backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);-webkit-backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);border-left:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-right);animation:panel-slide-in-right .2s cubic-bezier(.4,0,.2,1)}.panel--left{border-left:none;border-right:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-left);animation-name:panel-slide-in-left}@media(max-width:768px){.panel{width:100vw}}.panel-body{flex:1 1 auto;overflow-y:auto;padding:
|
|
8636
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPanelHostComponent, isStandalone: true, selector: "fold-panel-host", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@for (panel of panels(); track panel.id) {\n <div\n class=\"panel-dock\"\n [class.panel-dock--left]=\"panel.side === 'left'\"\n (click)=\"onBackdrop($event, panel)\"\n >\n <aside\n class=\"panel\"\n [class.panel--left]=\"panel.side === 'left'\"\n [style.--panel-width.px]=\"panel.width()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel(panel)\"\n [attr.aria-labelledby]=\"ariaLabelledby(panel)\"\n tabindex=\"-1\"\n [foldFocusTrap]=\"isTopMost(panel)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (panel.kind === \"template\") {\n <fold-panel-header\n [title]=\"panel.title()\"\n [subtitle]=\"panel.subtitle()\"\n (closed)=\"panel.onClose()\"\n />\n <div class=\"panel-body\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n } @else {\n <ng-container [foldPanelComponentOutlet]=\"panel\" />\n }\n </aside>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.panel-dock{position:absolute;inset:0;z-index:50;display:flex;justify-content:flex-end}.panel-dock--left{justify-content:flex-start}.panel{--panel-width: 490px;display:flex;flex-direction:column;width:min(var(--panel-width),100%);height:100%;overflow:hidden;font-feature-settings:\"tnum\" on;background:var(--fold-color-glass);backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);-webkit-backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);border-left:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-right);animation:panel-slide-in-right .2s cubic-bezier(.4,0,.2,1)}.panel--left{border-left:none;border-right:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-left);animation-name:panel-slide-in-left}@media(max-width:768px){.panel{width:100vw}}.panel-body{flex:1 1 auto;overflow-y:auto;padding:var(--fold-space-lg)}@keyframes panel-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panel-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusTrapDirective, selector: "[foldFocusTrap]", inputs: ["foldFocusTrap"] }, { kind: "directive", type: FoldPanelComponentOutletDirective, selector: "[foldPanelComponentOutlet]", inputs: ["foldPanelComponentOutlet"] }, { kind: "component", type: FoldPanelHeaderComponent, selector: "fold-panel-header", inputs: ["title", "subtitle", "icon", "variant", "closeLabel"], outputs: ["closed"] }] });
|
|
8548
8637
|
}
|
|
8549
8638
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPanelHostComponent, decorators: [{
|
|
8550
8639
|
type: Component,
|
|
@@ -8553,7 +8642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
8553
8642
|
FocusTrapDirective,
|
|
8554
8643
|
FoldPanelComponentOutletDirective,
|
|
8555
8644
|
FoldPanelHeaderComponent,
|
|
8556
|
-
], template: "@for (panel of panels(); track panel.id) {\n <div\n class=\"panel-dock\"\n [class.panel-dock--left]=\"panel.side === 'left'\"\n (click)=\"onBackdrop($event, panel)\"\n >\n <aside\n class=\"panel\"\n [class.panel--left]=\"panel.side === 'left'\"\n [style.--panel-width.px]=\"panel.width()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel(panel)\"\n [attr.aria-labelledby]=\"ariaLabelledby(panel)\"\n tabindex=\"-1\"\n [foldFocusTrap]=\"isTopMost(panel)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (panel.kind === \"template\") {\n <fold-panel-header\n [title]=\"panel.title()\"\n [subtitle]=\"panel.subtitle()\"\n (closed)=\"panel.onClose()\"\n />\n <div class=\"panel-body\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n } @else {\n <ng-container [foldPanelComponentOutlet]=\"panel\" />\n }\n </aside>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.panel-dock{position:absolute;inset:0;z-index:50;display:flex;justify-content:flex-end}.panel-dock--left{justify-content:flex-start}.panel{--panel-width: 490px;display:flex;flex-direction:column;width:min(var(--panel-width),100%);height:100%;overflow:hidden;font-feature-settings:\"tnum\" on;background:var(--fold-color-glass);backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);-webkit-backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);border-left:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-right);animation:panel-slide-in-right .2s cubic-bezier(.4,0,.2,1)}.panel--left{border-left:none;border-right:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-left);animation-name:panel-slide-in-left}@media(max-width:768px){.panel{width:100vw}}.panel-body{flex:1 1 auto;overflow-y:auto;padding:
|
|
8645
|
+
], template: "@for (panel of panels(); track panel.id) {\n <div\n class=\"panel-dock\"\n [class.panel-dock--left]=\"panel.side === 'left'\"\n (click)=\"onBackdrop($event, panel)\"\n >\n <aside\n class=\"panel\"\n [class.panel--left]=\"panel.side === 'left'\"\n [style.--panel-width.px]=\"panel.width()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel(panel)\"\n [attr.aria-labelledby]=\"ariaLabelledby(panel)\"\n tabindex=\"-1\"\n [foldFocusTrap]=\"isTopMost(panel)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (panel.kind === \"template\") {\n <fold-panel-header\n [title]=\"panel.title()\"\n [subtitle]=\"panel.subtitle()\"\n (closed)=\"panel.onClose()\"\n />\n <div class=\"panel-body\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n } @else {\n <ng-container [foldPanelComponentOutlet]=\"panel\" />\n }\n </aside>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.panel-dock{position:absolute;inset:0;z-index:50;display:flex;justify-content:flex-end}.panel-dock--left{justify-content:flex-start}.panel{--panel-width: 490px;display:flex;flex-direction:column;width:min(var(--panel-width),100%);height:100%;overflow:hidden;font-feature-settings:\"tnum\" on;background:var(--fold-color-glass);backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);-webkit-backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);border-left:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-right);animation:panel-slide-in-right .2s cubic-bezier(.4,0,.2,1)}.panel--left{border-left:none;border-right:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-left);animation-name:panel-slide-in-left}@media(max-width:768px){.panel{width:100vw}}.panel-body{flex:1 1 auto;overflow-y:auto;padding:var(--fold-space-lg)}@keyframes panel-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panel-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}\n"] }]
|
|
8557
8646
|
}], ctorParameters: () => [], propDecorators: { onEscape: [{
|
|
8558
8647
|
type: HostListener,
|
|
8559
8648
|
args: ["document:keydown.escape"]
|
|
@@ -8659,7 +8748,7 @@ class FoldDropdownItemComponent {
|
|
|
8659
8748
|
}
|
|
8660
8749
|
<span class="fdrop-item-label"><ng-content /></span>
|
|
8661
8750
|
</button>
|
|
8662
|
-
`, isInline: true, styles: [":host{display:contents}.fdrop-item{display:flex;align-items:center;gap:var(--fold-space-sm);width:100%;padding:
|
|
8751
|
+
`, isInline: true, styles: [":host{display:contents}.fdrop-item{display:flex;align-items:center;gap:var(--fold-space-sm);width:100%;padding:var(--fold-space-sm) var(--fold-space-sm);border:0;border-radius:var(--fold-radius-sm);background:transparent;color:var(--fold-color-text);font:inherit;font-size:var(--fold-text-sm);text-align:left;cursor:pointer}.fdrop-item:hover:not(:disabled),.fdrop-item:focus-visible{background:var(--fold-color-surface-hover)}.fdrop-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.fdrop-item:disabled{opacity:.45;cursor:not-allowed}.fdrop-item.is-danger{color:var(--fold-color-alert-text)}.fdrop-item.is-danger:hover:not(:disabled),.fdrop-item.is-danger:focus-visible{background:var(--fold-color-alert-surface)}.fdrop-item-icon{flex:none;color:var(--fold-color-text-muted)}.is-danger .fdrop-item-icon{color:var(--fold-color-alert-text)}.fdrop-item-label{flex:1 1 auto;min-width:0}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
8663
8752
|
}
|
|
8664
8753
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldDropdownItemComponent, decorators: [{
|
|
8665
8754
|
type: Component,
|
|
@@ -8679,7 +8768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
8679
8768
|
}
|
|
8680
8769
|
<span class="fdrop-item-label"><ng-content /></span>
|
|
8681
8770
|
</button>
|
|
8682
|
-
`, styles: [":host{display:contents}.fdrop-item{display:flex;align-items:center;gap:var(--fold-space-sm);width:100%;padding:
|
|
8771
|
+
`, styles: [":host{display:contents}.fdrop-item{display:flex;align-items:center;gap:var(--fold-space-sm);width:100%;padding:var(--fold-space-sm) var(--fold-space-sm);border:0;border-radius:var(--fold-radius-sm);background:transparent;color:var(--fold-color-text);font:inherit;font-size:var(--fold-text-sm);text-align:left;cursor:pointer}.fdrop-item:hover:not(:disabled),.fdrop-item:focus-visible{background:var(--fold-color-surface-hover)}.fdrop-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.fdrop-item:disabled{opacity:.45;cursor:not-allowed}.fdrop-item.is-danger{color:var(--fold-color-alert-text)}.fdrop-item.is-danger:hover:not(:disabled),.fdrop-item.is-danger:focus-visible{background:var(--fold-color-alert-surface)}.fdrop-item-icon{flex:none;color:var(--fold-color-text-muted)}.is-danger .fdrop-item-icon{color:var(--fold-color-alert-text)}.fdrop-item-label{flex:1 1 auto;min-width:0}\n"] }]
|
|
8683
8772
|
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], btn: [{ type: i0.ViewChild, args: ["btn", { isSignal: true }] }] } });
|
|
8684
8773
|
|
|
8685
8774
|
/**
|