structra-ui 0.2.23 → 0.2.25
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/structra-ui.mjs
CHANGED
|
@@ -10434,11 +10434,22 @@ class AppSidebarComponent {
|
|
|
10434
10434
|
effect(() => {
|
|
10435
10435
|
applyOptionalThemeHostClasses(this.renderer, this.hostEl.nativeElement, this.appTheme());
|
|
10436
10436
|
});
|
|
10437
|
+
/**
|
|
10438
|
+
* CSS global no host (ex. flex utilitários com `!important`) pode sobrepor estilos encapsulados
|
|
10439
|
+
* e centrar o grupo marca+botão. `setProperty(..., 'important')` no DOM ganha na cascata.
|
|
10440
|
+
*/
|
|
10441
|
+
afterNextRender(() => this.scheduleSidebarHeadLayoutGuards());
|
|
10442
|
+
}
|
|
10443
|
+
ngAfterViewInit() {
|
|
10444
|
+
this.scheduleSidebarHeadLayoutGuards();
|
|
10437
10445
|
}
|
|
10438
10446
|
ngOnChanges(changes) {
|
|
10439
10447
|
if (changes['selectedItemId'] || changes['items']) {
|
|
10440
10448
|
this.cdr.markForCheck();
|
|
10441
10449
|
}
|
|
10450
|
+
if (changes['collapsed']) {
|
|
10451
|
+
this.scheduleSidebarHeadLayoutGuards();
|
|
10452
|
+
}
|
|
10442
10453
|
const collapsedCh = changes['collapsed'];
|
|
10443
10454
|
if (!collapsedCh) {
|
|
10444
10455
|
return;
|
|
@@ -10464,12 +10475,47 @@ class AppSidebarComponent {
|
|
|
10464
10475
|
this.listRevealTimeoutId = null;
|
|
10465
10476
|
}
|
|
10466
10477
|
}
|
|
10478
|
+
scheduleSidebarHeadLayoutGuards() {
|
|
10479
|
+
queueMicrotask(() => this.applySidebarHeadLayoutGuards());
|
|
10480
|
+
}
|
|
10481
|
+
applySidebarHeadLayoutGuards() {
|
|
10482
|
+
const root = this.hostEl.nativeElement;
|
|
10483
|
+
const head = root.querySelector('[data-app-sidebar-head]');
|
|
10484
|
+
if (!head) {
|
|
10485
|
+
return;
|
|
10486
|
+
}
|
|
10487
|
+
head.style.setProperty('flex-direction', 'row', 'important');
|
|
10488
|
+
head.style.setProperty('direction', 'ltr', 'important');
|
|
10489
|
+
if (this.collapsed) {
|
|
10490
|
+
head.style.setProperty('justify-content', 'center', 'important');
|
|
10491
|
+
}
|
|
10492
|
+
else {
|
|
10493
|
+
head.style.setProperty('justify-content', 'flex-start', 'important');
|
|
10494
|
+
}
|
|
10495
|
+
const brand = root.querySelector('.app-sidebar__brand');
|
|
10496
|
+
if (brand) {
|
|
10497
|
+
brand.style.setProperty('display', 'flex', 'important');
|
|
10498
|
+
brand.style.setProperty('text-align', 'start', 'important');
|
|
10499
|
+
brand.style.setProperty('justify-content', 'flex-start', 'important');
|
|
10500
|
+
brand.style.setProperty('align-items', 'center', 'important');
|
|
10501
|
+
}
|
|
10502
|
+
const toolbar = root.querySelector('.app-sidebar__toolbar');
|
|
10503
|
+
if (!toolbar || toolbar.children.length === 0) {
|
|
10504
|
+
return;
|
|
10505
|
+
}
|
|
10506
|
+
if (this.collapsed) {
|
|
10507
|
+
toolbar.style.setProperty('margin-inline-start', '0', 'important');
|
|
10508
|
+
}
|
|
10509
|
+
else {
|
|
10510
|
+
toolbar.style.setProperty('margin-inline-start', 'auto', 'important');
|
|
10511
|
+
}
|
|
10512
|
+
}
|
|
10467
10513
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10468
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: AppSidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: true, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: false, isRequired: false, transformFunction: null }, selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: false, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { itemSelect: "itemSelect" }, usesOnChanges: true, ngImport: i0, template: "<nav class=\"app-sidebar app-nav-surface\" [class.app-sidebar--collapsed]=\"collapsed\"\r\n [attr.aria-label]=\"'Navega\u00E7\u00E3o principal'\">\r\n <div class=\"app-sidebar__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n </div>\r\n <app-menu-list\r\n class=\"app-sidebar__list\"\r\n [appTheme]=\"appTheme()\"\r\n [items]=\"items\"\r\n [menuId]=\"menuId\"\r\n [dense]=\"collapsed\"\r\n [compressText]=\"listCompressText()\"\r\n [selectedItemId]=\"selectedItemId\"\r\n (itemSelect)=\"itemSelect.emit($event)\"\r\n />\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;align-self:stretch;min-width:0;min-height:0;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;padding:.65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-left:.5rem;padding-right:.
|
|
10514
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: AppSidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: true, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: false, isRequired: false, transformFunction: null }, selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: false, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { itemSelect: "itemSelect" }, usesOnChanges: true, ngImport: i0, template: "<nav class=\"app-sidebar app-nav-surface\" [class.app-sidebar--collapsed]=\"collapsed\"\r\n [attr.aria-label]=\"'Navega\u00E7\u00E3o principal'\">\r\n <div class=\"app-sidebar__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n </div>\r\n <app-menu-list\r\n class=\"app-sidebar__list\"\r\n [appTheme]=\"appTheme()\"\r\n [items]=\"items\"\r\n [menuId]=\"menuId\"\r\n [dense]=\"collapsed\"\r\n [compressText]=\"listCompressText()\"\r\n [selectedItemId]=\"selectedItemId\"\r\n (itemSelect)=\"itemSelect.emit($event)\"\r\n />\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;align-self:stretch;min-width:0;min-height:0;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;padding:.65rem .35rem .65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-left:.5rem;padding-right:.35rem}.app-sidebar__head[data-app-sidebar-head]{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.35rem;width:100%;min-height:2.35rem;padding:0 .1rem .4rem;padding-inline-start:.75rem!important;box-sizing:border-box;contain:layout;direction:ltr;unicode-bidi:isolate;flex-direction:row!important;justify-content:flex-start!important;direction:ltr!important}.app-sidebar--collapsed .app-sidebar__head[data-app-sidebar-head]{justify-content:center!important;padding-inline-start:.25rem!important;padding-inline-end:.25rem;gap:0}.app-sidebar__brand{order:0;flex:1 1 auto;min-width:0;align-self:center;display:flex;justify-content:flex-start;align-items:center;padding:0;box-sizing:border-box;font-size:.95rem;font-weight:700;line-height:1.25;color:var(--app-color-text-primary, #1a2f45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start!important}.app-sidebar__brand>*{text-align:inherit!important;margin-inline:0!important;padding-inline-start:0!important;padding-inline-end:0!important;box-sizing:border-box;min-width:0}.app-sidebar__brand:empty{display:none}.app-sidebar--collapsed .app-sidebar__brand:not(:empty){display:none}.app-sidebar__toolbar{order:1;flex:0 0 auto;flex-shrink:0;display:flex;justify-content:flex-end;align-items:center;align-self:center;min-width:0;padding:0;box-sizing:border-box;margin-inline-start:auto!important}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){margin-inline-start:0!important}.app-sidebar__list{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-sidebar__list::-webkit-scrollbar{width:4px;height:4px}.app-sidebar__list::-webkit-scrollbar-track{background:transparent}.app-sidebar__list::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-sidebar__list::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}\n"], dependencies: [{ kind: "component", type: MenuListComponent, selector: "app-menu-list", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10469
10515
|
}
|
|
10470
10516
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSidebarComponent, decorators: [{
|
|
10471
10517
|
type: Component,
|
|
10472
|
-
args: [{ selector: 'app-sidebar', imports: [MenuListComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"app-sidebar app-nav-surface\" [class.app-sidebar--collapsed]=\"collapsed\"\r\n [attr.aria-label]=\"'Navega\u00E7\u00E3o principal'\">\r\n <div class=\"app-sidebar__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n </div>\r\n <app-menu-list\r\n class=\"app-sidebar__list\"\r\n [appTheme]=\"appTheme()\"\r\n [items]=\"items\"\r\n [menuId]=\"menuId\"\r\n [dense]=\"collapsed\"\r\n [compressText]=\"listCompressText()\"\r\n [selectedItemId]=\"selectedItemId\"\r\n (itemSelect)=\"itemSelect.emit($event)\"\r\n />\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;align-self:stretch;min-width:0;min-height:0;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;padding:.65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-left:.5rem;padding-right:.
|
|
10518
|
+
args: [{ selector: 'app-sidebar', imports: [MenuListComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"app-sidebar app-nav-surface\" [class.app-sidebar--collapsed]=\"collapsed\"\r\n [attr.aria-label]=\"'Navega\u00E7\u00E3o principal'\">\r\n <div class=\"app-sidebar__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n </div>\r\n <app-menu-list\r\n class=\"app-sidebar__list\"\r\n [appTheme]=\"appTheme()\"\r\n [items]=\"items\"\r\n [menuId]=\"menuId\"\r\n [dense]=\"collapsed\"\r\n [compressText]=\"listCompressText()\"\r\n [selectedItemId]=\"selectedItemId\"\r\n (itemSelect)=\"itemSelect.emit($event)\"\r\n />\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;align-self:stretch;min-width:0;min-height:0;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;padding:.65rem .35rem .65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-left:.5rem;padding-right:.35rem}.app-sidebar__head[data-app-sidebar-head]{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.35rem;width:100%;min-height:2.35rem;padding:0 .1rem .4rem;padding-inline-start:.75rem!important;box-sizing:border-box;contain:layout;direction:ltr;unicode-bidi:isolate;flex-direction:row!important;justify-content:flex-start!important;direction:ltr!important}.app-sidebar--collapsed .app-sidebar__head[data-app-sidebar-head]{justify-content:center!important;padding-inline-start:.25rem!important;padding-inline-end:.25rem;gap:0}.app-sidebar__brand{order:0;flex:1 1 auto;min-width:0;align-self:center;display:flex;justify-content:flex-start;align-items:center;padding:0;box-sizing:border-box;font-size:.95rem;font-weight:700;line-height:1.25;color:var(--app-color-text-primary, #1a2f45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start!important}.app-sidebar__brand>*{text-align:inherit!important;margin-inline:0!important;padding-inline-start:0!important;padding-inline-end:0!important;box-sizing:border-box;min-width:0}.app-sidebar__brand:empty{display:none}.app-sidebar--collapsed .app-sidebar__brand:not(:empty){display:none}.app-sidebar__toolbar{order:1;flex:0 0 auto;flex-shrink:0;display:flex;justify-content:flex-end;align-items:center;align-self:center;min-width:0;padding:0;box-sizing:border-box;margin-inline-start:auto!important}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){margin-inline-start:0!important}.app-sidebar__list{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-sidebar__list::-webkit-scrollbar{width:4px;height:4px}.app-sidebar__list::-webkit-scrollbar-track{background:transparent}.app-sidebar__list::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-sidebar__list::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}\n"] }]
|
|
10473
10519
|
}], ctorParameters: () => [], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
|
|
10474
10520
|
type: Input,
|
|
10475
10521
|
args: [{ required: true }]
|
|
@@ -10509,6 +10555,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10509
10555
|
* Marca o título no topo da lateral: **na mesma linha** que o botão recolher (à esquerda);
|
|
10510
10556
|
* oculto no modo rail (só ícones).
|
|
10511
10557
|
*
|
|
10558
|
+
* **Importante:** não coloque `[appSidebarBrand]` num único `div` que também envolva o botão com classes
|
|
10559
|
+
* tipo Tailwind (`flex`, `justify-between`): use **dois projectados irmãos** (marca + `[appSidebarToolbar]`).
|
|
10560
|
+
* Caso contrário a linha inteira fica só dentro da zona da marca e o alinhamento à esquerda pode falhar no host da app.
|
|
10561
|
+
*
|
|
10512
10562
|
* ```html
|
|
10513
10563
|
* <app-sidebar [items]="nav">
|
|
10514
10564
|
* <span appSidebarBrand>Minha aplicação</span>
|