structra-ui 0.2.17 → 0.2.19
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 +44 -21
- package/fesm2022/structra-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/structra-ui.d.ts +18 -10
package/fesm2022/structra-ui.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../structra-ui.css';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { signal, booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component, ElementRef, ViewChild, inject, ChangeDetectorRef, Injector, DestroyRef, EventEmitter, Output, Directive, numberAttribute, computed, Injectable, Renderer2, input, HostListener, ViewChildren, forwardRef, ApplicationRef, afterNextRender, ContentChildren, NgZone, ViewContainerRef, TemplateRef, ContentChild } from '@angular/core';
|
|
3
|
+
import { signal, booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component, ElementRef, ViewChild, inject, ChangeDetectorRef, Injector, DestroyRef, EventEmitter, Output, Directive, numberAttribute, computed, Injectable, Renderer2, input, HostListener, ViewChildren, forwardRef, ApplicationRef, afterNextRender, ContentChildren, NgZone, ViewContainerRef, TemplateRef, ContentChild, effect } from '@angular/core';
|
|
4
4
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
6
|
import { Validators, FormGroupDirective, NgForm, NgControl, NG_VALUE_ACCESSOR, FormsModule, FormGroup, FormArray, FormControl } from '@angular/forms';
|
|
@@ -803,6 +803,7 @@ class ThemeDirective {
|
|
|
803
803
|
this.theme = 'black';
|
|
804
804
|
this.elementRef = inject((ElementRef));
|
|
805
805
|
this.renderer = inject(Renderer2);
|
|
806
|
+
this.themeService = inject(AppThemeService);
|
|
806
807
|
this.themeTokenClasses = STRUCTRA_THEME_IDS.map((themeId) => `theme-${themeId}`);
|
|
807
808
|
}
|
|
808
809
|
ngOnChanges() {
|
|
@@ -812,6 +813,8 @@ class ThemeDirective {
|
|
|
812
813
|
this.renderer.removeClass(element, themeClass);
|
|
813
814
|
}
|
|
814
815
|
this.renderer.addClass(element, getThemeTokenClass(this.theme));
|
|
816
|
+
/** Overlays / hosts que leem {@link AppThemeService} alinham com o mesmo tema do wrapper. */
|
|
817
|
+
this.themeService.setTheme(normalizeStructraTheme(this.theme));
|
|
815
818
|
}
|
|
816
819
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
817
820
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ThemeDirective, isStandalone: true, selector: "[appTheme]", inputs: { theme: ["appTheme", "theme"] }, usesOnChanges: true, ngImport: i0 }); }
|
|
@@ -842,6 +845,24 @@ function injectEffectiveThemeId(appTheme) {
|
|
|
842
845
|
});
|
|
843
846
|
}
|
|
844
847
|
|
|
848
|
+
/**
|
|
849
|
+
* Remove classes de tema do host e, se `explicitTheme` estiver definido, aplica `.app-library-theme`
|
|
850
|
+
* + `theme-*`. Caso contrário deixa o host sem paleta própria (herda do ancestral / wrapper).
|
|
851
|
+
*/
|
|
852
|
+
function applyOptionalThemeHostClasses(renderer, element, explicitTheme) {
|
|
853
|
+
renderer.removeClass(element, APP_THEME_BASE_CLASS);
|
|
854
|
+
for (const themeId of STRUCTRA_THEME_IDS) {
|
|
855
|
+
renderer.removeClass(element, `theme-${themeId}`);
|
|
856
|
+
}
|
|
857
|
+
if (explicitTheme !== undefined &&
|
|
858
|
+
explicitTheme !== null &&
|
|
859
|
+
String(explicitTheme).trim() !== '') {
|
|
860
|
+
const id = normalizeStructraTheme(explicitTheme);
|
|
861
|
+
renderer.addClass(element, APP_THEME_BASE_CLASS);
|
|
862
|
+
renderer.addClass(element, getThemeTokenClass(id));
|
|
863
|
+
}
|
|
864
|
+
}
|
|
865
|
+
|
|
845
866
|
/** Posição por omissão do CDK (equivalente ao comportamento anterior sem `positions` explícitas). */
|
|
846
867
|
const DEFAULT_CONNECTED_POSITIONS = [
|
|
847
868
|
{
|
|
@@ -10291,16 +10312,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10291
10312
|
*
|
|
10292
10313
|
* Use `exportAs: 'appShell'` e `toggleMobileNav` / `toggleSidebarCollapsed` a partir da topbar.
|
|
10293
10314
|
*
|
|
10294
|
-
* Tema no host
|
|
10315
|
+
* Tema no host opcional; sem ele, herda de ancestral com {@link ThemeDirective}.
|
|
10295
10316
|
*/
|
|
10296
10317
|
class AppShellComponent {
|
|
10297
10318
|
constructor() {
|
|
10298
10319
|
this.bp = inject(BreakpointObserver);
|
|
10299
10320
|
this.cdr = inject(ChangeDetectorRef);
|
|
10300
10321
|
this.destroyRef = inject(DestroyRef);
|
|
10322
|
+
this.hostEl = inject((ElementRef));
|
|
10323
|
+
this.renderer = inject(Renderer2);
|
|
10301
10324
|
this.appTheme = input(...(ngDevMode ? [undefined, { debugName: "appTheme" }] : /* istanbul ignore next */ []));
|
|
10302
|
-
this.effectiveThemeId = injectEffectiveThemeId(this.appTheme);
|
|
10303
|
-
this.hostThemeClass = computed(() => getThemeClass(this.effectiveThemeId()), ...(ngDevMode ? [{ debugName: "hostThemeClass" }] : /* istanbul ignore next */ []));
|
|
10304
10325
|
/** Barra lateral estreita (ícones + compressão de texto na lista). */
|
|
10305
10326
|
this.sidebarCollapsed = false;
|
|
10306
10327
|
this.sidebarCollapsedChange = new EventEmitter();
|
|
@@ -10312,6 +10333,9 @@ class AppShellComponent {
|
|
|
10312
10333
|
this.isMobileLayout = false;
|
|
10313
10334
|
this.DrawerSide = DrawerSide;
|
|
10314
10335
|
this.DrawerSize = DrawerSize;
|
|
10336
|
+
effect(() => {
|
|
10337
|
+
applyOptionalThemeHostClasses(this.renderer, this.hostEl.nativeElement, this.appTheme());
|
|
10338
|
+
});
|
|
10315
10339
|
}
|
|
10316
10340
|
/** Conteúdo lateral (obrigatório): `<ng-template appShellSidebar>...</ng-template>`. */
|
|
10317
10341
|
get sidebarTemplate() {
|
|
@@ -10356,14 +10380,12 @@ class AppShellComponent {
|
|
|
10356
10380
|
}
|
|
10357
10381
|
}
|
|
10358
10382
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10359
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AppShellComponent, isStandalone: true, selector: "app-shell", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, mobileNavOpen: { classPropertyName: "mobileNavOpen", publicName: "mobileNavOpen", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, mobileLayoutQuery: { classPropertyName: "mobileLayoutQuery", publicName: "mobileLayoutQuery", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { sidebarCollapsedChange: "sidebarCollapsedChange", mobileNavOpenChange: "mobileNavOpenChange" },
|
|
10383
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AppShellComponent, isStandalone: true, selector: "app-shell", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, mobileNavOpen: { classPropertyName: "mobileNavOpen", publicName: "mobileNavOpen", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, mobileLayoutQuery: { classPropertyName: "mobileLayoutQuery", publicName: "mobileLayoutQuery", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { sidebarCollapsedChange: "sidebarCollapsedChange", mobileNavOpenChange: "mobileNavOpenChange" }, queries: [{ propertyName: "sidebarSlot", first: true, predicate: AppShellSidebarTemplateDirective, descendants: true }], exportAs: ["appShell"], ngImport: i0, template: "<div\r\n class=\"app-shell\"\r\n [class.app-shell--mobile]=\"isMobileLayout\"\r\n [class.app-shell--sidebar-collapsed]=\"sidebarCollapsed\"\r\n>\r\n @if (!isMobileLayout && sidebarTemplate) {\r\n <aside class=\"app-shell__sidebar\" aria-label=\"Navega\u00E7\u00E3o principal\">\r\n <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n </aside>\r\n }\r\n\r\n @if (isMobileLayout && sidebarTemplate) {\r\n <app-drawer\r\n [open]=\"mobileNavOpen\"\r\n (openChange)=\"onMobileDrawerOpenChange($event)\"\r\n [side]=\"DrawerSide.Left\"\r\n [size]=\"DrawerSize.Sm\"\r\n title=\"Navega\u00E7\u00E3o\"\r\n [showCloseButton]=\"true\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n </app-drawer>\r\n }\r\n\r\n <div class=\"app-shell__main\">\r\n <ng-content select=\"[appShellTopbar]\" />\r\n <main class=\"app-shell__content\">\r\n <ng-content />\r\n </main>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:flex;flex:1 1 auto;flex-direction:column;width:100%;min-width:0;min-height:100vh;min-height:100dvh;box-sizing:border-box}.app-shell{display:flex;flex-direction:row;align-items:stretch;flex:1 1 auto;width:100%;min-height:0;min-width:0;box-sizing:border-box}.app-shell__sidebar{display:flex;flex-direction:column;flex:0 0 17.5rem;width:17.5rem;max-width:100%;min-width:0;min-height:0;align-self:stretch;overflow:hidden;transition:flex-basis .12s cubic-bezier(.22,1,.36,1),width .12s cubic-bezier(.22,1,.36,1),padding .12s cubic-bezier(.22,1,.36,1)}.app-shell--sidebar-collapsed:not(.app-shell--mobile) .app-shell__sidebar{flex-basis:5rem;width:5rem}.app-shell__main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;align-self:stretch;overflow:hidden}.app-shell__content{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;padding:1rem 1.1rem;box-sizing:border-box;background:var(--app-color-shell-main-bg, var(--app-color-background, #fafbfc))}.app-shell--mobile .app-shell__sidebar{display:none}.app-shell--mobile .app-shell__main{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DrawerComponent, selector: "app-drawer", inputs: ["open", "side", "size", "title", "showCloseButton"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10360
10384
|
}
|
|
10361
10385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppShellComponent, decorators: [{
|
|
10362
10386
|
type: Component,
|
|
10363
|
-
args: [{ selector: 'app-shell', exportAs: 'appShell', imports: [NgTemplateOutlet, DrawerComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
10364
|
-
|
|
10365
|
-
}, template: "<div\r\n class=\"app-shell\"\r\n [class.app-shell--mobile]=\"isMobileLayout\"\r\n [class.app-shell--sidebar-collapsed]=\"sidebarCollapsed\"\r\n>\r\n @if (!isMobileLayout && sidebarTemplate) {\r\n <aside class=\"app-shell__sidebar\" aria-label=\"Navega\u00E7\u00E3o principal\">\r\n <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n </aside>\r\n }\r\n\r\n @if (isMobileLayout && sidebarTemplate) {\r\n <app-drawer\r\n [open]=\"mobileNavOpen\"\r\n (openChange)=\"onMobileDrawerOpenChange($event)\"\r\n [side]=\"DrawerSide.Left\"\r\n [size]=\"DrawerSize.Sm\"\r\n title=\"Navega\u00E7\u00E3o\"\r\n [showCloseButton]=\"true\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n </app-drawer>\r\n }\r\n\r\n <div class=\"app-shell__main\">\r\n <ng-content select=\"[appShellTopbar]\" />\r\n <main class=\"app-shell__content\">\r\n <ng-content />\r\n </main>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:flex;flex:1 1 auto;flex-direction:column;width:100%;min-width:0;min-height:0;box-sizing:border-box}.app-shell{display:flex;flex-direction:row;align-items:stretch;flex:1 1 auto;width:100%;min-height:0;min-width:0;box-sizing:border-box}.app-shell__sidebar{display:flex;flex-direction:column;flex:0 0 17.5rem;width:17.5rem;max-width:100%;min-width:0;min-height:0;align-self:stretch;overflow:hidden;transition:flex-basis .12s cubic-bezier(.22,1,.36,1),width .12s cubic-bezier(.22,1,.36,1),padding .12s cubic-bezier(.22,1,.36,1)}.app-shell--sidebar-collapsed:not(.app-shell--mobile) .app-shell__sidebar{flex-basis:5rem;width:5rem}.app-shell__main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;align-self:stretch;overflow:hidden}.app-shell__content{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;padding:1rem 1.1rem;box-sizing:border-box;background:var(--app-color-shell-main-bg, var(--app-color-background, #fafbfc))}.app-shell--mobile .app-shell__sidebar{display:none}.app-shell--mobile .app-shell__main{width:100%}\n"] }]
|
|
10366
|
-
}], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], sidebarSlot: [{
|
|
10387
|
+
args: [{ selector: 'app-shell', exportAs: 'appShell', imports: [NgTemplateOutlet, DrawerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"app-shell\"\r\n [class.app-shell--mobile]=\"isMobileLayout\"\r\n [class.app-shell--sidebar-collapsed]=\"sidebarCollapsed\"\r\n>\r\n @if (!isMobileLayout && sidebarTemplate) {\r\n <aside class=\"app-shell__sidebar\" aria-label=\"Navega\u00E7\u00E3o principal\">\r\n <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n </aside>\r\n }\r\n\r\n @if (isMobileLayout && sidebarTemplate) {\r\n <app-drawer\r\n [open]=\"mobileNavOpen\"\r\n (openChange)=\"onMobileDrawerOpenChange($event)\"\r\n [side]=\"DrawerSide.Left\"\r\n [size]=\"DrawerSize.Sm\"\r\n title=\"Navega\u00E7\u00E3o\"\r\n [showCloseButton]=\"true\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n </app-drawer>\r\n }\r\n\r\n <div class=\"app-shell__main\">\r\n <ng-content select=\"[appShellTopbar]\" />\r\n <main class=\"app-shell__content\">\r\n <ng-content />\r\n </main>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:flex;flex:1 1 auto;flex-direction:column;width:100%;min-width:0;min-height:100vh;min-height:100dvh;box-sizing:border-box}.app-shell{display:flex;flex-direction:row;align-items:stretch;flex:1 1 auto;width:100%;min-height:0;min-width:0;box-sizing:border-box}.app-shell__sidebar{display:flex;flex-direction:column;flex:0 0 17.5rem;width:17.5rem;max-width:100%;min-width:0;min-height:0;align-self:stretch;overflow:hidden;transition:flex-basis .12s cubic-bezier(.22,1,.36,1),width .12s cubic-bezier(.22,1,.36,1),padding .12s cubic-bezier(.22,1,.36,1)}.app-shell--sidebar-collapsed:not(.app-shell--mobile) .app-shell__sidebar{flex-basis:5rem;width:5rem}.app-shell__main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;align-self:stretch;overflow:hidden}.app-shell__content{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;padding:1rem 1.1rem;box-sizing:border-box;background:var(--app-color-shell-main-bg, var(--app-color-background, #fafbfc))}.app-shell--mobile .app-shell__sidebar{display:none}.app-shell--mobile .app-shell__main{width:100%}\n"] }]
|
|
10388
|
+
}], ctorParameters: () => [], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], sidebarSlot: [{
|
|
10367
10389
|
type: ContentChild,
|
|
10368
10390
|
args: [AppShellSidebarTemplateDirective]
|
|
10369
10391
|
}], sidebarCollapsed: [{
|
|
@@ -10385,17 +10407,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10385
10407
|
* Com `collapsed`, `app-menu-list` usa `compressText`: rótulos de grupo (ex. «Principal») ficam ocultos;
|
|
10386
10408
|
* itens mostram só ícones com `title` / `aria-label` para acessibilidade.
|
|
10387
10409
|
*
|
|
10388
|
-
* Tema:
|
|
10389
|
-
*
|
|
10410
|
+
* Tema: `[appTheme]` opcional no host; sem ele, herda paleta de um ancestral com {@link ThemeDirective}
|
|
10411
|
+
* (ex.: `<div appTheme="purple">`). Com input explícito, aplica as classes no host.
|
|
10390
10412
|
*/
|
|
10391
10413
|
class AppSidebarComponent {
|
|
10392
10414
|
constructor() {
|
|
10393
10415
|
this.cdr = inject(ChangeDetectorRef);
|
|
10394
10416
|
this.destroyRef = inject(DestroyRef);
|
|
10395
|
-
|
|
10417
|
+
this.hostEl = inject((ElementRef));
|
|
10418
|
+
this.renderer = inject(Renderer2);
|
|
10419
|
+
/** Igual a `[appTheme]` / {@link ThemeDirective}: paleta explícita no host; omitir = herdar / serviço. */
|
|
10396
10420
|
this.appTheme = input(...(ngDevMode ? [undefined, { debugName: "appTheme" }] : /* istanbul ignore next */ []));
|
|
10397
|
-
this.effectiveThemeId = injectEffectiveThemeId(this.appTheme);
|
|
10398
|
-
this.hostThemeClass = computed(() => getThemeClass(this.effectiveThemeId()), ...(ngDevMode ? [{ debugName: "hostThemeClass" }] : /* istanbul ignore next */ []));
|
|
10399
10421
|
this.menuId = 'app-shell-sidebar';
|
|
10400
10422
|
/** Sincronizar com o item de navegação activo (realce persistente). */
|
|
10401
10423
|
this.selectedItemId = null;
|
|
@@ -10409,6 +10431,9 @@ class AppSidebarComponent {
|
|
|
10409
10431
|
this.listCompressText = signal(true, ...(ngDevMode ? [{ debugName: "listCompressText" }] : /* istanbul ignore next */ []));
|
|
10410
10432
|
this.listRevealTimeoutId = null;
|
|
10411
10433
|
this.destroyRef.onDestroy(() => this.clearListRevealTimeout());
|
|
10434
|
+
effect(() => {
|
|
10435
|
+
applyOptionalThemeHostClasses(this.renderer, this.hostEl.nativeElement, this.appTheme());
|
|
10436
|
+
});
|
|
10412
10437
|
}
|
|
10413
10438
|
ngOnChanges(changes) {
|
|
10414
10439
|
if (changes['selectedItemId'] || changes['items']) {
|
|
@@ -10440,13 +10465,11 @@ class AppSidebarComponent {
|
|
|
10440
10465
|
}
|
|
10441
10466
|
}
|
|
10442
10467
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10443
|
-
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" },
|
|
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__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></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__toolbar{flex:0 0 auto;flex-shrink:0;display:flex;justify-content:flex-end;align-items:center;width:100%;padding:0 .1rem .4rem;box-sizing:border-box;min-height:2.5rem}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){justify-content:center;padding-left:0;padding-right:0}.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 }); }
|
|
10444
10469
|
}
|
|
10445
10470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSidebarComponent, decorators: [{
|
|
10446
10471
|
type: Component,
|
|
10447
|
-
args: [{ selector: 'app-sidebar', imports: [MenuListComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
10448
|
-
'[class]': 'hostThemeClass()',
|
|
10449
|
-
}, 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__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n <app-menu-list\r\n class=\"app-sidebar__list\"\r\n [appTheme]=\"effectiveThemeId()\"\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:block;min-width:0;height:100%;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;height:100%;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__toolbar{flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;padding:0 .1rem .4rem;min-height:0}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){justify-content:center;padding-left:0;padding-right:0}.app-sidebar__list{flex:1 1 auto;min-height:0;overflow:auto}\n"] }]
|
|
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__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></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__toolbar{flex:0 0 auto;flex-shrink:0;display:flex;justify-content:flex-end;align-items:center;width:100%;padding:0 .1rem .4rem;box-sizing:border-box;min-height:2.5rem}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){justify-content:center;padding-left:0;padding-right:0}.app-sidebar__list{flex:1 1 auto;min-height:0;overflow:auto}\n"] }]
|
|
10450
10473
|
}], ctorParameters: () => [], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
|
|
10451
10474
|
type: Input,
|
|
10452
10475
|
args: [{ required: true }]
|
|
@@ -10500,11 +10523,11 @@ class AppShellSidebarToggleComponent {
|
|
|
10500
10523
|
this.toggle.emit();
|
|
10501
10524
|
}
|
|
10502
10525
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppShellSidebarToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10503
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: AppShellSidebarToggleComponent, isStandalone: true, selector: "app-shell-sidebar-toggle", inputs: { collapsed: ["collapsed", "collapsed", booleanAttribute], expandLabel: "expandLabel", collapseLabel: "collapseLabel" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "<button\r\n type=\"button\"\r\n class=\"app-shell-sidebar-toggle__btn\"\r\n [attr.aria-pressed]=\"collapsed\"\r\n [attr.aria-expanded]=\"!collapsed\"\r\n [attr.aria-label]=\"collapsed ? expandLabel : collapseLabel\"\r\n [attr.title]=\"collapsed ? expandLabel : collapseLabel\"\r\n (click)=\"onClick()\"\r\n>\r\n <i\r\n class=\"fa-solid\"\r\n [class.fa-angles-left]=\"!collapsed\"\r\n [class.fa-angles-right]=\"collapsed\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n</button>\r\n", styles: ["@charset \"UTF-8\"
|
|
10526
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: AppShellSidebarToggleComponent, isStandalone: true, selector: "app-shell-sidebar-toggle", inputs: { collapsed: ["collapsed", "collapsed", booleanAttribute], expandLabel: "expandLabel", collapseLabel: "collapseLabel" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "<button\r\n type=\"button\"\r\n class=\"app-shell-sidebar-toggle__btn\"\r\n [attr.aria-pressed]=\"collapsed\"\r\n [attr.aria-expanded]=\"!collapsed\"\r\n [attr.aria-label]=\"collapsed ? expandLabel : collapseLabel\"\r\n [attr.title]=\"collapsed ? expandLabel : collapseLabel\"\r\n (click)=\"onClick()\"\r\n>\r\n <i\r\n class=\"fa-solid\"\r\n [class.fa-angles-left]=\"!collapsed\"\r\n [class.fa-angles-right]=\"collapsed\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex:0 0 auto;align-items:center;justify-content:inherit;width:100%;min-width:0;box-sizing:border-box}.app-shell-sidebar-toggle__btn{display:inline-flex;align-items:center;justify-content:center;width:2.35rem;height:2.35rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--app-color-text-secondary, #4a6682);cursor:pointer;line-height:1;font-size:.92rem;transition:background .16s ease,color .16s ease}.app-shell-sidebar-toggle__btn:hover{background:color-mix(in srgb,var(--app-color-primary) 6%,transparent);color:var(--app-color-primary)}.app-shell-sidebar-toggle__btn:focus-visible{outline:2px solid var(--app-color-nav-focus-ring);outline-offset:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10504
10527
|
}
|
|
10505
10528
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppShellSidebarToggleComponent, decorators: [{
|
|
10506
10529
|
type: Component,
|
|
10507
|
-
args: [{ selector: 'app-shell-sidebar-toggle', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n type=\"button\"\r\n class=\"app-shell-sidebar-toggle__btn\"\r\n [attr.aria-pressed]=\"collapsed\"\r\n [attr.aria-expanded]=\"!collapsed\"\r\n [attr.aria-label]=\"collapsed ? expandLabel : collapseLabel\"\r\n [attr.title]=\"collapsed ? expandLabel : collapseLabel\"\r\n (click)=\"onClick()\"\r\n>\r\n <i\r\n class=\"fa-solid\"\r\n [class.fa-angles-left]=\"!collapsed\"\r\n [class.fa-angles-right]=\"collapsed\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n</button>\r\n", styles: ["@charset \"UTF-8\"
|
|
10530
|
+
args: [{ selector: 'app-shell-sidebar-toggle', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n type=\"button\"\r\n class=\"app-shell-sidebar-toggle__btn\"\r\n [attr.aria-pressed]=\"collapsed\"\r\n [attr.aria-expanded]=\"!collapsed\"\r\n [attr.aria-label]=\"collapsed ? expandLabel : collapseLabel\"\r\n [attr.title]=\"collapsed ? expandLabel : collapseLabel\"\r\n (click)=\"onClick()\"\r\n>\r\n <i\r\n class=\"fa-solid\"\r\n [class.fa-angles-left]=\"!collapsed\"\r\n [class.fa-angles-right]=\"collapsed\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex:0 0 auto;align-items:center;justify-content:inherit;width:100%;min-width:0;box-sizing:border-box}.app-shell-sidebar-toggle__btn{display:inline-flex;align-items:center;justify-content:center;width:2.35rem;height:2.35rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--app-color-text-secondary, #4a6682);cursor:pointer;line-height:1;font-size:.92rem;transition:background .16s ease,color .16s ease}.app-shell-sidebar-toggle__btn:hover{background:color-mix(in srgb,var(--app-color-primary) 6%,transparent);color:var(--app-color-primary)}.app-shell-sidebar-toggle__btn:focus-visible{outline:2px solid var(--app-color-nav-focus-ring);outline-offset:2px}\n"] }]
|
|
10508
10531
|
}], propDecorators: { collapsed: [{
|
|
10509
10532
|
type: Input,
|
|
10510
10533
|
args: [{ transform: booleanAttribute }]
|
|
@@ -10610,5 +10633,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10610
10633
|
* Generated bundle index. Do not edit.
|
|
10611
10634
|
*/
|
|
10612
10635
|
|
|
10613
|
-
export { ADAPTIVE_DATA_VIEW_MOBILE_QUERY, APP_SIDEBAR_LABEL_REVEAL_LAG_MS, APP_SIDEBAR_LAYOUT_DURATION_MS, APP_SIDEBAR_NAV_REVEAL_TOTAL_MS, APP_THEME_BASE_CLASS, APP_THEME_IDS, ActionMenuComponent, AdaptiveDataViewComponent, AlertComponent, AnchoredOverlayComponent, AppBreadcrumbComponent, AppDialogComponent, AppLibLightBlockScrollStrategy, AppShellComponent, AppShellSidebarTemplateDirective, AppShellSidebarToggleComponent, AppSidebarComponent, AppSidebarToolbarDirective, AppTheme, AppThemeService, AppTopbarComponent, AppUserMenuComponent, BR_ESTADOS_NOME_SIGLA, BaseFieldComponent, BaseFieldDirective, BooleanFieldDirective, ButtonComponent, ButtonRadius, ButtonSize, ButtonType, ButtonVariant, CardListComponent, CepFieldComponent, CheckboxFieldComponent, ConfirmDialogComponent, ConfirmDialogService, ContextMenuComponent, CpfCnpjFieldComponent, DashboardSectionComponent, DataCardComponent, DataGridComponent, DataListComponent, DataToolbarComponent, DateFieldComponent, DecimalFieldComponent, DetailsFieldComponent, DetailsViewComponent, DialogFooterDirective, DividerComponent, DrawerComponent, DrawerSide, DrawerSize, DropdownBaseComponent, DropdownMenuComponent, DropdownMultiOptionFieldBase, DropdownOptionFieldBase, DropdownSearchFieldComponent, EmptyStateComponent, FILE_PREVIEW_UNAVAILABLE_MESSAGE, FileUploadFieldComponent, FormActionsAlign, FormActionsComponent, FormColComponent, FormGroupComponent, FormGroupVariant, FormLayoutGap, FormRowAlign, FormRowComponent, FormRowJustify, FormSectionAlign, FormSectionComponent, FormSectionRadius, FormSectionVariant, FormTabComponent, FormTabsComponent, ImagePreviewPanelComponent, InputMaskFieldComponent, IntegerFieldComponent, LAYOUT_STACK_SIDE_BY_SIDE, LAYOUT_STACK_STACKED, LayoutStackAlign, LayoutStackComponent, LayoutStackDirection, LayoutStackItemAlign, LibDialogSize, ListItemComponent, LoadingDialogComponent, LoadingDialogService, MaskedTextFieldBase, MenuDividerComponent, MenuDropdownPlacement, MenuGroupComponent, MenuListComponent, MultiselectFieldComponent, NgControlFieldDirective, OverlayPlacement, PDF_IFRAME_VIEWER_HASH, PasswordFieldComponent, PhoneFieldComponent, PopoverBodyTemplateDirective, PopoverComponent, PopoverFooterTemplateDirective, PopoverTriggerDirective, STRUCTRA_THEME_IDS, STRUCTRA_UI, SelectFieldComponent, SkeletonBlockComponent, SkeletonCardComponent, SkeletonFieldShellComponent, SkeletonListComponent, SkeletonTableComponent, SkeletonTextComponent, StatCardComponent, StatusBadgeComponent, SwitchFieldComponent, TableEmptyStateComponent, TableToolbarComponent, TextFieldComponent, TextareaFieldComponent, ThemeDirective, ToastHostComponent, ToastService, TooltipComponent, TooltipPanelTemplateDirective, ValidationSummaryComponent, anchoredOverlayPositions, appendPdfIframeViewerParams, applyPickedCalendarDate, buildDecimalBrDisplay, buildDecimalBrParseString, buildEmptyStateOverlayHtml, caretIndexFromIntegerDigitCount, caretIndexFromSemantic, cepMaskCompleteValidator, cpfCnpjMaskCompleteValidator, escapeHtml, extractDecimalBrParts, fileIsLikelyImage, fileMatchesAccept, fixedDigitsMaskCompleteValidator, formatAcceptForDisplay, formatDateTimePtBr, formatDecimalBr, formatFileSizeBytes, formatIntegerThousandsBr, formatMaskDigits, formatUiFieldDateValue, getFilePreviewKind, getThemeClass, getThemeClassList, getThemeTokenClass, injectEffectiveThemeId, libDialogPanelClasses, mapEstadosToOptions, maskDigitCount, normalizeFormDateValue, normalizeStructraTheme, parseDecimalBr, parseIntegerString, parseUiFieldDateValue, phoneBrMaskCompleteValidator, resolveControlAtPath, sanitizeDecimalBrInput, sanitizeIntegerDigits, sectionHasVisibleInvalid, semanticCaretAt, semanticIntegerDigitCountLeft, stripToDigits, subscribeMarkForCheckOnInvalidUiRefresh, subtreeHasVisibleInvalid };
|
|
10636
|
+
export { ADAPTIVE_DATA_VIEW_MOBILE_QUERY, APP_SIDEBAR_LABEL_REVEAL_LAG_MS, APP_SIDEBAR_LAYOUT_DURATION_MS, APP_SIDEBAR_NAV_REVEAL_TOTAL_MS, APP_THEME_BASE_CLASS, APP_THEME_IDS, ActionMenuComponent, AdaptiveDataViewComponent, AlertComponent, AnchoredOverlayComponent, AppBreadcrumbComponent, AppDialogComponent, AppLibLightBlockScrollStrategy, AppShellComponent, AppShellSidebarTemplateDirective, AppShellSidebarToggleComponent, AppSidebarComponent, AppSidebarToolbarDirective, AppTheme, AppThemeService, AppTopbarComponent, AppUserMenuComponent, BR_ESTADOS_NOME_SIGLA, BaseFieldComponent, BaseFieldDirective, BooleanFieldDirective, ButtonComponent, ButtonRadius, ButtonSize, ButtonType, ButtonVariant, CardListComponent, CepFieldComponent, CheckboxFieldComponent, ConfirmDialogComponent, ConfirmDialogService, ContextMenuComponent, CpfCnpjFieldComponent, DashboardSectionComponent, DataCardComponent, DataGridComponent, DataListComponent, DataToolbarComponent, DateFieldComponent, DecimalFieldComponent, DetailsFieldComponent, DetailsViewComponent, DialogFooterDirective, DividerComponent, DrawerComponent, DrawerSide, DrawerSize, DropdownBaseComponent, DropdownMenuComponent, DropdownMultiOptionFieldBase, DropdownOptionFieldBase, DropdownSearchFieldComponent, EmptyStateComponent, FILE_PREVIEW_UNAVAILABLE_MESSAGE, FileUploadFieldComponent, FormActionsAlign, FormActionsComponent, FormColComponent, FormGroupComponent, FormGroupVariant, FormLayoutGap, FormRowAlign, FormRowComponent, FormRowJustify, FormSectionAlign, FormSectionComponent, FormSectionRadius, FormSectionVariant, FormTabComponent, FormTabsComponent, ImagePreviewPanelComponent, InputMaskFieldComponent, IntegerFieldComponent, LAYOUT_STACK_SIDE_BY_SIDE, LAYOUT_STACK_STACKED, LayoutStackAlign, LayoutStackComponent, LayoutStackDirection, LayoutStackItemAlign, LibDialogSize, ListItemComponent, LoadingDialogComponent, LoadingDialogService, MaskedTextFieldBase, MenuDividerComponent, MenuDropdownPlacement, MenuGroupComponent, MenuListComponent, MultiselectFieldComponent, NgControlFieldDirective, OverlayPlacement, PDF_IFRAME_VIEWER_HASH, PasswordFieldComponent, PhoneFieldComponent, PopoverBodyTemplateDirective, PopoverComponent, PopoverFooterTemplateDirective, PopoverTriggerDirective, STRUCTRA_THEME_IDS, STRUCTRA_UI, SelectFieldComponent, SkeletonBlockComponent, SkeletonCardComponent, SkeletonFieldShellComponent, SkeletonListComponent, SkeletonTableComponent, SkeletonTextComponent, StatCardComponent, StatusBadgeComponent, SwitchFieldComponent, TableEmptyStateComponent, TableToolbarComponent, TextFieldComponent, TextareaFieldComponent, ThemeDirective, ToastHostComponent, ToastService, TooltipComponent, TooltipPanelTemplateDirective, ValidationSummaryComponent, anchoredOverlayPositions, appendPdfIframeViewerParams, applyOptionalThemeHostClasses, applyPickedCalendarDate, buildDecimalBrDisplay, buildDecimalBrParseString, buildEmptyStateOverlayHtml, caretIndexFromIntegerDigitCount, caretIndexFromSemantic, cepMaskCompleteValidator, cpfCnpjMaskCompleteValidator, escapeHtml, extractDecimalBrParts, fileIsLikelyImage, fileMatchesAccept, fixedDigitsMaskCompleteValidator, formatAcceptForDisplay, formatDateTimePtBr, formatDecimalBr, formatFileSizeBytes, formatIntegerThousandsBr, formatMaskDigits, formatUiFieldDateValue, getFilePreviewKind, getThemeClass, getThemeClassList, getThemeTokenClass, injectEffectiveThemeId, libDialogPanelClasses, mapEstadosToOptions, maskDigitCount, normalizeFormDateValue, normalizeStructraTheme, parseDecimalBr, parseIntegerString, parseUiFieldDateValue, phoneBrMaskCompleteValidator, resolveControlAtPath, sanitizeDecimalBrInput, sanitizeIntegerDigits, sectionHasVisibleInvalid, semanticCaretAt, semanticIntegerDigitCountLeft, stripToDigits, subscribeMarkForCheckOnInvalidUiRefresh, subtreeHasVisibleInvalid };
|
|
10614
10637
|
//# sourceMappingURL=structra-ui.mjs.map
|