structra-ui 0.2.40 → 0.2.41
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
|
@@ -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,
|
|
3
|
+
import { signal, booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component, ElementRef, ViewChild, inject, ChangeDetectorRef, Injector, DestroyRef, EventEmitter, Output, Directive, numberAttribute, computed, Injectable, input, HostListener, ViewChildren, forwardRef, ApplicationRef, afterNextRender, ContentChildren, NgZone, ViewContainerRef, Renderer2, effect, TemplateRef, ContentChild } from '@angular/core';
|
|
4
4
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
5
|
import * as i1$1 from '@angular/forms';
|
|
6
6
|
import { Validators, FormGroupDirective, NgForm, NgControl, NG_VALUE_ACCESSOR, FormsModule, FormGroup, FormArray, FormControl } from '@angular/forms';
|
|
@@ -807,11 +807,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
807
807
|
}] });
|
|
808
808
|
|
|
809
809
|
class ThemeDirective {
|
|
810
|
-
constructor() {
|
|
810
|
+
constructor(elementRef, renderer, themeService) {
|
|
811
|
+
this.elementRef = elementRef;
|
|
812
|
+
this.renderer = renderer;
|
|
813
|
+
this.themeService = themeService;
|
|
811
814
|
this.theme = 'black';
|
|
812
|
-
this.elementRef = inject((ElementRef));
|
|
813
|
-
this.renderer = inject(Renderer2);
|
|
814
|
-
this.themeService = inject(AppThemeService);
|
|
815
815
|
this.themeTokenClasses = STRUCTRA_THEME_IDS.map((themeId) => `theme-${themeId}`);
|
|
816
816
|
}
|
|
817
817
|
ngOnChanges() {
|
|
@@ -824,7 +824,7 @@ class ThemeDirective {
|
|
|
824
824
|
/** Overlays / hosts que leem {@link AppThemeService} alinham com o mesmo tema do wrapper. */
|
|
825
825
|
this.themeService.setTheme(normalizeStructraTheme(this.theme));
|
|
826
826
|
}
|
|
827
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
827
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: AppThemeService }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
828
828
|
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 }); }
|
|
829
829
|
}
|
|
830
830
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeDirective, decorators: [{
|
|
@@ -833,7 +833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
833
833
|
selector: '[appTheme]',
|
|
834
834
|
standalone: true,
|
|
835
835
|
}]
|
|
836
|
-
}], propDecorators: { theme: [{
|
|
836
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: AppThemeService }], propDecorators: { theme: [{
|
|
837
837
|
type: Input,
|
|
838
838
|
args: ['appTheme']
|
|
839
839
|
}] } });
|
|
@@ -1069,54 +1069,54 @@ class MenuGroupComponent {
|
|
|
1069
1069
|
this.toggleExpand = new EventEmitter();
|
|
1070
1070
|
}
|
|
1071
1071
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1072
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuGroupComponent, isStandalone: true, selector: "app-menu-group", inputs: { label: "label", hideLabel: ["hideLabel", "hideLabel", booleanAttribute], collapsible: ["collapsible", "collapsible", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { toggleExpand: "toggleExpand" }, ngImport: i0, template: `
|
|
1073
|
-
@if (label?.trim() && !hideLabel) {
|
|
1074
|
-
@if (collapsible) {
|
|
1075
|
-
<button
|
|
1076
|
-
type="button"
|
|
1077
|
-
class="menu-list__group-toggle"
|
|
1078
|
-
[attr.aria-expanded]="expanded"
|
|
1079
|
-
(click)="toggleExpand.emit()"
|
|
1080
|
-
>
|
|
1081
|
-
<span class="menu-list__group-toggle-label">{{ label }}</span>
|
|
1082
|
-
<span class="menu-list__group-toggle-icon" aria-hidden="true">
|
|
1083
|
-
@if (expanded) {
|
|
1084
|
-
<i class="fa-solid fa-chevron-up"></i>
|
|
1085
|
-
} @else {
|
|
1086
|
-
<i class="fa-solid fa-chevron-down"></i>
|
|
1087
|
-
}
|
|
1088
|
-
</span>
|
|
1089
|
-
</button>
|
|
1090
|
-
} @else {
|
|
1091
|
-
<div class="menu-list__group-label" role="presentation">{{ label }}</div>
|
|
1092
|
-
}
|
|
1093
|
-
}
|
|
1072
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuGroupComponent, isStandalone: true, selector: "app-menu-group", inputs: { label: "label", hideLabel: ["hideLabel", "hideLabel", booleanAttribute], collapsible: ["collapsible", "collapsible", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { toggleExpand: "toggleExpand" }, ngImport: i0, template: `
|
|
1073
|
+
@if (label?.trim() && !hideLabel) {
|
|
1074
|
+
@if (collapsible) {
|
|
1075
|
+
<button
|
|
1076
|
+
type="button"
|
|
1077
|
+
class="menu-list__group-toggle"
|
|
1078
|
+
[attr.aria-expanded]="expanded"
|
|
1079
|
+
(click)="toggleExpand.emit()"
|
|
1080
|
+
>
|
|
1081
|
+
<span class="menu-list__group-toggle-label">{{ label }}</span>
|
|
1082
|
+
<span class="menu-list__group-toggle-icon" aria-hidden="true">
|
|
1083
|
+
@if (expanded) {
|
|
1084
|
+
<i class="fa-solid fa-chevron-up"></i>
|
|
1085
|
+
} @else {
|
|
1086
|
+
<i class="fa-solid fa-chevron-down"></i>
|
|
1087
|
+
}
|
|
1088
|
+
</span>
|
|
1089
|
+
</button>
|
|
1090
|
+
} @else {
|
|
1091
|
+
<div class="menu-list__group-label" role="presentation">{{ label }}</div>
|
|
1092
|
+
}
|
|
1093
|
+
}
|
|
1094
1094
|
`, isInline: true, styles: [".menu-list__group-label{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--app-color-nav-group-heading, #9ca3af);padding:.65rem .75rem .4rem;margin-top:.15rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08))}.menu-list__group-label:first-child{margin-top:0;padding-top:.4rem;border-top:none}.menu-list__group-toggle{display:flex;align-items:center;justify-content:space-between;gap:.35rem;width:100%;margin:0;margin-top:.15rem;padding:.65rem .75rem .4rem;border:none;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08));border-radius:0;background:transparent;cursor:pointer;text-align:start;font:inherit;color:var(--app-color-nav-group-heading, #9ca3af);box-sizing:border-box;-webkit-tap-highlight-color:transparent}.menu-list__group-toggle:first-child{margin-top:0;padding-top:.4rem;border-top:none}.menu-list__group-toggle:hover{color:#6b7280}.menu-list__group-toggle:focus-visible{outline:2px solid var(--app-color-nav-focus-ring, #2b6cb0);outline-offset:2px}.menu-list__group-toggle-label{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;flex:1 1 auto;min-width:0}.menu-list__group-toggle-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-size:.65rem;line-height:1;opacity:.85;color:currentColor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1095
1095
|
}
|
|
1096
1096
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuGroupComponent, decorators: [{
|
|
1097
1097
|
type: Component,
|
|
1098
|
-
args: [{ selector: 'app-menu-group', standalone: true, template: `
|
|
1099
|
-
@if (label?.trim() && !hideLabel) {
|
|
1100
|
-
@if (collapsible) {
|
|
1101
|
-
<button
|
|
1102
|
-
type="button"
|
|
1103
|
-
class="menu-list__group-toggle"
|
|
1104
|
-
[attr.aria-expanded]="expanded"
|
|
1105
|
-
(click)="toggleExpand.emit()"
|
|
1106
|
-
>
|
|
1107
|
-
<span class="menu-list__group-toggle-label">{{ label }}</span>
|
|
1108
|
-
<span class="menu-list__group-toggle-icon" aria-hidden="true">
|
|
1109
|
-
@if (expanded) {
|
|
1110
|
-
<i class="fa-solid fa-chevron-up"></i>
|
|
1111
|
-
} @else {
|
|
1112
|
-
<i class="fa-solid fa-chevron-down"></i>
|
|
1113
|
-
}
|
|
1114
|
-
</span>
|
|
1115
|
-
</button>
|
|
1116
|
-
} @else {
|
|
1117
|
-
<div class="menu-list__group-label" role="presentation">{{ label }}</div>
|
|
1118
|
-
}
|
|
1119
|
-
}
|
|
1098
|
+
args: [{ selector: 'app-menu-group', standalone: true, template: `
|
|
1099
|
+
@if (label?.trim() && !hideLabel) {
|
|
1100
|
+
@if (collapsible) {
|
|
1101
|
+
<button
|
|
1102
|
+
type="button"
|
|
1103
|
+
class="menu-list__group-toggle"
|
|
1104
|
+
[attr.aria-expanded]="expanded"
|
|
1105
|
+
(click)="toggleExpand.emit()"
|
|
1106
|
+
>
|
|
1107
|
+
<span class="menu-list__group-toggle-label">{{ label }}</span>
|
|
1108
|
+
<span class="menu-list__group-toggle-icon" aria-hidden="true">
|
|
1109
|
+
@if (expanded) {
|
|
1110
|
+
<i class="fa-solid fa-chevron-up"></i>
|
|
1111
|
+
} @else {
|
|
1112
|
+
<i class="fa-solid fa-chevron-down"></i>
|
|
1113
|
+
}
|
|
1114
|
+
</span>
|
|
1115
|
+
</button>
|
|
1116
|
+
} @else {
|
|
1117
|
+
<div class="menu-list__group-label" role="presentation">{{ label }}</div>
|
|
1118
|
+
}
|
|
1119
|
+
}
|
|
1120
1120
|
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".menu-list__group-label{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--app-color-nav-group-heading, #9ca3af);padding:.65rem .75rem .4rem;margin-top:.15rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08))}.menu-list__group-label:first-child{margin-top:0;padding-top:.4rem;border-top:none}.menu-list__group-toggle{display:flex;align-items:center;justify-content:space-between;gap:.35rem;width:100%;margin:0;margin-top:.15rem;padding:.65rem .75rem .4rem;border:none;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08));border-radius:0;background:transparent;cursor:pointer;text-align:start;font:inherit;color:var(--app-color-nav-group-heading, #9ca3af);box-sizing:border-box;-webkit-tap-highlight-color:transparent}.menu-list__group-toggle:first-child{margin-top:0;padding-top:.4rem;border-top:none}.menu-list__group-toggle:hover{color:#6b7280}.menu-list__group-toggle:focus-visible{outline:2px solid var(--app-color-nav-focus-ring, #2b6cb0);outline-offset:2px}.menu-list__group-toggle-label{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;flex:1 1 auto;min-width:0}.menu-list__group-toggle-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-size:.65rem;line-height:1;opacity:.85;color:currentColor}\n"] }]
|
|
1121
1121
|
}], propDecorators: { label: [{
|
|
1122
1122
|
type: Input
|