structra-ui 0.2.22 → 0.2.24

package/fesm2022/structra-ui.mjs

@@ -10465,11 +10465,11 @@ class AppSidebarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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:.5rem}.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;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-left:.25rem;padding-right:.25rem;gap:0}.app-sidebar__brand{order:0;flex:1 1 auto;min-width:0;align-self: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}.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}\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 }); }
+    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:.5rem}.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}\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSidebarComponent, decorators: [{
             type: Component,
-            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:.5rem}.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;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-left:.25rem;padding-right:.25rem;gap:0}.app-sidebar__brand{order:0;flex:1 1 auto;min-width:0;align-self: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}.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}\n"] }]
+            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:.5rem}.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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
                 type: Input,
                 args: [{ required: true }]
@@ -10509,6 +10509,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Marca o título no topo da lateral: **na mesma linha** que o botão recolher (à esquerda);
  * oculto no modo rail (só ícones).
  *
+ * **Importante:** não coloque `[appSidebarBrand]` num único `div` que também envolva o botão com classes
+ * tipo Tailwind (`flex`, `justify-between`): use **dois projectados irmãos** (marca + `[appSidebarToolbar]`).
+ * Caso contrário a linha inteira fica só dentro da zona da marca e o alinhamento à esquerda pode falhar no host da app.
+ *
  * ```html
  * <app-sidebar [items]="nav">
  *   <span appSidebarBrand>Minha aplicação</span>