@raintonic/formaui 0.9.0 → 0.9.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/raintonic-formaui-components-accordion.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-accordion.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-alert.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-alert.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-autocomplete.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-autocomplete.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-avatar.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-avatar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-badge.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-badge.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-button-group.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-button-group.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-card.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-card.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-checkbox.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-checkbox.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-chip.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-chip.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-data-table.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-data-table.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-date-picker.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-date-picker.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-divider.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-divider.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-drawer.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-drawer.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-dropdown-menu.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-dropdown-menu.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-empty-state.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-empty-state.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-file-upload.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-file-upload.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-form-field.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-form-field.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-list.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-list.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-number-input.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-number-input.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-paginator.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-paginator.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-password-input.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-password-input.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-popover.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-popover.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-progressbar.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-progressbar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-radio.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-radio.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-select.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-select.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-side-panel.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-side-panel.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-sidebar-nav-menu.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-sidebar-nav-menu.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-slider.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-slider.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-spinner.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-spinner.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-stepper.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-stepper.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tab.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-tab.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-time-picker.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-time-picker.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-toggle-group.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-toggle-group.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-toolbar.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-toolbar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-topbar.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-topbar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tree-select.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-tree-select.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tree-table.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-tree-table.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tree.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-tree.mjs.map +1 -1
- package/fesm2022/raintonic-formaui.mjs +1 -1
- package/fesm2022/raintonic-formaui.mjs.map +1 -1
- package/llms-full.txt +8 -8
- package/package.json +1 -1
- package/styles/generated/_tokens.scss +8 -8
- package/styles/styles.css +8 -8
- package/types/raintonic-formaui.d.ts +1 -1
|
@@ -155,7 +155,7 @@ class FuiToolbarComponent {
|
|
|
155
155
|
this.sidebarToggle.emit();
|
|
156
156
|
}
|
|
157
157
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
158
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiToolbarComponent, isStandalone: true, selector: "fui-toolbar", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, activeMenuItemId: { classPropertyName: "activeMenuItemId", publicName: "activeMenuItemId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userAriaLabel: { classPropertyName: "userAriaLabel", publicName: "userAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, showSidebarToggle: { classPropertyName: "showSidebarToggle", publicName: "showSidebarToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick", userProfileClick: "userProfileClick", sidebarToggle: "sidebarToggle" }, host: { attributes: { "role": "banner" }, properties: { "class.fui-toolbar--fixed": "fixed()" }, classAttribute: "fui-toolbar" }, ngImport: i0, template: "<!-- Sidebar Toggle Button (optional) -->\r\n@if (showSidebarToggle()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button --sidebar-toggle\"\r\n [attr.aria-label]=\"intl.toggleSidebarAriaLabel\"\r\n title=\"Toggle sidebar\"\r\n (click)=\"onSidebarToggleClick()\"\r\n >\r\n <fui-icon name=\"sidebar\" size=\"md\"></fui-icon>\r\n </button>\r\n}\r\n<!-- Logo Section -->\r\n<div class=\"fui-toolbar__logo\">\r\n <ng-content select=\"[logo]\"></ng-content>\r\n</div>\r\n\r\n<!-- Navigation Menu -->\r\n<nav class=\"fui-toolbar__nav\" role=\"navigation\" [attr.aria-label]=\"resolvedNavAriaLabel()\">\r\n <ul class=\"fui-toolbar__menu\">\r\n @for (item of menuItems(); track item.id) {\r\n <li class=\"fui-toolbar__menu-item\">\r\n @if (item.routerLink) {\r\n <a\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [routerLink]=\"item.routerLink\"\r\n [queryParams]=\"item.queryParams\"\r\n [fragment]=\"item.fragment\"\r\n [attr.aria-current]=\"item.id === activeMenuItemId() ? 'page' : null\"\r\n [attr.aria-label]=\"item.label\"\r\n [title]=\"item.label\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [class.fui-toolbar__menu-button--disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n [attr.aria-label]=\"item.label\"\r\n [attr.aria-pressed]=\"item.id === activeMenuItemId() ? 'true' : null\"\r\n [title]=\"item.label\"\r\n (click)=\"onMenuItemClick(item)\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </button>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</nav>\r\n<div class=\"fui-toolbar__spacer\"></div>\r\n<div class=\"fui-toolbar__more-buttons\">\r\n <ng-content select=\"[more-buttons]\"></ng-content>\r\n</div>\r\n<!-- User Profile Section -->\r\n@if (userProfile(); as profile) {\r\n <div class=\"fui-toolbar__user\">\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__user-button\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-label]=\"resolvedUserAriaLabelPrefix() + profile.name\"\r\n [title]=\"profile.name + ' - ' + profile.email\"\r\n (click)=\"onUserProfileClick()\"\r\n >\r\n <fui-avatar [size]=\"32\" fullName=\"None\"> </fui-avatar>\r\n\r\n <div class=\"fui-toolbar__user-info\">\r\n <span class=\"fui-toolbar__user-name\">{{ profile.name }}</span>\r\n <span class=\"fui-toolbar__user-email\">{{ profile.email }}</span>\r\n </div>\r\n\r\n <fui-icon name=\"caret-down\" size=\"sm\" class=\"fui-toolbar__user-caret\"></fui-icon>\r\n </button>\r\n </div>\r\n}\r\n", styles: [".fui-toolbar{--fui-toolbar-height: 3rem;--fui-toolbar-padding-inline: var(--fui-spacing-7);--fui-toolbar-bg: var(--fui-bg-subtle);--fui-toolbar-border-color: var(--fui-border-default);--fui-toolbar-blur: 8px;--fui-toolbar-item-size: 3rem;--fui-toolbar-logo-image-max-height: 2rem;--fui-toolbar-user-text-max-width: 8rem;contain:layout style;display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--fui-toolbar-height);padding-block:0;padding-inline:var(--fui-toolbar-padding-inline);background-color:var(--fui-toolbar-bg) CC;backdrop-filter:blur(var(--fui-toolbar-blur));border-bottom:1px solid var(--fui-toolbar-border-color);z-index:var(--fui-z-sticky, 1000)}.fui-toolbar--fixed{position:fixed;top:0;left:0;right:0}.fui-toolbar__logo{display:flex;align-items:center;flex-shrink:0;height:100%;min-width:0;margin-right:.75rem}.fui-toolbar__logo [logo]{display:flex;align-items:center;height:100%}.fui-toolbar__logo [logo] img{max-height:var(--fui-toolbar-logo-image-max-height, 2rem);width:auto}.fui-toolbar__logo [logo] h1,.fui-toolbar__logo [logo] h2,.fui-toolbar__logo [logo] h3{margin:0;font-size:var(--fui-text-lg);font-weight:600;color:var(--fui-text-primary)}.fui-toolbar__spacer{flex:1;min-width:0}.fui-toolbar__more-buttons{border-left:1px solid var(--fui-border-default);padding:0 .25rem;height:100%;display:flex;align-items:center;gap:.25rem;flex-shrink:0;min-width:0}.fui-toolbar__more-buttons:empty{display:none}.fui-toolbar__nav{flex:1;display:flex;justify-content:flex-start;max-width:100%;overflow:hidden}.fui-toolbar__menu{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.fui-toolbar__menu-item{display:flex}.fui-toolbar__menu-button{display:flex;align-items:center;justify-content:center;width:var(--fui-toolbar-item-size, 3rem);height:var(--fui-toolbar-item-size, 3rem);padding:0;border:none;border-radius:var(--fui-radius-lg, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease)}.fui-toolbar__menu-button.--sidebar-toggle{margin-right:.75rem}.fui-toolbar__menu-button:hover:not(:disabled){background-color:var(--fui-bg-subtle);color:var(--fui-brand-fg)}.fui-toolbar__menu-button:active:not(:disabled),.fui-toolbar__menu-button.active:not(:disabled){background-color:var(--fui-bg-muted);color:var(--fui-brand-fg)}.fui-toolbar__menu-button:focus-visible{outline:2px solid var(--fui-border-primary);outline-offset:2px}.fui-toolbar__menu-button--disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-toolbar__user{border-left:1px solid var(--fui-border-default);display:flex;align-items:center;flex-shrink:0;margin-right:-1rem}.fui-toolbar__user-button{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border:none;border-radius:var(--fui-radius-md, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease);min-width:0}.fui-toolbar__user-button:hover{background-color:var(--fui-bg-subtle)}.fui-toolbar__user-button:active{background-color:var(--fui-bg-muted)}.fui-toolbar__user-button:focus-visible{outline:2px solid var(--fui-border-primary);outline-offset:2px}.fui-toolbar__user-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1}@media(max-width:768px){.fui-toolbar__user-info{display:none}}.fui-toolbar__user-name{font-size:var(--fui-text-base);font-weight:500;color:var(--fui-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--fui-toolbar-user-text-max-width, 8rem)}.fui-toolbar__user-email{font-size:var(--fui-text-sm);color:var(--fui-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:8rem}.fui-toolbar__user-caret{flex-shrink:0;color:var(--fui-text-secondary);transition:transform var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease)}@media(max-width:640px){.fui-toolbar__user-caret{display:none}}@media(max-width:768px){.fui-toolbar{padding:0 .75rem}.fui-toolbar__menu{gap:.125rem}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-md, 2.25rem);height:var(--fui-toolbar-item-size-md, 2.25rem)}}@media(max-width:640px){.fui-toolbar{padding:0 .5rem}.fui-toolbar__nav{flex:0;margin:0 .5rem}.fui-toolbar__menu{gap:0}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-sm, 2rem);height:var(--fui-toolbar-item-size-sm, 2rem)}.fui-toolbar__user-button{padding:.25rem;gap:.25rem}}[data-theme=dark] .fui-toolbar{border-bottom-color:var(--fui-border-default)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiAvatarComponent, selector: "fui-avatar", inputs: ["size", "fullName", "initials", "alt"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
158
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiToolbarComponent, isStandalone: true, selector: "fui-toolbar", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, activeMenuItemId: { classPropertyName: "activeMenuItemId", publicName: "activeMenuItemId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userAriaLabel: { classPropertyName: "userAriaLabel", publicName: "userAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, showSidebarToggle: { classPropertyName: "showSidebarToggle", publicName: "showSidebarToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick", userProfileClick: "userProfileClick", sidebarToggle: "sidebarToggle" }, host: { attributes: { "role": "banner" }, properties: { "class.fui-toolbar--fixed": "fixed()" }, classAttribute: "fui-toolbar" }, ngImport: i0, template: "<!-- Sidebar Toggle Button (optional) -->\r\n@if (showSidebarToggle()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button --sidebar-toggle\"\r\n [attr.aria-label]=\"intl.toggleSidebarAriaLabel\"\r\n title=\"Toggle sidebar\"\r\n (click)=\"onSidebarToggleClick()\"\r\n >\r\n <fui-icon name=\"sidebar\" size=\"md\"></fui-icon>\r\n </button>\r\n}\r\n<!-- Logo Section -->\r\n<div class=\"fui-toolbar__logo\">\r\n <ng-content select=\"[logo]\"></ng-content>\r\n</div>\r\n\r\n<!-- Navigation Menu -->\r\n<nav class=\"fui-toolbar__nav\" role=\"navigation\" [attr.aria-label]=\"resolvedNavAriaLabel()\">\r\n <ul class=\"fui-toolbar__menu\">\r\n @for (item of menuItems(); track item.id) {\r\n <li class=\"fui-toolbar__menu-item\">\r\n @if (item.routerLink) {\r\n <a\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [routerLink]=\"item.routerLink\"\r\n [queryParams]=\"item.queryParams\"\r\n [fragment]=\"item.fragment\"\r\n [attr.aria-current]=\"item.id === activeMenuItemId() ? 'page' : null\"\r\n [attr.aria-label]=\"item.label\"\r\n [title]=\"item.label\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [class.fui-toolbar__menu-button--disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n [attr.aria-label]=\"item.label\"\r\n [attr.aria-pressed]=\"item.id === activeMenuItemId() ? 'true' : null\"\r\n [title]=\"item.label\"\r\n (click)=\"onMenuItemClick(item)\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </button>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</nav>\r\n<div class=\"fui-toolbar__spacer\"></div>\r\n<div class=\"fui-toolbar__more-buttons\">\r\n <ng-content select=\"[more-buttons]\"></ng-content>\r\n</div>\r\n<!-- User Profile Section -->\r\n@if (userProfile(); as profile) {\r\n <div class=\"fui-toolbar__user\">\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__user-button\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-label]=\"resolvedUserAriaLabelPrefix() + profile.name\"\r\n [title]=\"profile.name + ' - ' + profile.email\"\r\n (click)=\"onUserProfileClick()\"\r\n >\r\n <fui-avatar [size]=\"32\" fullName=\"None\"> </fui-avatar>\r\n\r\n <div class=\"fui-toolbar__user-info\">\r\n <span class=\"fui-toolbar__user-name\">{{ profile.name }}</span>\r\n <span class=\"fui-toolbar__user-email\">{{ profile.email }}</span>\r\n </div>\r\n\r\n <fui-icon name=\"caret-down\" size=\"sm\" class=\"fui-toolbar__user-caret\"></fui-icon>\r\n </button>\r\n </div>\r\n}\r\n", styles: [".fui-toolbar{--fui-toolbar-height: 3rem;--fui-toolbar-padding-inline: var(--fui-spacing-7);--fui-toolbar-bg: var(--fui-bg-subtle);--fui-toolbar-border-color: var(--fui-border-default);--fui-toolbar-blur: 8px;--fui-toolbar-item-size: 3rem;--fui-toolbar-item-size-md: 2.25rem;--fui-toolbar-item-size-sm: 2rem;--fui-toolbar-logo-image-max-height: 2rem;--fui-toolbar-user-text-max-width: 8rem;contain:layout style;display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--fui-toolbar-height);padding-block:0;padding-inline:var(--fui-toolbar-padding-inline);background-color:color-mix(in srgb,var(--fui-toolbar-bg) 80%,transparent);backdrop-filter:blur(var(--fui-toolbar-blur));border-bottom:var(--fui-border-width-sm) solid var(--fui-toolbar-border-color);z-index:var(--fui-z-sticky)}.fui-toolbar--fixed{position:fixed;top:0;left:0;right:0}.fui-toolbar__logo{display:flex;align-items:center;flex-shrink:0;height:100%;min-width:0;margin-right:.75rem}.fui-toolbar__logo [logo]{display:flex;align-items:center;height:100%}.fui-toolbar__logo [logo] img{max-height:var(--fui-toolbar-logo-image-max-height, 2rem);width:auto}.fui-toolbar__logo [logo] h1,.fui-toolbar__logo [logo] h2,.fui-toolbar__logo [logo] h3{margin:0;font-size:var(--fui-text-lg);font-weight:var(--fui-weight-semibold);color:var(--fui-text-primary)}.fui-toolbar__spacer{flex:1;min-width:0}.fui-toolbar__more-buttons{border-left:var(--fui-border-width-sm) solid var(--fui-border-default);padding:0 .25rem;height:100%;display:flex;align-items:center;gap:.25rem;flex-shrink:0;min-width:0}.fui-toolbar__more-buttons:empty{display:none}.fui-toolbar__nav{flex:1;display:flex;justify-content:flex-start;max-width:100%;overflow:hidden}.fui-toolbar__menu{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.fui-toolbar__menu-item{display:flex}.fui-toolbar__menu-button{display:flex;align-items:center;justify-content:center;width:var(--fui-toolbar-item-size, 3rem);height:var(--fui-toolbar-item-size, 3rem);padding:0;border:none;border-radius:var(--fui-radius-lg, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease)}.fui-toolbar__menu-button.--sidebar-toggle{margin-right:.75rem}.fui-toolbar__menu-button:hover:not(:disabled){background-color:var(--fui-bg-subtle);color:var(--fui-primary-fg)}.fui-toolbar__menu-button:active:not(:disabled),.fui-toolbar__menu-button.active:not(:disabled){background-color:var(--fui-bg-muted);color:var(--fui-primary-fg)}.fui-toolbar__menu-button:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-border-primary);outline-offset:var(--fui-state-focus-ring-offset)}.fui-toolbar__menu-button--disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-toolbar__user{border-left:var(--fui-border-width-sm) solid var(--fui-border-default);display:flex;align-items:center;flex-shrink:0;margin-right:-1rem}.fui-toolbar__user-button{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border:none;border-radius:var(--fui-radius-md, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease);min-width:0}.fui-toolbar__user-button:hover{background-color:var(--fui-bg-subtle)}.fui-toolbar__user-button:active{background-color:var(--fui-bg-muted)}.fui-toolbar__user-button:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-border-primary);outline-offset:var(--fui-state-focus-ring-offset)}.fui-toolbar__user-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1}@media(max-width:768px){.fui-toolbar__user-info{display:none}}.fui-toolbar__user-name{font-size:var(--fui-text-base);font-weight:var(--fui-weight-medium);color:var(--fui-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--fui-toolbar-user-text-max-width, 8rem)}.fui-toolbar__user-email{font-size:var(--fui-text-sm);color:var(--fui-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:8rem}.fui-toolbar__user-caret{flex-shrink:0;color:var(--fui-text-secondary);transition:transform var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease)}@media(max-width:640px){.fui-toolbar__user-caret{display:none}}@media(max-width:768px){.fui-toolbar{padding:0 .75rem}.fui-toolbar__menu{gap:.125rem}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-md, 2.25rem);height:var(--fui-toolbar-item-size-md, 2.25rem)}}@media(max-width:640px){.fui-toolbar{padding:0 .5rem}.fui-toolbar__nav{flex:0;margin:0 .5rem}.fui-toolbar__menu{gap:0}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-sm, 2rem);height:var(--fui-toolbar-item-size-sm, 2rem)}.fui-toolbar__user-button{padding:.25rem;gap:.25rem}}[data-theme=dark] .fui-toolbar{border-bottom-color:var(--fui-border-default)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiAvatarComponent, selector: "fui-avatar", inputs: ["size", "fullName", "initials", "alt"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
159
159
|
}
|
|
160
160
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiToolbarComponent, decorators: [{
|
|
161
161
|
type: Component,
|
|
@@ -163,7 +163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
163
163
|
class: 'fui-toolbar',
|
|
164
164
|
role: 'banner',
|
|
165
165
|
'[class.fui-toolbar--fixed]': 'fixed()',
|
|
166
|
-
}, template: "<!-- Sidebar Toggle Button (optional) -->\r\n@if (showSidebarToggle()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button --sidebar-toggle\"\r\n [attr.aria-label]=\"intl.toggleSidebarAriaLabel\"\r\n title=\"Toggle sidebar\"\r\n (click)=\"onSidebarToggleClick()\"\r\n >\r\n <fui-icon name=\"sidebar\" size=\"md\"></fui-icon>\r\n </button>\r\n}\r\n<!-- Logo Section -->\r\n<div class=\"fui-toolbar__logo\">\r\n <ng-content select=\"[logo]\"></ng-content>\r\n</div>\r\n\r\n<!-- Navigation Menu -->\r\n<nav class=\"fui-toolbar__nav\" role=\"navigation\" [attr.aria-label]=\"resolvedNavAriaLabel()\">\r\n <ul class=\"fui-toolbar__menu\">\r\n @for (item of menuItems(); track item.id) {\r\n <li class=\"fui-toolbar__menu-item\">\r\n @if (item.routerLink) {\r\n <a\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [routerLink]=\"item.routerLink\"\r\n [queryParams]=\"item.queryParams\"\r\n [fragment]=\"item.fragment\"\r\n [attr.aria-current]=\"item.id === activeMenuItemId() ? 'page' : null\"\r\n [attr.aria-label]=\"item.label\"\r\n [title]=\"item.label\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [class.fui-toolbar__menu-button--disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n [attr.aria-label]=\"item.label\"\r\n [attr.aria-pressed]=\"item.id === activeMenuItemId() ? 'true' : null\"\r\n [title]=\"item.label\"\r\n (click)=\"onMenuItemClick(item)\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </button>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</nav>\r\n<div class=\"fui-toolbar__spacer\"></div>\r\n<div class=\"fui-toolbar__more-buttons\">\r\n <ng-content select=\"[more-buttons]\"></ng-content>\r\n</div>\r\n<!-- User Profile Section -->\r\n@if (userProfile(); as profile) {\r\n <div class=\"fui-toolbar__user\">\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__user-button\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-label]=\"resolvedUserAriaLabelPrefix() + profile.name\"\r\n [title]=\"profile.name + ' - ' + profile.email\"\r\n (click)=\"onUserProfileClick()\"\r\n >\r\n <fui-avatar [size]=\"32\" fullName=\"None\"> </fui-avatar>\r\n\r\n <div class=\"fui-toolbar__user-info\">\r\n <span class=\"fui-toolbar__user-name\">{{ profile.name }}</span>\r\n <span class=\"fui-toolbar__user-email\">{{ profile.email }}</span>\r\n </div>\r\n\r\n <fui-icon name=\"caret-down\" size=\"sm\" class=\"fui-toolbar__user-caret\"></fui-icon>\r\n </button>\r\n </div>\r\n}\r\n", styles: [".fui-toolbar{--fui-toolbar-height: 3rem;--fui-toolbar-padding-inline: var(--fui-spacing-7);--fui-toolbar-bg: var(--fui-bg-subtle);--fui-toolbar-border-color: var(--fui-border-default);--fui-toolbar-blur: 8px;--fui-toolbar-item-size: 3rem;--fui-toolbar-logo-image-max-height: 2rem;--fui-toolbar-user-text-max-width: 8rem;contain:layout style;display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--fui-toolbar-height);padding-block:0;padding-inline:var(--fui-toolbar-padding-inline);background-color:var(--fui-toolbar-bg)
|
|
166
|
+
}, template: "<!-- Sidebar Toggle Button (optional) -->\r\n@if (showSidebarToggle()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button --sidebar-toggle\"\r\n [attr.aria-label]=\"intl.toggleSidebarAriaLabel\"\r\n title=\"Toggle sidebar\"\r\n (click)=\"onSidebarToggleClick()\"\r\n >\r\n <fui-icon name=\"sidebar\" size=\"md\"></fui-icon>\r\n </button>\r\n}\r\n<!-- Logo Section -->\r\n<div class=\"fui-toolbar__logo\">\r\n <ng-content select=\"[logo]\"></ng-content>\r\n</div>\r\n\r\n<!-- Navigation Menu -->\r\n<nav class=\"fui-toolbar__nav\" role=\"navigation\" [attr.aria-label]=\"resolvedNavAriaLabel()\">\r\n <ul class=\"fui-toolbar__menu\">\r\n @for (item of menuItems(); track item.id) {\r\n <li class=\"fui-toolbar__menu-item\">\r\n @if (item.routerLink) {\r\n <a\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [routerLink]=\"item.routerLink\"\r\n [queryParams]=\"item.queryParams\"\r\n [fragment]=\"item.fragment\"\r\n [attr.aria-current]=\"item.id === activeMenuItemId() ? 'page' : null\"\r\n [attr.aria-label]=\"item.label\"\r\n [title]=\"item.label\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [class.fui-toolbar__menu-button--disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n [attr.aria-label]=\"item.label\"\r\n [attr.aria-pressed]=\"item.id === activeMenuItemId() ? 'true' : null\"\r\n [title]=\"item.label\"\r\n (click)=\"onMenuItemClick(item)\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </button>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</nav>\r\n<div class=\"fui-toolbar__spacer\"></div>\r\n<div class=\"fui-toolbar__more-buttons\">\r\n <ng-content select=\"[more-buttons]\"></ng-content>\r\n</div>\r\n<!-- User Profile Section -->\r\n@if (userProfile(); as profile) {\r\n <div class=\"fui-toolbar__user\">\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__user-button\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-label]=\"resolvedUserAriaLabelPrefix() + profile.name\"\r\n [title]=\"profile.name + ' - ' + profile.email\"\r\n (click)=\"onUserProfileClick()\"\r\n >\r\n <fui-avatar [size]=\"32\" fullName=\"None\"> </fui-avatar>\r\n\r\n <div class=\"fui-toolbar__user-info\">\r\n <span class=\"fui-toolbar__user-name\">{{ profile.name }}</span>\r\n <span class=\"fui-toolbar__user-email\">{{ profile.email }}</span>\r\n </div>\r\n\r\n <fui-icon name=\"caret-down\" size=\"sm\" class=\"fui-toolbar__user-caret\"></fui-icon>\r\n </button>\r\n </div>\r\n}\r\n", styles: [".fui-toolbar{--fui-toolbar-height: 3rem;--fui-toolbar-padding-inline: var(--fui-spacing-7);--fui-toolbar-bg: var(--fui-bg-subtle);--fui-toolbar-border-color: var(--fui-border-default);--fui-toolbar-blur: 8px;--fui-toolbar-item-size: 3rem;--fui-toolbar-item-size-md: 2.25rem;--fui-toolbar-item-size-sm: 2rem;--fui-toolbar-logo-image-max-height: 2rem;--fui-toolbar-user-text-max-width: 8rem;contain:layout style;display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--fui-toolbar-height);padding-block:0;padding-inline:var(--fui-toolbar-padding-inline);background-color:color-mix(in srgb,var(--fui-toolbar-bg) 80%,transparent);backdrop-filter:blur(var(--fui-toolbar-blur));border-bottom:var(--fui-border-width-sm) solid var(--fui-toolbar-border-color);z-index:var(--fui-z-sticky)}.fui-toolbar--fixed{position:fixed;top:0;left:0;right:0}.fui-toolbar__logo{display:flex;align-items:center;flex-shrink:0;height:100%;min-width:0;margin-right:.75rem}.fui-toolbar__logo [logo]{display:flex;align-items:center;height:100%}.fui-toolbar__logo [logo] img{max-height:var(--fui-toolbar-logo-image-max-height, 2rem);width:auto}.fui-toolbar__logo [logo] h1,.fui-toolbar__logo [logo] h2,.fui-toolbar__logo [logo] h3{margin:0;font-size:var(--fui-text-lg);font-weight:var(--fui-weight-semibold);color:var(--fui-text-primary)}.fui-toolbar__spacer{flex:1;min-width:0}.fui-toolbar__more-buttons{border-left:var(--fui-border-width-sm) solid var(--fui-border-default);padding:0 .25rem;height:100%;display:flex;align-items:center;gap:.25rem;flex-shrink:0;min-width:0}.fui-toolbar__more-buttons:empty{display:none}.fui-toolbar__nav{flex:1;display:flex;justify-content:flex-start;max-width:100%;overflow:hidden}.fui-toolbar__menu{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.fui-toolbar__menu-item{display:flex}.fui-toolbar__menu-button{display:flex;align-items:center;justify-content:center;width:var(--fui-toolbar-item-size, 3rem);height:var(--fui-toolbar-item-size, 3rem);padding:0;border:none;border-radius:var(--fui-radius-lg, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease)}.fui-toolbar__menu-button.--sidebar-toggle{margin-right:.75rem}.fui-toolbar__menu-button:hover:not(:disabled){background-color:var(--fui-bg-subtle);color:var(--fui-primary-fg)}.fui-toolbar__menu-button:active:not(:disabled),.fui-toolbar__menu-button.active:not(:disabled){background-color:var(--fui-bg-muted);color:var(--fui-primary-fg)}.fui-toolbar__menu-button:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-border-primary);outline-offset:var(--fui-state-focus-ring-offset)}.fui-toolbar__menu-button--disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-toolbar__user{border-left:var(--fui-border-width-sm) solid var(--fui-border-default);display:flex;align-items:center;flex-shrink:0;margin-right:-1rem}.fui-toolbar__user-button{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border:none;border-radius:var(--fui-radius-md, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease);min-width:0}.fui-toolbar__user-button:hover{background-color:var(--fui-bg-subtle)}.fui-toolbar__user-button:active{background-color:var(--fui-bg-muted)}.fui-toolbar__user-button:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-border-primary);outline-offset:var(--fui-state-focus-ring-offset)}.fui-toolbar__user-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1}@media(max-width:768px){.fui-toolbar__user-info{display:none}}.fui-toolbar__user-name{font-size:var(--fui-text-base);font-weight:var(--fui-weight-medium);color:var(--fui-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--fui-toolbar-user-text-max-width, 8rem)}.fui-toolbar__user-email{font-size:var(--fui-text-sm);color:var(--fui-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:8rem}.fui-toolbar__user-caret{flex-shrink:0;color:var(--fui-text-secondary);transition:transform var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease)}@media(max-width:640px){.fui-toolbar__user-caret{display:none}}@media(max-width:768px){.fui-toolbar{padding:0 .75rem}.fui-toolbar__menu{gap:.125rem}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-md, 2.25rem);height:var(--fui-toolbar-item-size-md, 2.25rem)}}@media(max-width:640px){.fui-toolbar{padding:0 .5rem}.fui-toolbar__nav{flex:0;margin:0 .5rem}.fui-toolbar__menu{gap:0}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-sm, 2rem);height:var(--fui-toolbar-item-size-sm, 2rem)}.fui-toolbar__user-button{padding:.25rem;gap:.25rem}}[data-theme=dark] .fui-toolbar{border-bottom-color:var(--fui-border-default)}\n"] }]
|
|
167
167
|
}], ctorParameters: () => [], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], userProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "userProfile", required: false }] }], fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }], activeMenuItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeMenuItemId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "userAriaLabel", required: false }] }], showSidebarToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSidebarToggle", required: false }] }], menuItemClick: [{ type: i0.Output, args: ["menuItemClick"] }], userProfileClick: [{ type: i0.Output, args: ["userProfileClick"] }], sidebarToggle: [{ type: i0.Output, args: ["sidebarToggle"] }] } });
|
|
168
168
|
|
|
169
169
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"raintonic-formaui-components-toolbar.mjs","sources":["../../../lib/components/toolbar/toolbar.intl.ts","../../../lib/components/toolbar/toolbar.component.ts","../../../lib/components/toolbar/toolbar.component.html","../../../lib/components/toolbar/raintonic-formaui-components-toolbar.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiToolbarIntl extends FuiIntlBase {\r\n navAriaLabel = 'Main navigation';\r\n userAriaLabelPrefix = 'User menu for ';\r\n toggleSidebarAriaLabel = 'Toggle sidebar';\r\n}\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n ViewEncapsulation,\r\n inject,\r\n input,\r\n output,\r\n computed,\r\n signal,\r\n InputSignal,\r\n OutputEmitterRef,\r\n Signal,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { RouterModule } from '@angular/router';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiAvatarComponent } from '@raintonic/formaui/components/avatar';\r\nimport { FuiToolbarIntl } from './toolbar.intl';\r\n\r\n/**\r\n * Toolbar menu item interface\r\n */\r\nexport interface FuiToolbarMenuItem {\r\n id: string | number;\r\n icon: string;\r\n label: string;\r\n disabled?: boolean;\r\n routerLink?: string | string[];\r\n queryParams?: Record<string, string>;\r\n fragment?: string;\r\n}\r\n\r\n/**\r\n * User profile data interface\r\n */\r\nexport interface FuiToolbarUserProfile {\r\n name: string;\r\n email: string;\r\n avatar?: string;\r\n initials?: string;\r\n}\r\n\r\n/**\r\n * # FuiToolbar Component\r\n *\r\n * A top navigation toolbar following Carbon Design System principles.\r\n * Provides space for logo, navigation menu items, and user profile area.\r\n *\r\n * ## Features\r\n * - Logo area with customizable content\r\n * - Icon-based navigation menu\r\n * - User profile area with avatar/initials\r\n * - Responsive design\r\n * - Theme integration\r\n * - Accessibility support\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Toolbar\r\n * ```html\r\n * <fui-toolbar\r\n * [menuItems]=\"menuItems\"\r\n * [userProfile]=\"userProfile\"\r\n * (menuItemClick)=\"onMenuItemClick($event)\"\r\n * (userProfileClick)=\"onUserProfileClick()\">\r\n * <div logo>\r\n * <img src=\"logo.svg\" alt=\"Company Logo\">\r\n * </div>\r\n * </fui-toolbar>\r\n * ```\r\n *\r\n * ### With Custom Logo\r\n * ```html\r\n * <fui-toolbar [menuItems]=\"menuItems\" [userProfile]=\"userProfile\">\r\n * <div logo class=\"custom-logo\">\r\n * <h1>Holiday ERP</h1>\r\n * </div>\r\n * </fui-toolbar>\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * import { FuiToolbarComponent, FuiToolbarMenuItem, FuiToolbarUserProfile } from '@raintonic/formaui/components/toolbar';\r\n *\r\n * @Component({\r\n * standalone: true,\r\n * imports: [FuiToolbarComponent],\r\n * template: `\r\n * <fui-toolbar\r\n * [menuItems]=\"menuItems\"\r\n * [userProfile]=\"userProfile\"\r\n * (menuItemClick)=\"onMenuItemClick($event)\"\r\n * (userProfileClick)=\"onUserProfileClick()\">\r\n * <div logo>\r\n * <img src=\"assets/logo.svg\" alt=\"Holiday ERP\">\r\n * </div>\r\n * </fui-toolbar>\r\n * `\r\n * })\r\n * export class AppLayoutComponent {\r\n * menuItems: FuiToolbarMenuItem[] = [\r\n * { id: 'dashboard', icon: 'house', label: 'Dashboard' },\r\n * { id: 'orders', icon: 'shopping-cart', label: 'Orders' },\r\n * { id: 'products', icon: 'package', label: 'Products' },\r\n * { id: 'customers', icon: 'users', label: 'Customers' },\r\n * ];\r\n *\r\n * userProfile: FuiToolbarUserProfile = {\r\n * name: 'John Doe',\r\n * email: 'john.doe@company.com',\r\n * initials: 'JD'\r\n * };\r\n *\r\n * onMenuItemClick(itemId: string | number): void {\r\n * console.log('Menu item clicked:', itemId);\r\n * }\r\n *\r\n * onUserProfileClick(): void {\r\n * console.log('User profile clicked');\r\n * }\r\n * }\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-toolbar',\r\n standalone: true,\r\n imports: [RouterModule, FuiIconComponent, FuiAvatarComponent],\r\n templateUrl: './toolbar.component.html',\r\n styleUrls: ['./toolbar.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-toolbar',\r\n role: 'banner',\r\n '[class.fui-toolbar--fixed]': 'fixed()',\r\n },\r\n})\r\nexport class FuiToolbarComponent {\r\n readonly intl = inject(FuiToolbarIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n /** @internal — bumped when Intl mutates so computeds that read plain intl fields reinvoke. */\r\n private readonly _intlTick = signal(0);\r\n\r\n constructor() {\r\n this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {\r\n this._intlTick.update((v) => v + 1);\r\n this._cdr.markForCheck();\r\n });\r\n }\r\n\r\n // Inputs using signal-based API\r\n readonly menuItems: InputSignal<FuiToolbarMenuItem[]> = input<FuiToolbarMenuItem[]>([]);\r\n readonly userProfile: InputSignal<FuiToolbarUserProfile | null> = input<FuiToolbarUserProfile | null>(null);\r\n readonly fixed: InputSignal<boolean> = input(true);\r\n readonly activeMenuItemId: InputSignal<string | number> = input<string | number>('');\r\n readonly ariaLabel = input<string | undefined>(undefined);\r\n readonly userAriaLabel = input<string | undefined>(undefined);\r\n // New: show a dedicated sidebar toggle button\r\n readonly showSidebarToggle: InputSignal<boolean> = input(false);\r\n\r\n /** Resolved navigation aria-label: input override → intl default. */\r\n readonly resolvedNavAriaLabel = computed(() => {\r\n this._intlTick();\r\n return this.ariaLabel() ?? this.intl.navAriaLabel;\r\n });\r\n\r\n /** Resolved user-menu aria-label prefix: input override → intl default. */\r\n readonly resolvedUserAriaLabelPrefix = computed(() => {\r\n this._intlTick();\r\n return this.userAriaLabel() ?? this.intl.userAriaLabelPrefix;\r\n });\r\n\r\n // Outputs using signal-based API\r\n readonly menuItemClick: OutputEmitterRef<string | number> = output<string | number>();\r\n readonly userProfileClick: OutputEmitterRef<void> = output();\r\n // New: emits when sidebar toggle button is clicked\r\n readonly sidebarToggle: OutputEmitterRef<void> = output();\r\n\r\n // Derived user name parts for avatar\r\n readonly firstName: Signal<string> = computed(() => this.userProfile()?.name?.trim().split(/\\s+/)[0] ?? '');\r\n readonly lastName: Signal<string> = computed(() => {\r\n const parts = this.userProfile()?.name?.trim().split(/\\s+/) ?? [];\r\n return parts.length > 1 ? parts[parts.length - 1] : '';\r\n });\r\n\r\n onMenuItemClick(item: FuiToolbarMenuItem): void {\r\n if (!item.disabled) {\r\n this.menuItemClick.emit(item.id);\r\n }\r\n }\r\n\r\n onUserProfileClick(): void {\r\n if (this.userProfile()) {\r\n this.userProfileClick.emit();\r\n }\r\n }\r\n\r\n onSidebarToggleClick(): void {\r\n this.sidebarToggle.emit();\r\n }\r\n}\r\n","<!-- Sidebar Toggle Button (optional) -->\r\n@if (showSidebarToggle()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button --sidebar-toggle\"\r\n [attr.aria-label]=\"intl.toggleSidebarAriaLabel\"\r\n title=\"Toggle sidebar\"\r\n (click)=\"onSidebarToggleClick()\"\r\n >\r\n <fui-icon name=\"sidebar\" size=\"md\"></fui-icon>\r\n </button>\r\n}\r\n<!-- Logo Section -->\r\n<div class=\"fui-toolbar__logo\">\r\n <ng-content select=\"[logo]\"></ng-content>\r\n</div>\r\n\r\n<!-- Navigation Menu -->\r\n<nav class=\"fui-toolbar__nav\" role=\"navigation\" [attr.aria-label]=\"resolvedNavAriaLabel()\">\r\n <ul class=\"fui-toolbar__menu\">\r\n @for (item of menuItems(); track item.id) {\r\n <li class=\"fui-toolbar__menu-item\">\r\n @if (item.routerLink) {\r\n <a\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [routerLink]=\"item.routerLink\"\r\n [queryParams]=\"item.queryParams\"\r\n [fragment]=\"item.fragment\"\r\n [attr.aria-current]=\"item.id === activeMenuItemId() ? 'page' : null\"\r\n [attr.aria-label]=\"item.label\"\r\n [title]=\"item.label\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [class.fui-toolbar__menu-button--disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n [attr.aria-label]=\"item.label\"\r\n [attr.aria-pressed]=\"item.id === activeMenuItemId() ? 'true' : null\"\r\n [title]=\"item.label\"\r\n (click)=\"onMenuItemClick(item)\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </button>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</nav>\r\n<div class=\"fui-toolbar__spacer\"></div>\r\n<div class=\"fui-toolbar__more-buttons\">\r\n <ng-content select=\"[more-buttons]\"></ng-content>\r\n</div>\r\n<!-- User Profile Section -->\r\n@if (userProfile(); as profile) {\r\n <div class=\"fui-toolbar__user\">\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__user-button\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-label]=\"resolvedUserAriaLabelPrefix() + profile.name\"\r\n [title]=\"profile.name + ' - ' + profile.email\"\r\n (click)=\"onUserProfileClick()\"\r\n >\r\n <fui-avatar [size]=\"32\" fullName=\"None\"> </fui-avatar>\r\n\r\n <div class=\"fui-toolbar__user-info\">\r\n <span class=\"fui-toolbar__user-name\">{{ profile.name }}</span>\r\n <span class=\"fui-toolbar__user-email\">{{ profile.email }}</span>\r\n </div>\r\n\r\n <fui-icon name=\"caret-down\" size=\"sm\" class=\"fui-toolbar__user-caret\"></fui-icon>\r\n </button>\r\n </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"raintonic-formaui-components-toolbar.mjs","sources":["../../../lib/components/toolbar/toolbar.intl.ts","../../../lib/components/toolbar/toolbar.component.ts","../../../lib/components/toolbar/toolbar.component.html","../../../lib/components/toolbar/raintonic-formaui-components-toolbar.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiToolbarIntl extends FuiIntlBase {\r\n navAriaLabel = 'Main navigation';\r\n userAriaLabelPrefix = 'User menu for ';\r\n toggleSidebarAriaLabel = 'Toggle sidebar';\r\n}\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n ViewEncapsulation,\r\n inject,\r\n input,\r\n output,\r\n computed,\r\n signal,\r\n InputSignal,\r\n OutputEmitterRef,\r\n Signal,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { RouterModule } from '@angular/router';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiAvatarComponent } from '@raintonic/formaui/components/avatar';\r\nimport { FuiToolbarIntl } from './toolbar.intl';\r\n\r\n/**\r\n * Toolbar menu item interface\r\n */\r\nexport interface FuiToolbarMenuItem {\r\n id: string | number;\r\n icon: string;\r\n label: string;\r\n disabled?: boolean;\r\n routerLink?: string | string[];\r\n queryParams?: Record<string, string>;\r\n fragment?: string;\r\n}\r\n\r\n/**\r\n * User profile data interface\r\n */\r\nexport interface FuiToolbarUserProfile {\r\n name: string;\r\n email: string;\r\n avatar?: string;\r\n initials?: string;\r\n}\r\n\r\n/**\r\n * # FuiToolbar Component\r\n *\r\n * A top navigation toolbar following Carbon Design System principles.\r\n * Provides space for logo, navigation menu items, and user profile area.\r\n *\r\n * ## Features\r\n * - Logo area with customizable content\r\n * - Icon-based navigation menu\r\n * - User profile area with avatar/initials\r\n * - Responsive design\r\n * - Theme integration\r\n * - Accessibility support\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Toolbar\r\n * ```html\r\n * <fui-toolbar\r\n * [menuItems]=\"menuItems\"\r\n * [userProfile]=\"userProfile\"\r\n * (menuItemClick)=\"onMenuItemClick($event)\"\r\n * (userProfileClick)=\"onUserProfileClick()\">\r\n * <div logo>\r\n * <img src=\"logo.svg\" alt=\"Company Logo\">\r\n * </div>\r\n * </fui-toolbar>\r\n * ```\r\n *\r\n * ### With Custom Logo\r\n * ```html\r\n * <fui-toolbar [menuItems]=\"menuItems\" [userProfile]=\"userProfile\">\r\n * <div logo class=\"custom-logo\">\r\n * <h1>Holiday ERP</h1>\r\n * </div>\r\n * </fui-toolbar>\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * import { FuiToolbarComponent, FuiToolbarMenuItem, FuiToolbarUserProfile } from '@raintonic/formaui/components/toolbar';\r\n *\r\n * @Component({\r\n * standalone: true,\r\n * imports: [FuiToolbarComponent],\r\n * template: `\r\n * <fui-toolbar\r\n * [menuItems]=\"menuItems\"\r\n * [userProfile]=\"userProfile\"\r\n * (menuItemClick)=\"onMenuItemClick($event)\"\r\n * (userProfileClick)=\"onUserProfileClick()\">\r\n * <div logo>\r\n * <img src=\"assets/logo.svg\" alt=\"Holiday ERP\">\r\n * </div>\r\n * </fui-toolbar>\r\n * `\r\n * })\r\n * export class AppLayoutComponent {\r\n * menuItems: FuiToolbarMenuItem[] = [\r\n * { id: 'dashboard', icon: 'house', label: 'Dashboard' },\r\n * { id: 'orders', icon: 'shopping-cart', label: 'Orders' },\r\n * { id: 'products', icon: 'package', label: 'Products' },\r\n * { id: 'customers', icon: 'users', label: 'Customers' },\r\n * ];\r\n *\r\n * userProfile: FuiToolbarUserProfile = {\r\n * name: 'John Doe',\r\n * email: 'john.doe@company.com',\r\n * initials: 'JD'\r\n * };\r\n *\r\n * onMenuItemClick(itemId: string | number): void {\r\n * console.log('Menu item clicked:', itemId);\r\n * }\r\n *\r\n * onUserProfileClick(): void {\r\n * console.log('User profile clicked');\r\n * }\r\n * }\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-toolbar',\r\n standalone: true,\r\n imports: [RouterModule, FuiIconComponent, FuiAvatarComponent],\r\n templateUrl: './toolbar.component.html',\r\n styleUrls: ['./toolbar.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-toolbar',\r\n role: 'banner',\r\n '[class.fui-toolbar--fixed]': 'fixed()',\r\n },\r\n})\r\nexport class FuiToolbarComponent {\r\n readonly intl = inject(FuiToolbarIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n /** @internal — bumped when Intl mutates so computeds that read plain intl fields reinvoke. */\r\n private readonly _intlTick = signal(0);\r\n\r\n constructor() {\r\n this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {\r\n this._intlTick.update((v) => v + 1);\r\n this._cdr.markForCheck();\r\n });\r\n }\r\n\r\n // Inputs using signal-based API\r\n readonly menuItems: InputSignal<FuiToolbarMenuItem[]> = input<FuiToolbarMenuItem[]>([]);\r\n readonly userProfile: InputSignal<FuiToolbarUserProfile | null> = input<FuiToolbarUserProfile | null>(null);\r\n readonly fixed: InputSignal<boolean> = input(true);\r\n readonly activeMenuItemId: InputSignal<string | number> = input<string | number>('');\r\n readonly ariaLabel = input<string | undefined>(undefined);\r\n readonly userAriaLabel = input<string | undefined>(undefined);\r\n // New: show a dedicated sidebar toggle button\r\n readonly showSidebarToggle: InputSignal<boolean> = input(false);\r\n\r\n /** Resolved navigation aria-label: input override → intl default. */\r\n readonly resolvedNavAriaLabel = computed(() => {\r\n this._intlTick();\r\n return this.ariaLabel() ?? this.intl.navAriaLabel;\r\n });\r\n\r\n /** Resolved user-menu aria-label prefix: input override → intl default. */\r\n readonly resolvedUserAriaLabelPrefix = computed(() => {\r\n this._intlTick();\r\n return this.userAriaLabel() ?? this.intl.userAriaLabelPrefix;\r\n });\r\n\r\n // Outputs using signal-based API\r\n readonly menuItemClick: OutputEmitterRef<string | number> = output<string | number>();\r\n readonly userProfileClick: OutputEmitterRef<void> = output();\r\n // New: emits when sidebar toggle button is clicked\r\n readonly sidebarToggle: OutputEmitterRef<void> = output();\r\n\r\n // Derived user name parts for avatar\r\n readonly firstName: Signal<string> = computed(() => this.userProfile()?.name?.trim().split(/\\s+/)[0] ?? '');\r\n readonly lastName: Signal<string> = computed(() => {\r\n const parts = this.userProfile()?.name?.trim().split(/\\s+/) ?? [];\r\n return parts.length > 1 ? parts[parts.length - 1] : '';\r\n });\r\n\r\n onMenuItemClick(item: FuiToolbarMenuItem): void {\r\n if (!item.disabled) {\r\n this.menuItemClick.emit(item.id);\r\n }\r\n }\r\n\r\n onUserProfileClick(): void {\r\n if (this.userProfile()) {\r\n this.userProfileClick.emit();\r\n }\r\n }\r\n\r\n onSidebarToggleClick(): void {\r\n this.sidebarToggle.emit();\r\n }\r\n}\r\n","<!-- Sidebar Toggle Button (optional) -->\r\n@if (showSidebarToggle()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button --sidebar-toggle\"\r\n [attr.aria-label]=\"intl.toggleSidebarAriaLabel\"\r\n title=\"Toggle sidebar\"\r\n (click)=\"onSidebarToggleClick()\"\r\n >\r\n <fui-icon name=\"sidebar\" size=\"md\"></fui-icon>\r\n </button>\r\n}\r\n<!-- Logo Section -->\r\n<div class=\"fui-toolbar__logo\">\r\n <ng-content select=\"[logo]\"></ng-content>\r\n</div>\r\n\r\n<!-- Navigation Menu -->\r\n<nav class=\"fui-toolbar__nav\" role=\"navigation\" [attr.aria-label]=\"resolvedNavAriaLabel()\">\r\n <ul class=\"fui-toolbar__menu\">\r\n @for (item of menuItems(); track item.id) {\r\n <li class=\"fui-toolbar__menu-item\">\r\n @if (item.routerLink) {\r\n <a\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [routerLink]=\"item.routerLink\"\r\n [queryParams]=\"item.queryParams\"\r\n [fragment]=\"item.fragment\"\r\n [attr.aria-current]=\"item.id === activeMenuItemId() ? 'page' : null\"\r\n [attr.aria-label]=\"item.label\"\r\n [title]=\"item.label\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [class.fui-toolbar__menu-button--disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n [attr.aria-label]=\"item.label\"\r\n [attr.aria-pressed]=\"item.id === activeMenuItemId() ? 'true' : null\"\r\n [title]=\"item.label\"\r\n (click)=\"onMenuItemClick(item)\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </button>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</nav>\r\n<div class=\"fui-toolbar__spacer\"></div>\r\n<div class=\"fui-toolbar__more-buttons\">\r\n <ng-content select=\"[more-buttons]\"></ng-content>\r\n</div>\r\n<!-- User Profile Section -->\r\n@if (userProfile(); as profile) {\r\n <div class=\"fui-toolbar__user\">\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__user-button\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-label]=\"resolvedUserAriaLabelPrefix() + profile.name\"\r\n [title]=\"profile.name + ' - ' + profile.email\"\r\n (click)=\"onUserProfileClick()\"\r\n >\r\n <fui-avatar [size]=\"32\" fullName=\"None\"> </fui-avatar>\r\n\r\n <div class=\"fui-toolbar__user-info\">\r\n <span class=\"fui-toolbar__user-name\">{{ profile.name }}</span>\r\n <span class=\"fui-toolbar__user-email\">{{ profile.email }}</span>\r\n </div>\r\n\r\n <fui-icon name=\"caret-down\" size=\"sm\" class=\"fui-toolbar__user-caret\"></fui-icon>\r\n </button>\r\n </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -40,7 +40,7 @@ class FuiTopbarComponent {
|
|
|
40
40
|
/** @internal Whether the items array is empty (used for host class). */
|
|
41
41
|
_isEmpty = computed(() => !this.items() || this.items().length === 0, ...(ngDevMode ? [{ debugName: "_isEmpty" }] : /* istanbul ignore next */ []));
|
|
42
42
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
43
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: FuiTopbarComponent, isStandalone: true, selector: "fui-topbar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "\"Topbar navigation\"", "class.fui-topbar--empty-items": "_isEmpty()" }, classAttribute: "fui-topbar" }, ngImport: i0, template: "<div class=\"fui-topbar__start\">\r\n <ng-content select=\"[fuiTopbarStart]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"fui-topbar__menu\">\r\n <!-- TODO: must create mega-menu or finish nested submenus in dropdown-menu -->\r\n</div>\r\n\r\n<div class=\"fui-topbar__expand\">\r\n <ng-content select=\"[fuiTopbarExpand]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"fui-topbar__end\">\r\n <ng-content select=\"[fuiTopbarEnd]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"fui-topbar__bottom-row\">\r\n <ng-content select=\"[fuiTopbarBottomRow]\"></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host{--fui-topbar-bg: var(--fui-bg-subtle);--fui-topbar-border-color: var(--fui-neutral-40);--fui-topbar-item-color: var(--fui-text-secondary);--fui-topbar-item-bg-hover: var(--fui-bg-muted);--fui-topbar-item-bg-active: var(--fui-primary-10);--fui-topbar-height: 51px;--fui-topbar-item-radius: var(--fui-radius-sm);--fui-topbar-item-gap: var(--fui-spacing-2);--fui-topbar-item-padding-y: var(--fui-spacing-2);--fui-topbar-item-padding-x: var(--fui-spacing-3);--fui-topbar-padding-x: var(--fui-spacing-4);--fui-topbar-font-family: var(--fui-font-sans);--fui-topbar-font-size: var(--fui-text-sm);--fui-topbar-font-weight: var(--fui-weight-regular);--fui-topbar-transition-duration: var(--fui-duration-fast);--fui-topbar-transition-easing: var(--fui-ease-out);display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:var(--fui-topbar-height) auto;align-items:center;width:100%;height:auto;padding:0 var(--fui-topbar-padding-x);background-color:var(--fui-topbar-bg);border-bottom:
|
|
43
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: FuiTopbarComponent, isStandalone: true, selector: "fui-topbar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "\"Topbar navigation\"", "class.fui-topbar--empty-items": "_isEmpty()" }, classAttribute: "fui-topbar" }, ngImport: i0, template: "<div class=\"fui-topbar__start\">\r\n <ng-content select=\"[fuiTopbarStart]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"fui-topbar__menu\">\r\n <!-- TODO: must create mega-menu or finish nested submenus in dropdown-menu -->\r\n</div>\r\n\r\n<div class=\"fui-topbar__expand\">\r\n <ng-content select=\"[fuiTopbarExpand]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"fui-topbar__end\">\r\n <ng-content select=\"[fuiTopbarEnd]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"fui-topbar__bottom-row\">\r\n <ng-content select=\"[fuiTopbarBottomRow]\"></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host{--fui-topbar-bg: var(--fui-bg-subtle);--fui-topbar-border-color: var(--fui-neutral-40);--fui-topbar-item-color: var(--fui-text-secondary);--fui-topbar-item-bg-hover: var(--fui-bg-muted);--fui-topbar-item-bg-active: var(--fui-primary-10);--fui-topbar-height: 51px;--fui-topbar-item-radius: var(--fui-radius-sm);--fui-topbar-item-gap: var(--fui-spacing-2);--fui-topbar-item-padding-y: var(--fui-spacing-2);--fui-topbar-item-padding-x: var(--fui-spacing-3);--fui-topbar-padding-x: var(--fui-spacing-4);--fui-topbar-font-family: var(--fui-font-sans);--fui-topbar-font-size: var(--fui-text-sm);--fui-topbar-font-weight: var(--fui-weight-regular);--fui-topbar-transition-duration: var(--fui-duration-fast);--fui-topbar-transition-easing: var(--fui-ease-out);display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:var(--fui-topbar-height) auto;align-items:center;width:100%;height:auto;padding:0 var(--fui-topbar-padding-x);background-color:var(--fui-topbar-bg);border-bottom:var(--fui-border-width-sm) solid var(--fui-topbar-border-color);box-sizing:border-box;gap:var(--fui-spacing-2)}.fui-topbar__start{grid-column:1;grid-row:1;display:flex;align-items:center}.fui-topbar__menu{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--fui-topbar-item-gap);overflow:hidden}.fui-topbar__expand{grid-column:3;grid-row:1;display:flex;align-items:center}.fui-topbar__end{grid-column:4;grid-row:1;display:flex;align-items:center;justify-content:flex-end}.fui-topbar__bottom-row{grid-column:1/-1;grid-row:2;display:flex;align-items:center}@media(max-width:640px){:host.fui-topbar--hidden{display:none}}@media(prefers-reduced-motion:reduce){.fui-topbar__item{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
44
44
|
}
|
|
45
45
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTopbarComponent, decorators: [{
|
|
46
46
|
type: Component,
|
|
@@ -49,7 +49,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
49
49
|
'[attr.aria-label]': '"Topbar navigation"',
|
|
50
50
|
class: 'fui-topbar',
|
|
51
51
|
'[class.fui-topbar--empty-items]': '_isEmpty()',
|
|
52
|
-
}, template: "<div class=\"fui-topbar__start\">\r\n <ng-content select=\"[fuiTopbarStart]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"fui-topbar__menu\">\r\n <!-- TODO: must create mega-menu or finish nested submenus in dropdown-menu -->\r\n</div>\r\n\r\n<div class=\"fui-topbar__expand\">\r\n <ng-content select=\"[fuiTopbarExpand]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"fui-topbar__end\">\r\n <ng-content select=\"[fuiTopbarEnd]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"fui-topbar__bottom-row\">\r\n <ng-content select=\"[fuiTopbarBottomRow]\"></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host{--fui-topbar-bg: var(--fui-bg-subtle);--fui-topbar-border-color: var(--fui-neutral-40);--fui-topbar-item-color: var(--fui-text-secondary);--fui-topbar-item-bg-hover: var(--fui-bg-muted);--fui-topbar-item-bg-active: var(--fui-primary-10);--fui-topbar-height: 51px;--fui-topbar-item-radius: var(--fui-radius-sm);--fui-topbar-item-gap: var(--fui-spacing-2);--fui-topbar-item-padding-y: var(--fui-spacing-2);--fui-topbar-item-padding-x: var(--fui-spacing-3);--fui-topbar-padding-x: var(--fui-spacing-4);--fui-topbar-font-family: var(--fui-font-sans);--fui-topbar-font-size: var(--fui-text-sm);--fui-topbar-font-weight: var(--fui-weight-regular);--fui-topbar-transition-duration: var(--fui-duration-fast);--fui-topbar-transition-easing: var(--fui-ease-out);display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:var(--fui-topbar-height) auto;align-items:center;width:100%;height:auto;padding:0 var(--fui-topbar-padding-x);background-color:var(--fui-topbar-bg);border-bottom:
|
|
52
|
+
}, template: "<div class=\"fui-topbar__start\">\r\n <ng-content select=\"[fuiTopbarStart]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"fui-topbar__menu\">\r\n <!-- TODO: must create mega-menu or finish nested submenus in dropdown-menu -->\r\n</div>\r\n\r\n<div class=\"fui-topbar__expand\">\r\n <ng-content select=\"[fuiTopbarExpand]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"fui-topbar__end\">\r\n <ng-content select=\"[fuiTopbarEnd]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"fui-topbar__bottom-row\">\r\n <ng-content select=\"[fuiTopbarBottomRow]\"></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host{--fui-topbar-bg: var(--fui-bg-subtle);--fui-topbar-border-color: var(--fui-neutral-40);--fui-topbar-item-color: var(--fui-text-secondary);--fui-topbar-item-bg-hover: var(--fui-bg-muted);--fui-topbar-item-bg-active: var(--fui-primary-10);--fui-topbar-height: 51px;--fui-topbar-item-radius: var(--fui-radius-sm);--fui-topbar-item-gap: var(--fui-spacing-2);--fui-topbar-item-padding-y: var(--fui-spacing-2);--fui-topbar-item-padding-x: var(--fui-spacing-3);--fui-topbar-padding-x: var(--fui-spacing-4);--fui-topbar-font-family: var(--fui-font-sans);--fui-topbar-font-size: var(--fui-text-sm);--fui-topbar-font-weight: var(--fui-weight-regular);--fui-topbar-transition-duration: var(--fui-duration-fast);--fui-topbar-transition-easing: var(--fui-ease-out);display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:var(--fui-topbar-height) auto;align-items:center;width:100%;height:auto;padding:0 var(--fui-topbar-padding-x);background-color:var(--fui-topbar-bg);border-bottom:var(--fui-border-width-sm) solid var(--fui-topbar-border-color);box-sizing:border-box;gap:var(--fui-spacing-2)}.fui-topbar__start{grid-column:1;grid-row:1;display:flex;align-items:center}.fui-topbar__menu{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--fui-topbar-item-gap);overflow:hidden}.fui-topbar__expand{grid-column:3;grid-row:1;display:flex;align-items:center}.fui-topbar__end{grid-column:4;grid-row:1;display:flex;align-items:center;justify-content:flex-end}.fui-topbar__bottom-row{grid-column:1/-1;grid-row:2;display:flex;align-items:center}@media(max-width:640px){:host.fui-topbar--hidden{display:none}}@media(prefers-reduced-motion:reduce){.fui-topbar__item{transition:none}}\n"] }]
|
|
53
53
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
54
54
|
|
|
55
55
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"raintonic-formaui-components-topbar.mjs","sources":["../../../lib/components/topbar/topbar.component.ts","../../../lib/components/topbar/topbar.component.html","../../../lib/components/topbar/raintonic-formaui-components-topbar.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output, computed } from '@angular/core';\r\nimport { MenuItem } from '@raintonic/formaui/core';\r\n\r\n/**\r\n * # FuiTopbarComponent\r\n *\r\n * A responsive topbar navigation component with a two-row layout:\r\n * the top row contains brand/actions and menu items; the bottom row\r\n * is a content projection slot (`[fuiTopbarBottomRow]`) for tabs,\r\n * search bars, or other secondary content.\r\n *\r\n * ## Features\r\n * - CSS Grid layout (two rows by default)\r\n * - Content projection slots: start, bottom-row, expand, end\r\n * - `ariaLabel` for accessible navigation region\r\n * - `itemClick` output emits the clicked `MenuItem`\r\n *\r\n * ## Usage\r\n *\r\n * ```html\r\n * <fui-topbar\r\n * [items]=\"menuItems\"\r\n * ariaLabel=\"Main navigation\"\r\n * (itemClick)=\"onItemClick($event)\"\r\n * >\r\n * <div fuiTopbarStart>My App</div>\r\n * <app-tabs fuiTopbarBottomRow [tabs]=\"tabItems\" />\r\n * <button fuiTopbarExpand>☰</button>\r\n * <div fuiTopbarEnd>\r\n * <fui-avatar />\r\n * </div>\r\n * </fui-topbar>\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-topbar',\r\n standalone: true,\r\n imports: [],\r\n templateUrl: './topbar.component.html',\r\n styleUrl: './topbar.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: {\r\n role: 'navigation',\r\n '[attr.aria-label]': '\"Topbar navigation\"',\r\n class: 'fui-topbar',\r\n '[class.fui-topbar--empty-items]': '_isEmpty()',\r\n },\r\n})\r\nexport class FuiTopbarComponent {\r\n /** Array of menu items to render in the top row. */\r\n readonly items = input<MenuItem[]>([]);\r\n\r\n /** Emitted when any clickable menu item is activated. */\r\n readonly itemClick = output<MenuItem>();\r\n\r\n /** @internal Whether the items array is empty (used for host class). */\r\n readonly _isEmpty = computed(() => !this.items() || this.items().length === 0);\r\n}\r\n","<div class=\"fui-topbar__start\">\r\n <ng-content select=\"[fuiTopbarStart]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"fui-topbar__menu\">\r\n <!-- TODO: must create mega-menu or finish nested submenus in dropdown-menu -->\r\n</div>\r\n\r\n<div class=\"fui-topbar__expand\">\r\n <ng-content select=\"[fuiTopbarExpand]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"fui-topbar__end\">\r\n <ng-content select=\"[fuiTopbarEnd]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"fui-topbar__bottom-row\">\r\n <ng-content select=\"[fuiTopbarBottomRow]\"></ng-content>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BG;MAeU,kBAAkB,CAAA;;AAEpB,IAAA,KAAK,GAAG,KAAK,CAAa,EAAE,4EAAC;;IAG7B,SAAS,GAAG,MAAM,EAAY;;IAG9B,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,KAAK,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;uGARnE,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,waChD/B,okBAmBA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"raintonic-formaui-components-topbar.mjs","sources":["../../../lib/components/topbar/topbar.component.ts","../../../lib/components/topbar/topbar.component.html","../../../lib/components/topbar/raintonic-formaui-components-topbar.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output, computed } from '@angular/core';\r\nimport { MenuItem } from '@raintonic/formaui/core';\r\n\r\n/**\r\n * # FuiTopbarComponent\r\n *\r\n * A responsive topbar navigation component with a two-row layout:\r\n * the top row contains brand/actions and menu items; the bottom row\r\n * is a content projection slot (`[fuiTopbarBottomRow]`) for tabs,\r\n * search bars, or other secondary content.\r\n *\r\n * ## Features\r\n * - CSS Grid layout (two rows by default)\r\n * - Content projection slots: start, bottom-row, expand, end\r\n * - `ariaLabel` for accessible navigation region\r\n * - `itemClick` output emits the clicked `MenuItem`\r\n *\r\n * ## Usage\r\n *\r\n * ```html\r\n * <fui-topbar\r\n * [items]=\"menuItems\"\r\n * ariaLabel=\"Main navigation\"\r\n * (itemClick)=\"onItemClick($event)\"\r\n * >\r\n * <div fuiTopbarStart>My App</div>\r\n * <app-tabs fuiTopbarBottomRow [tabs]=\"tabItems\" />\r\n * <button fuiTopbarExpand>☰</button>\r\n * <div fuiTopbarEnd>\r\n * <fui-avatar />\r\n * </div>\r\n * </fui-topbar>\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-topbar',\r\n standalone: true,\r\n imports: [],\r\n templateUrl: './topbar.component.html',\r\n styleUrl: './topbar.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: {\r\n role: 'navigation',\r\n '[attr.aria-label]': '\"Topbar navigation\"',\r\n class: 'fui-topbar',\r\n '[class.fui-topbar--empty-items]': '_isEmpty()',\r\n },\r\n})\r\nexport class FuiTopbarComponent {\r\n /** Array of menu items to render in the top row. */\r\n readonly items = input<MenuItem[]>([]);\r\n\r\n /** Emitted when any clickable menu item is activated. */\r\n readonly itemClick = output<MenuItem>();\r\n\r\n /** @internal Whether the items array is empty (used for host class). */\r\n readonly _isEmpty = computed(() => !this.items() || this.items().length === 0);\r\n}\r\n","<div class=\"fui-topbar__start\">\r\n <ng-content select=\"[fuiTopbarStart]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"fui-topbar__menu\">\r\n <!-- TODO: must create mega-menu or finish nested submenus in dropdown-menu -->\r\n</div>\r\n\r\n<div class=\"fui-topbar__expand\">\r\n <ng-content select=\"[fuiTopbarExpand]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"fui-topbar__end\">\r\n <ng-content select=\"[fuiTopbarEnd]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"fui-topbar__bottom-row\">\r\n <ng-content select=\"[fuiTopbarBottomRow]\"></ng-content>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BG;MAeU,kBAAkB,CAAA;;AAEpB,IAAA,KAAK,GAAG,KAAK,CAAa,EAAE,4EAAC;;IAG7B,SAAS,GAAG,MAAM,EAAY;;IAG9B,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,KAAK,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;uGARnE,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,waChD/B,okBAmBA,EAAA,MAAA,EAAA,CAAA,isHAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FD6Ba,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAd9B,SAAS;+BACE,YAAY,EAAA,UAAA,EACV,IAAI,EAAA,OAAA,EACP,EAAE,mBAGM,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,IAAI,EAAE,YAAY;AAClB,wBAAA,mBAAmB,EAAE,qBAAqB;AAC1C,wBAAA,KAAK,EAAE,YAAY;AACnB,wBAAA,iCAAiC,EAAE,YAAY;AAChD,qBAAA,EAAA,QAAA,EAAA,okBAAA,EAAA,MAAA,EAAA,CAAA,isHAAA,CAAA,EAAA;;;AE9CH;;AAEG;;;;"}
|
|
@@ -261,7 +261,7 @@ class FuiTreeSelectComponent {
|
|
|
261
261
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTreeSelectComponent, isStandalone: true, selector: "fui-tree-select", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, loadChildren: { classPropertyName: "loadChildren", publicName: "loadChildren", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, displayField: { classPropertyName: "displayField", publicName: "displayField", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { attributes: { "role": "combobox", "tabindex": "0" }, listeners: { "click": "toggle()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-expanded": "_panelOpen()", "attr.aria-haspopup": "\"tree\"", "attr.aria-owns": "_panelOpen() ? _treeId : null", "attr.aria-activedescendant": "activeDescendant()", "class.fui-tree-select--open": "_panelOpen()", "class.fui-tree-select--disabled": "disabled()" }, classAttribute: "fui-tree-select" }, providers: [
|
|
262
262
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FuiTreeSelectComponent), multi: true },
|
|
263
263
|
{ provide: FUI_FORM_FIELD_CONTROL, useExisting: forwardRef(() => FuiTreeSelectComponent) },
|
|
264
|
-
], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], hostDirectives: [{ directive: i1.FuiPopupOverlayDirective, inputs: ["positions", "positions", "panelClass", "panelClass", "backdropClass", "backdropClass", "scrollStrategy", "scrollStrategy", "minWidthFromTrigger", "minWidthFromTrigger"], outputs: ["openedChange", "openedChange", "escapeKey", "escapeKey"] }, { directive: i1.FuiFormControlSyncDirective }], ngImport: i0, template: "<!-- Trigger area -->\r\n<div class=\"fui-tree-select__trigger\" #trigger>\r\n @if (empty()) {\r\n <span class=\"fui-tree-select__placeholder\">{{ placeholder() }}</span>\r\n } @else if (selectionMode() === 'single') {\r\n <span class=\"fui-tree-select__value\">{{ _getDisplayValue() }}</span>\r\n } @else {\r\n <div class=\"fui-tree-select__tags\">\r\n @for (tag of _getSelectedDisplayValues(); track tag) {\r\n <fui-badge [label]=\"tag\" size=\"sm\" variant=\"secondary\"></fui-badge>\r\n }\r\n </div>\r\n }\r\n <fui-icon class=\"fui-tree-select__arrow\" [name]=\"_panelOpen() ? 'caret-up' : 'caret-down'\" size=\"sm\"></fui-icon>\r\n</div>\r\n\r\n<!-- Panel (rendered always but hidden, moved to overlay when open) -->\r\n<div class=\"fui-tree-select__panel\" [id]=\"_treeId\" #panel [style.display]=\"_panelOpen() ? '' : 'none'\">\r\n @if (showSearch()) {\r\n <div class=\"fui-tree-select__search\">\r\n <input\r\n class=\"fui-tree-select__search-input\"\r\n type=\"text\"\r\n placeholder=\"Search...\"\r\n (input)=\"_onSearchInput($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </div>\r\n }\r\n <fui-tree\r\n [nodes]=\"nodes()\"\r\n [selectionMode]=\"_treeSelectionMode()\"\r\n [loadChildren]=\"loadChildren()\"\r\n [nodeTemplate]=\"nodeTemplate()\"\r\n [filter]=\"_searchFilter()\"\r\n [nodeIdPrefix]=\"_treeId\"\r\n (nodeSelect)=\"_onTreeSelect($event)\"\r\n (nodeUnselect)=\"_onTreeUnselect($event)\"\r\n (focusChange)=\"_onTreeFocusChange($event)\"\r\n >\r\n </fui-tree>\r\n</div>\r\n", styles: [".fui-tree-select{display:inline-flex;align-items:center;width:100%;min-height:40px;padding:8px 12px;border:
|
|
264
|
+
], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], hostDirectives: [{ directive: i1.FuiPopupOverlayDirective, inputs: ["positions", "positions", "panelClass", "panelClass", "backdropClass", "backdropClass", "scrollStrategy", "scrollStrategy", "minWidthFromTrigger", "minWidthFromTrigger"], outputs: ["openedChange", "openedChange", "escapeKey", "escapeKey"] }, { directive: i1.FuiFormControlSyncDirective }], ngImport: i0, template: "<!-- Trigger area -->\r\n<div class=\"fui-tree-select__trigger\" #trigger>\r\n @if (empty()) {\r\n <span class=\"fui-tree-select__placeholder\">{{ placeholder() }}</span>\r\n } @else if (selectionMode() === 'single') {\r\n <span class=\"fui-tree-select__value\">{{ _getDisplayValue() }}</span>\r\n } @else {\r\n <div class=\"fui-tree-select__tags\">\r\n @for (tag of _getSelectedDisplayValues(); track tag) {\r\n <fui-badge [label]=\"tag\" size=\"sm\" variant=\"secondary\"></fui-badge>\r\n }\r\n </div>\r\n }\r\n <fui-icon class=\"fui-tree-select__arrow\" [name]=\"_panelOpen() ? 'caret-up' : 'caret-down'\" size=\"sm\"></fui-icon>\r\n</div>\r\n\r\n<!-- Panel (rendered always but hidden, moved to overlay when open) -->\r\n<div class=\"fui-tree-select__panel\" [id]=\"_treeId\" #panel [style.display]=\"_panelOpen() ? '' : 'none'\">\r\n @if (showSearch()) {\r\n <div class=\"fui-tree-select__search\">\r\n <input\r\n class=\"fui-tree-select__search-input\"\r\n type=\"text\"\r\n placeholder=\"Search...\"\r\n (input)=\"_onSearchInput($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </div>\r\n }\r\n <fui-tree\r\n [nodes]=\"nodes()\"\r\n [selectionMode]=\"_treeSelectionMode()\"\r\n [loadChildren]=\"loadChildren()\"\r\n [nodeTemplate]=\"nodeTemplate()\"\r\n [filter]=\"_searchFilter()\"\r\n [nodeIdPrefix]=\"_treeId\"\r\n (nodeSelect)=\"_onTreeSelect($event)\"\r\n (nodeUnselect)=\"_onTreeUnselect($event)\"\r\n (focusChange)=\"_onTreeFocusChange($event)\"\r\n >\r\n </fui-tree>\r\n</div>\r\n", styles: [".fui-tree-select{display:inline-flex;align-items:center;width:100%;min-height:40px;padding:8px 12px;border:var(--fui-border-width-sm) solid var(--fui-border-default);border-radius:var(--fui-radius-sm);background:var(--fui-field-bg);cursor:pointer;outline:none;font-family:var(--fui-font-sans);font-size:var(--fui-text-md);transition:border-color var(--fui-duration-base) var(--fui-ease-in-out)}.fui-tree-select:hover{border-color:var(--fui-primary-60)}.fui-tree-select:focus{outline:var(--fui-state-focus-ring-width) solid var(--fui-primary-60);outline-offset:-2px}.fui-tree-select--disabled{opacity:.5;pointer-events:none}.fui-tree-select--open{border-color:var(--fui-primary-60)}.fui-tree-select__trigger{display:flex;align-items:center;width:100%;gap:8px}.fui-tree-select__placeholder{color:var(--fui-text-disabled);flex:1}.fui-tree-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-tree-select__tags{display:flex;flex-wrap:wrap;gap:4px;flex:1}.fui-tree-select__arrow{flex-shrink:0;color:var(--fui-text-secondary);transition:transform var(--fui-duration-base) var(--fui-ease-in-out)}.fui-tree-select__panel{background:var(--fui-bg-default);border:var(--fui-border-width-sm) solid var(--fui-border-default);border-radius:var(--fui-radius-sm);box-shadow:var(--fui-shadow-lg);max-height:300px;overflow:auto}.fui-tree-select__search{padding:8px;border-bottom:var(--fui-border-width-sm) solid var(--fui-border-default)}.fui-tree-select__search-input{width:100%;padding:4px 8px;border:var(--fui-border-width-sm) solid var(--fui-border-default);border-radius:var(--fui-radius-sm);font-family:var(--fui-font-sans);font-size:var(--fui-text-base);outline:none;background:var(--fui-field-bg)}.fui-tree-select__search-input:focus{border-color:var(--fui-primary-60)}.fui-tree-select-backdrop{background:transparent}\n"], dependencies: [{ kind: "component", type: FuiTreeComponent, selector: "fui-tree", inputs: ["nodes", "selectionMode", "loadChildren", "nodeTemplate", "draggable", "virtualScroll", "virtualItemSize", "filter", "nodeIdPrefix"], outputs: ["nodeSelect", "nodeUnselect", "nodeExpand", "nodeCollapse", "nodeDrop", "filterChange", "focusChange"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiBadgeComponent, selector: "fui-badge", inputs: ["label", "icon", "customColor", "size", "variant", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
265
265
|
}
|
|
266
266
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTreeSelectComponent, decorators: [{
|
|
267
267
|
type: Component,
|
|
@@ -287,7 +287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
287
287
|
'(click)': 'toggle()',
|
|
288
288
|
'(keydown)': '_onKeydown($event)',
|
|
289
289
|
tabindex: '0',
|
|
290
|
-
}, template: "<!-- Trigger area -->\r\n<div class=\"fui-tree-select__trigger\" #trigger>\r\n @if (empty()) {\r\n <span class=\"fui-tree-select__placeholder\">{{ placeholder() }}</span>\r\n } @else if (selectionMode() === 'single') {\r\n <span class=\"fui-tree-select__value\">{{ _getDisplayValue() }}</span>\r\n } @else {\r\n <div class=\"fui-tree-select__tags\">\r\n @for (tag of _getSelectedDisplayValues(); track tag) {\r\n <fui-badge [label]=\"tag\" size=\"sm\" variant=\"secondary\"></fui-badge>\r\n }\r\n </div>\r\n }\r\n <fui-icon class=\"fui-tree-select__arrow\" [name]=\"_panelOpen() ? 'caret-up' : 'caret-down'\" size=\"sm\"></fui-icon>\r\n</div>\r\n\r\n<!-- Panel (rendered always but hidden, moved to overlay when open) -->\r\n<div class=\"fui-tree-select__panel\" [id]=\"_treeId\" #panel [style.display]=\"_panelOpen() ? '' : 'none'\">\r\n @if (showSearch()) {\r\n <div class=\"fui-tree-select__search\">\r\n <input\r\n class=\"fui-tree-select__search-input\"\r\n type=\"text\"\r\n placeholder=\"Search...\"\r\n (input)=\"_onSearchInput($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </div>\r\n }\r\n <fui-tree\r\n [nodes]=\"nodes()\"\r\n [selectionMode]=\"_treeSelectionMode()\"\r\n [loadChildren]=\"loadChildren()\"\r\n [nodeTemplate]=\"nodeTemplate()\"\r\n [filter]=\"_searchFilter()\"\r\n [nodeIdPrefix]=\"_treeId\"\r\n (nodeSelect)=\"_onTreeSelect($event)\"\r\n (nodeUnselect)=\"_onTreeUnselect($event)\"\r\n (focusChange)=\"_onTreeFocusChange($event)\"\r\n >\r\n </fui-tree>\r\n</div>\r\n", styles: [".fui-tree-select{display:inline-flex;align-items:center;width:100%;min-height:40px;padding:8px 12px;border:
|
|
290
|
+
}, template: "<!-- Trigger area -->\r\n<div class=\"fui-tree-select__trigger\" #trigger>\r\n @if (empty()) {\r\n <span class=\"fui-tree-select__placeholder\">{{ placeholder() }}</span>\r\n } @else if (selectionMode() === 'single') {\r\n <span class=\"fui-tree-select__value\">{{ _getDisplayValue() }}</span>\r\n } @else {\r\n <div class=\"fui-tree-select__tags\">\r\n @for (tag of _getSelectedDisplayValues(); track tag) {\r\n <fui-badge [label]=\"tag\" size=\"sm\" variant=\"secondary\"></fui-badge>\r\n }\r\n </div>\r\n }\r\n <fui-icon class=\"fui-tree-select__arrow\" [name]=\"_panelOpen() ? 'caret-up' : 'caret-down'\" size=\"sm\"></fui-icon>\r\n</div>\r\n\r\n<!-- Panel (rendered always but hidden, moved to overlay when open) -->\r\n<div class=\"fui-tree-select__panel\" [id]=\"_treeId\" #panel [style.display]=\"_panelOpen() ? '' : 'none'\">\r\n @if (showSearch()) {\r\n <div class=\"fui-tree-select__search\">\r\n <input\r\n class=\"fui-tree-select__search-input\"\r\n type=\"text\"\r\n placeholder=\"Search...\"\r\n (input)=\"_onSearchInput($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </div>\r\n }\r\n <fui-tree\r\n [nodes]=\"nodes()\"\r\n [selectionMode]=\"_treeSelectionMode()\"\r\n [loadChildren]=\"loadChildren()\"\r\n [nodeTemplate]=\"nodeTemplate()\"\r\n [filter]=\"_searchFilter()\"\r\n [nodeIdPrefix]=\"_treeId\"\r\n (nodeSelect)=\"_onTreeSelect($event)\"\r\n (nodeUnselect)=\"_onTreeUnselect($event)\"\r\n (focusChange)=\"_onTreeFocusChange($event)\"\r\n >\r\n </fui-tree>\r\n</div>\r\n", styles: [".fui-tree-select{display:inline-flex;align-items:center;width:100%;min-height:40px;padding:8px 12px;border:var(--fui-border-width-sm) solid var(--fui-border-default);border-radius:var(--fui-radius-sm);background:var(--fui-field-bg);cursor:pointer;outline:none;font-family:var(--fui-font-sans);font-size:var(--fui-text-md);transition:border-color var(--fui-duration-base) var(--fui-ease-in-out)}.fui-tree-select:hover{border-color:var(--fui-primary-60)}.fui-tree-select:focus{outline:var(--fui-state-focus-ring-width) solid var(--fui-primary-60);outline-offset:-2px}.fui-tree-select--disabled{opacity:.5;pointer-events:none}.fui-tree-select--open{border-color:var(--fui-primary-60)}.fui-tree-select__trigger{display:flex;align-items:center;width:100%;gap:8px}.fui-tree-select__placeholder{color:var(--fui-text-disabled);flex:1}.fui-tree-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-tree-select__tags{display:flex;flex-wrap:wrap;gap:4px;flex:1}.fui-tree-select__arrow{flex-shrink:0;color:var(--fui-text-secondary);transition:transform var(--fui-duration-base) var(--fui-ease-in-out)}.fui-tree-select__panel{background:var(--fui-bg-default);border:var(--fui-border-width-sm) solid var(--fui-border-default);border-radius:var(--fui-radius-sm);box-shadow:var(--fui-shadow-lg);max-height:300px;overflow:auto}.fui-tree-select__search{padding:8px;border-bottom:var(--fui-border-width-sm) solid var(--fui-border-default)}.fui-tree-select__search-input{width:100%;padding:4px 8px;border:var(--fui-border-width-sm) solid var(--fui-border-default);border-radius:var(--fui-radius-sm);font-family:var(--fui-font-sans);font-size:var(--fui-text-base);outline:none;background:var(--fui-field-bg)}.fui-tree-select__search-input:focus{border-color:var(--fui-primary-60)}.fui-tree-select-backdrop{background:transparent}\n"] }]
|
|
291
291
|
}], ctorParameters: () => [], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], loadChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadChildren", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], displayField: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayField", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], trigger: [{
|
|
292
292
|
type: ViewChild,
|
|
293
293
|
args: ['trigger', { static: false }]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"raintonic-formaui-components-tree-select.mjs","sources":["../../../lib/components/tree-select/fui-tree-select.component.ts","../../../lib/components/tree-select/fui-tree-select.component.html","../../../lib/components/tree-select/raintonic-formaui-components-tree-select.ts"],"sourcesContent":["import {\r\n AfterViewInit,\r\n ChangeDetectionStrategy,\r\n Component,\r\n computed,\r\n ElementRef,\r\n forwardRef,\r\n inject,\r\n input,\r\n OnDestroy,\r\n output,\r\n signal,\r\n Signal,\r\n TemplateRef,\r\n ViewChild,\r\n ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';\r\nimport { Observable, Subject } from 'rxjs';\r\nimport { FUI_FORM_FIELD_CONTROL, FuiFormFieldControl } from '@raintonic/formaui/core';\r\nimport {\r\n injectNgControl,\r\n FuiPopupOverlayDirective,\r\n FuiFormControlSyncDirective,\r\n} from '@raintonic/formaui/cdk/form-field';\r\nimport {\r\n FuiTreeComponent,\r\n FuiTreeNode,\r\n FuiTreeNodeEvent,\r\n FuiTreeSelectionMode,\r\n} from '@raintonic/formaui/components/tree';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiBadgeComponent } from '@raintonic/formaui/components/badge';\r\nimport { FuiTreeSelectChange } from './tree-select.types';\r\n\r\nlet nextId = 0;\r\n\r\n@Component({\r\n selector: 'fui-tree-select',\r\n standalone: true,\r\n imports: [FuiTreeComponent, FuiIconComponent, FuiBadgeComponent],\r\n templateUrl: './fui-tree-select.component.html',\r\n styleUrl: './fui-tree-select.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n hostDirectives: [\r\n {\r\n directive: FuiPopupOverlayDirective,\r\n inputs: ['positions', 'panelClass', 'backdropClass', 'scrollStrategy', 'minWidthFromTrigger'],\r\n outputs: ['openedChange', 'escapeKey'],\r\n },\r\n FuiFormControlSyncDirective,\r\n ],\r\n providers: [\r\n { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FuiTreeSelectComponent), multi: true },\r\n { provide: FUI_FORM_FIELD_CONTROL, useExisting: forwardRef(() => FuiTreeSelectComponent) },\r\n ],\r\n host: {\r\n class: 'fui-tree-select',\r\n role: 'combobox',\r\n '[attr.aria-expanded]': '_panelOpen()',\r\n '[attr.aria-haspopup]': '\"tree\"',\r\n '[attr.aria-owns]': '_panelOpen() ? _treeId : null',\r\n '[attr.aria-activedescendant]': 'activeDescendant()',\r\n '[class.fui-tree-select--open]': '_panelOpen()',\r\n '[class.fui-tree-select--disabled]': 'disabled()',\r\n '(click)': 'toggle()',\r\n '(keydown)': '_onKeydown($event)',\r\n tabindex: '0',\r\n },\r\n})\r\n// No Validator interface: only Validators.required is applicable to tree-select,\r\n// and that is handled by the standard CVA + form integration path.\r\n// If a future public API adds minSelected / maxSelected / requiredLeafOnly inputs,\r\n// implement Validator at that point (mirror the time-picker pattern in Task 23).\r\nexport class FuiTreeSelectComponent<T = any>\r\n implements ControlValueAccessor, FuiFormFieldControl<T | T[]>, OnDestroy, AfterViewInit\r\n{\r\n // Public API\r\n readonly nodes = input.required<FuiTreeNode<T>[]>();\r\n readonly selectionMode = input<'single' | 'multi' | 'checkbox'>('single');\r\n readonly placeholderInput = input('', { alias: 'placeholder' });\r\n readonly showSearch = input(false);\r\n readonly loadChildren = input<((node: FuiTreeNode<T>) => Observable<FuiTreeNode<T>[]>) | null>(null);\r\n readonly nodeTemplate = input<TemplateRef<any> | null>(null);\r\n readonly displayField = input<string | ((node: FuiTreeNode<T>) => string) | null>(null);\r\n readonly disabledInput = input(false, { alias: 'disabled' });\r\n readonly readonlyInput = input(false, { alias: 'readonly' });\r\n\r\n readonly selectionChange = output<FuiTreeSelectChange<T>>();\r\n\r\n // FuiFormFieldControl implementation\r\n readonly stateChanges = new Subject<void>();\r\n private readonly _value = signal<T | T[] | null>(null);\r\n readonly value: Signal<T | T[] | null> = this._value;\r\n readonly placeholder = computed(() => this.placeholderInput());\r\n readonly focused = signal(false);\r\n readonly empty = computed(() => {\r\n const v = this._value();\r\n return v === null || v === undefined || (Array.isArray(v) && v.length === 0);\r\n });\r\n readonly required = signal(false);\r\n private readonly _disabled = signal(false);\r\n readonly disabled = computed(() => this._disabled() || this.disabledInput());\r\n readonly readonly = computed(() => this.readonlyInput());\r\n readonly errorState = signal(false);\r\n readonly controlType = 'fui-tree-select';\r\n readonly id = `fui-tree-select-${nextId++}`;\r\n\r\n // Internal\r\n /** Whether the panel is open — projected from FuiPopupOverlayDirective. */\r\n readonly _panelOpen = computed(() => this._popup.panelOpen());\r\n readonly _treeId = `${this.id}-tree`;\r\n readonly _searchFilter = signal('');\r\n\r\n private readonly _activeNodeId = signal<string | null>(null);\r\n /** ID of the tree-node currently highlighted via keyboard nav. Bound to aria-activedescendant. */\r\n readonly activeDescendant = computed(() => this._activeNodeId());\r\n private readonly _ngControlRef = injectNgControl();\r\n get ngControl(): NgControl | null {\r\n return this._ngControlRef.ngControl;\r\n }\r\n\r\n // Injected host directives\r\n private readonly _popup = inject(FuiPopupOverlayDirective);\r\n private readonly _formSync = inject(FuiFormControlSyncDirective);\r\n\r\n private readonly _elementRef = inject(ElementRef);\r\n\r\n // Track selected nodes internally\r\n readonly _selectedNodes = signal<FuiTreeNode<T>[]>([]);\r\n\r\n @ViewChild('trigger', { static: false }) trigger?: ElementRef<HTMLDivElement>;\r\n @ViewChild('panel', { static: false }) panel?: ElementRef<HTMLDivElement>;\r\n\r\n // CVA callbacks\r\n private _onChange: (value: any) => void = () => {\r\n /* noop */\r\n };\r\n private _onTouched: () => void = () => {\r\n /* noop */\r\n };\r\n\r\n constructor() {\r\n void Promise.resolve().then(() => {\r\n if (this._ngControlRef.ngControl) {\r\n this._ngControlRef.ngControl.valueAccessor = this;\r\n }\r\n });\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n // Wire popup-overlay directive\r\n this._popup.setTrigger(this.trigger ?? null);\r\n this._popup.setPanel(this.panel ?? null);\r\n this._popup.panelClass.set(['fui-tree-select-overlay-panel']);\r\n this._popup.backdropClass.set('fui-tree-select-backdrop');\r\n\r\n // Wire form-control-sync directive signals\r\n this._formSync.errorState.set(this.errorState);\r\n this._formSync.required.set(this.required);\r\n this._formSync.stateChanges.set(this.stateChanges);\r\n }\r\n\r\n // Methods\r\n /** Toggles the tree-select panel. No-op if disabled. */\r\n toggle(): void {\r\n if (this._panelOpen()) {\r\n this.close();\r\n } else {\r\n this.open();\r\n }\r\n }\r\n\r\n /** Opens the tree-select panel. No-op if disabled or already open. */\r\n open(): void {\r\n if (this.disabled() || this._panelOpen()) return;\r\n this.focused.set(true);\r\n this.stateChanges.next();\r\n this._popup.open();\r\n }\r\n\r\n /** Closes the tree-select panel, resets the search filter, and marks the control as touched. */\r\n close(): void {\r\n if (!this._panelOpen()) return;\r\n this._searchFilter.set('');\r\n this._popup.close();\r\n this.focused.set(false);\r\n this._onTouched();\r\n this.stateChanges.next();\r\n }\r\n\r\n /** Opens the panel when the form-field container is clicked. */\r\n onContainerClick(_event: MouseEvent): void {\r\n this.toggle();\r\n }\r\n\r\n /** Stores the space-separated list of IDs for the aria-describedby attribute. */\r\n setDescribedByIds(_ids: string[]): void {\r\n /* no-op for now */\r\n }\r\n\r\n // Tree selection handlers\r\n _onTreeSelect(event: FuiTreeNodeEvent<T>): void {\r\n const node = event.node;\r\n if (this.selectionMode() === 'single') {\r\n // Deselect all first, then select clicked\r\n this._deselectAll(this.nodes());\r\n node.selected = true;\r\n this._selectedNodes.set([node]);\r\n this._value.set(node.data);\r\n this._onChange(node.data);\r\n this.selectionChange.emit({ value: node, source: this });\r\n this.stateChanges.next();\r\n this.close();\r\n } else {\r\n node.selected = !node.selected;\r\n this._updateMultiSelection();\r\n }\r\n }\r\n\r\n _onTreeUnselect(event: FuiTreeNodeEvent<T>): void {\r\n event.node.selected = false;\r\n if (this.selectionMode() === 'single') {\r\n this._selectedNodes.set([]);\r\n this._value.set(null);\r\n this._onChange(null);\r\n } else {\r\n this._updateMultiSelection();\r\n }\r\n this.stateChanges.next();\r\n }\r\n\r\n _getDisplayValue(): string {\r\n const nodes = this._selectedNodes();\r\n if (nodes.length === 0) return '';\r\n return this._getNodeLabel(nodes[0]);\r\n }\r\n\r\n _getSelectedDisplayValues(): string[] {\r\n return this._selectedNodes().map((n) => this._getNodeLabel(n));\r\n }\r\n\r\n _onSearchInput(event: Event): void {\r\n const value = (event.target as HTMLInputElement).value;\r\n this._searchFilter.set(value);\r\n }\r\n\r\n /** Called when the embedded tree reports a keyboard focus change. Updates aria-activedescendant. */\r\n _onTreeFocusChange(nodeId: string | null): void {\r\n this._activeNodeId.set(nodeId);\r\n }\r\n\r\n _onKeydown(event: KeyboardEvent): void {\r\n if (event.key === 'Enter' || event.key === ' ') {\r\n if (!this._panelOpen()) {\r\n event.preventDefault();\r\n this.open();\r\n }\r\n } else if (event.key === 'Escape') {\r\n if (this._panelOpen()) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this.close();\r\n }\r\n }\r\n }\r\n\r\n readonly _treeSelectionMode = computed((): FuiTreeSelectionMode => {\r\n return this.selectionMode() as FuiTreeSelectionMode;\r\n });\r\n\r\n // CVA\r\n /** Sets the tree-select value from the form model and syncs node selection state. */\r\n writeValue(value: any): void {\r\n this._value.set(value);\r\n this._syncSelectedFromValue(value);\r\n this.stateChanges.next();\r\n }\r\n\r\n /** Registers the callback Angular calls when the value should propagate to the model. */\r\n registerOnChange(fn: any): void {\r\n this._onChange = fn;\r\n }\r\n\r\n /** Registers the callback Angular calls when the control should be marked as touched. */\r\n registerOnTouched(fn: any): void {\r\n this._onTouched = fn;\r\n }\r\n\r\n /** Enables or disables the control programmatically; mirrors the `disabled` form-control state. */\r\n setDisabledState(disabled: boolean): void {\r\n this._disabled.set(disabled);\r\n this.stateChanges.next();\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.stateChanges.complete();\r\n }\r\n\r\n // Private helpers\r\n private _getNodeLabel(node: FuiTreeNode<T>): string {\r\n const displayFn = this.displayField();\r\n if (typeof displayFn === 'function') return displayFn(node);\r\n if (typeof displayFn === 'string' && node.data && typeof node.data === 'object') {\r\n return String((node.data as any)[displayFn] ?? '');\r\n }\r\n return String(node.data ?? '');\r\n }\r\n\r\n private _deselectAll(nodes: FuiTreeNode<T>[]): void {\r\n for (const n of nodes) {\r\n n.selected = false;\r\n if (Array.isArray(n.children)) this._deselectAll(n.children);\r\n }\r\n }\r\n\r\n private _updateMultiSelection(): void {\r\n const selected = this._collectSelected(this.nodes());\r\n this._selectedNodes.set(selected);\r\n const values = selected.map((n) => n.data);\r\n this._value.set(values as any);\r\n this._onChange(values);\r\n this.selectionChange.emit({ value: selected, source: this });\r\n this.stateChanges.next();\r\n }\r\n\r\n private _collectSelected(nodes: FuiTreeNode<T>[]): FuiTreeNode<T>[] {\r\n const result: FuiTreeNode<T>[] = [];\r\n for (const n of nodes) {\r\n if (n.selected) result.push(n);\r\n if (Array.isArray(n.children)) result.push(...this._collectSelected(n.children));\r\n }\r\n return result;\r\n }\r\n\r\n private _syncSelectedFromValue(value: any): void {\r\n if (value === null || value === undefined) {\r\n this._deselectAll(this.nodes());\r\n this._selectedNodes.set([]);\r\n return;\r\n }\r\n // For now, leave nodes as-is since the consumer controls node.selected\r\n }\r\n}\r\n","<!-- Trigger area -->\r\n<div class=\"fui-tree-select__trigger\" #trigger>\r\n @if (empty()) {\r\n <span class=\"fui-tree-select__placeholder\">{{ placeholder() }}</span>\r\n } @else if (selectionMode() === 'single') {\r\n <span class=\"fui-tree-select__value\">{{ _getDisplayValue() }}</span>\r\n } @else {\r\n <div class=\"fui-tree-select__tags\">\r\n @for (tag of _getSelectedDisplayValues(); track tag) {\r\n <fui-badge [label]=\"tag\" size=\"sm\" variant=\"secondary\"></fui-badge>\r\n }\r\n </div>\r\n }\r\n <fui-icon class=\"fui-tree-select__arrow\" [name]=\"_panelOpen() ? 'caret-up' : 'caret-down'\" size=\"sm\"></fui-icon>\r\n</div>\r\n\r\n<!-- Panel (rendered always but hidden, moved to overlay when open) -->\r\n<div class=\"fui-tree-select__panel\" [id]=\"_treeId\" #panel [style.display]=\"_panelOpen() ? '' : 'none'\">\r\n @if (showSearch()) {\r\n <div class=\"fui-tree-select__search\">\r\n <input\r\n class=\"fui-tree-select__search-input\"\r\n type=\"text\"\r\n placeholder=\"Search...\"\r\n (input)=\"_onSearchInput($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </div>\r\n }\r\n <fui-tree\r\n [nodes]=\"nodes()\"\r\n [selectionMode]=\"_treeSelectionMode()\"\r\n [loadChildren]=\"loadChildren()\"\r\n [nodeTemplate]=\"nodeTemplate()\"\r\n [filter]=\"_searchFilter()\"\r\n [nodeIdPrefix]=\"_treeId\"\r\n (nodeSelect)=\"_onTreeSelect($event)\"\r\n (nodeUnselect)=\"_onTreeUnselect($event)\"\r\n (focusChange)=\"_onTreeFocusChange($event)\"\r\n >\r\n </fui-tree>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"raintonic-formaui-components-tree-select.mjs","sources":["../../../lib/components/tree-select/fui-tree-select.component.ts","../../../lib/components/tree-select/fui-tree-select.component.html","../../../lib/components/tree-select/raintonic-formaui-components-tree-select.ts"],"sourcesContent":["import {\r\n AfterViewInit,\r\n ChangeDetectionStrategy,\r\n Component,\r\n computed,\r\n ElementRef,\r\n forwardRef,\r\n inject,\r\n input,\r\n OnDestroy,\r\n output,\r\n signal,\r\n Signal,\r\n TemplateRef,\r\n ViewChild,\r\n ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';\r\nimport { Observable, Subject } from 'rxjs';\r\nimport { FUI_FORM_FIELD_CONTROL, FuiFormFieldControl } from '@raintonic/formaui/core';\r\nimport {\r\n injectNgControl,\r\n FuiPopupOverlayDirective,\r\n FuiFormControlSyncDirective,\r\n} from '@raintonic/formaui/cdk/form-field';\r\nimport {\r\n FuiTreeComponent,\r\n FuiTreeNode,\r\n FuiTreeNodeEvent,\r\n FuiTreeSelectionMode,\r\n} from '@raintonic/formaui/components/tree';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiBadgeComponent } from '@raintonic/formaui/components/badge';\r\nimport { FuiTreeSelectChange } from './tree-select.types';\r\n\r\nlet nextId = 0;\r\n\r\n@Component({\r\n selector: 'fui-tree-select',\r\n standalone: true,\r\n imports: [FuiTreeComponent, FuiIconComponent, FuiBadgeComponent],\r\n templateUrl: './fui-tree-select.component.html',\r\n styleUrl: './fui-tree-select.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n hostDirectives: [\r\n {\r\n directive: FuiPopupOverlayDirective,\r\n inputs: ['positions', 'panelClass', 'backdropClass', 'scrollStrategy', 'minWidthFromTrigger'],\r\n outputs: ['openedChange', 'escapeKey'],\r\n },\r\n FuiFormControlSyncDirective,\r\n ],\r\n providers: [\r\n { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FuiTreeSelectComponent), multi: true },\r\n { provide: FUI_FORM_FIELD_CONTROL, useExisting: forwardRef(() => FuiTreeSelectComponent) },\r\n ],\r\n host: {\r\n class: 'fui-tree-select',\r\n role: 'combobox',\r\n '[attr.aria-expanded]': '_panelOpen()',\r\n '[attr.aria-haspopup]': '\"tree\"',\r\n '[attr.aria-owns]': '_panelOpen() ? _treeId : null',\r\n '[attr.aria-activedescendant]': 'activeDescendant()',\r\n '[class.fui-tree-select--open]': '_panelOpen()',\r\n '[class.fui-tree-select--disabled]': 'disabled()',\r\n '(click)': 'toggle()',\r\n '(keydown)': '_onKeydown($event)',\r\n tabindex: '0',\r\n },\r\n})\r\n// No Validator interface: only Validators.required is applicable to tree-select,\r\n// and that is handled by the standard CVA + form integration path.\r\n// If a future public API adds minSelected / maxSelected / requiredLeafOnly inputs,\r\n// implement Validator at that point (mirror the time-picker pattern in Task 23).\r\nexport class FuiTreeSelectComponent<T = any>\r\n implements ControlValueAccessor, FuiFormFieldControl<T | T[]>, OnDestroy, AfterViewInit\r\n{\r\n // Public API\r\n readonly nodes = input.required<FuiTreeNode<T>[]>();\r\n readonly selectionMode = input<'single' | 'multi' | 'checkbox'>('single');\r\n readonly placeholderInput = input('', { alias: 'placeholder' });\r\n readonly showSearch = input(false);\r\n readonly loadChildren = input<((node: FuiTreeNode<T>) => Observable<FuiTreeNode<T>[]>) | null>(null);\r\n readonly nodeTemplate = input<TemplateRef<any> | null>(null);\r\n readonly displayField = input<string | ((node: FuiTreeNode<T>) => string) | null>(null);\r\n readonly disabledInput = input(false, { alias: 'disabled' });\r\n readonly readonlyInput = input(false, { alias: 'readonly' });\r\n\r\n readonly selectionChange = output<FuiTreeSelectChange<T>>();\r\n\r\n // FuiFormFieldControl implementation\r\n readonly stateChanges = new Subject<void>();\r\n private readonly _value = signal<T | T[] | null>(null);\r\n readonly value: Signal<T | T[] | null> = this._value;\r\n readonly placeholder = computed(() => this.placeholderInput());\r\n readonly focused = signal(false);\r\n readonly empty = computed(() => {\r\n const v = this._value();\r\n return v === null || v === undefined || (Array.isArray(v) && v.length === 0);\r\n });\r\n readonly required = signal(false);\r\n private readonly _disabled = signal(false);\r\n readonly disabled = computed(() => this._disabled() || this.disabledInput());\r\n readonly readonly = computed(() => this.readonlyInput());\r\n readonly errorState = signal(false);\r\n readonly controlType = 'fui-tree-select';\r\n readonly id = `fui-tree-select-${nextId++}`;\r\n\r\n // Internal\r\n /** Whether the panel is open — projected from FuiPopupOverlayDirective. */\r\n readonly _panelOpen = computed(() => this._popup.panelOpen());\r\n readonly _treeId = `${this.id}-tree`;\r\n readonly _searchFilter = signal('');\r\n\r\n private readonly _activeNodeId = signal<string | null>(null);\r\n /** ID of the tree-node currently highlighted via keyboard nav. Bound to aria-activedescendant. */\r\n readonly activeDescendant = computed(() => this._activeNodeId());\r\n private readonly _ngControlRef = injectNgControl();\r\n get ngControl(): NgControl | null {\r\n return this._ngControlRef.ngControl;\r\n }\r\n\r\n // Injected host directives\r\n private readonly _popup = inject(FuiPopupOverlayDirective);\r\n private readonly _formSync = inject(FuiFormControlSyncDirective);\r\n\r\n private readonly _elementRef = inject(ElementRef);\r\n\r\n // Track selected nodes internally\r\n readonly _selectedNodes = signal<FuiTreeNode<T>[]>([]);\r\n\r\n @ViewChild('trigger', { static: false }) trigger?: ElementRef<HTMLDivElement>;\r\n @ViewChild('panel', { static: false }) panel?: ElementRef<HTMLDivElement>;\r\n\r\n // CVA callbacks\r\n private _onChange: (value: any) => void = () => {\r\n /* noop */\r\n };\r\n private _onTouched: () => void = () => {\r\n /* noop */\r\n };\r\n\r\n constructor() {\r\n void Promise.resolve().then(() => {\r\n if (this._ngControlRef.ngControl) {\r\n this._ngControlRef.ngControl.valueAccessor = this;\r\n }\r\n });\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n // Wire popup-overlay directive\r\n this._popup.setTrigger(this.trigger ?? null);\r\n this._popup.setPanel(this.panel ?? null);\r\n this._popup.panelClass.set(['fui-tree-select-overlay-panel']);\r\n this._popup.backdropClass.set('fui-tree-select-backdrop');\r\n\r\n // Wire form-control-sync directive signals\r\n this._formSync.errorState.set(this.errorState);\r\n this._formSync.required.set(this.required);\r\n this._formSync.stateChanges.set(this.stateChanges);\r\n }\r\n\r\n // Methods\r\n /** Toggles the tree-select panel. No-op if disabled. */\r\n toggle(): void {\r\n if (this._panelOpen()) {\r\n this.close();\r\n } else {\r\n this.open();\r\n }\r\n }\r\n\r\n /** Opens the tree-select panel. No-op if disabled or already open. */\r\n open(): void {\r\n if (this.disabled() || this._panelOpen()) return;\r\n this.focused.set(true);\r\n this.stateChanges.next();\r\n this._popup.open();\r\n }\r\n\r\n /** Closes the tree-select panel, resets the search filter, and marks the control as touched. */\r\n close(): void {\r\n if (!this._panelOpen()) return;\r\n this._searchFilter.set('');\r\n this._popup.close();\r\n this.focused.set(false);\r\n this._onTouched();\r\n this.stateChanges.next();\r\n }\r\n\r\n /** Opens the panel when the form-field container is clicked. */\r\n onContainerClick(_event: MouseEvent): void {\r\n this.toggle();\r\n }\r\n\r\n /** Stores the space-separated list of IDs for the aria-describedby attribute. */\r\n setDescribedByIds(_ids: string[]): void {\r\n /* no-op for now */\r\n }\r\n\r\n // Tree selection handlers\r\n _onTreeSelect(event: FuiTreeNodeEvent<T>): void {\r\n const node = event.node;\r\n if (this.selectionMode() === 'single') {\r\n // Deselect all first, then select clicked\r\n this._deselectAll(this.nodes());\r\n node.selected = true;\r\n this._selectedNodes.set([node]);\r\n this._value.set(node.data);\r\n this._onChange(node.data);\r\n this.selectionChange.emit({ value: node, source: this });\r\n this.stateChanges.next();\r\n this.close();\r\n } else {\r\n node.selected = !node.selected;\r\n this._updateMultiSelection();\r\n }\r\n }\r\n\r\n _onTreeUnselect(event: FuiTreeNodeEvent<T>): void {\r\n event.node.selected = false;\r\n if (this.selectionMode() === 'single') {\r\n this._selectedNodes.set([]);\r\n this._value.set(null);\r\n this._onChange(null);\r\n } else {\r\n this._updateMultiSelection();\r\n }\r\n this.stateChanges.next();\r\n }\r\n\r\n _getDisplayValue(): string {\r\n const nodes = this._selectedNodes();\r\n if (nodes.length === 0) return '';\r\n return this._getNodeLabel(nodes[0]);\r\n }\r\n\r\n _getSelectedDisplayValues(): string[] {\r\n return this._selectedNodes().map((n) => this._getNodeLabel(n));\r\n }\r\n\r\n _onSearchInput(event: Event): void {\r\n const value = (event.target as HTMLInputElement).value;\r\n this._searchFilter.set(value);\r\n }\r\n\r\n /** Called when the embedded tree reports a keyboard focus change. Updates aria-activedescendant. */\r\n _onTreeFocusChange(nodeId: string | null): void {\r\n this._activeNodeId.set(nodeId);\r\n }\r\n\r\n _onKeydown(event: KeyboardEvent): void {\r\n if (event.key === 'Enter' || event.key === ' ') {\r\n if (!this._panelOpen()) {\r\n event.preventDefault();\r\n this.open();\r\n }\r\n } else if (event.key === 'Escape') {\r\n if (this._panelOpen()) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this.close();\r\n }\r\n }\r\n }\r\n\r\n readonly _treeSelectionMode = computed((): FuiTreeSelectionMode => {\r\n return this.selectionMode() as FuiTreeSelectionMode;\r\n });\r\n\r\n // CVA\r\n /** Sets the tree-select value from the form model and syncs node selection state. */\r\n writeValue(value: any): void {\r\n this._value.set(value);\r\n this._syncSelectedFromValue(value);\r\n this.stateChanges.next();\r\n }\r\n\r\n /** Registers the callback Angular calls when the value should propagate to the model. */\r\n registerOnChange(fn: any): void {\r\n this._onChange = fn;\r\n }\r\n\r\n /** Registers the callback Angular calls when the control should be marked as touched. */\r\n registerOnTouched(fn: any): void {\r\n this._onTouched = fn;\r\n }\r\n\r\n /** Enables or disables the control programmatically; mirrors the `disabled` form-control state. */\r\n setDisabledState(disabled: boolean): void {\r\n this._disabled.set(disabled);\r\n this.stateChanges.next();\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.stateChanges.complete();\r\n }\r\n\r\n // Private helpers\r\n private _getNodeLabel(node: FuiTreeNode<T>): string {\r\n const displayFn = this.displayField();\r\n if (typeof displayFn === 'function') return displayFn(node);\r\n if (typeof displayFn === 'string' && node.data && typeof node.data === 'object') {\r\n return String((node.data as any)[displayFn] ?? '');\r\n }\r\n return String(node.data ?? '');\r\n }\r\n\r\n private _deselectAll(nodes: FuiTreeNode<T>[]): void {\r\n for (const n of nodes) {\r\n n.selected = false;\r\n if (Array.isArray(n.children)) this._deselectAll(n.children);\r\n }\r\n }\r\n\r\n private _updateMultiSelection(): void {\r\n const selected = this._collectSelected(this.nodes());\r\n this._selectedNodes.set(selected);\r\n const values = selected.map((n) => n.data);\r\n this._value.set(values as any);\r\n this._onChange(values);\r\n this.selectionChange.emit({ value: selected, source: this });\r\n this.stateChanges.next();\r\n }\r\n\r\n private _collectSelected(nodes: FuiTreeNode<T>[]): FuiTreeNode<T>[] {\r\n const result: FuiTreeNode<T>[] = [];\r\n for (const n of nodes) {\r\n if (n.selected) result.push(n);\r\n if (Array.isArray(n.children)) result.push(...this._collectSelected(n.children));\r\n }\r\n return result;\r\n }\r\n\r\n private _syncSelectedFromValue(value: any): void {\r\n if (value === null || value === undefined) {\r\n this._deselectAll(this.nodes());\r\n this._selectedNodes.set([]);\r\n return;\r\n }\r\n // For now, leave nodes as-is since the consumer controls node.selected\r\n }\r\n}\r\n","<!-- Trigger area -->\r\n<div class=\"fui-tree-select__trigger\" #trigger>\r\n @if (empty()) {\r\n <span class=\"fui-tree-select__placeholder\">{{ placeholder() }}</span>\r\n } @else if (selectionMode() === 'single') {\r\n <span class=\"fui-tree-select__value\">{{ _getDisplayValue() }}</span>\r\n } @else {\r\n <div class=\"fui-tree-select__tags\">\r\n @for (tag of _getSelectedDisplayValues(); track tag) {\r\n <fui-badge [label]=\"tag\" size=\"sm\" variant=\"secondary\"></fui-badge>\r\n }\r\n </div>\r\n }\r\n <fui-icon class=\"fui-tree-select__arrow\" [name]=\"_panelOpen() ? 'caret-up' : 'caret-down'\" size=\"sm\"></fui-icon>\r\n</div>\r\n\r\n<!-- Panel (rendered always but hidden, moved to overlay when open) -->\r\n<div class=\"fui-tree-select__panel\" [id]=\"_treeId\" #panel [style.display]=\"_panelOpen() ? '' : 'none'\">\r\n @if (showSearch()) {\r\n <div class=\"fui-tree-select__search\">\r\n <input\r\n class=\"fui-tree-select__search-input\"\r\n type=\"text\"\r\n placeholder=\"Search...\"\r\n (input)=\"_onSearchInput($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </div>\r\n }\r\n <fui-tree\r\n [nodes]=\"nodes()\"\r\n [selectionMode]=\"_treeSelectionMode()\"\r\n [loadChildren]=\"loadChildren()\"\r\n [nodeTemplate]=\"nodeTemplate()\"\r\n [filter]=\"_searchFilter()\"\r\n [nodeIdPrefix]=\"_treeId\"\r\n (nodeSelect)=\"_onTreeSelect($event)\"\r\n (nodeUnselect)=\"_onTreeUnselect($event)\"\r\n (focusChange)=\"_onTreeFocusChange($event)\"\r\n >\r\n </fui-tree>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -115,13 +115,13 @@ class FuiTreeTableComponent {
|
|
|
115
115
|
return field.split('.').reduce((obj, key) => obj?.[key], row);
|
|
116
116
|
}
|
|
117
117
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTreeTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
118
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTreeTableComponent, isStandalone: true, selector: "fui-tree-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, enableRowHighlight: { classPropertyName: "enableRowHighlight", publicName: "enableRowHighlight", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, loadChildren: { classPropertyName: "loadChildren", publicName: "loadChildren", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", filtersChange: "filtersChange", rowDblClick: "rowDblClick", rowExpand: "rowExpand", rowCollapse: "rowCollapse" }, host: { classAttribute: "fui-tree-table" }, ngImport: i0, template: "<div class=\"fui-tree-table__wrapper\">\r\n <table class=\"fui-tree-table__table\">\r\n <thead class=\"fui-tree-table__head\" [class.fui-tree-table__head--sticky]=\"config().headerSticky\">\r\n <tr class=\"fui-tree-table__header-row\">\r\n @for (header of config().headers; track header.field) {\r\n <th\r\n class=\"fui-tree-table__header-cell\"\r\n [class.fui-tree-table__header-cell--sortable]=\"header.hasSort\"\r\n (click)=\"header.hasSort ? onSortColumn(header.field) : null\"\r\n >\r\n <div class=\"fui-tree-table__header-content\">\r\n <span>{{ header.label }}</span>\r\n @if (header.hasSort) {\r\n @if (sort()?.field === header.field) {\r\n <fui-icon [name]=\"sort()?.direction === 'ASC' ? 'caret-up' : 'caret-down'\" size=\"sm\"></fui-icon>\r\n }\r\n }\r\n </div>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody class=\"fui-tree-table__body\">\r\n @if (flatRows().length === 0) {\r\n <tr class=\"fui-tree-table__empty-row\">\r\n <td [attr.colspan]=\"config().headers.length\" class=\"fui-tree-table__empty-cell\">\r\n {{ resolvedEmptyMessage() }}\r\n </td>\r\n </tr>\r\n }\r\n @for (flatRow of flatRows(); track flatRow._flatIndex) {\r\n <tr\r\n class=\"fui-tree-table__row\"\r\n [class.fui-tree-table__row--selected]=\"flatRow.selected\"\r\n [class.fui-tree-table__row--disabled]=\"flatRow.disabled\"\r\n [class.fui-tree-table__row--highlight]=\"enableRowHighlight()\"\r\n [attr.aria-level]=\"flatRow.level + 1\"\r\n [attr.aria-expanded]=\"flatRow.expandable ? flatRow.expanded : null\"\r\n (dblclick)=\"rowDblClick.emit(flatRow.data)\"\r\n >\r\n @for (header of config().headers; track header.field) {\r\n <td class=\"fui-tree-table__cell\">\r\n @if (header.field === treeColumnField()) {\r\n <div class=\"fui-tree-table__tree-cell\" [style.padding-left.px]=\"flatRow.level * indentPx()\">\r\n <button\r\n class=\"fui-tree-table__expand-toggle\"\r\n [class.fui-tree-table__expand-toggle--hidden]=\"!flatRow.expandable\"\r\n (click)=\"onToggleRow(flatRow); $event.stopPropagation()\"\r\n type=\"button\"\r\n tabindex=\"-1\"\r\n >\r\n @if (flatRow.loading) {\r\n <fui-icon name=\"spinner\" [spin]=\"true\" size=\"sm\"></fui-icon>\r\n } @else {\r\n <fui-icon [name]=\"flatRow.expanded ? 'caret-down' : 'caret-right'\" size=\"sm\"></fui-icon>\r\n }\r\n </button>\r\n <span class=\"fui-tree-table__cell-text\">{{ getCellValue(flatRow.data, header.field) }}</span>\r\n </div>\r\n } @else {\r\n {{ getCellValue(flatRow.data, header.field) }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n", styles: [".fui-tree-table{display:block;width:100%;font-family:var(--fui-font-
|
|
118
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTreeTableComponent, isStandalone: true, selector: "fui-tree-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, enableRowHighlight: { classPropertyName: "enableRowHighlight", publicName: "enableRowHighlight", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, loadChildren: { classPropertyName: "loadChildren", publicName: "loadChildren", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", filtersChange: "filtersChange", rowDblClick: "rowDblClick", rowExpand: "rowExpand", rowCollapse: "rowCollapse" }, host: { classAttribute: "fui-tree-table" }, ngImport: i0, template: "<div class=\"fui-tree-table__wrapper\">\r\n <table class=\"fui-tree-table__table\">\r\n <thead class=\"fui-tree-table__head\" [class.fui-tree-table__head--sticky]=\"config().headerSticky\">\r\n <tr class=\"fui-tree-table__header-row\">\r\n @for (header of config().headers; track header.field) {\r\n <th\r\n class=\"fui-tree-table__header-cell\"\r\n [class.fui-tree-table__header-cell--sortable]=\"header.hasSort\"\r\n (click)=\"header.hasSort ? onSortColumn(header.field) : null\"\r\n >\r\n <div class=\"fui-tree-table__header-content\">\r\n <span>{{ header.label }}</span>\r\n @if (header.hasSort) {\r\n @if (sort()?.field === header.field) {\r\n <fui-icon [name]=\"sort()?.direction === 'ASC' ? 'caret-up' : 'caret-down'\" size=\"sm\"></fui-icon>\r\n }\r\n }\r\n </div>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody class=\"fui-tree-table__body\">\r\n @if (flatRows().length === 0) {\r\n <tr class=\"fui-tree-table__empty-row\">\r\n <td [attr.colspan]=\"config().headers.length\" class=\"fui-tree-table__empty-cell\">\r\n {{ resolvedEmptyMessage() }}\r\n </td>\r\n </tr>\r\n }\r\n @for (flatRow of flatRows(); track flatRow._flatIndex) {\r\n <tr\r\n class=\"fui-tree-table__row\"\r\n [class.fui-tree-table__row--selected]=\"flatRow.selected\"\r\n [class.fui-tree-table__row--disabled]=\"flatRow.disabled\"\r\n [class.fui-tree-table__row--highlight]=\"enableRowHighlight()\"\r\n [attr.aria-level]=\"flatRow.level + 1\"\r\n [attr.aria-expanded]=\"flatRow.expandable ? flatRow.expanded : null\"\r\n (dblclick)=\"rowDblClick.emit(flatRow.data)\"\r\n >\r\n @for (header of config().headers; track header.field) {\r\n <td class=\"fui-tree-table__cell\">\r\n @if (header.field === treeColumnField()) {\r\n <div class=\"fui-tree-table__tree-cell\" [style.padding-left.px]=\"flatRow.level * indentPx()\">\r\n <button\r\n class=\"fui-tree-table__expand-toggle\"\r\n [class.fui-tree-table__expand-toggle--hidden]=\"!flatRow.expandable\"\r\n (click)=\"onToggleRow(flatRow); $event.stopPropagation()\"\r\n type=\"button\"\r\n tabindex=\"-1\"\r\n >\r\n @if (flatRow.loading) {\r\n <fui-icon name=\"spinner\" [spin]=\"true\" size=\"sm\"></fui-icon>\r\n } @else {\r\n <fui-icon [name]=\"flatRow.expanded ? 'caret-down' : 'caret-right'\" size=\"sm\"></fui-icon>\r\n }\r\n </button>\r\n <span class=\"fui-tree-table__cell-text\">{{ getCellValue(flatRow.data, header.field) }}</span>\r\n </div>\r\n } @else {\r\n {{ getCellValue(flatRow.data, header.field) }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n", styles: [".fui-tree-table{display:block;width:100%;font-family:var(--fui-font-sans);font-size:var(--fui-text-md);color:var(--fui-text-primary)}.fui-tree-table__wrapper{overflow:auto;border:var(--fui-border-width-sm) solid var(--fui-border-default);border-radius:var(--fui-radius-sm)}.fui-tree-table__table{width:100%;border-collapse:collapse}.fui-tree-table__head--sticky{position:sticky;top:0;z-index:1}.fui-tree-table__header-row{background-color:var(--fui-bg-default)}.fui-tree-table__header-cell{padding:12px 16px;text-align:left;font-weight:var(--fui-weight-semibold);font-size:var(--fui-text-base);color:var(--fui-text-secondary);border-bottom:var(--fui-border-width-sm) solid var(--fui-border-default);white-space:nowrap}.fui-tree-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.fui-tree-table__header-cell--sortable:hover{background-color:var(--fui-bg-subtle)}.fui-tree-table__header-content{display:flex;align-items:center;gap:4px}.fui-tree-table__row{border-bottom:var(--fui-border-width-sm) solid var(--fui-border-default);transition:background-color var(--fui-duration-base) var(--fui-ease-in-out)}.fui-tree-table__row--highlight:hover{background-color:var(--fui-bg-subtle)}.fui-tree-table__row--selected{background-color:var(--fui-primary-10)}.fui-tree-table__row--disabled{opacity:.5;pointer-events:none}.fui-tree-table__cell{padding:8px 16px;vertical-align:middle}.fui-tree-table__tree-cell{display:flex;align-items:center;gap:4px}.fui-tree-table__expand-toggle{all:unset;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;border-radius:var(--fui-radius-sm);cursor:pointer}.fui-tree-table__expand-toggle--hidden{visibility:hidden}.fui-tree-table__expand-toggle:hover{background-color:var(--fui-bg-subtle)}.fui-tree-table__cell-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-tree-table__empty-cell{padding:32px 16px;text-align:center;color:var(--fui-text-disabled)}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
119
119
|
}
|
|
120
120
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTreeTableComponent, decorators: [{
|
|
121
121
|
type: Component,
|
|
122
122
|
args: [{ selector: 'fui-tree-table', standalone: true, imports: [FuiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
123
123
|
class: 'fui-tree-table',
|
|
124
|
-
}, template: "<div class=\"fui-tree-table__wrapper\">\r\n <table class=\"fui-tree-table__table\">\r\n <thead class=\"fui-tree-table__head\" [class.fui-tree-table__head--sticky]=\"config().headerSticky\">\r\n <tr class=\"fui-tree-table__header-row\">\r\n @for (header of config().headers; track header.field) {\r\n <th\r\n class=\"fui-tree-table__header-cell\"\r\n [class.fui-tree-table__header-cell--sortable]=\"header.hasSort\"\r\n (click)=\"header.hasSort ? onSortColumn(header.field) : null\"\r\n >\r\n <div class=\"fui-tree-table__header-content\">\r\n <span>{{ header.label }}</span>\r\n @if (header.hasSort) {\r\n @if (sort()?.field === header.field) {\r\n <fui-icon [name]=\"sort()?.direction === 'ASC' ? 'caret-up' : 'caret-down'\" size=\"sm\"></fui-icon>\r\n }\r\n }\r\n </div>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody class=\"fui-tree-table__body\">\r\n @if (flatRows().length === 0) {\r\n <tr class=\"fui-tree-table__empty-row\">\r\n <td [attr.colspan]=\"config().headers.length\" class=\"fui-tree-table__empty-cell\">\r\n {{ resolvedEmptyMessage() }}\r\n </td>\r\n </tr>\r\n }\r\n @for (flatRow of flatRows(); track flatRow._flatIndex) {\r\n <tr\r\n class=\"fui-tree-table__row\"\r\n [class.fui-tree-table__row--selected]=\"flatRow.selected\"\r\n [class.fui-tree-table__row--disabled]=\"flatRow.disabled\"\r\n [class.fui-tree-table__row--highlight]=\"enableRowHighlight()\"\r\n [attr.aria-level]=\"flatRow.level + 1\"\r\n [attr.aria-expanded]=\"flatRow.expandable ? flatRow.expanded : null\"\r\n (dblclick)=\"rowDblClick.emit(flatRow.data)\"\r\n >\r\n @for (header of config().headers; track header.field) {\r\n <td class=\"fui-tree-table__cell\">\r\n @if (header.field === treeColumnField()) {\r\n <div class=\"fui-tree-table__tree-cell\" [style.padding-left.px]=\"flatRow.level * indentPx()\">\r\n <button\r\n class=\"fui-tree-table__expand-toggle\"\r\n [class.fui-tree-table__expand-toggle--hidden]=\"!flatRow.expandable\"\r\n (click)=\"onToggleRow(flatRow); $event.stopPropagation()\"\r\n type=\"button\"\r\n tabindex=\"-1\"\r\n >\r\n @if (flatRow.loading) {\r\n <fui-icon name=\"spinner\" [spin]=\"true\" size=\"sm\"></fui-icon>\r\n } @else {\r\n <fui-icon [name]=\"flatRow.expanded ? 'caret-down' : 'caret-right'\" size=\"sm\"></fui-icon>\r\n }\r\n </button>\r\n <span class=\"fui-tree-table__cell-text\">{{ getCellValue(flatRow.data, header.field) }}</span>\r\n </div>\r\n } @else {\r\n {{ getCellValue(flatRow.data, header.field) }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n", styles: [".fui-tree-table{display:block;width:100%;font-family:var(--fui-font-
|
|
124
|
+
}, template: "<div class=\"fui-tree-table__wrapper\">\r\n <table class=\"fui-tree-table__table\">\r\n <thead class=\"fui-tree-table__head\" [class.fui-tree-table__head--sticky]=\"config().headerSticky\">\r\n <tr class=\"fui-tree-table__header-row\">\r\n @for (header of config().headers; track header.field) {\r\n <th\r\n class=\"fui-tree-table__header-cell\"\r\n [class.fui-tree-table__header-cell--sortable]=\"header.hasSort\"\r\n (click)=\"header.hasSort ? onSortColumn(header.field) : null\"\r\n >\r\n <div class=\"fui-tree-table__header-content\">\r\n <span>{{ header.label }}</span>\r\n @if (header.hasSort) {\r\n @if (sort()?.field === header.field) {\r\n <fui-icon [name]=\"sort()?.direction === 'ASC' ? 'caret-up' : 'caret-down'\" size=\"sm\"></fui-icon>\r\n }\r\n }\r\n </div>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody class=\"fui-tree-table__body\">\r\n @if (flatRows().length === 0) {\r\n <tr class=\"fui-tree-table__empty-row\">\r\n <td [attr.colspan]=\"config().headers.length\" class=\"fui-tree-table__empty-cell\">\r\n {{ resolvedEmptyMessage() }}\r\n </td>\r\n </tr>\r\n }\r\n @for (flatRow of flatRows(); track flatRow._flatIndex) {\r\n <tr\r\n class=\"fui-tree-table__row\"\r\n [class.fui-tree-table__row--selected]=\"flatRow.selected\"\r\n [class.fui-tree-table__row--disabled]=\"flatRow.disabled\"\r\n [class.fui-tree-table__row--highlight]=\"enableRowHighlight()\"\r\n [attr.aria-level]=\"flatRow.level + 1\"\r\n [attr.aria-expanded]=\"flatRow.expandable ? flatRow.expanded : null\"\r\n (dblclick)=\"rowDblClick.emit(flatRow.data)\"\r\n >\r\n @for (header of config().headers; track header.field) {\r\n <td class=\"fui-tree-table__cell\">\r\n @if (header.field === treeColumnField()) {\r\n <div class=\"fui-tree-table__tree-cell\" [style.padding-left.px]=\"flatRow.level * indentPx()\">\r\n <button\r\n class=\"fui-tree-table__expand-toggle\"\r\n [class.fui-tree-table__expand-toggle--hidden]=\"!flatRow.expandable\"\r\n (click)=\"onToggleRow(flatRow); $event.stopPropagation()\"\r\n type=\"button\"\r\n tabindex=\"-1\"\r\n >\r\n @if (flatRow.loading) {\r\n <fui-icon name=\"spinner\" [spin]=\"true\" size=\"sm\"></fui-icon>\r\n } @else {\r\n <fui-icon [name]=\"flatRow.expanded ? 'caret-down' : 'caret-right'\" size=\"sm\"></fui-icon>\r\n }\r\n </button>\r\n <span class=\"fui-tree-table__cell-text\">{{ getCellValue(flatRow.data, header.field) }}</span>\r\n </div>\r\n } @else {\r\n {{ getCellValue(flatRow.data, header.field) }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n", styles: [".fui-tree-table{display:block;width:100%;font-family:var(--fui-font-sans);font-size:var(--fui-text-md);color:var(--fui-text-primary)}.fui-tree-table__wrapper{overflow:auto;border:var(--fui-border-width-sm) solid var(--fui-border-default);border-radius:var(--fui-radius-sm)}.fui-tree-table__table{width:100%;border-collapse:collapse}.fui-tree-table__head--sticky{position:sticky;top:0;z-index:1}.fui-tree-table__header-row{background-color:var(--fui-bg-default)}.fui-tree-table__header-cell{padding:12px 16px;text-align:left;font-weight:var(--fui-weight-semibold);font-size:var(--fui-text-base);color:var(--fui-text-secondary);border-bottom:var(--fui-border-width-sm) solid var(--fui-border-default);white-space:nowrap}.fui-tree-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.fui-tree-table__header-cell--sortable:hover{background-color:var(--fui-bg-subtle)}.fui-tree-table__header-content{display:flex;align-items:center;gap:4px}.fui-tree-table__row{border-bottom:var(--fui-border-width-sm) solid var(--fui-border-default);transition:background-color var(--fui-duration-base) var(--fui-ease-in-out)}.fui-tree-table__row--highlight:hover{background-color:var(--fui-bg-subtle)}.fui-tree-table__row--selected{background-color:var(--fui-primary-10)}.fui-tree-table__row--disabled{opacity:.5;pointer-events:none}.fui-tree-table__cell{padding:8px 16px;vertical-align:middle}.fui-tree-table__tree-cell{display:flex;align-items:center;gap:4px}.fui-tree-table__expand-toggle{all:unset;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;border-radius:var(--fui-radius-sm);cursor:pointer}.fui-tree-table__expand-toggle--hidden{visibility:hidden}.fui-tree-table__expand-toggle:hover{background-color:var(--fui-bg-subtle)}.fui-tree-table__cell-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-tree-table__empty-cell{padding:32px 16px;text-align:center;color:var(--fui-text-disabled)}\n"] }]
|
|
125
125
|
}], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], enableRowHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRowHighlight", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }], loadChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadChildren", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filtersChange: [{ type: i0.Output, args: ["filtersChange"] }], rowDblClick: [{ type: i0.Output, args: ["rowDblClick"] }], rowExpand: [{ type: i0.Output, args: ["rowExpand"] }], rowCollapse: [{ type: i0.Output, args: ["rowCollapse"] }] } });
|
|
126
126
|
|
|
127
127
|
/**
|