@dev-tcloud/tcloud-ui 7.2.1 → 7.2.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/docs/tcloud-ui-navbar.md
CHANGED
|
@@ -77,8 +77,9 @@ Inputs:
|
|
|
77
77
|
|
|
78
78
|
| Nome | Tipo | Descricao | Valor Default |
|
|
79
79
|
|------|------|-----------|---------------|
|
|
80
|
-
| avatarSrc | `string?` | Caminho da imagem do avatar. | `undefined` |
|
|
80
|
+
| avatarSrc | `string?` | Caminho da imagem do avatar. Quando ausente, usa `avatarIcon`. | `undefined` |
|
|
81
81
|
| avatarAlt | `string` | Texto alternativo do avatar. | `''` |
|
|
82
|
+
| avatarIcon | `string` | Icone exibido no avatar (circulo cinza) quando nao ha `avatarSrc`. | `'fas fa-user'` |
|
|
82
83
|
| name | `string` | Nome do usuario. | `''` |
|
|
83
84
|
| role | `string` | Papel/subtitulo do usuario. | `''` |
|
|
84
85
|
| isMenuExpanded | `boolean` | Mostra nome/papel e o botao de sair. | `true` |
|
|
@@ -9811,11 +9811,11 @@ class TCloudUiNavbarItemComponent {
|
|
|
9811
9811
|
this.onItemClick.emit(item);
|
|
9812
9812
|
}
|
|
9813
9813
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9814
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiNavbarItemComponent, isStandalone: true, selector: "tcloud-ui-navbar-item", inputs: { item: "item", isMenuExpanded: "isMenuExpanded", level: "level" }, outputs: { onItemClick: "onItemClick" }, ngImport: i0, template: "<li\n class=\"tcloud-ui-navbar-item\"\n [class.tcloud-ui-navbar-expanded]=\"isMenuExpanded\"\n [class.tcloud-ui-navbar-subitem]=\"level > 0\"\n [class.has-submenu]=\"hasSubmenu\"\n [class.open]=\"item.open\">\n\n <a\n class=\"tcloud-ui-navbar-item-link\"\n [class.selected]=\"item.active\"\n [routerLink]=\"hasSubmenu ? null : (item.link ?? null)\"\n routerLinkActive=\"active\"\n [queryParams]=\"item.queryParams ?? null\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n [title]=\"item.label\"\n (click)=\"handleClick($event)\">\n\n <div class=\"navbar-item-icon-container\">\n @if (item.icon) {\n <i [class]=\"item.icon\"></i>\n }\n </div>\n\n @if (isMenuExpanded) {\n <div class=\"navbar-item-label\">\n <span class=\"navbar-item-text\">{{ item.label }}</span>\n @if (item.badge) {\n <span class=\"navbar-item-badge\">{{ item.badge }}</span>\n }\n @if (hasSubmenu) {\n <i class=\"navbar-item-chevron fas\"\n [class.fa-chevron-down]=\"item.open\"\n [class.fa-chevron-right]=\"!item.open\"></i>\n }\n </div>\n }\n </a>\n\n @if (hasSubmenu && isMenuExpanded) {\n <ul class=\"tcloud-ui-navbar-submenu\" [class.open]=\"item.open\">\n @for (child of item.submenu; track $index) {\n @if (child.enable !== false) {\n <tcloud-ui-navbar-item\n [item]=\"child\"\n [isMenuExpanded]=\"isMenuExpanded\"\n [level]=\"level + 1\"\n (onItemClick)=\"bubbleClick($event)\">\n </tcloud-ui-navbar-item>\n }\n }\n </ul>\n }\n</li>\n", styles: [":host{display:block}.tcloud-ui-navbar-item{list-style:none;margin:0;padding:0}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link{align-items:center;border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;font-family:var(--f-family);display:flex;transition:all .2s ease;text-decoration:none}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-icon-container{text-align:center;align-content:center;background-color:var(--c-neutral-
|
|
9814
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiNavbarItemComponent, isStandalone: true, selector: "tcloud-ui-navbar-item", inputs: { item: "item", isMenuExpanded: "isMenuExpanded", level: "level" }, outputs: { onItemClick: "onItemClick" }, ngImport: i0, template: "<li\n class=\"tcloud-ui-navbar-item\"\n [class.tcloud-ui-navbar-expanded]=\"isMenuExpanded\"\n [class.tcloud-ui-navbar-subitem]=\"level > 0\"\n [class.has-submenu]=\"hasSubmenu\"\n [class.open]=\"item.open\">\n\n <a\n class=\"tcloud-ui-navbar-item-link\"\n [class.selected]=\"item.active\"\n [routerLink]=\"hasSubmenu ? null : (item.link ?? null)\"\n routerLinkActive=\"active\"\n [queryParams]=\"item.queryParams ?? null\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n [title]=\"item.label\"\n (click)=\"handleClick($event)\">\n\n <div class=\"navbar-item-icon-container\">\n @if (item.icon) {\n <i [class]=\"item.icon\"></i>\n }\n </div>\n\n @if (isMenuExpanded) {\n <div class=\"navbar-item-label\">\n <span class=\"navbar-item-text\">{{ item.label }}</span>\n @if (item.badge) {\n <span class=\"navbar-item-badge\">{{ item.badge }}</span>\n }\n @if (hasSubmenu) {\n <i class=\"navbar-item-chevron fas\"\n [class.fa-chevron-down]=\"item.open\"\n [class.fa-chevron-right]=\"!item.open\"></i>\n }\n </div>\n }\n </a>\n\n @if (hasSubmenu && isMenuExpanded) {\n <ul class=\"tcloud-ui-navbar-submenu\" [class.open]=\"item.open\">\n @for (child of item.submenu; track $index) {\n @if (child.enable !== false) {\n <tcloud-ui-navbar-item\n [item]=\"child\"\n [isMenuExpanded]=\"isMenuExpanded\"\n [level]=\"level + 1\"\n (onItemClick)=\"bubbleClick($event)\">\n </tcloud-ui-navbar-item>\n }\n }\n </ul>\n }\n</li>\n", styles: [":host{display:block}.tcloud-ui-navbar-item{list-style:none;margin:0;padding:0}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link{align-items:center;border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;font-family:var(--f-family);display:flex;transition:all .2s ease;text-decoration:none}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-icon-container{text-align:center;align-content:center;background-color:var(--c-neutral-100);border-radius:var(--bor-radius-4);font-size:var(--f-size-20);height:var(--size-36);width:var(--size-36);transition:all .2s ease;min-height:var(--size-36);min-width:var(--size-36);max-height:var(--size-36);max-width:var(--size-36)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-label{align-items:center;display:flex;gap:var(--size-4);justify-content:space-between;width:100%;min-width:0;color:var(--c-neutral-700);font-size:var(--f-size-14);height:var(--size-36);padding-left:var(--size-8);transition:all .2s ease;min-height:var(--size-36);max-height:var(--size-36)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-label .navbar-item-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-label .navbar-item-badge{flex:0 0 auto;background-color:var(--c-primary-500);border-radius:var(--bor-radius-4);color:var(--c-neutral-50);font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:1;padding:var(--size-4) var(--size-8)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-label .navbar-item-chevron{flex:0 0 auto;font-size:var(--f-size-12);padding-right:var(--size-8);transition:transform .2s ease}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link:hover,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link:focus{color:var(--c-primary-500)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link:hover .navbar-item-icon-container,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link:focus .navbar-item-icon-container{background-color:var(--c-neutral-200);color:var(--c-primary-500)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.active,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.selected{background-color:var(--c-primary-300)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.active .navbar-item-icon-container,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.selected .navbar-item-icon-container{background-color:transparent;color:var(--c-primary-500)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.active .navbar-item-label,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.selected .navbar-item-label{color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-navbar-item .tcloud-ui-navbar-submenu{display:none;flex-direction:column;gap:var(--size-4);list-style:none;margin:var(--size-4) 0 0 0;padding:0 0 0 var(--size-8)}.tcloud-ui-navbar-item .tcloud-ui-navbar-submenu.open{display:flex}.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link{border-left:2px solid var(--c-neutral-200);border-radius:0 var(--bor-radius-4) var(--bor-radius-4) 0}.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link .navbar-item-icon-container{display:none}.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link .navbar-item-label{padding-left:var(--size-12)}.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link.active,.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link.selected{border-left-color:var(--c-primary-500)}\n"], dependencies: [{ kind: "component", type: TCloudUiNavbarItemComponent, selector: "tcloud-ui-navbar-item", inputs: ["item", "isMenuExpanded", "level"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
|
|
9815
9815
|
}
|
|
9816
9816
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiNavbarItemComponent, decorators: [{
|
|
9817
9817
|
type: Component,
|
|
9818
|
-
args: [{ selector: 'tcloud-ui-navbar-item', standalone: true, imports: [CommonModule, RouterModule], template: "<li\n class=\"tcloud-ui-navbar-item\"\n [class.tcloud-ui-navbar-expanded]=\"isMenuExpanded\"\n [class.tcloud-ui-navbar-subitem]=\"level > 0\"\n [class.has-submenu]=\"hasSubmenu\"\n [class.open]=\"item.open\">\n\n <a\n class=\"tcloud-ui-navbar-item-link\"\n [class.selected]=\"item.active\"\n [routerLink]=\"hasSubmenu ? null : (item.link ?? null)\"\n routerLinkActive=\"active\"\n [queryParams]=\"item.queryParams ?? null\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n [title]=\"item.label\"\n (click)=\"handleClick($event)\">\n\n <div class=\"navbar-item-icon-container\">\n @if (item.icon) {\n <i [class]=\"item.icon\"></i>\n }\n </div>\n\n @if (isMenuExpanded) {\n <div class=\"navbar-item-label\">\n <span class=\"navbar-item-text\">{{ item.label }}</span>\n @if (item.badge) {\n <span class=\"navbar-item-badge\">{{ item.badge }}</span>\n }\n @if (hasSubmenu) {\n <i class=\"navbar-item-chevron fas\"\n [class.fa-chevron-down]=\"item.open\"\n [class.fa-chevron-right]=\"!item.open\"></i>\n }\n </div>\n }\n </a>\n\n @if (hasSubmenu && isMenuExpanded) {\n <ul class=\"tcloud-ui-navbar-submenu\" [class.open]=\"item.open\">\n @for (child of item.submenu; track $index) {\n @if (child.enable !== false) {\n <tcloud-ui-navbar-item\n [item]=\"child\"\n [isMenuExpanded]=\"isMenuExpanded\"\n [level]=\"level + 1\"\n (onItemClick)=\"bubbleClick($event)\">\n </tcloud-ui-navbar-item>\n }\n }\n </ul>\n }\n</li>\n", styles: [":host{display:block}.tcloud-ui-navbar-item{list-style:none;margin:0;padding:0}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link{align-items:center;border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;font-family:var(--f-family);display:flex;transition:all .2s ease;text-decoration:none}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-icon-container{text-align:center;align-content:center;background-color:var(--c-neutral-
|
|
9818
|
+
args: [{ selector: 'tcloud-ui-navbar-item', standalone: true, imports: [CommonModule, RouterModule], template: "<li\n class=\"tcloud-ui-navbar-item\"\n [class.tcloud-ui-navbar-expanded]=\"isMenuExpanded\"\n [class.tcloud-ui-navbar-subitem]=\"level > 0\"\n [class.has-submenu]=\"hasSubmenu\"\n [class.open]=\"item.open\">\n\n <a\n class=\"tcloud-ui-navbar-item-link\"\n [class.selected]=\"item.active\"\n [routerLink]=\"hasSubmenu ? null : (item.link ?? null)\"\n routerLinkActive=\"active\"\n [queryParams]=\"item.queryParams ?? null\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n [title]=\"item.label\"\n (click)=\"handleClick($event)\">\n\n <div class=\"navbar-item-icon-container\">\n @if (item.icon) {\n <i [class]=\"item.icon\"></i>\n }\n </div>\n\n @if (isMenuExpanded) {\n <div class=\"navbar-item-label\">\n <span class=\"navbar-item-text\">{{ item.label }}</span>\n @if (item.badge) {\n <span class=\"navbar-item-badge\">{{ item.badge }}</span>\n }\n @if (hasSubmenu) {\n <i class=\"navbar-item-chevron fas\"\n [class.fa-chevron-down]=\"item.open\"\n [class.fa-chevron-right]=\"!item.open\"></i>\n }\n </div>\n }\n </a>\n\n @if (hasSubmenu && isMenuExpanded) {\n <ul class=\"tcloud-ui-navbar-submenu\" [class.open]=\"item.open\">\n @for (child of item.submenu; track $index) {\n @if (child.enable !== false) {\n <tcloud-ui-navbar-item\n [item]=\"child\"\n [isMenuExpanded]=\"isMenuExpanded\"\n [level]=\"level + 1\"\n (onItemClick)=\"bubbleClick($event)\">\n </tcloud-ui-navbar-item>\n }\n }\n </ul>\n }\n</li>\n", styles: [":host{display:block}.tcloud-ui-navbar-item{list-style:none;margin:0;padding:0}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link{align-items:center;border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;font-family:var(--f-family);display:flex;transition:all .2s ease;text-decoration:none}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-icon-container{text-align:center;align-content:center;background-color:var(--c-neutral-100);border-radius:var(--bor-radius-4);font-size:var(--f-size-20);height:var(--size-36);width:var(--size-36);transition:all .2s ease;min-height:var(--size-36);min-width:var(--size-36);max-height:var(--size-36);max-width:var(--size-36)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-label{align-items:center;display:flex;gap:var(--size-4);justify-content:space-between;width:100%;min-width:0;color:var(--c-neutral-700);font-size:var(--f-size-14);height:var(--size-36);padding-left:var(--size-8);transition:all .2s ease;min-height:var(--size-36);max-height:var(--size-36)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-label .navbar-item-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-label .navbar-item-badge{flex:0 0 auto;background-color:var(--c-primary-500);border-radius:var(--bor-radius-4);color:var(--c-neutral-50);font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:1;padding:var(--size-4) var(--size-8)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-label .navbar-item-chevron{flex:0 0 auto;font-size:var(--f-size-12);padding-right:var(--size-8);transition:transform .2s ease}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link:hover,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link:focus{color:var(--c-primary-500)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link:hover .navbar-item-icon-container,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link:focus .navbar-item-icon-container{background-color:var(--c-neutral-200);color:var(--c-primary-500)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.active,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.selected{background-color:var(--c-primary-300)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.active .navbar-item-icon-container,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.selected .navbar-item-icon-container{background-color:transparent;color:var(--c-primary-500)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.active .navbar-item-label,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.selected .navbar-item-label{color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-navbar-item .tcloud-ui-navbar-submenu{display:none;flex-direction:column;gap:var(--size-4);list-style:none;margin:var(--size-4) 0 0 0;padding:0 0 0 var(--size-8)}.tcloud-ui-navbar-item .tcloud-ui-navbar-submenu.open{display:flex}.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link{border-left:2px solid var(--c-neutral-200);border-radius:0 var(--bor-radius-4) var(--bor-radius-4) 0}.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link .navbar-item-icon-container{display:none}.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link .navbar-item-label{padding-left:var(--size-12)}.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link.active,.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link.selected{border-left-color:var(--c-primary-500)}\n"] }]
|
|
9819
9819
|
}], propDecorators: { item: [{
|
|
9820
9820
|
type: Input
|
|
9821
9821
|
}], isMenuExpanded: [{
|
|
@@ -9868,11 +9868,11 @@ class TCloudUiNavbarComponent {
|
|
|
9868
9868
|
this.onExpandChange.emit(this.isMenuExpanded);
|
|
9869
9869
|
}
|
|
9870
9870
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9871
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiNavbarComponent, isStandalone: true, selector: "tcloud-ui-navbar", inputs: { menuItems: "menuItems", groups: "groups", isMenuExpanded: "isMenuExpanded", showToggle: "showToggle", logoSrc: "logoSrc", logoSrcDark: "logoSrcDark", logoAlt: "logoAlt" }, outputs: { onExpandChange: "onExpandChange", onItemClick: "onItemClick" }, ngImport: i0, template: "<nav class=\"tcloud-ui-navbar\" [class.tcloud-ui-navbar-expanded]=\"isMenuExpanded\">\n\n <!-- Header (logo): via [logoSrc]/[logoSrcDark] ou conte\u00FAdo em [navbar-header]. -->\n <div class=\"tcloud-ui-navbar-header\">\n @if (logoSrc) {\n <img class=\"tcloud-ui-navbar-logo\"\n [class.tcloud-ui-navbar-logo--light]=\"!!logoSrcDark\"\n [src]=\"logoSrc\" [alt]=\"logoAlt\" />\n }\n @if (logoSrcDark) {\n <img class=\"tcloud-ui-navbar-logo tcloud-ui-navbar-logo--dark\"\n [src]=\"logoSrcDark\" [alt]=\"logoAlt\" />\n }\n <ng-content select=\"[navbar-header]\"></ng-content>\n </div>\n\n <!-- Conte\u00FAdo rol\u00E1vel: grupos separados por divisor + toggle de minimizar. -->\n <div class=\"tcloud-ui-navbar-content\">\n\n\n @if (showToggle) {\n <ul class=\"tcloud-ui-navbar-list tcloud-ui-navbar-toggle-list\">\n <li class=\"tcloud-ui-navbar-item tcloud-ui-navbar-toggle\">\n <a class=\"tcloud-ui-navbar-item-link\"\n (click)=\"handleExpand()\"\n [title]=\"isMenuExpanded ? 'Minimizar' : 'Expandir'\">\n <div class=\"navbar-item-icon-container\">\n <i class=\"fa-light\"\n [class.fa-arrow-left-to-line]=\"isMenuExpanded\"\n [class.fa-arrow-right-to-line]=\"!isMenuExpanded\"></i>\n </div>\n @if (isMenuExpanded) {\n <div class=\"navbar-item-label\">Minimizar</div>\n }\n </a>\n </li>\n </ul>\n }\n\n\n @for (group of resolvedGroups; track $index; let last = $last) {\n <ul class=\"tcloud-ui-navbar-list\">\n @if (group.label && isMenuExpanded) {\n <li class=\"tcloud-ui-navbar-group-label\">{{ group.label }}</li>\n }\n @for (item of group.items; track $index) {\n @if (item.enable !== false) {\n <tcloud-ui-navbar-item\n [item]=\"item\"\n [isMenuExpanded]=\"isMenuExpanded\"\n (onItemClick)=\"onItemClick.emit($event)\">\n </tcloud-ui-navbar-item>\n }\n }\n </ul>\n\n @if (!last || showToggle) {\n <hr class=\"tcloud-ui-navbar-divider\" />\n }\n }\n\n \n </div>\n\n <!-- Footer (perfil/logout) \u2014 projetado pelo consumidor via [navbar-footer]. -->\n <div class=\"tcloud-ui-navbar-footer\">\n <ng-content select=\"[navbar-footer]\"></ng-content>\n </div>\n</nav>\n", styles: [":host{display:block;height:100%}.tcloud-ui-navbar{box-sizing:border-box;color:var(--c-neutral-700);display:flex;flex-direction:column;height:100%;margin:var(--size-0);padding:var(--size-0);transition:width .2s ease;width:var(--size-48)}.tcloud-ui-navbar.tcloud-ui-navbar-expanded{width:15.625rem}.tcloud-ui-navbar .tcloud-ui-navbar-header{flex:0 0 auto;align-items:center;display:flex;min-height:var(--size-56, 56px);overflow:hidden;padding:var(--size-8)}.tcloud-ui-navbar .tcloud-ui-navbar-header:empty{display:none}.tcloud-ui-navbar .tcloud-ui-navbar-header .tcloud-ui-navbar-logo{display:block;flex:0 0 auto;width:8.5rem;height:auto;transition:width .2s ease}.tcloud-ui-navbar .tcloud-ui-navbar-header .tcloud-ui-navbar-logo--dark{display:none}:host-context(.tc-dark) .tcloud-ui-navbar .tcloud-ui-navbar-logo--light{display:none}:host-context(.tc-dark) .tcloud-ui-navbar .tcloud-ui-navbar-logo--dark{display:block}.tcloud-ui-navbar .tcloud-ui-navbar-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--size-8);overflow:hidden auto;padding:var(--size-8)}.tcloud-ui-navbar .tcloud-ui-navbar-content::-webkit-scrollbar{display:none}.tcloud-ui-navbar .tcloud-ui-navbar-list{display:flex;flex-direction:column;gap:var(--size-8);list-style:none;margin:var(--size-0);padding:var(--size-0)}.tcloud-ui-navbar .tcloud-ui-navbar-group-label{color:var(--c-neutral-500);font-family:var(--f-family);font-size:var(--f-size-12);font-weight:var(--f-weight-700);padding:0 var(--size-8);text-transform:uppercase}.tcloud-ui-navbar .tcloud-ui-navbar-divider{border:0;border-top:1px solid var(--c-neutral-200);margin:var(--size-0);width:100%}.tcloud-ui-navbar .tcloud-ui-navbar-toggle{list-style:none;margin:0;padding:0}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link{align-items:center;border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;font-family:var(--f-family);text-decoration:none;transition:all .2s ease}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link .navbar-item-icon-container{align-content:center;background-color:var(--c-neutral-
|
|
9871
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiNavbarComponent, isStandalone: true, selector: "tcloud-ui-navbar", inputs: { menuItems: "menuItems", groups: "groups", isMenuExpanded: "isMenuExpanded", showToggle: "showToggle", logoSrc: "logoSrc", logoSrcDark: "logoSrcDark", logoAlt: "logoAlt" }, outputs: { onExpandChange: "onExpandChange", onItemClick: "onItemClick" }, ngImport: i0, template: "<nav class=\"tcloud-ui-navbar\" [class.tcloud-ui-navbar-expanded]=\"isMenuExpanded\">\n\n <!-- Header (logo): via [logoSrc]/[logoSrcDark] ou conte\u00FAdo em [navbar-header]. -->\n <div class=\"tcloud-ui-navbar-header\">\n @if (logoSrc) {\n <img class=\"tcloud-ui-navbar-logo\"\n [class.tcloud-ui-navbar-logo--light]=\"!!logoSrcDark\"\n [src]=\"logoSrc\" [alt]=\"logoAlt\" />\n }\n @if (logoSrcDark) {\n <img class=\"tcloud-ui-navbar-logo tcloud-ui-navbar-logo--dark\"\n [src]=\"logoSrcDark\" [alt]=\"logoAlt\" />\n }\n <ng-content select=\"[navbar-header]\"></ng-content>\n </div>\n\n <!-- Conte\u00FAdo rol\u00E1vel: grupos separados por divisor + toggle de minimizar. -->\n <div class=\"tcloud-ui-navbar-content\">\n\n\n @if (showToggle) {\n <ul class=\"tcloud-ui-navbar-list tcloud-ui-navbar-toggle-list\">\n <li class=\"tcloud-ui-navbar-item tcloud-ui-navbar-toggle\">\n <a class=\"tcloud-ui-navbar-item-link\"\n (click)=\"handleExpand()\"\n [title]=\"isMenuExpanded ? 'Minimizar' : 'Expandir'\">\n <div class=\"navbar-item-icon-container\">\n <i class=\"fa-light\"\n [class.fa-arrow-left-to-line]=\"isMenuExpanded\"\n [class.fa-arrow-right-to-line]=\"!isMenuExpanded\"></i>\n </div>\n @if (isMenuExpanded) {\n <div class=\"navbar-item-label\">Minimizar</div>\n }\n </a>\n </li>\n </ul>\n }\n\n\n @for (group of resolvedGroups; track $index; let last = $last) {\n <ul class=\"tcloud-ui-navbar-list\">\n @if (group.label && isMenuExpanded) {\n <li class=\"tcloud-ui-navbar-group-label\">{{ group.label }}</li>\n }\n @for (item of group.items; track $index) {\n @if (item.enable !== false) {\n <tcloud-ui-navbar-item\n [item]=\"item\"\n [isMenuExpanded]=\"isMenuExpanded\"\n (onItemClick)=\"onItemClick.emit($event)\">\n </tcloud-ui-navbar-item>\n }\n }\n </ul>\n\n @if (!last || showToggle) {\n <hr class=\"tcloud-ui-navbar-divider\" />\n }\n }\n\n \n </div>\n\n <!-- Footer (perfil/logout) \u2014 projetado pelo consumidor via [navbar-footer]. -->\n <div class=\"tcloud-ui-navbar-footer\">\n <ng-content select=\"[navbar-footer]\"></ng-content>\n </div>\n</nav>\n", styles: [":host{display:block;height:100%}.tcloud-ui-navbar{box-sizing:border-box;color:var(--c-neutral-700);display:flex;flex-direction:column;height:100%;margin:var(--size-0);padding:var(--size-0);transition:width .2s ease;width:var(--size-48)}.tcloud-ui-navbar.tcloud-ui-navbar-expanded{width:15.625rem}.tcloud-ui-navbar .tcloud-ui-navbar-header{flex:0 0 auto;align-items:center;display:flex;min-height:var(--size-56, 56px);overflow:hidden;padding:var(--size-8)}.tcloud-ui-navbar .tcloud-ui-navbar-header:empty{display:none}.tcloud-ui-navbar .tcloud-ui-navbar-header .tcloud-ui-navbar-logo{display:block;flex:0 0 auto;width:8.5rem;height:auto;transition:width .2s ease}.tcloud-ui-navbar .tcloud-ui-navbar-header .tcloud-ui-navbar-logo--dark{display:none}:host-context(.tc-dark) .tcloud-ui-navbar .tcloud-ui-navbar-logo--light{display:none}:host-context(.tc-dark) .tcloud-ui-navbar .tcloud-ui-navbar-logo--dark{display:block}.tcloud-ui-navbar .tcloud-ui-navbar-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--size-8);overflow:hidden auto;padding:var(--size-8)}.tcloud-ui-navbar .tcloud-ui-navbar-content::-webkit-scrollbar{display:none}.tcloud-ui-navbar .tcloud-ui-navbar-list{display:flex;flex-direction:column;gap:var(--size-8);list-style:none;margin:var(--size-0);padding:var(--size-0)}.tcloud-ui-navbar .tcloud-ui-navbar-group-label{color:var(--c-neutral-500);font-family:var(--f-family);font-size:var(--f-size-12);font-weight:var(--f-weight-700);padding:0 var(--size-8);text-transform:uppercase}.tcloud-ui-navbar .tcloud-ui-navbar-divider{border:0;border-top:1px solid var(--c-neutral-200);margin:var(--size-0);width:100%}.tcloud-ui-navbar .tcloud-ui-navbar-toggle{list-style:none;margin:0;padding:0}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link{align-items:center;border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;font-family:var(--f-family);text-decoration:none;transition:all .2s ease}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link .navbar-item-icon-container{align-content:center;background-color:var(--c-neutral-100);border-radius:var(--bor-radius-4);font-size:var(--f-size-20);height:var(--size-36);width:var(--size-36);text-align:center;transition:all .2s ease;min-height:var(--size-36);min-width:var(--size-36);max-height:var(--size-36);max-width:var(--size-36)}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link .navbar-item-label{align-items:center;display:flex;color:var(--c-neutral-700);font-size:var(--f-size-14);height:var(--size-36);padding-left:var(--size-8);min-height:var(--size-36);max-height:var(--size-36)}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link:hover,.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link:focus{color:var(--c-primary-500)}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link:hover .navbar-item-icon-container,.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link:focus .navbar-item-icon-container{background-color:var(--c-neutral-200);color:var(--c-primary-500)}.tcloud-ui-navbar .tcloud-ui-navbar-footer{flex:0 0 auto;border-top:1px solid var(--c-neutral-200);padding:var(--size-8)}.tcloud-ui-navbar .tcloud-ui-navbar-footer:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TCloudUiNavbarItemComponent, selector: "tcloud-ui-navbar-item", inputs: ["item", "isMenuExpanded", "level"], outputs: ["onItemClick"] }] }); }
|
|
9872
9872
|
}
|
|
9873
9873
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiNavbarComponent, decorators: [{
|
|
9874
9874
|
type: Component,
|
|
9875
|
-
args: [{ selector: 'tcloud-ui-navbar', standalone: true, imports: [CommonModule, TCloudUiNavbarItemComponent], template: "<nav class=\"tcloud-ui-navbar\" [class.tcloud-ui-navbar-expanded]=\"isMenuExpanded\">\n\n <!-- Header (logo): via [logoSrc]/[logoSrcDark] ou conte\u00FAdo em [navbar-header]. -->\n <div class=\"tcloud-ui-navbar-header\">\n @if (logoSrc) {\n <img class=\"tcloud-ui-navbar-logo\"\n [class.tcloud-ui-navbar-logo--light]=\"!!logoSrcDark\"\n [src]=\"logoSrc\" [alt]=\"logoAlt\" />\n }\n @if (logoSrcDark) {\n <img class=\"tcloud-ui-navbar-logo tcloud-ui-navbar-logo--dark\"\n [src]=\"logoSrcDark\" [alt]=\"logoAlt\" />\n }\n <ng-content select=\"[navbar-header]\"></ng-content>\n </div>\n\n <!-- Conte\u00FAdo rol\u00E1vel: grupos separados por divisor + toggle de minimizar. -->\n <div class=\"tcloud-ui-navbar-content\">\n\n\n @if (showToggle) {\n <ul class=\"tcloud-ui-navbar-list tcloud-ui-navbar-toggle-list\">\n <li class=\"tcloud-ui-navbar-item tcloud-ui-navbar-toggle\">\n <a class=\"tcloud-ui-navbar-item-link\"\n (click)=\"handleExpand()\"\n [title]=\"isMenuExpanded ? 'Minimizar' : 'Expandir'\">\n <div class=\"navbar-item-icon-container\">\n <i class=\"fa-light\"\n [class.fa-arrow-left-to-line]=\"isMenuExpanded\"\n [class.fa-arrow-right-to-line]=\"!isMenuExpanded\"></i>\n </div>\n @if (isMenuExpanded) {\n <div class=\"navbar-item-label\">Minimizar</div>\n }\n </a>\n </li>\n </ul>\n }\n\n\n @for (group of resolvedGroups; track $index; let last = $last) {\n <ul class=\"tcloud-ui-navbar-list\">\n @if (group.label && isMenuExpanded) {\n <li class=\"tcloud-ui-navbar-group-label\">{{ group.label }}</li>\n }\n @for (item of group.items; track $index) {\n @if (item.enable !== false) {\n <tcloud-ui-navbar-item\n [item]=\"item\"\n [isMenuExpanded]=\"isMenuExpanded\"\n (onItemClick)=\"onItemClick.emit($event)\">\n </tcloud-ui-navbar-item>\n }\n }\n </ul>\n\n @if (!last || showToggle) {\n <hr class=\"tcloud-ui-navbar-divider\" />\n }\n }\n\n \n </div>\n\n <!-- Footer (perfil/logout) \u2014 projetado pelo consumidor via [navbar-footer]. -->\n <div class=\"tcloud-ui-navbar-footer\">\n <ng-content select=\"[navbar-footer]\"></ng-content>\n </div>\n</nav>\n", styles: [":host{display:block;height:100%}.tcloud-ui-navbar{box-sizing:border-box;color:var(--c-neutral-700);display:flex;flex-direction:column;height:100%;margin:var(--size-0);padding:var(--size-0);transition:width .2s ease;width:var(--size-48)}.tcloud-ui-navbar.tcloud-ui-navbar-expanded{width:15.625rem}.tcloud-ui-navbar .tcloud-ui-navbar-header{flex:0 0 auto;align-items:center;display:flex;min-height:var(--size-56, 56px);overflow:hidden;padding:var(--size-8)}.tcloud-ui-navbar .tcloud-ui-navbar-header:empty{display:none}.tcloud-ui-navbar .tcloud-ui-navbar-header .tcloud-ui-navbar-logo{display:block;flex:0 0 auto;width:8.5rem;height:auto;transition:width .2s ease}.tcloud-ui-navbar .tcloud-ui-navbar-header .tcloud-ui-navbar-logo--dark{display:none}:host-context(.tc-dark) .tcloud-ui-navbar .tcloud-ui-navbar-logo--light{display:none}:host-context(.tc-dark) .tcloud-ui-navbar .tcloud-ui-navbar-logo--dark{display:block}.tcloud-ui-navbar .tcloud-ui-navbar-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--size-8);overflow:hidden auto;padding:var(--size-8)}.tcloud-ui-navbar .tcloud-ui-navbar-content::-webkit-scrollbar{display:none}.tcloud-ui-navbar .tcloud-ui-navbar-list{display:flex;flex-direction:column;gap:var(--size-8);list-style:none;margin:var(--size-0);padding:var(--size-0)}.tcloud-ui-navbar .tcloud-ui-navbar-group-label{color:var(--c-neutral-500);font-family:var(--f-family);font-size:var(--f-size-12);font-weight:var(--f-weight-700);padding:0 var(--size-8);text-transform:uppercase}.tcloud-ui-navbar .tcloud-ui-navbar-divider{border:0;border-top:1px solid var(--c-neutral-200);margin:var(--size-0);width:100%}.tcloud-ui-navbar .tcloud-ui-navbar-toggle{list-style:none;margin:0;padding:0}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link{align-items:center;border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;font-family:var(--f-family);text-decoration:none;transition:all .2s ease}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link .navbar-item-icon-container{align-content:center;background-color:var(--c-neutral-
|
|
9875
|
+
args: [{ selector: 'tcloud-ui-navbar', standalone: true, imports: [CommonModule, TCloudUiNavbarItemComponent], template: "<nav class=\"tcloud-ui-navbar\" [class.tcloud-ui-navbar-expanded]=\"isMenuExpanded\">\n\n <!-- Header (logo): via [logoSrc]/[logoSrcDark] ou conte\u00FAdo em [navbar-header]. -->\n <div class=\"tcloud-ui-navbar-header\">\n @if (logoSrc) {\n <img class=\"tcloud-ui-navbar-logo\"\n [class.tcloud-ui-navbar-logo--light]=\"!!logoSrcDark\"\n [src]=\"logoSrc\" [alt]=\"logoAlt\" />\n }\n @if (logoSrcDark) {\n <img class=\"tcloud-ui-navbar-logo tcloud-ui-navbar-logo--dark\"\n [src]=\"logoSrcDark\" [alt]=\"logoAlt\" />\n }\n <ng-content select=\"[navbar-header]\"></ng-content>\n </div>\n\n <!-- Conte\u00FAdo rol\u00E1vel: grupos separados por divisor + toggle de minimizar. -->\n <div class=\"tcloud-ui-navbar-content\">\n\n\n @if (showToggle) {\n <ul class=\"tcloud-ui-navbar-list tcloud-ui-navbar-toggle-list\">\n <li class=\"tcloud-ui-navbar-item tcloud-ui-navbar-toggle\">\n <a class=\"tcloud-ui-navbar-item-link\"\n (click)=\"handleExpand()\"\n [title]=\"isMenuExpanded ? 'Minimizar' : 'Expandir'\">\n <div class=\"navbar-item-icon-container\">\n <i class=\"fa-light\"\n [class.fa-arrow-left-to-line]=\"isMenuExpanded\"\n [class.fa-arrow-right-to-line]=\"!isMenuExpanded\"></i>\n </div>\n @if (isMenuExpanded) {\n <div class=\"navbar-item-label\">Minimizar</div>\n }\n </a>\n </li>\n </ul>\n }\n\n\n @for (group of resolvedGroups; track $index; let last = $last) {\n <ul class=\"tcloud-ui-navbar-list\">\n @if (group.label && isMenuExpanded) {\n <li class=\"tcloud-ui-navbar-group-label\">{{ group.label }}</li>\n }\n @for (item of group.items; track $index) {\n @if (item.enable !== false) {\n <tcloud-ui-navbar-item\n [item]=\"item\"\n [isMenuExpanded]=\"isMenuExpanded\"\n (onItemClick)=\"onItemClick.emit($event)\">\n </tcloud-ui-navbar-item>\n }\n }\n </ul>\n\n @if (!last || showToggle) {\n <hr class=\"tcloud-ui-navbar-divider\" />\n }\n }\n\n \n </div>\n\n <!-- Footer (perfil/logout) \u2014 projetado pelo consumidor via [navbar-footer]. -->\n <div class=\"tcloud-ui-navbar-footer\">\n <ng-content select=\"[navbar-footer]\"></ng-content>\n </div>\n</nav>\n", styles: [":host{display:block;height:100%}.tcloud-ui-navbar{box-sizing:border-box;color:var(--c-neutral-700);display:flex;flex-direction:column;height:100%;margin:var(--size-0);padding:var(--size-0);transition:width .2s ease;width:var(--size-48)}.tcloud-ui-navbar.tcloud-ui-navbar-expanded{width:15.625rem}.tcloud-ui-navbar .tcloud-ui-navbar-header{flex:0 0 auto;align-items:center;display:flex;min-height:var(--size-56, 56px);overflow:hidden;padding:var(--size-8)}.tcloud-ui-navbar .tcloud-ui-navbar-header:empty{display:none}.tcloud-ui-navbar .tcloud-ui-navbar-header .tcloud-ui-navbar-logo{display:block;flex:0 0 auto;width:8.5rem;height:auto;transition:width .2s ease}.tcloud-ui-navbar .tcloud-ui-navbar-header .tcloud-ui-navbar-logo--dark{display:none}:host-context(.tc-dark) .tcloud-ui-navbar .tcloud-ui-navbar-logo--light{display:none}:host-context(.tc-dark) .tcloud-ui-navbar .tcloud-ui-navbar-logo--dark{display:block}.tcloud-ui-navbar .tcloud-ui-navbar-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--size-8);overflow:hidden auto;padding:var(--size-8)}.tcloud-ui-navbar .tcloud-ui-navbar-content::-webkit-scrollbar{display:none}.tcloud-ui-navbar .tcloud-ui-navbar-list{display:flex;flex-direction:column;gap:var(--size-8);list-style:none;margin:var(--size-0);padding:var(--size-0)}.tcloud-ui-navbar .tcloud-ui-navbar-group-label{color:var(--c-neutral-500);font-family:var(--f-family);font-size:var(--f-size-12);font-weight:var(--f-weight-700);padding:0 var(--size-8);text-transform:uppercase}.tcloud-ui-navbar .tcloud-ui-navbar-divider{border:0;border-top:1px solid var(--c-neutral-200);margin:var(--size-0);width:100%}.tcloud-ui-navbar .tcloud-ui-navbar-toggle{list-style:none;margin:0;padding:0}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link{align-items:center;border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;font-family:var(--f-family);text-decoration:none;transition:all .2s ease}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link .navbar-item-icon-container{align-content:center;background-color:var(--c-neutral-100);border-radius:var(--bor-radius-4);font-size:var(--f-size-20);height:var(--size-36);width:var(--size-36);text-align:center;transition:all .2s ease;min-height:var(--size-36);min-width:var(--size-36);max-height:var(--size-36);max-width:var(--size-36)}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link .navbar-item-label{align-items:center;display:flex;color:var(--c-neutral-700);font-size:var(--f-size-14);height:var(--size-36);padding-left:var(--size-8);min-height:var(--size-36);max-height:var(--size-36)}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link:hover,.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link:focus{color:var(--c-primary-500)}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link:hover .navbar-item-icon-container,.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link:focus .navbar-item-icon-container{background-color:var(--c-neutral-200);color:var(--c-primary-500)}.tcloud-ui-navbar .tcloud-ui-navbar-footer{flex:0 0 auto;border-top:1px solid var(--c-neutral-200);padding:var(--size-8)}.tcloud-ui-navbar .tcloud-ui-navbar-footer:empty{display:none}\n"] }]
|
|
9876
9876
|
}], propDecorators: { menuItems: [{
|
|
9877
9877
|
type: Input
|
|
9878
9878
|
}], groups: [{
|
|
@@ -9899,6 +9899,8 @@ class TCloudUiNavbarFooterComponent {
|
|
|
9899
9899
|
constructor() {
|
|
9900
9900
|
/** Texto alternativo do avatar. */
|
|
9901
9901
|
this.avatarAlt = '';
|
|
9902
|
+
/** Ícone exibido no avatar quando não há `avatarSrc`. */
|
|
9903
|
+
this.avatarIcon = 'fas fa-user';
|
|
9902
9904
|
/** Nome do usuário. */
|
|
9903
9905
|
this.name = '';
|
|
9904
9906
|
/** Papel/subtítulo do usuário (ex.: 'Operadora'). */
|
|
@@ -9913,15 +9915,17 @@ class TCloudUiNavbarFooterComponent {
|
|
|
9913
9915
|
this.onLogout = output();
|
|
9914
9916
|
}
|
|
9915
9917
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiNavbarFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9916
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiNavbarFooterComponent, isStandalone: true, selector: "tcloud-ui-navbar-footer", inputs: { avatarSrc: "avatarSrc", avatarAlt: "avatarAlt", name: "name", role: "role", isMenuExpanded: "isMenuExpanded", showLogout: "showLogout", logoutTitle: "logoutTitle" }, outputs: { onLogout: "onLogout" }, ngImport: i0, template: "
|
|
9918
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiNavbarFooterComponent, isStandalone: true, selector: "tcloud-ui-navbar-footer", inputs: { avatarSrc: "avatarSrc", avatarAlt: "avatarAlt", avatarIcon: "avatarIcon", name: "name", role: "role", isMenuExpanded: "isMenuExpanded", showLogout: "showLogout", logoutTitle: "logoutTitle" }, outputs: { onLogout: "onLogout" }, ngImport: i0, template: "<div class=\"tcloud-ui-navbar-footer-avatar\">\n @if (avatarSrc) {\n <img [src]=\"avatarSrc\" [alt]=\"avatarAlt\" />\n } @else {\n <i [class]=\"avatarIcon\"></i>\n }\n</div>\n\n@if (isMenuExpanded) {\n <div class=\"tcloud-ui-navbar-footer-info\">\n <strong>{{ name }}</strong>\n <span>{{ role }}</span>\n </div>\n\n @if (showLogout) {\n <button type=\"button\"\n class=\"tcloud-ui-navbar-footer-logout\"\n [title]=\"logoutTitle\"\n (click)=\"onLogout.emit()\">\n <i class=\"fas fa-arrow-right-from-bracket\"></i>\n </button>\n }\n}\n", styles: [":host{align-items:center;display:flex;font-family:var(--f-family);gap:var(--size-8);width:100%}.tcloud-ui-navbar-footer-avatar{align-items:center;background-color:var(--c-neutral-100);border-radius:50%;color:var(--c-neutral-700);display:flex;flex:0 0 auto;font-size:var(--f-size-20);height:var(--size-36);justify-content:center;overflow:hidden;width:var(--size-36)}.tcloud-ui-navbar-footer-avatar img{height:100%;object-fit:cover;width:100%}.tcloud-ui-navbar-footer-info{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.tcloud-ui-navbar-footer-info strong{color:var(--c-neutral-700);font-size:var(--f-size-14);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-navbar-footer-info span{color:var(--c-neutral-500);font-size:var(--f-size-12);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-navbar-footer-logout{background:transparent;border:0;color:var(--c-danger-500);cursor:pointer;flex:0 0 auto;font-size:var(--f-size-20);padding:var(--size-4);transition:color .2s ease}.tcloud-ui-navbar-footer-logout:hover,.tcloud-ui-navbar-footer-logout:focus{color:var(--c-danger-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
9917
9919
|
}
|
|
9918
9920
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiNavbarFooterComponent, decorators: [{
|
|
9919
9921
|
type: Component,
|
|
9920
|
-
args: [{ selector: 'tcloud-ui-navbar-footer', standalone: true, imports: [CommonModule], template: "
|
|
9922
|
+
args: [{ selector: 'tcloud-ui-navbar-footer', standalone: true, imports: [CommonModule], template: "<div class=\"tcloud-ui-navbar-footer-avatar\">\n @if (avatarSrc) {\n <img [src]=\"avatarSrc\" [alt]=\"avatarAlt\" />\n } @else {\n <i [class]=\"avatarIcon\"></i>\n }\n</div>\n\n@if (isMenuExpanded) {\n <div class=\"tcloud-ui-navbar-footer-info\">\n <strong>{{ name }}</strong>\n <span>{{ role }}</span>\n </div>\n\n @if (showLogout) {\n <button type=\"button\"\n class=\"tcloud-ui-navbar-footer-logout\"\n [title]=\"logoutTitle\"\n (click)=\"onLogout.emit()\">\n <i class=\"fas fa-arrow-right-from-bracket\"></i>\n </button>\n }\n}\n", styles: [":host{align-items:center;display:flex;font-family:var(--f-family);gap:var(--size-8);width:100%}.tcloud-ui-navbar-footer-avatar{align-items:center;background-color:var(--c-neutral-100);border-radius:50%;color:var(--c-neutral-700);display:flex;flex:0 0 auto;font-size:var(--f-size-20);height:var(--size-36);justify-content:center;overflow:hidden;width:var(--size-36)}.tcloud-ui-navbar-footer-avatar img{height:100%;object-fit:cover;width:100%}.tcloud-ui-navbar-footer-info{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.tcloud-ui-navbar-footer-info strong{color:var(--c-neutral-700);font-size:var(--f-size-14);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-navbar-footer-info span{color:var(--c-neutral-500);font-size:var(--f-size-12);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-navbar-footer-logout{background:transparent;border:0;color:var(--c-danger-500);cursor:pointer;flex:0 0 auto;font-size:var(--f-size-20);padding:var(--size-4);transition:color .2s ease}.tcloud-ui-navbar-footer-logout:hover,.tcloud-ui-navbar-footer-logout:focus{color:var(--c-danger-400)}\n"] }]
|
|
9921
9923
|
}], propDecorators: { avatarSrc: [{
|
|
9922
9924
|
type: Input
|
|
9923
9925
|
}], avatarAlt: [{
|
|
9924
9926
|
type: Input
|
|
9927
|
+
}], avatarIcon: [{
|
|
9928
|
+
type: Input
|
|
9925
9929
|
}], name: [{
|
|
9926
9930
|
type: Input
|
|
9927
9931
|
}], role: [{
|