s4y-ui 7.1.0 → 7.3.0
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/s4y-ui.mjs +290 -241
- package/fesm2022/s4y-ui.mjs.map +1 -1
- package/lib/components/table/directive/table-sort.directive.d.ts +2 -2
- package/lib/components/table/directive/table-sticky.directive.d.ts +10 -0
- package/lib/components/table/index.d.ts +1 -0
- package/lib/components/table/table.component.d.ts +15 -1
- package/package.json +1 -1
package/fesm2022/s4y-ui.mjs
CHANGED
|
@@ -8,9 +8,9 @@ import * as i1$2 from '@angular/router';
|
|
|
8
8
|
import { Router, RouterModule, GuardsCheckEnd } from '@angular/router';
|
|
9
9
|
import { catchError, map, filter } from 'rxjs/operators';
|
|
10
10
|
import { defer, from, throwError, Subject, BehaviorSubject, map as map$1, takeUntil, Subscription, filter as filter$1, fromEvent, isObservable, firstValueFrom, ReplaySubject, take, finalize, catchError as catchError$1, of } from 'rxjs';
|
|
11
|
-
import * as
|
|
12
|
-
import { CdkScrollableModule, CdkScrollable } from '@angular/cdk/scrolling';
|
|
13
|
-
import * as i2 from '@angular/forms';
|
|
11
|
+
import * as i2 from '@angular/cdk/scrolling';
|
|
12
|
+
import { CdkScrollableModule, ScrollingModule, CdkScrollable } from '@angular/cdk/scrolling';
|
|
13
|
+
import * as i2$1 from '@angular/forms';
|
|
14
14
|
import { NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
|
|
15
15
|
import { trigger, transition, animate, style, group, query, state } from '@angular/animations';
|
|
16
16
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
@@ -21,10 +21,10 @@ class DashboardLayoutComponent {
|
|
|
21
21
|
asideTemplate;
|
|
22
22
|
navTemplate;
|
|
23
23
|
rightPanel;
|
|
24
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
25
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
24
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DashboardLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: DashboardLayoutComponent, isStandalone: false, selector: "s4y-dashboard-layout", queries: [{ propertyName: "asideTemplate", first: true, predicate: ["asideTemplate"], descendants: true }, { propertyName: "navTemplate", first: true, predicate: ["navTemplate"], descendants: true }, { propertyName: "rightPanel", first: true, predicate: ["rightPanel"], descendants: true }], ngImport: i0, template: "<div class=\"s4y-dashboard-layout\">\r\n @if (asideTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"asideTemplate\"></ng-container>\r\n } @else {\r\n <ng-content select=\"s4y-aside\"></ng-content>\r\n }\r\n <div class=\"s4y-dashboard-layout__content\">\r\n @if (navTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"navTemplate\"></ng-container>\r\n } @else {\r\n <ng-content select=\"s4y-navbar\"></ng-content>\r\n }\r\n <ng-content select=\"s4y-dashboard-routes\"></ng-content>\r\n </div>\r\n @if (rightPanel) {\r\n <ng-container [ngTemplateOutlet]=\"rightPanel\"></ng-container>\r\n }\r\n</div>\r\n", styles: [".s4y-dashboard-layout{height:100dvh;width:100dvw;display:flex;overflow:hidden}.s4y-dashboard-layout__content{flex-grow:1;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
26
26
|
}
|
|
27
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
27
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DashboardLayoutComponent, decorators: [{
|
|
28
28
|
type: Component,
|
|
29
29
|
args: [{ selector: 's4y-dashboard-layout', standalone: false, template: "<div class=\"s4y-dashboard-layout\">\r\n @if (asideTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"asideTemplate\"></ng-container>\r\n } @else {\r\n <ng-content select=\"s4y-aside\"></ng-content>\r\n }\r\n <div class=\"s4y-dashboard-layout__content\">\r\n @if (navTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"navTemplate\"></ng-container>\r\n } @else {\r\n <ng-content select=\"s4y-navbar\"></ng-content>\r\n }\r\n <ng-content select=\"s4y-dashboard-routes\"></ng-content>\r\n </div>\r\n @if (rightPanel) {\r\n <ng-container [ngTemplateOutlet]=\"rightPanel\"></ng-container>\r\n }\r\n</div>\r\n", styles: [".s4y-dashboard-layout{height:100dvh;width:100dvw;display:flex;overflow:hidden}.s4y-dashboard-layout__content{flex-grow:1;position:relative}\n"] }]
|
|
30
30
|
}], propDecorators: { asideTemplate: [{
|
|
@@ -67,10 +67,10 @@ class AsideService {
|
|
|
67
67
|
window.removeEventListener('resize', this.resizeHandler);
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
71
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
70
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: AsideService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
71
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: AsideService, providedIn: 'root' });
|
|
72
72
|
}
|
|
73
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
73
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: AsideService, decorators: [{
|
|
74
74
|
type: Injectable,
|
|
75
75
|
args: [{
|
|
76
76
|
providedIn: 'root',
|
|
@@ -80,10 +80,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
80
80
|
class NavbarComponent {
|
|
81
81
|
_asideService = inject(AsideService);
|
|
82
82
|
actionsTemplate;
|
|
83
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
84
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
83
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
84
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: NavbarComponent, isStandalone: false, selector: "s4y-navbar", queries: [{ propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], ngImport: i0, template: "<nav class=\"s4y-navbar-container\">\r\n <button\r\n (click)=\"_asideService.onToggle()\"\r\n class=\"s4y-navbar-container__btn\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"menuIcon\"></ng-container>\r\n </button>\r\n\r\n <div class=\"s4y-navbar-container__actions\">\r\n <ng-container *ngIf=\"actionsTemplate\">\r\n <ng-container [ngTemplateOutlet]=\"actionsTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</nav>\r\n\r\n\r\n<ng-template #menuIcon>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path d=\"M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z\"></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [":host{display:block;display:flex;align-items:center;justify-content:center}.s4y-navbar-container{display:flex;justify-content:space-between;align-items:center;background-color:#fff;border-bottom:1px solid var(--gray-300);min-height:5.8rem;height:var(--nav-height);width:100%;padding:1.4rem}.s4y-navbar-container__actions{display:flex;gap:1.6rem}.s4y-navbar-container__btn{height:4.2rem;width:4.2rem;border-radius:100%;background-color:var(--gray-200);display:flex;align-items:center;justify-content:center}.s4y-navbar-container__btn svg{width:2.2rem;height:2.2rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
85
85
|
}
|
|
86
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
86
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
87
87
|
type: Component,
|
|
88
88
|
args: [{ selector: 's4y-navbar', standalone: false, template: "<nav class=\"s4y-navbar-container\">\r\n <button\r\n (click)=\"_asideService.onToggle()\"\r\n class=\"s4y-navbar-container__btn\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"menuIcon\"></ng-container>\r\n </button>\r\n\r\n <div class=\"s4y-navbar-container__actions\">\r\n <ng-container *ngIf=\"actionsTemplate\">\r\n <ng-container [ngTemplateOutlet]=\"actionsTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</nav>\r\n\r\n\r\n<ng-template #menuIcon>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path d=\"M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z\"></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [":host{display:block;display:flex;align-items:center;justify-content:center}.s4y-navbar-container{display:flex;justify-content:space-between;align-items:center;background-color:#fff;border-bottom:1px solid var(--gray-300);min-height:5.8rem;height:var(--nav-height);width:100%;padding:1.4rem}.s4y-navbar-container__actions{display:flex;gap:1.6rem}.s4y-navbar-container__btn{height:4.2rem;width:4.2rem;border-radius:100%;background-color:var(--gray-200);display:flex;align-items:center;justify-content:center}.s4y-navbar-container__btn svg{width:2.2rem;height:2.2rem}\n"] }]
|
|
89
89
|
}], propDecorators: { actionsTemplate: [{
|
|
@@ -131,10 +131,10 @@ class AvatarComponent {
|
|
|
131
131
|
onError() {
|
|
132
132
|
this.imageError.set(true);
|
|
133
133
|
}
|
|
134
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
135
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
134
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
135
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: AvatarComponent, isStandalone: true, selector: "s4y-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (src()) {\r\n<img [src]=\"src()\" [alt]=\"alt()\" />\r\n\r\n}@else {\r\n <svg\r\n viewBox=\"0 0 128 128\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n style=\"display:block\"\r\n >\r\n <circle cx=\"64\" cy=\"64\" r=\"64\" fill=\"#D9D9D9\" />\r\n\r\n <circle cx=\"64\" cy=\"48\" r=\"24\" fill=\"#A9AEB3\" />\r\n\r\n <path\r\n fill=\"#A9AEB3\"\r\n d=\"M64 80c-28 0-44 16-44 36v12h88v-12c0-20-16-36-44-36z\"\r\n />\r\n </svg>\r\n}\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}:host img{width:100%;height:100%;object-fit:cover;object-position:top center}:host.s4y-avatar-sm{width:32px;height:32px}:host.s4y-avatar-md{width:42px;height:42px}:host.s4y-avatar-lg{width:72px;height:72px}:host.s4y-avatar-xl{width:96px;height:96px}:host.s4y-avatar-rounded{border-radius:50%}:host.s4y-avatar-square{border-radius:8px}:host.s4y-avatar-border{border:1px solid var(--primary-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
136
136
|
}
|
|
137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
137
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
138
138
|
type: Component,
|
|
139
139
|
args: [{ selector: 's4y-avatar', imports: [CommonModule], template: "@if (src()) {\r\n<img [src]=\"src()\" [alt]=\"alt()\" />\r\n\r\n}@else {\r\n <svg\r\n viewBox=\"0 0 128 128\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n style=\"display:block\"\r\n >\r\n <circle cx=\"64\" cy=\"64\" r=\"64\" fill=\"#D9D9D9\" />\r\n\r\n <circle cx=\"64\" cy=\"48\" r=\"24\" fill=\"#A9AEB3\" />\r\n\r\n <path\r\n fill=\"#A9AEB3\"\r\n d=\"M64 80c-28 0-44 16-44 36v12h88v-12c0-20-16-36-44-36z\"\r\n />\r\n </svg>\r\n}\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}:host img{width:100%;height:100%;object-fit:cover;object-position:top center}:host.s4y-avatar-sm{width:32px;height:32px}:host.s4y-avatar-md{width:42px;height:42px}:host.s4y-avatar-lg{width:72px;height:72px}:host.s4y-avatar-xl{width:96px;height:96px}:host.s4y-avatar-rounded{border-radius:50%}:host.s4y-avatar-square{border-radius:8px}:host.s4y-avatar-border{border:1px solid var(--primary-color)}\n"] }]
|
|
140
140
|
}], propDecorators: { hostClasses: [{
|
|
@@ -161,10 +161,10 @@ class SvgService {
|
|
|
161
161
|
return throwError(() => error);
|
|
162
162
|
}));
|
|
163
163
|
}
|
|
164
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
165
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
164
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SvgService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
165
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SvgService, providedIn: 'root' });
|
|
166
166
|
}
|
|
167
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
167
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SvgService, decorators: [{
|
|
168
168
|
type: Injectable,
|
|
169
169
|
args: [{
|
|
170
170
|
providedIn: 'root',
|
|
@@ -221,10 +221,10 @@ class SvgComponent {
|
|
|
221
221
|
.getSvgContent(src)
|
|
222
222
|
.pipe(map((content) => this.sanitizer.bypassSecurityTrustHtml(content)));
|
|
223
223
|
}
|
|
224
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
225
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
224
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SvgComponent, deps: [{ token: i1$1.DomSanitizer }, { token: SvgService }], target: i0.ɵɵFactoryTarget.Component });
|
|
225
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: SvgComponent, isStandalone: true, selector: "s4y-svg", inputs: { src: "src", color: "color", size: "size" }, host: { properties: { "style.color": "this.color", "style.width": "this.hostWidth", "style.height": "this.hostHeight" } }, ngImport: i0, template: "<div class=\"icon-inner\" [innerHTML]=\"svgContent | async\" ></div>\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;--icon-font-size: 1em;font-size:var(--icon-font-size);width:1em;height:1em;color:currentColor;contain:content;box-sizing:content-box!important}.icon-inner{display:contents}:host ::ng-deep svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%}:host ::ng-deep svg [fill]:not([fill=none]){fill:currentColor}:host ::ng-deep svg [stroke]:not([stroke=none]){stroke:currentColor}:host(.small){width:16px;height:16px}:host(.default){width:24px;height:24px}:host(.large){width:32px;height:32px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
226
226
|
}
|
|
227
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
227
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SvgComponent, decorators: [{
|
|
228
228
|
type: Component,
|
|
229
229
|
args: [{ selector: 's4y-svg', imports: [AsyncPipe, JsonPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"icon-inner\" [innerHTML]=\"svgContent | async\" ></div>\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;--icon-font-size: 1em;font-size:var(--icon-font-size);width:1em;height:1em;color:currentColor;contain:content;box-sizing:content-box!important}.icon-inner{display:contents}:host ::ng-deep svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%}:host ::ng-deep svg [fill]:not([fill=none]){fill:currentColor}:host ::ng-deep svg [stroke]:not([stroke=none]){stroke:currentColor}:host(.small){width:16px;height:16px}:host(.default){width:24px;height:24px}:host(.large){width:32px;height:32px}\n"] }]
|
|
230
230
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: SvgService }], propDecorators: { src: [{
|
|
@@ -284,14 +284,14 @@ class AsideComponent {
|
|
|
284
284
|
closeByOverlay() {
|
|
285
285
|
this.asideService.onToggle();
|
|
286
286
|
}
|
|
287
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
288
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: AsideComponent, isStandalone: false, selector: "s4y-aside", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, companyLogoSrc: { classPropertyName: "companyLogoSrc", publicName: "companyLogoSrc", isSignal: true, isRequired: false, transformFunction: null }, companyTitle: { classPropertyName: "companyTitle", publicName: "companyTitle", isSignal: true, isRequired: false, transformFunction: null }, companyDescription: { classPropertyName: "companyDescription", publicName: "companyDescription", isSignal: true, isRequired: false, transformFunction: null }, userImage: { classPropertyName: "userImage", publicName: "userImage", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, userEmail: { classPropertyName: "userEmail", publicName: "userEmail", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-opened": "isOpened()" } }, queries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"s4y-aside-overlay\" (click)=\"closeByOverlay()\"></div>\r\n\r\n<aside [attr.data-opened]=\"isOpened()\" class=\"s4y-aside\">\r\n <div class=\"s4y-aside-header__container\">\r\n @if (headerTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\r\n } @else {\r\n <div class=\"s4y-aside-header\">\r\n <img class=\"s4y-aside-logo\" [src]=\"companyLogoSrc()\" />\r\n <div class=\"s4y-aside-header__infor\">\r\n <p class=\"s4y-aside-title\">{{ companyTitle() }}</p>\r\n <p class=\"s4y-aside-description\">{{ companyDescription() }}</p>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"s4y-aside-body__container\">\r\n <!-- Body Abaixo -->\r\n <div class=\"s4y-aside-body-section\">\r\n @for (menu of menus(); track $index) {\r\n <div class=\"s4y-aside-body-section__item\">\r\n <div\r\n class=\"s4y-aside-body-section-item__infor\"\r\n [class.active]=\"menu.isOpen\"\r\n (click)=\"onToggle(menu)\"\r\n >\r\n <div\r\n class=\"s4y-aside-body-section-item-title\"\r\n [class.closed]=\"!isOpened\"\r\n >\r\n @if (menuTemplate) {\r\n <ng-container\r\n *ngTemplateOutlet=\"menuTemplate; context: { $implicit: menu }\"\r\n ></ng-container>\r\n } @else\r\n { @if (menu.iconUri) {\r\n <s4y-svg size=\"default\" color=\"#fff\" [src]=\"menu.iconUri\"> </s4y-svg>\r\n }\r\n <p>{{ menu.title }}</p>\r\n }\r\n </div>\r\n\r\n @if (menu.children?.length) {\r\n <!-- -->\r\n @if (menu.isOpen) {\r\n <ng-container [ngTemplateOutlet]=\"arrowBottom\"></ng-container>\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n }\r\n <!-- -->\r\n }\r\n </div>\r\n <div class=\"s4y-aside-body-section-item__children\" [class.is-opened]=\"menu.isOpen\">\r\n @for (children of menu.children; track $index) {\r\n <div class=\"s4y-aside-body-section-item-children__item\">\r\n <a role=\"link\" routerLinkActive=\"children-active\" [routerLinkActiveOptions]=\"{exact: true}\" [routerLink]=\"children.link\">{{ children.title }}</a>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- <div class=\"s4y-aside-body-section__scroll\"></div> -->\r\n </div>\r\n <!-- Body Acima -->\r\n <div class=\"s4y-aside-body__user\" [class.s4y-aside-body__user_divider]=\"footerTemplate || (userImage() && userName() && userEmail())\">\r\n @if (footerTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\r\n } @else {\r\n @if (userImage()) {\r\n <s4y-avatar [src]=\"userImage()\"></s4y-avatar>\r\n }\r\n <div class=\"s4y-aside-body-user__infor\">\r\n <p class=\"s4y-aside-body-user_name\">{{ userName() }}</p>\r\n <p class=\"s4y-aside-body-user_email\">{{ userEmail() }}</p>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</aside>\r\n\r\n<ng-template #arrowRight>\r\n <span class=\"s4y-aside-arrow\">\r\n <svg\r\n width=\"1.8rem\"\r\n height=\"1.8rem\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n</ng-template>\r\n<ng-template #arrowBottom>\r\n <span class=\"s4y-aside-arrow\">\r\n <svg\r\n width=\"1.8rem\"\r\n height=\"1.8rem\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.s4y-aside-overlay{display:none}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}.s4y-aside{background-color:var(--primary-color);height:100dvh;overflow-x:hidden;width:8rem;border-right:1px solid var(--gray-200);display:flex;flex-direction:column;transition:.5s ease,padding .5s ease;flex-shrink:0}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-aside{position:fixed;top:0;left:0;width:80%;z-index:var(--z-index-emergency)}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-aside{position:fixed;top:0;left:0;width:80%;max-width:32rem;z-index:var(--z-index-emergency)}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-aside{position:fixed;top:0;left:0;width:80%;max-width:32rem;z-index:var(--z-index-emergency)}}.s4y-aside-header__container{height:var(--nav-height);position:relative;display:flex;align-items:center;border-bottom:1px solid var(--gray-200);padding:1.4rem 0;margin:0 1.4rem}.s4y-aside-header{display:flex;align-items:center;gap:1.4rem}.s4y-aside-logo{max-width:4rem;max-height:4rem;border-radius:var(--radius);object-fit:cover;border:1px solid var(--gray-300);flex-shrink:0}.s4y-aside-header__infor{display:flex;flex-direction:column;gap:.2}.s4y-aside-title{font-size:1.6rem;font-weight:700;color:var(--gray-100)}.s4y-aside-description{font-size:1.3rem;color:var(--gray-200)}.s4y-aside-body__container{display:flex;flex-direction:column;flex-grow:1}.s4y-aside-body-section{margin:1.8rem 1.4rem 0;flex-grow:1;overflow-y:auto;overflow-x:hidden;padding:1.4rem 0;display:flex;flex-direction:column;gap:.6rem;height:calc(100dvh - 15.4rem)}.s4y-aside-body-section-item__children{font-size:1.4rem;padding-left:4.2rem;display:flex;flex-direction:column;gap:1rem;color:var(--gray-100);max-height:0;overflow:hidden;pointer-events:none;visibility:hidden;transition:.3s ease}.s4y-aside-body-section-item__children a{cursor:pointer;font-size:1.3rem}.s4y-aside-body-section-item__children a:hover{text-decoration:underline;color:var(--gray-100)}.s4y-aside-body-section-item__children.is-opened{margin-top:.6rem;max-height:50rem;overflow:visible;pointer-events:all;visibility:visible;transition:.5s ease}.s4y-aside-body-section-item__children .children-active{text-decoration:underline;color:var(--gray-100)}.s4y-aside-body-section-item-children__item{white-space:nowrap}.s4y-aside-body-section-item__infor{padding:1rem;display:flex;align-items:center;justify-content:space-between;font-size:1.4rem;gap:.8rem;height:4rem;color:var(--gray-100);cursor:pointer;transition:.5s ease;white-space:nowrap}.s4y-aside-body-section-item__infor:hover{color:#fff;border-radius:var(--radius)}.s4y-aside-body-section-item__infor.active{border-radius:var(--radius);color:#fff}.s4y-aside-body-section-item-title{display:flex;align-items:center;justify-content:center;gap:.8rem}.s4y-aside-body-section-item-title img{width:2.8rem}.s4y-aside-body__user{height:6.8rem;padding:1.4rem 0;margin:0 1.4rem;display:flex;align-items:center;justify-content:flex-start;flex-shrink:0;gap:1.4rem;white-space:nowrap}.s4y-aside-body__user.s4y-aside-body__user_divider{border-top:1px solid var(--gray-200)}.s4y-aside-body-user__image{width:3.8rem;height:3.8rem;border-radius:100%;object-fit:cover;object-position:top center;flex-shrink:0}.s4y-aside-body-user_name{font-size:1.4rem;font-weight:700;color:var(--gray-100)}.s4y-aside-body-user_email{font-size:1.3rem;color:var(--gray-200)}@media screen and (min-width: 320px) and (max-width: 480px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 481px) and (max-width: 767px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 768px) and (max-width: 1024px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 1025px) and (max-width: 1280px){:host[data-opened=false] .s4y-aside-body-section-item__infor{align-items:center;justify-content:center}:host[data-opened=false] .s4y-aside-body-section-item-title p{display:none}:host[data-opened=false] .s4y-aside-body-section-item__children{display:none}:host[data-opened=false] .s4y-aside-arrow{display:none}:host[data-opened=false] .s4y-aside-header__infor{display:none}:host[data-opened=false] .s4y-aside-body-user__infor{display:none}:host[data-opened=false] .s4y-aside-header__container,:host[data-opened=false] .s4y-aside-body__user{align-items:center;justify-content:center}:host[data-opened=true] .s4y-aside{width:27rem}}@media screen and (min-width: 1281px){:host[data-opened=false] .s4y-aside-body-section-item__infor{align-items:center;justify-content:center}:host[data-opened=false] .s4y-aside-body-section-item-title p{display:none}:host[data-opened=false] .s4y-aside-body-section-item__children{display:none}:host[data-opened=false] .s4y-aside-arrow{display:none}:host[data-opened=false] .s4y-aside-header__infor{display:none}:host[data-opened=false] .s4y-aside-body-user__infor{display:none}:host[data-opened=false] .s4y-aside-header__container,:host[data-opened=false] .s4y-aside-body__user{align-items:center;justify-content:center}:host[data-opened=true] .s4y-aside{width:27rem}}\n"], dependencies: [{ 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"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarComponent, selector: "s4y-avatar", inputs: ["src", "alt", "size", "rounded", "border"] }, { kind: "component", type: SvgComponent, selector: "s4y-svg", inputs: ["src", "color", "size"] }] });
|
|
287
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: AsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
288
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: AsideComponent, isStandalone: false, selector: "s4y-aside", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, companyLogoSrc: { classPropertyName: "companyLogoSrc", publicName: "companyLogoSrc", isSignal: true, isRequired: false, transformFunction: null }, companyTitle: { classPropertyName: "companyTitle", publicName: "companyTitle", isSignal: true, isRequired: false, transformFunction: null }, companyDescription: { classPropertyName: "companyDescription", publicName: "companyDescription", isSignal: true, isRequired: false, transformFunction: null }, userImage: { classPropertyName: "userImage", publicName: "userImage", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, userEmail: { classPropertyName: "userEmail", publicName: "userEmail", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-opened": "isOpened()" } }, queries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"s4y-aside-overlay\" (click)=\"closeByOverlay()\"></div>\r\n\r\n<aside [attr.data-opened]=\"isOpened()\" class=\"s4y-aside\">\r\n <div class=\"s4y-aside-header__container\">\r\n @if (headerTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\r\n } @else {\r\n <div class=\"s4y-aside-header\">\r\n <img class=\"s4y-aside-logo\" [src]=\"companyLogoSrc()\" />\r\n <div class=\"s4y-aside-header__infor\">\r\n <p class=\"s4y-aside-title\">{{ companyTitle() }}</p>\r\n <p class=\"s4y-aside-description\">{{ companyDescription() }}</p>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"s4y-aside-body__container\">\r\n <!-- Body Abaixo -->\r\n <div class=\"s4y-aside-body-section\">\r\n @for (menu of menus(); track $index) {\r\n <div class=\"s4y-aside-body-section__item\">\r\n <div\r\n class=\"s4y-aside-body-section-item__infor\"\r\n [class.active]=\"menu.isOpen\"\r\n (click)=\"onToggle(menu)\"\r\n >\r\n <div\r\n class=\"s4y-aside-body-section-item-title\"\r\n [class.closed]=\"!isOpened\"\r\n >\r\n @if (menuTemplate) {\r\n <ng-container\r\n *ngTemplateOutlet=\"menuTemplate; context: { $implicit: menu }\"\r\n ></ng-container>\r\n } @else\r\n { @if (menu.iconUri) {\r\n <s4y-svg size=\"default\" color=\"#fff\" [src]=\"menu.iconUri\"> </s4y-svg>\r\n }\r\n <p>{{ menu.title }}</p>\r\n }\r\n </div>\r\n\r\n @if (menu.children?.length) {\r\n <!-- -->\r\n @if (menu.isOpen) {\r\n <ng-container [ngTemplateOutlet]=\"arrowBottom\"></ng-container>\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n }\r\n <!-- -->\r\n }\r\n </div>\r\n <div class=\"s4y-aside-body-section-item__children\" [class.is-opened]=\"menu.isOpen\">\r\n @for (children of menu.children; track $index) {\r\n <div class=\"s4y-aside-body-section-item-children__item\">\r\n <a role=\"link\" routerLinkActive=\"children-active\" [routerLinkActiveOptions]=\"{exact: true}\" [routerLink]=\"children.link\">{{ children.title }}</a>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- <div class=\"s4y-aside-body-section__scroll\"></div> -->\r\n </div>\r\n <!-- Body Acima -->\r\n <div class=\"s4y-aside-body__user\" [class.s4y-aside-body__user_divider]=\"footerTemplate || (userImage() && userName() && userEmail())\">\r\n @if (footerTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\r\n } @else {\r\n @if (userImage()) {\r\n <s4y-avatar [src]=\"userImage()\"></s4y-avatar>\r\n }\r\n <div class=\"s4y-aside-body-user__infor\">\r\n <p class=\"s4y-aside-body-user_name\">{{ userName() }}</p>\r\n <p class=\"s4y-aside-body-user_email\">{{ userEmail() }}</p>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</aside>\r\n\r\n<ng-template #arrowRight>\r\n <span class=\"s4y-aside-arrow\">\r\n <svg\r\n width=\"1.8rem\"\r\n height=\"1.8rem\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n</ng-template>\r\n<ng-template #arrowBottom>\r\n <span class=\"s4y-aside-arrow\">\r\n <svg\r\n width=\"1.8rem\"\r\n height=\"1.8rem\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.s4y-aside-overlay{display:none}@media screen and (min-width:320px)and (max-width:480px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width:481px)and (max-width:767px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}.s4y-aside{background-color:var(--primary-color);height:100dvh;overflow-x:hidden;width:8rem;border-right:1px solid var(--gray-200);display:flex;flex-direction:column;transition:.5s ease,padding .5s ease;flex-shrink:0}@media screen and (min-width:320px)and (max-width:480px){.s4y-aside{position:fixed;top:0;left:0;width:80%;z-index:var(--z-index-emergency)}}@media screen and (min-width:481px)and (max-width:767px){.s4y-aside{position:fixed;top:0;left:0;width:80%;max-width:32rem;z-index:var(--z-index-emergency)}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-aside{position:fixed;top:0;left:0;width:80%;max-width:32rem;z-index:var(--z-index-emergency)}}.s4y-aside-header__container{height:var(--nav-height);position:relative;display:flex;align-items:center;border-bottom:1px solid var(--gray-200);padding:1.4rem 0;margin:0 1.4rem}.s4y-aside-header{display:flex;align-items:center;gap:1.4rem}.s4y-aside-logo{max-width:4rem;max-height:4rem;border-radius:var(--radius);object-fit:cover;border:1px solid var(--gray-300);flex-shrink:0}.s4y-aside-header__infor{display:flex;flex-direction:column;gap:.2}.s4y-aside-title{font-size:1.6rem;font-weight:700;color:var(--gray-100)}.s4y-aside-description{font-size:1.3rem;color:var(--gray-200)}.s4y-aside-body__container{display:flex;flex-direction:column;flex-grow:1}.s4y-aside-body-section{margin:1.8rem 1.4rem 0;flex-grow:1;overflow-y:auto;overflow-x:hidden;padding:1.4rem 0;display:flex;flex-direction:column;gap:.6rem;height:calc(100dvh - 15.4rem)}.s4y-aside-body-section-item__children{font-size:1.4rem;padding-left:4.2rem;display:flex;flex-direction:column;gap:1rem;color:var(--gray-100);max-height:0;overflow:hidden;pointer-events:none;visibility:hidden;transition:.3s ease}.s4y-aside-body-section-item__children a{cursor:pointer;font-size:1.3rem}.s4y-aside-body-section-item__children a:hover{text-decoration:underline;color:var(--gray-100)}.s4y-aside-body-section-item__children.is-opened{margin-top:.6rem;max-height:50rem;overflow:visible;pointer-events:all;visibility:visible;transition:.5s ease}.s4y-aside-body-section-item__children .children-active{text-decoration:underline;color:var(--gray-100)}.s4y-aside-body-section-item-children__item{white-space:nowrap}.s4y-aside-body-section-item__infor{padding:1rem;display:flex;align-items:center;justify-content:space-between;font-size:1.4rem;gap:.8rem;height:4rem;color:var(--gray-100);cursor:pointer;transition:.5s ease;white-space:nowrap}.s4y-aside-body-section-item__infor:hover{color:#fff;border-radius:var(--radius)}.s4y-aside-body-section-item__infor.active{border-radius:var(--radius);color:#fff}.s4y-aside-body-section-item-title{display:flex;align-items:center;justify-content:center;gap:.8rem}.s4y-aside-body-section-item-title img{width:2.8rem}.s4y-aside-body__user{height:6.8rem;padding:1.4rem 0;margin:0 1.4rem;display:flex;align-items:center;justify-content:flex-start;flex-shrink:0;gap:1.4rem;white-space:nowrap}.s4y-aside-body__user.s4y-aside-body__user_divider{border-top:1px solid var(--gray-200)}.s4y-aside-body-user__image{width:3.8rem;height:3.8rem;border-radius:100%;object-fit:cover;object-position:top center;flex-shrink:0}.s4y-aside-body-user_name{font-size:1.4rem;font-weight:700;color:var(--gray-100)}.s4y-aside-body-user_email{font-size:1.3rem;color:var(--gray-200)}@media screen and (min-width:320px)and (max-width:480px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width:481px)and (max-width:767px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width:768px)and (max-width:1024px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width:1025px)and (max-width:1280px){:host[data-opened=false] .s4y-aside-body-section-item__infor{align-items:center;justify-content:center}:host[data-opened=false] .s4y-aside-body-section-item-title p{display:none}:host[data-opened=false] .s4y-aside-body-section-item__children{display:none}:host[data-opened=false] .s4y-aside-arrow{display:none}:host[data-opened=false] .s4y-aside-header__infor{display:none}:host[data-opened=false] .s4y-aside-body-user__infor{display:none}:host[data-opened=false] .s4y-aside-header__container,:host[data-opened=false] .s4y-aside-body__user{align-items:center;justify-content:center}:host[data-opened=true] .s4y-aside{width:27rem}}@media screen and (min-width:1281px){:host[data-opened=false] .s4y-aside-body-section-item__infor{align-items:center;justify-content:center}:host[data-opened=false] .s4y-aside-body-section-item-title p{display:none}:host[data-opened=false] .s4y-aside-body-section-item__children{display:none}:host[data-opened=false] .s4y-aside-arrow{display:none}:host[data-opened=false] .s4y-aside-header__infor{display:none}:host[data-opened=false] .s4y-aside-body-user__infor{display:none}:host[data-opened=false] .s4y-aside-header__container,:host[data-opened=false] .s4y-aside-body__user{align-items:center;justify-content:center}:host[data-opened=true] .s4y-aside{width:27rem}}\n"], dependencies: [{ 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"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarComponent, selector: "s4y-avatar", inputs: ["src", "alt", "size", "rounded", "border"] }, { kind: "component", type: SvgComponent, selector: "s4y-svg", inputs: ["src", "color", "size"] }] });
|
|
289
289
|
}
|
|
290
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
290
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: AsideComponent, decorators: [{
|
|
291
291
|
type: Component,
|
|
292
292
|
args: [{ selector: 's4y-aside', standalone: false, host: {
|
|
293
293
|
'[attr.data-opened]': 'isOpened()',
|
|
294
|
-
}, template: "<div class=\"s4y-aside-overlay\" (click)=\"closeByOverlay()\"></div>\r\n\r\n<aside [attr.data-opened]=\"isOpened()\" class=\"s4y-aside\">\r\n <div class=\"s4y-aside-header__container\">\r\n @if (headerTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\r\n } @else {\r\n <div class=\"s4y-aside-header\">\r\n <img class=\"s4y-aside-logo\" [src]=\"companyLogoSrc()\" />\r\n <div class=\"s4y-aside-header__infor\">\r\n <p class=\"s4y-aside-title\">{{ companyTitle() }}</p>\r\n <p class=\"s4y-aside-description\">{{ companyDescription() }}</p>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"s4y-aside-body__container\">\r\n <!-- Body Abaixo -->\r\n <div class=\"s4y-aside-body-section\">\r\n @for (menu of menus(); track $index) {\r\n <div class=\"s4y-aside-body-section__item\">\r\n <div\r\n class=\"s4y-aside-body-section-item__infor\"\r\n [class.active]=\"menu.isOpen\"\r\n (click)=\"onToggle(menu)\"\r\n >\r\n <div\r\n class=\"s4y-aside-body-section-item-title\"\r\n [class.closed]=\"!isOpened\"\r\n >\r\n @if (menuTemplate) {\r\n <ng-container\r\n *ngTemplateOutlet=\"menuTemplate; context: { $implicit: menu }\"\r\n ></ng-container>\r\n } @else\r\n { @if (menu.iconUri) {\r\n <s4y-svg size=\"default\" color=\"#fff\" [src]=\"menu.iconUri\"> </s4y-svg>\r\n }\r\n <p>{{ menu.title }}</p>\r\n }\r\n </div>\r\n\r\n @if (menu.children?.length) {\r\n <!-- -->\r\n @if (menu.isOpen) {\r\n <ng-container [ngTemplateOutlet]=\"arrowBottom\"></ng-container>\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n }\r\n <!-- -->\r\n }\r\n </div>\r\n <div class=\"s4y-aside-body-section-item__children\" [class.is-opened]=\"menu.isOpen\">\r\n @for (children of menu.children; track $index) {\r\n <div class=\"s4y-aside-body-section-item-children__item\">\r\n <a role=\"link\" routerLinkActive=\"children-active\" [routerLinkActiveOptions]=\"{exact: true}\" [routerLink]=\"children.link\">{{ children.title }}</a>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- <div class=\"s4y-aside-body-section__scroll\"></div> -->\r\n </div>\r\n <!-- Body Acima -->\r\n <div class=\"s4y-aside-body__user\" [class.s4y-aside-body__user_divider]=\"footerTemplate || (userImage() && userName() && userEmail())\">\r\n @if (footerTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\r\n } @else {\r\n @if (userImage()) {\r\n <s4y-avatar [src]=\"userImage()\"></s4y-avatar>\r\n }\r\n <div class=\"s4y-aside-body-user__infor\">\r\n <p class=\"s4y-aside-body-user_name\">{{ userName() }}</p>\r\n <p class=\"s4y-aside-body-user_email\">{{ userEmail() }}</p>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</aside>\r\n\r\n<ng-template #arrowRight>\r\n <span class=\"s4y-aside-arrow\">\r\n <svg\r\n width=\"1.8rem\"\r\n height=\"1.8rem\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n</ng-template>\r\n<ng-template #arrowBottom>\r\n <span class=\"s4y-aside-arrow\">\r\n <svg\r\n width=\"1.8rem\"\r\n height=\"1.8rem\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.s4y-aside-overlay{display:none}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}.s4y-aside{background-color:var(--primary-color);height:100dvh;overflow-x:hidden;width:8rem;border-right:1px solid var(--gray-200);display:flex;flex-direction:column;transition:.5s ease,padding .5s ease;flex-shrink:0}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-aside{position:fixed;top:0;left:0;width:80%;z-index:var(--z-index-emergency)}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-aside{position:fixed;top:0;left:0;width:80%;max-width:32rem;z-index:var(--z-index-emergency)}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-aside{position:fixed;top:0;left:0;width:80%;max-width:32rem;z-index:var(--z-index-emergency)}}.s4y-aside-header__container{height:var(--nav-height);position:relative;display:flex;align-items:center;border-bottom:1px solid var(--gray-200);padding:1.4rem 0;margin:0 1.4rem}.s4y-aside-header{display:flex;align-items:center;gap:1.4rem}.s4y-aside-logo{max-width:4rem;max-height:4rem;border-radius:var(--radius);object-fit:cover;border:1px solid var(--gray-300);flex-shrink:0}.s4y-aside-header__infor{display:flex;flex-direction:column;gap:.2}.s4y-aside-title{font-size:1.6rem;font-weight:700;color:var(--gray-100)}.s4y-aside-description{font-size:1.3rem;color:var(--gray-200)}.s4y-aside-body__container{display:flex;flex-direction:column;flex-grow:1}.s4y-aside-body-section{margin:1.8rem 1.4rem 0;flex-grow:1;overflow-y:auto;overflow-x:hidden;padding:1.4rem 0;display:flex;flex-direction:column;gap:.6rem;height:calc(100dvh - 15.4rem)}.s4y-aside-body-section-item__children{font-size:1.4rem;padding-left:4.2rem;display:flex;flex-direction:column;gap:1rem;color:var(--gray-100);max-height:0;overflow:hidden;pointer-events:none;visibility:hidden;transition:.3s ease}.s4y-aside-body-section-item__children a{cursor:pointer;font-size:1.3rem}.s4y-aside-body-section-item__children a:hover{text-decoration:underline;color:var(--gray-100)}.s4y-aside-body-section-item__children.is-opened{margin-top:.6rem;max-height:50rem;overflow:visible;pointer-events:all;visibility:visible;transition:.5s ease}.s4y-aside-body-section-item__children .children-active{text-decoration:underline;color:var(--gray-100)}.s4y-aside-body-section-item-children__item{white-space:nowrap}.s4y-aside-body-section-item__infor{padding:1rem;display:flex;align-items:center;justify-content:space-between;font-size:1.4rem;gap:.8rem;height:4rem;color:var(--gray-100);cursor:pointer;transition:.5s ease;white-space:nowrap}.s4y-aside-body-section-item__infor:hover{color:#fff;border-radius:var(--radius)}.s4y-aside-body-section-item__infor.active{border-radius:var(--radius);color:#fff}.s4y-aside-body-section-item-title{display:flex;align-items:center;justify-content:center;gap:.8rem}.s4y-aside-body-section-item-title img{width:2.8rem}.s4y-aside-body__user{height:6.8rem;padding:1.4rem 0;margin:0 1.4rem;display:flex;align-items:center;justify-content:flex-start;flex-shrink:0;gap:1.4rem;white-space:nowrap}.s4y-aside-body__user.s4y-aside-body__user_divider{border-top:1px solid var(--gray-200)}.s4y-aside-body-user__image{width:3.8rem;height:3.8rem;border-radius:100%;object-fit:cover;object-position:top center;flex-shrink:0}.s4y-aside-body-user_name{font-size:1.4rem;font-weight:700;color:var(--gray-100)}.s4y-aside-body-user_email{font-size:1.3rem;color:var(--gray-200)}@media screen and (min-width: 320px) and (max-width: 480px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 481px) and (max-width: 767px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 768px) and (max-width: 1024px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 1025px) and (max-width: 1280px){:host[data-opened=false] .s4y-aside-body-section-item__infor{align-items:center;justify-content:center}:host[data-opened=false] .s4y-aside-body-section-item-title p{display:none}:host[data-opened=false] .s4y-aside-body-section-item__children{display:none}:host[data-opened=false] .s4y-aside-arrow{display:none}:host[data-opened=false] .s4y-aside-header__infor{display:none}:host[data-opened=false] .s4y-aside-body-user__infor{display:none}:host[data-opened=false] .s4y-aside-header__container,:host[data-opened=false] .s4y-aside-body__user{align-items:center;justify-content:center}:host[data-opened=true] .s4y-aside{width:27rem}}@media screen and (min-width: 1281px){:host[data-opened=false] .s4y-aside-body-section-item__infor{align-items:center;justify-content:center}:host[data-opened=false] .s4y-aside-body-section-item-title p{display:none}:host[data-opened=false] .s4y-aside-body-section-item__children{display:none}:host[data-opened=false] .s4y-aside-arrow{display:none}:host[data-opened=false] .s4y-aside-header__infor{display:none}:host[data-opened=false] .s4y-aside-body-user__infor{display:none}:host[data-opened=false] .s4y-aside-header__container,:host[data-opened=false] .s4y-aside-body__user{align-items:center;justify-content:center}:host[data-opened=true] .s4y-aside{width:27rem}}\n"] }]
|
|
294
|
+
}, template: "<div class=\"s4y-aside-overlay\" (click)=\"closeByOverlay()\"></div>\r\n\r\n<aside [attr.data-opened]=\"isOpened()\" class=\"s4y-aside\">\r\n <div class=\"s4y-aside-header__container\">\r\n @if (headerTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\r\n } @else {\r\n <div class=\"s4y-aside-header\">\r\n <img class=\"s4y-aside-logo\" [src]=\"companyLogoSrc()\" />\r\n <div class=\"s4y-aside-header__infor\">\r\n <p class=\"s4y-aside-title\">{{ companyTitle() }}</p>\r\n <p class=\"s4y-aside-description\">{{ companyDescription() }}</p>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"s4y-aside-body__container\">\r\n <!-- Body Abaixo -->\r\n <div class=\"s4y-aside-body-section\">\r\n @for (menu of menus(); track $index) {\r\n <div class=\"s4y-aside-body-section__item\">\r\n <div\r\n class=\"s4y-aside-body-section-item__infor\"\r\n [class.active]=\"menu.isOpen\"\r\n (click)=\"onToggle(menu)\"\r\n >\r\n <div\r\n class=\"s4y-aside-body-section-item-title\"\r\n [class.closed]=\"!isOpened\"\r\n >\r\n @if (menuTemplate) {\r\n <ng-container\r\n *ngTemplateOutlet=\"menuTemplate; context: { $implicit: menu }\"\r\n ></ng-container>\r\n } @else\r\n { @if (menu.iconUri) {\r\n <s4y-svg size=\"default\" color=\"#fff\" [src]=\"menu.iconUri\"> </s4y-svg>\r\n }\r\n <p>{{ menu.title }}</p>\r\n }\r\n </div>\r\n\r\n @if (menu.children?.length) {\r\n <!-- -->\r\n @if (menu.isOpen) {\r\n <ng-container [ngTemplateOutlet]=\"arrowBottom\"></ng-container>\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n }\r\n <!-- -->\r\n }\r\n </div>\r\n <div class=\"s4y-aside-body-section-item__children\" [class.is-opened]=\"menu.isOpen\">\r\n @for (children of menu.children; track $index) {\r\n <div class=\"s4y-aside-body-section-item-children__item\">\r\n <a role=\"link\" routerLinkActive=\"children-active\" [routerLinkActiveOptions]=\"{exact: true}\" [routerLink]=\"children.link\">{{ children.title }}</a>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- <div class=\"s4y-aside-body-section__scroll\"></div> -->\r\n </div>\r\n <!-- Body Acima -->\r\n <div class=\"s4y-aside-body__user\" [class.s4y-aside-body__user_divider]=\"footerTemplate || (userImage() && userName() && userEmail())\">\r\n @if (footerTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\r\n } @else {\r\n @if (userImage()) {\r\n <s4y-avatar [src]=\"userImage()\"></s4y-avatar>\r\n }\r\n <div class=\"s4y-aside-body-user__infor\">\r\n <p class=\"s4y-aside-body-user_name\">{{ userName() }}</p>\r\n <p class=\"s4y-aside-body-user_email\">{{ userEmail() }}</p>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</aside>\r\n\r\n<ng-template #arrowRight>\r\n <span class=\"s4y-aside-arrow\">\r\n <svg\r\n width=\"1.8rem\"\r\n height=\"1.8rem\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n</ng-template>\r\n<ng-template #arrowBottom>\r\n <span class=\"s4y-aside-arrow\">\r\n <svg\r\n width=\"1.8rem\"\r\n height=\"1.8rem\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.s4y-aside-overlay{display:none}@media screen and (min-width:320px)and (max-width:480px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width:481px)and (max-width:767px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}.s4y-aside{background-color:var(--primary-color);height:100dvh;overflow-x:hidden;width:8rem;border-right:1px solid var(--gray-200);display:flex;flex-direction:column;transition:.5s ease,padding .5s ease;flex-shrink:0}@media screen and (min-width:320px)and (max-width:480px){.s4y-aside{position:fixed;top:0;left:0;width:80%;z-index:var(--z-index-emergency)}}@media screen and (min-width:481px)and (max-width:767px){.s4y-aside{position:fixed;top:0;left:0;width:80%;max-width:32rem;z-index:var(--z-index-emergency)}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-aside{position:fixed;top:0;left:0;width:80%;max-width:32rem;z-index:var(--z-index-emergency)}}.s4y-aside-header__container{height:var(--nav-height);position:relative;display:flex;align-items:center;border-bottom:1px solid var(--gray-200);padding:1.4rem 0;margin:0 1.4rem}.s4y-aside-header{display:flex;align-items:center;gap:1.4rem}.s4y-aside-logo{max-width:4rem;max-height:4rem;border-radius:var(--radius);object-fit:cover;border:1px solid var(--gray-300);flex-shrink:0}.s4y-aside-header__infor{display:flex;flex-direction:column;gap:.2}.s4y-aside-title{font-size:1.6rem;font-weight:700;color:var(--gray-100)}.s4y-aside-description{font-size:1.3rem;color:var(--gray-200)}.s4y-aside-body__container{display:flex;flex-direction:column;flex-grow:1}.s4y-aside-body-section{margin:1.8rem 1.4rem 0;flex-grow:1;overflow-y:auto;overflow-x:hidden;padding:1.4rem 0;display:flex;flex-direction:column;gap:.6rem;height:calc(100dvh - 15.4rem)}.s4y-aside-body-section-item__children{font-size:1.4rem;padding-left:4.2rem;display:flex;flex-direction:column;gap:1rem;color:var(--gray-100);max-height:0;overflow:hidden;pointer-events:none;visibility:hidden;transition:.3s ease}.s4y-aside-body-section-item__children a{cursor:pointer;font-size:1.3rem}.s4y-aside-body-section-item__children a:hover{text-decoration:underline;color:var(--gray-100)}.s4y-aside-body-section-item__children.is-opened{margin-top:.6rem;max-height:50rem;overflow:visible;pointer-events:all;visibility:visible;transition:.5s ease}.s4y-aside-body-section-item__children .children-active{text-decoration:underline;color:var(--gray-100)}.s4y-aside-body-section-item-children__item{white-space:nowrap}.s4y-aside-body-section-item__infor{padding:1rem;display:flex;align-items:center;justify-content:space-between;font-size:1.4rem;gap:.8rem;height:4rem;color:var(--gray-100);cursor:pointer;transition:.5s ease;white-space:nowrap}.s4y-aside-body-section-item__infor:hover{color:#fff;border-radius:var(--radius)}.s4y-aside-body-section-item__infor.active{border-radius:var(--radius);color:#fff}.s4y-aside-body-section-item-title{display:flex;align-items:center;justify-content:center;gap:.8rem}.s4y-aside-body-section-item-title img{width:2.8rem}.s4y-aside-body__user{height:6.8rem;padding:1.4rem 0;margin:0 1.4rem;display:flex;align-items:center;justify-content:flex-start;flex-shrink:0;gap:1.4rem;white-space:nowrap}.s4y-aside-body__user.s4y-aside-body__user_divider{border-top:1px solid var(--gray-200)}.s4y-aside-body-user__image{width:3.8rem;height:3.8rem;border-radius:100%;object-fit:cover;object-position:top center;flex-shrink:0}.s4y-aside-body-user_name{font-size:1.4rem;font-weight:700;color:var(--gray-100)}.s4y-aside-body-user_email{font-size:1.3rem;color:var(--gray-200)}@media screen and (min-width:320px)and (max-width:480px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width:481px)and (max-width:767px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width:768px)and (max-width:1024px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width:1025px)and (max-width:1280px){:host[data-opened=false] .s4y-aside-body-section-item__infor{align-items:center;justify-content:center}:host[data-opened=false] .s4y-aside-body-section-item-title p{display:none}:host[data-opened=false] .s4y-aside-body-section-item__children{display:none}:host[data-opened=false] .s4y-aside-arrow{display:none}:host[data-opened=false] .s4y-aside-header__infor{display:none}:host[data-opened=false] .s4y-aside-body-user__infor{display:none}:host[data-opened=false] .s4y-aside-header__container,:host[data-opened=false] .s4y-aside-body__user{align-items:center;justify-content:center}:host[data-opened=true] .s4y-aside{width:27rem}}@media screen and (min-width:1281px){:host[data-opened=false] .s4y-aside-body-section-item__infor{align-items:center;justify-content:center}:host[data-opened=false] .s4y-aside-body-section-item-title p{display:none}:host[data-opened=false] .s4y-aside-body-section-item__children{display:none}:host[data-opened=false] .s4y-aside-arrow{display:none}:host[data-opened=false] .s4y-aside-header__infor{display:none}:host[data-opened=false] .s4y-aside-body-user__infor{display:none}:host[data-opened=false] .s4y-aside-header__container,:host[data-opened=false] .s4y-aside-body__user{align-items:center;justify-content:center}:host[data-opened=true] .s4y-aside{width:27rem}}\n"] }]
|
|
295
295
|
}], propDecorators: { menuTemplate: [{
|
|
296
296
|
type: ContentChild,
|
|
297
297
|
args: ['menuTemplate']
|
|
@@ -304,19 +304,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
304
304
|
}] } });
|
|
305
305
|
|
|
306
306
|
class DashboardRoutesComponent {
|
|
307
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
308
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
307
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DashboardRoutesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
308
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: DashboardRoutesComponent, isStandalone: false, selector: "s4y-dashboard-routes", ngImport: i0, template: "<div class=\"s4y-dashboard-routes-container\" cdkScrollable>\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".s4y-dashboard-routes-container{display:block;overflow-y:auto;overflow-x:hidden;height:calc(100dvh - var(--nav-height))}\n"], dependencies: [{ kind: "directive", type: i2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
|
|
309
309
|
}
|
|
310
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
310
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DashboardRoutesComponent, decorators: [{
|
|
311
311
|
type: Component,
|
|
312
312
|
args: [{ selector: 's4y-dashboard-routes', standalone: false, host: {}, template: "<div class=\"s4y-dashboard-routes-container\" cdkScrollable>\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".s4y-dashboard-routes-container{display:block;overflow-y:auto;overflow-x:hidden;height:calc(100dvh - var(--nav-height))}\n"] }]
|
|
313
313
|
}] });
|
|
314
314
|
|
|
315
315
|
class DashboardContainerComponent {
|
|
316
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
317
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
316
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DashboardContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
317
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: DashboardContainerComponent, isStandalone: false, selector: "s4y-dashboard-container", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;padding:1.4rem 1.4rem 3.2rem;min-height:100%}\n"] });
|
|
318
318
|
}
|
|
319
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
319
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DashboardContainerComponent, decorators: [{
|
|
320
320
|
type: Component,
|
|
321
321
|
args: [{ selector: 's4y-dashboard-container', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;padding:1.4rem 1.4rem 3.2rem;min-height:100%}\n"] }]
|
|
322
322
|
}] });
|
|
@@ -329,8 +329,8 @@ const COMPONENTS$1 = [
|
|
|
329
329
|
DashboardContainerComponent,
|
|
330
330
|
];
|
|
331
331
|
class DashboardModule {
|
|
332
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
333
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
332
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
333
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.22", ngImport: i0, type: DashboardModule, declarations: [DashboardLayoutComponent,
|
|
334
334
|
AsideComponent,
|
|
335
335
|
NavbarComponent,
|
|
336
336
|
DashboardRoutesComponent,
|
|
@@ -343,12 +343,12 @@ class DashboardModule {
|
|
|
343
343
|
NavbarComponent,
|
|
344
344
|
DashboardRoutesComponent,
|
|
345
345
|
DashboardContainerComponent] });
|
|
346
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
346
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DashboardModule, imports: [RouterModule,
|
|
347
347
|
CommonModule,
|
|
348
348
|
AvatarComponent,
|
|
349
349
|
CdkScrollableModule] });
|
|
350
350
|
}
|
|
351
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
351
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DashboardModule, decorators: [{
|
|
352
352
|
type: NgModule,
|
|
353
353
|
args: [{
|
|
354
354
|
declarations: [COMPONENTS$1],
|
|
@@ -396,8 +396,8 @@ class ButtonComponent {
|
|
|
396
396
|
return 'btn-primary';
|
|
397
397
|
}
|
|
398
398
|
});
|
|
399
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
400
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
399
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
400
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: ButtonComponent, isStandalone: true, selector: "button[s4yButton], a[s4yButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, roundend: { classPropertyName: "roundend", publicName: "roundend", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconAligned: { classPropertyName: "iconAligned", publicName: "iconAligned", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.btn-default": "true", "class.loading": "loading()", "attr.size": "size()", "attr.variant": "variant()", "style.width": "fullWidth() ? \"100%\" : null", "class.outlined": "outlined()", "class.disabled": "disabled()", "class": "variantClass()", "class.icon-centered": "iconAligned()", "class.rounded": "roundend()", "disabled": "this.isDisabled" } }, ngImport: i0, template: `
|
|
401
401
|
@if (loading()) {
|
|
402
402
|
<div class="loader"></div>
|
|
403
403
|
} @else {
|
|
@@ -405,7 +405,7 @@ class ButtonComponent {
|
|
|
405
405
|
}
|
|
406
406
|
`, isInline: true, styles: [":host.btn-default{display:flex;align-items:center;justify-content:center;gap:.8rem;color:#fff;font-size:1.4rem;font-weight:500;padding:.8rem 1.6rem;transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .1s ease;white-space:nowrap}:host.rounded{border-radius:var(--radius)}:host.btn-default:focus-visible{outline:0;transform:scale(1.04)}:host.btn-default:not(.icon-centered){justify-content:space-between}:host([size=extra-small]){height:2.8rem;min-width:6.4rem;font-size:1.2rem;padding:.4rem .8rem}:host([size=small]){height:3.6rem;min-width:8rem;font-size:1.3rem;padding:.6rem 1.2rem}:host([size=medium]){height:4.6rem;min-width:9.2rem;font-size:1.4rem;padding:.8rem 1.6rem}:host([size=large]){height:5.6rem;min-width:10.4rem;font-size:1.5rem;padding:1rem 2rem}:host.btn-primary{background-color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary:hover{background-color:transparent;color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary.outlined{background-color:transparent;border:1px solid var(--primary-color);color:var(--primary-color)}:host.btn-primary.outlined:hover{color:#fff;background-color:var(--primary-color)}:host.btn-secondary{background-color:var(--secondary-color);border:1px solid var(--secondary-color)}:host.btn-secondary:hover{border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}:host.btn-secondary.outlined{border:1px solid var(--secondary-color);background-color:transparent;color:var(--secondary-color)}:host.btn-secondary.outlined:hover{background-color:var(--secondary-color);color:#fff;border:1px solid var(--secondary-color)}:host.btn-danger{background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-danger:hover{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined:hover{color:#fff;background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-success{background-color:var(--success-color);border:1px solid var(--success-color)}:host.btn-success:hover{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined:hover{background-color:var(--success-color);border:1px solid var(--success-color);color:#fff}:host.btn-info{background-color:var(--info-color);border:1px solid var(--info-color)}:host.btn-info:hover{border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host.btn-info.outlined{border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host.btn-info.outlined:hover{background-color:var(--info-color);border:1px solid var(--info-color);color:#fff}:host.btn-gray{border:1px solid var(--gray-400);background-color:var(--gray-200);color:var(--gray-800);font-weight:500}:host.btn-gray:hover{border:1px solid var(--gray-500);background-color:var(--gray-100);color:var(--gray-900)}:host.btn-gray.outlined{border:1px solid var(--gray-600);color:var(--gray-700);background-color:transparent}:host.btn-gray.outlined:hover{background-color:var(--gray-600);color:#fff}:host.disabled{background-color:var(--gray-400);color:var(--gray-200);border:1px solid var(--gray-400);cursor:not-allowed;padding:.8rem 1.6rem;opacity:.7}:host.disabled:hover,:host.disabled:active,:host.disabled:focus{background-color:var(--gray-400);color:var(--gray-200);border:1px solid var(--gray-400);box-shadow:none}:host.disabled.outlined{background-color:transparent;color:var(--gray-400);border:1px solid var(--gray-400);cursor:not-allowed;opacity:.6;pointer-events:none}.loader{width:16px;aspect-ratio:1;border-radius:50%;border:3px solid currentColor;animation:l20-1 .8s infinite linear alternate,l20-2 1.6s infinite linear}@keyframes l20-1{0%{clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}25%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0% 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%)}}@keyframes l20-2{0%{transform:scaleY(1) rotate(0)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0)}to{transform:scaleY(-1) rotate(-135deg)}}\n"] });
|
|
407
407
|
}
|
|
408
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
408
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
409
409
|
type: Component,
|
|
410
410
|
args: [{ selector: 'button[s4yButton], a[s4yButton]', imports: [], template: `
|
|
411
411
|
@if (loading()) {
|
|
@@ -431,20 +431,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
431
431
|
}] } });
|
|
432
432
|
|
|
433
433
|
class FormFieldComponent {
|
|
434
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
435
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
434
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
435
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: FormFieldComponent, isStandalone: false, selector: "s4y-form-field", ngImport: i0, template: "<label class=\"s4y-form-field\">\r\n <ng-content select=\"s4y-label\"></ng-content>\r\n <div class=\"s4y-input-wrapper\">\r\n <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n <ng-content select=\"input, textarea\"></ng-content>\r\n <ng-content select=\"s4y-input-sufix\"></ng-content>\r\n </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n", styles: ["@charset \"UTF-8\";.s4y-form-field{display:flex;flex-direction:column;gap:.8rem}.s4y-form-field .s4y-input-wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease}.s4y-form-field:has(input[size=extra-small]) .s4y-input-wrapper{height:2.8rem;padding:.4rem .8rem}.s4y-form-field:has(input[size=small]) .s4y-input-wrapper{height:3.6rem;padding:.6rem 1.2rem}.s4y-form-field:has(input[size=medium]) .s4y-input-wrapper,.s4y-form-field:has(input):not(:has(input[size])) .s4y-input-wrapper{height:4.6rem;padding:.8rem 1.6rem}.s4y-form-field:has(input[size=large]) .s4y-input-wrapper{height:5.6rem;padding:1rem 2rem}:host ::ng-deep .s4y-form-field textarea{width:100%;display:block;border:0;outline:0;background:transparent;line-height:1.5;resize:none!important;min-height:100%;height:auto}.s4y-form-field:has(input:disabled) .s4y-input-wrapper,.s4y-form-field:has(textarea:disabled) .s4y-input-wrapper{background-color:var(--gray-200)}.s4y-form-field:has(input.ng-invalid.ng-touched.ng-dirty) .s4y-input-wrapper,.s4y-form-field:has(textarea.ng-invalid.ng-touched.ng-dirty) .s4y-input-wrapper{border:1px solid var(--danger-color);transition:.5s ease;background-color:#fff6f5}.s4y-form-field:has(input.ng-invalid.ng-touched.ng-dirty) s4y-label,.s4y-form-field:has(textarea.ng-invalid.ng-touched.ng-dirty) s4y-label{color:var(--danger-color);transition:.5s ease}.s4y-form-field:has(input:focus) .s4y-input-wrapper,.s4y-form-field:has(textarea:focus) .s4y-input-wrapper{border:1px solid var(--primary-color)}\n"] });
|
|
436
436
|
}
|
|
437
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
437
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
438
438
|
type: Component,
|
|
439
439
|
args: [{ selector: 's4y-form-field', standalone: false, template: "<label class=\"s4y-form-field\">\r\n <ng-content select=\"s4y-label\"></ng-content>\r\n <div class=\"s4y-input-wrapper\">\r\n <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n <ng-content select=\"input, textarea\"></ng-content>\r\n <ng-content select=\"s4y-input-sufix\"></ng-content>\r\n </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n", styles: ["@charset \"UTF-8\";.s4y-form-field{display:flex;flex-direction:column;gap:.8rem}.s4y-form-field .s4y-input-wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease}.s4y-form-field:has(input[size=extra-small]) .s4y-input-wrapper{height:2.8rem;padding:.4rem .8rem}.s4y-form-field:has(input[size=small]) .s4y-input-wrapper{height:3.6rem;padding:.6rem 1.2rem}.s4y-form-field:has(input[size=medium]) .s4y-input-wrapper,.s4y-form-field:has(input):not(:has(input[size])) .s4y-input-wrapper{height:4.6rem;padding:.8rem 1.6rem}.s4y-form-field:has(input[size=large]) .s4y-input-wrapper{height:5.6rem;padding:1rem 2rem}:host ::ng-deep .s4y-form-field textarea{width:100%;display:block;border:0;outline:0;background:transparent;line-height:1.5;resize:none!important;min-height:100%;height:auto}.s4y-form-field:has(input:disabled) .s4y-input-wrapper,.s4y-form-field:has(textarea:disabled) .s4y-input-wrapper{background-color:var(--gray-200)}.s4y-form-field:has(input.ng-invalid.ng-touched.ng-dirty) .s4y-input-wrapper,.s4y-form-field:has(textarea.ng-invalid.ng-touched.ng-dirty) .s4y-input-wrapper{border:1px solid var(--danger-color);transition:.5s ease;background-color:#fff6f5}.s4y-form-field:has(input.ng-invalid.ng-touched.ng-dirty) s4y-label,.s4y-form-field:has(textarea.ng-invalid.ng-touched.ng-dirty) s4y-label{color:var(--danger-color);transition:.5s ease}.s4y-form-field:has(input:focus) .s4y-input-wrapper,.s4y-form-field:has(textarea:focus) .s4y-input-wrapper{border:1px solid var(--primary-color)}\n"] }]
|
|
440
440
|
}] });
|
|
441
441
|
|
|
442
442
|
class InputComponent {
|
|
443
443
|
size = input('medium');
|
|
444
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
445
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
444
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
445
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.22", type: InputComponent, isStandalone: false, selector: "input[s4y-input], textarea[s4y-input]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.size": "size()" } }, ngImport: i0, template: "<p>input works!</p>\r\n", styles: [":host{background-color:transparent;outline:none;color:var(--gray-900);font-size:1.4rem;width:100%}:host::placeholder{font-size:1.4rem;transition:.3s ease;color:var(--gray-400)}:host:focus::placeholder{opacity:0}:host:disabled{color:#fff}:host([size=extra-small]){font-size:1.2rem}:host([size=small]){font-size:1.3rem}:host([size=medium]){font-size:1.4rem}:host([size=large]){font-size:1.5rem}\n"] });
|
|
446
446
|
}
|
|
447
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
447
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: InputComponent, decorators: [{
|
|
448
448
|
type: Component,
|
|
449
449
|
args: [{ selector: 'input[s4y-input], textarea[s4y-input]', standalone: false, host: {
|
|
450
450
|
'[attr.size]': 'size()',
|
|
@@ -452,46 +452,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
452
452
|
}] });
|
|
453
453
|
|
|
454
454
|
class LabelComponent {
|
|
455
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
456
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
455
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
456
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: LabelComponent, isStandalone: false, selector: "s4y-label", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{font-size:1.4rem;max-width:max-content}\n"] });
|
|
457
457
|
}
|
|
458
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
458
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: LabelComponent, decorators: [{
|
|
459
459
|
type: Component,
|
|
460
460
|
args: [{ selector: 's4y-label', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{font-size:1.4rem;max-width:max-content}\n"] }]
|
|
461
461
|
}] });
|
|
462
462
|
|
|
463
463
|
class HintComponent {
|
|
464
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
465
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
464
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
465
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: HintComponent, isStandalone: false, selector: "s4y-hint", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{font-size:1.2rem;color:var(--danger-color);margin-top:.8rem;display:block;color:var(--gray-700)}\n"] });
|
|
466
466
|
}
|
|
467
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
467
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HintComponent, decorators: [{
|
|
468
468
|
type: Component,
|
|
469
469
|
args: [{ selector: 's4y-hint', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{font-size:1.2rem;color:var(--danger-color);margin-top:.8rem;display:block;color:var(--gray-700)}\n"] }]
|
|
470
470
|
}] });
|
|
471
471
|
|
|
472
472
|
class ErrorMessageComponent {
|
|
473
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
474
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
473
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
474
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: ErrorMessageComponent, isStandalone: false, selector: "s4y-error-message", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{font-size:1.2rem;color:var(--danger-color);margin-top:.8rem;display:block;font-weight:500}\n"] });
|
|
475
475
|
}
|
|
476
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
476
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ErrorMessageComponent, decorators: [{
|
|
477
477
|
type: Component,
|
|
478
478
|
args: [{ selector: 's4y-error-message', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{font-size:1.2rem;color:var(--danger-color);margin-top:.8rem;display:block;font-weight:500}\n"] }]
|
|
479
479
|
}] });
|
|
480
480
|
|
|
481
481
|
class InputPrefixComponent {
|
|
482
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
483
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
482
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: InputPrefixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
483
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: InputPrefixComponent, isStandalone: false, selector: "s4y-input-prefix", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{cursor:pointer;width:100%;height:100%;max-width:2rem;max-height:2rem;display:flex;align-items:center;justify-content:center;background-color:transparent;border:none}\n"] });
|
|
484
484
|
}
|
|
485
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
485
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: InputPrefixComponent, decorators: [{
|
|
486
486
|
type: Component,
|
|
487
487
|
args: [{ selector: 's4y-input-prefix', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{cursor:pointer;width:100%;height:100%;max-width:2rem;max-height:2rem;display:flex;align-items:center;justify-content:center;background-color:transparent;border:none}\n"] }]
|
|
488
488
|
}] });
|
|
489
489
|
|
|
490
490
|
class InputSufixComponent {
|
|
491
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
492
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
491
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: InputSufixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
492
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: InputSufixComponent, isStandalone: false, selector: "s4y-input-sufix", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{cursor:pointer;width:100%;height:100%;max-width:2rem;max-height:2rem;display:flex;align-items:center;justify-content:center;background-color:transparent;border:none}\n"] });
|
|
493
493
|
}
|
|
494
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
494
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: InputSufixComponent, decorators: [{
|
|
495
495
|
type: Component,
|
|
496
496
|
args: [{ selector: 's4y-input-sufix', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{cursor:pointer;width:100%;height:100%;max-width:2rem;max-height:2rem;display:flex;align-items:center;justify-content:center;background-color:transparent;border:none}\n"] }]
|
|
497
497
|
}] });
|
|
@@ -527,8 +527,8 @@ class FormFieldPasswordComponent {
|
|
|
527
527
|
setDisabledState(isDisabled) {
|
|
528
528
|
this.disabled = isDisabled;
|
|
529
529
|
}
|
|
530
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
531
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
530
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: FormFieldPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
531
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: FormFieldPasswordComponent, isStandalone: false, selector: "s4y-form-field-password", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
532
532
|
{
|
|
533
533
|
multi: true,
|
|
534
534
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -536,7 +536,7 @@ class FormFieldPasswordComponent {
|
|
|
536
536
|
},
|
|
537
537
|
], ngImport: i0, template: "<label class=\"s4y-form-field\">\r\n <s4y-label>\r\n {{ label() }}\r\n </s4y-label>\r\n <div class=\"s4y-input-wrapper\">\r\n <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n <input\r\n s4y-input\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onTouched()\"\r\n [disabled]=\"disabled\"\r\n [type]=\"type\"\r\n [name]=\"name()\"\r\n [id]=\"id()\"\r\n [placeholder]=\"placeholder()\"\r\n />\r\n <s4y-input-sufix>\r\n <button\r\n type=\"button\"\r\n class=\"shown-password\"\r\n (click)=\"togglePasswordVisibility()\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"eye\"></ng-container>\r\n </button>\r\n </s4y-input-sufix>\r\n </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n\r\n<!-- Icone cadeado -->\r\n<ng-template #eye>\r\n <!-- Olho fechado -->\r\n @if (type == \"password\") {\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z\"\r\n ></path>\r\n </svg>\r\n }\r\n\r\n <!-- Olho aberto -->\r\n @if (type == \"text\") {\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M17.8827 19.2968C16.1814 20.3755 14.1638 21.0002 12.0003 21.0002C6.60812 21.0002 2.12215 17.1204 1.18164 12.0002C1.61832 9.62282 2.81932 7.5129 4.52047 5.93457L1.39366 2.80777L2.80788 1.39355L22.6069 21.1925L21.1927 22.6068L17.8827 19.2968ZM5.9356 7.3497C4.60673 8.56015 3.6378 10.1672 3.22278 12.0002C4.14022 16.0521 7.7646 19.0002 12.0003 19.0002C13.5997 19.0002 15.112 18.5798 16.4243 17.8384L14.396 15.8101C13.7023 16.2472 12.8808 16.5002 12.0003 16.5002C9.51498 16.5002 7.50026 14.4854 7.50026 12.0002C7.50026 11.1196 7.75317 10.2981 8.19031 9.60442L5.9356 7.3497ZM12.9139 14.328L9.67246 11.0866C9.5613 11.3696 9.50026 11.6777 9.50026 12.0002C9.50026 13.3809 10.6196 14.5002 12.0003 14.5002C12.3227 14.5002 12.6309 14.4391 12.9139 14.328ZM20.8068 16.5925L19.376 15.1617C20.0319 14.2268 20.5154 13.1586 20.7777 12.0002C19.8603 7.94818 16.2359 5.00016 12.0003 5.00016C11.1544 5.00016 10.3329 5.11773 9.55249 5.33818L7.97446 3.76015C9.22127 3.26959 10.5793 3.00016 12.0003 3.00016C17.3924 3.00016 21.8784 6.87992 22.8189 12.0002C22.5067 13.6998 21.8038 15.2628 20.8068 16.5925ZM11.7229 7.50857C11.8146 7.50299 11.9071 7.50016 12.0003 7.50016C14.4855 7.50016 16.5003 9.51488 16.5003 12.0002C16.5003 12.0933 16.4974 12.1858 16.4919 12.2775L11.7229 7.50857Z\"\r\n ></path>\r\n </svg>\r\n }\r\n</ng-template>\r\n", styles: [".s4y-form-field{display:flex;flex-direction:column;gap:.8rem}.s4y-form-field .s4y-input-wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease}.s4y-form-field:has(input:disabled) .s4y-input-wrapper{background-color:var(--gray-200)}.s4y-form-field:has(input:focus) .s4y-input-wrapper{border:1px solid var(--primary-color)}.shown-password{min-width:2rem;display:flex;align-items:center;justify-content:center}:host.ng-invalid.ng-dirty.ng-touched .s4y-input-wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}:host.ng-invalid.ng-dirty.ng-touched s4y-label{color:var(--danger-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputComponent, selector: "input[s4y-input], textarea[s4y-input]", inputs: ["size"] }, { kind: "component", type: LabelComponent, selector: "s4y-label" }, { kind: "component", type: InputSufixComponent, selector: "s4y-input-sufix" }] });
|
|
538
538
|
}
|
|
539
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
539
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: FormFieldPasswordComponent, decorators: [{
|
|
540
540
|
type: Component,
|
|
541
541
|
args: [{ selector: 's4y-form-field-password', standalone: false, providers: [
|
|
542
542
|
{
|
|
@@ -558,8 +558,8 @@ const COMPONENTS = [
|
|
|
558
558
|
FormFieldPasswordComponent,
|
|
559
559
|
];
|
|
560
560
|
class FormsKitModule {
|
|
561
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
562
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
561
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: FormsKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
562
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.22", ngImport: i0, type: FormsKitModule, declarations: [FormFieldComponent,
|
|
563
563
|
InputComponent,
|
|
564
564
|
LabelComponent,
|
|
565
565
|
HintComponent,
|
|
@@ -574,9 +574,9 @@ class FormsKitModule {
|
|
|
574
574
|
InputPrefixComponent,
|
|
575
575
|
InputSufixComponent,
|
|
576
576
|
FormFieldPasswordComponent] });
|
|
577
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
577
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: FormsKitModule, imports: [CommonModule] });
|
|
578
578
|
}
|
|
579
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
579
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: FormsKitModule, decorators: [{
|
|
580
580
|
type: NgModule,
|
|
581
581
|
args: [{
|
|
582
582
|
declarations: COMPONENTS,
|
|
@@ -769,10 +769,10 @@ class MaskDirective {
|
|
|
769
769
|
const nextPos = this._getCursorPosition(template, digits.length);
|
|
770
770
|
setTimeout(() => input.setSelectionRange(nextPos, nextPos));
|
|
771
771
|
}
|
|
772
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
773
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
772
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: MaskDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
773
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.22", type: MaskDirective, isStandalone: true, selector: "[s4yMask]", inputs: { mask: { classPropertyName: "mask", publicName: "s4yMask", isSignal: true, isRequired: false, transformFunction: null }, showMaskType: { classPropertyName: "showMaskType", publicName: "showMaskType", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "onFocusOrClick()", "click": "onFocusOrClick()", "input": "onInput($event)" } }, ngImport: i0 });
|
|
774
774
|
}
|
|
775
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
775
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: MaskDirective, decorators: [{
|
|
776
776
|
type: Directive,
|
|
777
777
|
args: [{
|
|
778
778
|
selector: '[s4yMask]',
|
|
@@ -802,10 +802,10 @@ class ClickOutsideDirective {
|
|
|
802
802
|
this.clickOutside.emit();
|
|
803
803
|
}
|
|
804
804
|
}
|
|
805
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
806
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
805
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
806
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.22", type: ClickOutsideDirective, isStandalone: true, selector: "[s4yClickOutside]", inputs: { isVisible: "isVisible" }, outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "handleClick($event.target)" } }, ngImport: i0 });
|
|
807
807
|
}
|
|
808
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
808
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ClickOutsideDirective, decorators: [{
|
|
809
809
|
type: Directive,
|
|
810
810
|
args: [{
|
|
811
811
|
selector: '[s4yClickOutside]',
|
|
@@ -873,10 +873,10 @@ class ToastService {
|
|
|
873
873
|
return v.toString(16);
|
|
874
874
|
});
|
|
875
875
|
}
|
|
876
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
877
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
876
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
877
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ToastService, providedIn: 'root' });
|
|
878
878
|
}
|
|
879
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
879
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ToastService, decorators: [{
|
|
880
880
|
type: Injectable,
|
|
881
881
|
args: [{
|
|
882
882
|
providedIn: 'root',
|
|
@@ -891,12 +891,12 @@ class ToastComponent {
|
|
|
891
891
|
}
|
|
892
892
|
toasts = computed(() => this._toastService.toasts());
|
|
893
893
|
isBottomPosition = computed(() => this.position().startsWith('bottom'));
|
|
894
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
895
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
894
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ToastComponent, deps: [{ token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
895
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: ToastComponent, isStandalone: true, selector: "s4y-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- Ajustar os icones -->\r\n\r\n<div class=\"s4y-toast-container\" [ngClass]=\"position()\">\r\n @for (toast of toasts(); track $index; let i = $index) {\r\n <div class=\"s4y-toast-item\" [@ToastAnimation]=\"position()\">\r\n <div class=\"s4y-toast-item_content\">\r\n <div class=\"s4y-toast-item_icon {{ toast.type }}\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#fff\">\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n ></path>\r\n </svg>\r\n </div>\r\n <p class=\"s4y-toast-item_message\">\r\n {{ toast.message }}\r\n </p>\r\n </div>\r\n <button (click)=\"_toastService.remove(i)\" class=\"s4y-toast-item_close\">\r\n ×\r\n </button>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".s4y-toast-container{display:flex;flex-direction:column;gap:1.4rem;position:fixed;width:100%;margin:1.8rem;min-width:280px;max-width:480px;z-index:var(--z-index-toast)}@media screen and (min-width:320px)and (max-width:480px){.s4y-toast-container{width:90%;margin:0}}@media screen and (min-width:481px)and (max-width:767px){.s4y-toast-container{width:90%;margin:0}}.s4y-toast-container.top-left{top:1rem;left:1rem;align-items:flex-start;justify-content:flex-start}.s4y-toast-container.top-right{top:1rem;right:1rem;align-items:flex-end;justify-content:flex-start}.s4y-toast-container.bottom-left{bottom:1rem;left:1rem;align-items:flex-start;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-container.bottom-right{bottom:1rem;right:1rem;align-items:flex-end;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-item{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.4rem;gap:1.2rem;position:relative;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;background-color:#fff;border:1px solid var(--gray-100);width:100%}.s4y-toast-item .s4y-toast-item_content{flex-grow:1;display:flex;align-items:center;gap:1.4rem}.s4y-toast-item .s4y-toast-item_message{color:var(--gray-900);font-size:1.4rem;font-weight:500}@media screen and (min-width:320px)and (max-width:480px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}@media screen and (min-width:481px)and (max-width:767px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}.s4y-toast-item .s4y-toast-item_icon{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;color:#fff;border-radius:var(--radius);flex-shrink:0}.s4y-toast-item .s4y-toast-item_icon.success{background-color:var(--success-color)}.s4y-toast-item .s4y-toast-item_icon.error{background-color:var(--danger-color)}.s4y-toast-item .s4y-toast-item_icon.warning{background-color:var(--warning-color)}.s4y-toast-item .s4y-toast-item_icon.info{background-color:var(--info-color)}.s4y-toast-item .s4y-toast-item_close{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;border-radius:var(--radius);font-size:1.8rem;cursor:pointer;transition:.5s ease;color:var(--gray-900)}.s4y-toast-item .s4y-toast-item_close:hover{background-color:var(--gray-100)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [ToastAnimation] });
|
|
896
896
|
}
|
|
897
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
897
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ToastComponent, decorators: [{
|
|
898
898
|
type: Component,
|
|
899
|
-
args: [{ selector: 's4y-toast', imports: [NgClass], animations: [ToastAnimation], template: "<!-- Ajustar os icones -->\r\n\r\n<div class=\"s4y-toast-container\" [ngClass]=\"position()\">\r\n @for (toast of toasts(); track $index; let i = $index) {\r\n <div class=\"s4y-toast-item\" [@ToastAnimation]=\"position()\">\r\n <div class=\"s4y-toast-item_content\">\r\n <div class=\"s4y-toast-item_icon {{ toast.type }}\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#fff\">\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n ></path>\r\n </svg>\r\n </div>\r\n <p class=\"s4y-toast-item_message\">\r\n {{ toast.message }}\r\n </p>\r\n </div>\r\n <button (click)=\"_toastService.remove(i)\" class=\"s4y-toast-item_close\">\r\n ×\r\n </button>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".s4y-toast-container{display:flex;flex-direction:column;gap:1.4rem;position:fixed;width:100%;margin:1.8rem;min-width:280px;max-width:480px;z-index:var(--z-index-toast)}@media screen and (min-width:
|
|
899
|
+
args: [{ selector: 's4y-toast', imports: [NgClass], animations: [ToastAnimation], template: "<!-- Ajustar os icones -->\r\n\r\n<div class=\"s4y-toast-container\" [ngClass]=\"position()\">\r\n @for (toast of toasts(); track $index; let i = $index) {\r\n <div class=\"s4y-toast-item\" [@ToastAnimation]=\"position()\">\r\n <div class=\"s4y-toast-item_content\">\r\n <div class=\"s4y-toast-item_icon {{ toast.type }}\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#fff\">\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n ></path>\r\n </svg>\r\n </div>\r\n <p class=\"s4y-toast-item_message\">\r\n {{ toast.message }}\r\n </p>\r\n </div>\r\n <button (click)=\"_toastService.remove(i)\" class=\"s4y-toast-item_close\">\r\n ×\r\n </button>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".s4y-toast-container{display:flex;flex-direction:column;gap:1.4rem;position:fixed;width:100%;margin:1.8rem;min-width:280px;max-width:480px;z-index:var(--z-index-toast)}@media screen and (min-width:320px)and (max-width:480px){.s4y-toast-container{width:90%;margin:0}}@media screen and (min-width:481px)and (max-width:767px){.s4y-toast-container{width:90%;margin:0}}.s4y-toast-container.top-left{top:1rem;left:1rem;align-items:flex-start;justify-content:flex-start}.s4y-toast-container.top-right{top:1rem;right:1rem;align-items:flex-end;justify-content:flex-start}.s4y-toast-container.bottom-left{bottom:1rem;left:1rem;align-items:flex-start;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-container.bottom-right{bottom:1rem;right:1rem;align-items:flex-end;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-item{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.4rem;gap:1.2rem;position:relative;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;background-color:#fff;border:1px solid var(--gray-100);width:100%}.s4y-toast-item .s4y-toast-item_content{flex-grow:1;display:flex;align-items:center;gap:1.4rem}.s4y-toast-item .s4y-toast-item_message{color:var(--gray-900);font-size:1.4rem;font-weight:500}@media screen and (min-width:320px)and (max-width:480px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}@media screen and (min-width:481px)and (max-width:767px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}.s4y-toast-item .s4y-toast-item_icon{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;color:#fff;border-radius:var(--radius);flex-shrink:0}.s4y-toast-item .s4y-toast-item_icon.success{background-color:var(--success-color)}.s4y-toast-item .s4y-toast-item_icon.error{background-color:var(--danger-color)}.s4y-toast-item .s4y-toast-item_icon.warning{background-color:var(--warning-color)}.s4y-toast-item .s4y-toast-item_icon.info{background-color:var(--info-color)}.s4y-toast-item .s4y-toast-item_close{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;border-radius:var(--radius);font-size:1.8rem;cursor:pointer;transition:.5s ease;color:var(--gray-900)}.s4y-toast-item .s4y-toast-item_close:hover{background-color:var(--gray-100)}\n"] }]
|
|
900
900
|
}], ctorParameters: () => [{ type: ToastService }] });
|
|
901
901
|
|
|
902
902
|
const drawerAnimation = trigger('drawerAnimation', [
|
|
@@ -1021,12 +1021,12 @@ class DrawerComponent {
|
|
|
1021
1021
|
this.isOpen.set(false);
|
|
1022
1022
|
}
|
|
1023
1023
|
}
|
|
1024
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1025
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1024
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1025
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: DrawerComponent, isStandalone: true, selector: "s4y-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, hasCloseButton: { classPropertyName: "hasCloseButton", publicName: "hasCloseButton", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, host: { listeners: { "document:keydown.escape": "closeOnPressEscapeKey($event)" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["bodyTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], ngImport: i0, template: "@if (isVisible()) {\r\n <div\r\n [@drawerAnimation]=\"{\r\n value: '',\r\n params: {\r\n transformFrom: transformFrom(),\r\n transformTo: transformTo(),\r\n },\r\n }\"\r\n [class.s4y-overlay]=\"backdrop()\"\r\n (click)=\"onBackdropClick($event)\"\r\n >\r\n <div\r\n [style.maxWidth]=\"drawerSize().width\"\r\n [style.maxHeight]=\"drawerSize().height\"\r\n [ngClass]=\"{\r\n 's4y-drawer-left': position() === 'left',\r\n 's4y-drawer-right': position() === 'right',\r\n 's4y-drawer-top': position() === 'top',\r\n 's4y-drawer-bottom': position() === 'bottom',\r\n }\"\r\n class=\"s4y-drawer-container\"\r\n >\r\n <header class=\"s4y-header\">\r\n @if (headerTemplate) {\r\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n }\r\n <!-- -->\r\n @else {\r\n <p class=\"s4y-header__title\">{{ title() }}</p>\r\n @if (hasCloseButton()) {\r\n <button (click)=\"close()\">×</button>\r\n }\r\n }\r\n </header>\r\n\r\n <div class=\"s4y-body-content\">\r\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n </div>\r\n @if (footerTemplate) {\r\n <div class=\"s4y-footer-content\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-overlay{background-color:#000000b3;height:100dvh;width:100dvw;position:fixed;top:0;left:0;z-index:var(--z-index-drawer)}.s4y-drawer-container{position:fixed;width:100%;height:100dvh;display:flex;flex-direction:column;background-color:#fff;border:1px solid var(--gray-300);box-shadow:#00000029 0 1px 4px}@media screen and (min-width:320px)and (max-width:480px){.s4y-drawer-container{width:90%}}@media screen and (min-width:481px)and (max-width:767px){.s4y-drawer-container{width:90%}}.s4y-header{padding:1.8rem;display:flex;align-items:center;justify-content:space-between}.s4y-header .s4y-header__title{font-size:1.8rem;font-weight:700}.s4y-header button{height:100%;display:inline-block;width:2.8rem;font-size:2.2rem}.s4y-body-content{flex-grow:1;overflow-y:auto;padding-bottom:1.8rem}.s4y-drawer-left{left:0}.s4y-drawer-left .s4y-body-content{padding-left:1.8rem;padding-right:1.8rem}.s4y-drawer-right{right:0}.s4y-drawer-right .s4y-body-content{padding-left:1.8rem;padding-right:1.8rem}.s4y-drawer-top{top:0;width:100dvw}.s4y-drawer-top .s4y-body-content{padding-left:1.8rem}.s4y-drawer-bottom{width:100dvw;bottom:0}.s4y-drawer-bottom .s4y-body-content{padding-left:1.8rem}.s4y-footer-content{padding:1.8rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [drawerAnimation] });
|
|
1026
1026
|
}
|
|
1027
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1027
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
1028
1028
|
type: Component,
|
|
1029
|
-
args: [{ selector: 's4y-drawer', imports: [NgClass, NgTemplateOutlet], animations: [drawerAnimation], template: "@if (isVisible()) {\r\n <div\r\n [@drawerAnimation]=\"{\r\n value: '',\r\n params: {\r\n transformFrom: transformFrom(),\r\n transformTo: transformTo(),\r\n },\r\n }\"\r\n [class.s4y-overlay]=\"backdrop()\"\r\n (click)=\"onBackdropClick($event)\"\r\n >\r\n <div\r\n [style.maxWidth]=\"drawerSize().width\"\r\n [style.maxHeight]=\"drawerSize().height\"\r\n [ngClass]=\"{\r\n 's4y-drawer-left': position() === 'left',\r\n 's4y-drawer-right': position() === 'right',\r\n 's4y-drawer-top': position() === 'top',\r\n 's4y-drawer-bottom': position() === 'bottom',\r\n }\"\r\n class=\"s4y-drawer-container\"\r\n >\r\n <header class=\"s4y-header\">\r\n @if (headerTemplate) {\r\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n }\r\n <!-- -->\r\n @else {\r\n <p class=\"s4y-header__title\">{{ title() }}</p>\r\n @if (hasCloseButton()) {\r\n <button (click)=\"close()\">×</button>\r\n }\r\n }\r\n </header>\r\n\r\n <div class=\"s4y-body-content\">\r\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n </div>\r\n @if (footerTemplate) {\r\n <div class=\"s4y-footer-content\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-overlay{background-color:#000000b3;height:100dvh;width:100dvw;position:fixed;top:0;left:0;z-index:var(--z-index-drawer)}.s4y-drawer-container{position:fixed;width:100%;height:100dvh;display:flex;flex-direction:column;background-color:#fff;border:1px solid var(--gray-300);box-shadow:#00000029 0 1px 4px}@media screen and (min-width:
|
|
1029
|
+
args: [{ selector: 's4y-drawer', imports: [NgClass, NgTemplateOutlet], animations: [drawerAnimation], template: "@if (isVisible()) {\r\n <div\r\n [@drawerAnimation]=\"{\r\n value: '',\r\n params: {\r\n transformFrom: transformFrom(),\r\n transformTo: transformTo(),\r\n },\r\n }\"\r\n [class.s4y-overlay]=\"backdrop()\"\r\n (click)=\"onBackdropClick($event)\"\r\n >\r\n <div\r\n [style.maxWidth]=\"drawerSize().width\"\r\n [style.maxHeight]=\"drawerSize().height\"\r\n [ngClass]=\"{\r\n 's4y-drawer-left': position() === 'left',\r\n 's4y-drawer-right': position() === 'right',\r\n 's4y-drawer-top': position() === 'top',\r\n 's4y-drawer-bottom': position() === 'bottom',\r\n }\"\r\n class=\"s4y-drawer-container\"\r\n >\r\n <header class=\"s4y-header\">\r\n @if (headerTemplate) {\r\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n }\r\n <!-- -->\r\n @else {\r\n <p class=\"s4y-header__title\">{{ title() }}</p>\r\n @if (hasCloseButton()) {\r\n <button (click)=\"close()\">×</button>\r\n }\r\n }\r\n </header>\r\n\r\n <div class=\"s4y-body-content\">\r\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n </div>\r\n @if (footerTemplate) {\r\n <div class=\"s4y-footer-content\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-overlay{background-color:#000000b3;height:100dvh;width:100dvw;position:fixed;top:0;left:0;z-index:var(--z-index-drawer)}.s4y-drawer-container{position:fixed;width:100%;height:100dvh;display:flex;flex-direction:column;background-color:#fff;border:1px solid var(--gray-300);box-shadow:#00000029 0 1px 4px}@media screen and (min-width:320px)and (max-width:480px){.s4y-drawer-container{width:90%}}@media screen and (min-width:481px)and (max-width:767px){.s4y-drawer-container{width:90%}}.s4y-header{padding:1.8rem;display:flex;align-items:center;justify-content:space-between}.s4y-header .s4y-header__title{font-size:1.8rem;font-weight:700}.s4y-header button{height:100%;display:inline-block;width:2.8rem;font-size:2.2rem}.s4y-body-content{flex-grow:1;overflow-y:auto;padding-bottom:1.8rem}.s4y-drawer-left{left:0}.s4y-drawer-left .s4y-body-content{padding-left:1.8rem;padding-right:1.8rem}.s4y-drawer-right{right:0}.s4y-drawer-right .s4y-body-content{padding-left:1.8rem;padding-right:1.8rem}.s4y-drawer-top{top:0;width:100dvw}.s4y-drawer-top .s4y-body-content{padding-left:1.8rem}.s4y-drawer-bottom{width:100dvw;bottom:0}.s4y-drawer-bottom .s4y-body-content{padding-left:1.8rem}.s4y-footer-content{padding:1.8rem}\n"] }]
|
|
1030
1030
|
}], ctorParameters: () => [], propDecorators: { headerTemplate: [{
|
|
1031
1031
|
type: ContentChild,
|
|
1032
1032
|
args: ['headerTemplate']
|
|
@@ -1046,10 +1046,10 @@ class SpinnerComponent {
|
|
|
1046
1046
|
color = input('primary');
|
|
1047
1047
|
constructor() { }
|
|
1048
1048
|
ngOnInit() { }
|
|
1049
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1050
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
1049
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1050
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.22", type: SpinnerComponent, isStandalone: true, selector: "s4y-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.size": "size()", "attr.color": "color()" } }, ngImport: i0, template: "\n", styles: [":host{width:48px;height:48px;border:5px solid var(--primary-color);border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host[size=mini]{width:18px;height:18px;border-bottom-color:transparent;border-width:3px}:host[size=small]{width:30px;height:30px;border-bottom-color:transparent;border-width:4px}:host[size=medium]{width:48px;height:48px;border-bottom-color:transparent}:host[size=large]{width:70px;height:70px;border-bottom-color:transparent}:host[color=primary]{border-color:var(--primary-color);border-bottom-color:transparent}:host[color=secondary]{border-color:var(--secondary-color);border-bottom-color:transparent}\n"] });
|
|
1051
1051
|
}
|
|
1052
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1052
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
1053
1053
|
type: Component,
|
|
1054
1054
|
args: [{ selector: 's4y-spinner', host: {
|
|
1055
1055
|
'[attr.size]': 'size()',
|
|
@@ -1062,6 +1062,7 @@ class TableComponent {
|
|
|
1062
1062
|
tableScrollContainer;
|
|
1063
1063
|
headers = input([]);
|
|
1064
1064
|
data = input([]);
|
|
1065
|
+
stickyHeader = input(false);
|
|
1065
1066
|
customSort = input(false);
|
|
1066
1067
|
multipleSort = input(false);
|
|
1067
1068
|
initialSorts = input([]);
|
|
@@ -1070,6 +1071,13 @@ class TableComponent {
|
|
|
1070
1071
|
sortField = input(null);
|
|
1071
1072
|
sortOrder = input('none');
|
|
1072
1073
|
sorts = signal([]);
|
|
1074
|
+
// Recomendado apenas para tabelas simples, sem colunas sticky e sem scroll horizontal pesado.
|
|
1075
|
+
virtualScroll = input(false);
|
|
1076
|
+
virtualItemSize = input(50);
|
|
1077
|
+
virtualMinBufferPx = input(200);
|
|
1078
|
+
virtualMaxBufferPx = input(400);
|
|
1079
|
+
tableHeight = input(null);
|
|
1080
|
+
tableMaxHeight = input(null);
|
|
1073
1081
|
sortedData = computed(() => {
|
|
1074
1082
|
let originalData = [...this.data()];
|
|
1075
1083
|
if (this.customSort())
|
|
@@ -1115,6 +1123,15 @@ class TableComponent {
|
|
|
1115
1123
|
emptyMessageDefault = input(' Não encontramos dados para exibir.');
|
|
1116
1124
|
sortBy = signal(undefined);
|
|
1117
1125
|
lastPresetSignature = '';
|
|
1126
|
+
containerStyle = computed(() => {
|
|
1127
|
+
return {
|
|
1128
|
+
...this.tableStyle(),
|
|
1129
|
+
...(this.tableHeight() ? { height: this.tableHeight() } : {}),
|
|
1130
|
+
...(this.tableMaxHeight()
|
|
1131
|
+
? { 'max-height': this.tableMaxHeight() }
|
|
1132
|
+
: {}),
|
|
1133
|
+
};
|
|
1134
|
+
});
|
|
1118
1135
|
scrollToTop() {
|
|
1119
1136
|
if (this.tableScrollContainer.nativeElement) {
|
|
1120
1137
|
this.tableScrollContainer.nativeElement.scrollTop = 0;
|
|
@@ -1183,12 +1200,13 @@ class TableComponent {
|
|
|
1183
1200
|
const sb = String(b);
|
|
1184
1201
|
return dir === 'asc' ? sa.localeCompare(sb) : sb.localeCompare(sa);
|
|
1185
1202
|
}
|
|
1186
|
-
|
|
1187
|
-
static
|
|
1203
|
+
trackByIndex = (index) => index;
|
|
1204
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1205
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: TableComponent, isStandalone: true, selector: "s4y-table", inputs: { headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, customSort: { classPropertyName: "customSort", publicName: "customSort", isSignal: true, isRequired: false, transformFunction: null }, multipleSort: { classPropertyName: "multipleSort", publicName: "multipleSort", isSignal: true, isRequired: false, transformFunction: null }, initialSorts: { classPropertyName: "initialSorts", publicName: "initialSorts", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualItemSize: { classPropertyName: "virtualItemSize", publicName: "virtualItemSize", isSignal: true, isRequired: false, transformFunction: null }, virtualMinBufferPx: { classPropertyName: "virtualMinBufferPx", publicName: "virtualMinBufferPx", isSignal: true, isRequired: false, transformFunction: null }, virtualMaxBufferPx: { classPropertyName: "virtualMaxBufferPx", publicName: "virtualMaxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, tableHeight: { classPropertyName: "tableHeight", publicName: "tableHeight", isSignal: true, isRequired: false, transformFunction: null }, tableMaxHeight: { classPropertyName: "tableMaxHeight", publicName: "tableMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortFunction: "sortFunction", multiSortFunction: "multiSortFunction" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true }, { propertyName: "headTemplate", first: true, predicate: ["headTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "customEmptyTemplate", first: true, predicate: ["customEmptyTemplate"], descendants: true }, { propertyName: "customErrorTemplate", first: true, predicate: ["customErrorTemplate"], descendants: true }], viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (virtualScroll()) {\r\n <div class=\"s4y-table-virtual-container\" [ngStyle]=\"containerStyle()\">\r\n <table class=\"s4y-table s4y-table-virtual-header\">\r\n <thead>\r\n <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n </thead>\r\n </table>\r\n\r\n <cdk-virtual-scroll-viewport\r\n class=\"s4y-table-virtual-viewport\"\r\n [itemSize]=\"virtualItemSize()\"\r\n [minBufferPx]=\"virtualMinBufferPx()\"\r\n [maxBufferPx]=\"virtualMaxBufferPx()\"\r\n >\r\n <table class=\"s4y-table s4y-table-virtual-body\">\r\n <tbody>\r\n <ng-container\r\n *cdkVirtualFor=\"\r\n let item of sortedData();\r\n let idx = index;\r\n trackBy: trackByIndex\r\n \"\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, idx: idx }\"\r\n />\r\n </tbody>\r\n </table>\r\n </cdk-virtual-scroll-viewport>\r\n </div>\r\n} @else {\r\n <div\r\n class=\"s4y-table-container\"\r\n [class.s4y-table-container--sticky-header]=\"stickyHeader()\"\r\n #tableScrollContainer\r\n [ngStyle]=\"containerStyle()\"\r\n cdkScrollable\r\n >\r\n <table class=\"s4y-table\">\r\n <thead>\r\n <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n </thead>\r\n <tbody>\r\n @if (isLoading()) {\r\n <tr class=\"loading\">\r\n <td [colSpan]=\"headers().length\">\r\n <s4y-spinner></s4y-spinner>\r\n </td>\r\n </tr>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </td>\r\n </tr>\r\n } @else if (customErrorTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"customErrorTemplate\"\r\n ></ng-container>\r\n } @else {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n {{ errorMessageDefault() }}\r\n </td>\r\n </tr>\r\n }\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n}\r\n\r\n<ng-template #SortIcon>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n @for (item of sortedData(); track $index) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n >\r\n </ng-container>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <tr class=\"empty-content\">\r\n <td [colSpan]=\"headers().length\">\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </td>\r\n </tr>\r\n } @else if (customEmptyTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"customEmptyTemplate\"></ng-container>\r\n } @else {\r\n <tr class=\"empty-content\">\r\n <td [colSpan]=\"headers().length\">\r\n {{ emptyMessageDefault() }}\r\n </td>\r\n </tr>\r\n }\r\n }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem;width:100%;container-type:inline-size}@media screen and (min-width:320px)and (max-width:480px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width:481px)and (max-width:767px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-300);border-collapse:collapse;width:100%}@media screen and (min-width:320px)and (max-width:480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width:481px)and (max-width:767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table thead th{transition:.2s ease}.s4y-table tbody tr{background-color:#fff;font-size:1.3rem;font-weight:400;height:5rem;border-bottom:1px solid var(--gray-300)}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table td,.s4y-table th{padding:0 1.4rem}.s4y-table th.s4y-active-sort,.s4y-table th.s4y-active-sort.s4y-hover{background-color:var(--primary-color);color:#fff}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}.s4y-table .s4y-table-sticky{position:sticky;z-index:5;background-color:#fff}.s4y-table thead .s4y-table-sticky{z-index:15;background-color:#eaeaea}.s4y-table .s4y-table-sticky--left{left:0}.s4y-table .s4y-table-sticky--right{right:0}.s4y-table thead .s4y-table-sticky.s4y-active-sort{background-color:var(--primary-color);color:#fff}.s4y-table-container--sticky-header{position:relative;overflow:auto}.s4y-table-container--sticky-header .s4y-table{border-collapse:separate;border-spacing:0}.s4y-table-container--sticky-header .s4y-table thead th{position:sticky;top:0;z-index:10;background-color:#eaeaea;box-shadow:0 .1rem 0 var(--border-color)}.s4y-table-container--sticky-header .s4y-table thead th.s4y-table-sticky{z-index:20}.s4y-table-container--sticky-header .s4y-table tbody tr td{border-bottom:1px solid var(--gray-300)}.s4y-table-virtual-container{width:100%;height:36rem;overflow:hidden}.s4y-table-virtual-container tbody tr td{border-bottom:1px solid var(--gray-300)}.s4y-table-virtual-header,.s4y-table-virtual-body{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}.s4y-table-virtual-header{height:5rem;flex-shrink:0}.s4y-table-virtual-viewport{width:100%;height:calc(100% - 5rem);overflow-y:auto;overflow-x:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1188
1206
|
}
|
|
1189
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TableComponent, decorators: [{
|
|
1190
1208
|
type: Component,
|
|
1191
|
-
args: [{ selector: 's4y-table', imports: [CommonModule, SpinnerComponent,
|
|
1209
|
+
args: [{ selector: 's4y-table', imports: [CommonModule, SpinnerComponent, ScrollingModule], encapsulation: ViewEncapsulation.None, template: "@if (virtualScroll()) {\r\n <div class=\"s4y-table-virtual-container\" [ngStyle]=\"containerStyle()\">\r\n <table class=\"s4y-table s4y-table-virtual-header\">\r\n <thead>\r\n <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n </thead>\r\n </table>\r\n\r\n <cdk-virtual-scroll-viewport\r\n class=\"s4y-table-virtual-viewport\"\r\n [itemSize]=\"virtualItemSize()\"\r\n [minBufferPx]=\"virtualMinBufferPx()\"\r\n [maxBufferPx]=\"virtualMaxBufferPx()\"\r\n >\r\n <table class=\"s4y-table s4y-table-virtual-body\">\r\n <tbody>\r\n <ng-container\r\n *cdkVirtualFor=\"\r\n let item of sortedData();\r\n let idx = index;\r\n trackBy: trackByIndex\r\n \"\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, idx: idx }\"\r\n />\r\n </tbody>\r\n </table>\r\n </cdk-virtual-scroll-viewport>\r\n </div>\r\n} @else {\r\n <div\r\n class=\"s4y-table-container\"\r\n [class.s4y-table-container--sticky-header]=\"stickyHeader()\"\r\n #tableScrollContainer\r\n [ngStyle]=\"containerStyle()\"\r\n cdkScrollable\r\n >\r\n <table class=\"s4y-table\">\r\n <thead>\r\n <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n </thead>\r\n <tbody>\r\n @if (isLoading()) {\r\n <tr class=\"loading\">\r\n <td [colSpan]=\"headers().length\">\r\n <s4y-spinner></s4y-spinner>\r\n </td>\r\n </tr>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </td>\r\n </tr>\r\n } @else if (customErrorTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"customErrorTemplate\"\r\n ></ng-container>\r\n } @else {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n {{ errorMessageDefault() }}\r\n </td>\r\n </tr>\r\n }\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n}\r\n\r\n<ng-template #SortIcon>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n @for (item of sortedData(); track $index) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n >\r\n </ng-container>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <tr class=\"empty-content\">\r\n <td [colSpan]=\"headers().length\">\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </td>\r\n </tr>\r\n } @else if (customEmptyTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"customEmptyTemplate\"></ng-container>\r\n } @else {\r\n <tr class=\"empty-content\">\r\n <td [colSpan]=\"headers().length\">\r\n {{ emptyMessageDefault() }}\r\n </td>\r\n </tr>\r\n }\r\n }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem;width:100%;container-type:inline-size}@media screen and (min-width:320px)and (max-width:480px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width:481px)and (max-width:767px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-300);border-collapse:collapse;width:100%}@media screen and (min-width:320px)and (max-width:480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width:481px)and (max-width:767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table thead th{transition:.2s ease}.s4y-table tbody tr{background-color:#fff;font-size:1.3rem;font-weight:400;height:5rem;border-bottom:1px solid var(--gray-300)}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table td,.s4y-table th{padding:0 1.4rem}.s4y-table th.s4y-active-sort,.s4y-table th.s4y-active-sort.s4y-hover{background-color:var(--primary-color);color:#fff}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}.s4y-table .s4y-table-sticky{position:sticky;z-index:5;background-color:#fff}.s4y-table thead .s4y-table-sticky{z-index:15;background-color:#eaeaea}.s4y-table .s4y-table-sticky--left{left:0}.s4y-table .s4y-table-sticky--right{right:0}.s4y-table thead .s4y-table-sticky.s4y-active-sort{background-color:var(--primary-color);color:#fff}.s4y-table-container--sticky-header{position:relative;overflow:auto}.s4y-table-container--sticky-header .s4y-table{border-collapse:separate;border-spacing:0}.s4y-table-container--sticky-header .s4y-table thead th{position:sticky;top:0;z-index:10;background-color:#eaeaea;box-shadow:0 .1rem 0 var(--border-color)}.s4y-table-container--sticky-header .s4y-table thead th.s4y-table-sticky{z-index:20}.s4y-table-container--sticky-header .s4y-table tbody tr td{border-bottom:1px solid var(--gray-300)}.s4y-table-virtual-container{width:100%;height:36rem;overflow:hidden}.s4y-table-virtual-container tbody tr td{border-bottom:1px solid var(--gray-300)}.s4y-table-virtual-header,.s4y-table-virtual-body{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}.s4y-table-virtual-header{height:5rem;flex-shrink:0}.s4y-table-virtual-viewport{width:100%;height:calc(100% - 5rem);overflow-y:auto;overflow-x:hidden}\n"] }]
|
|
1192
1210
|
}], ctorParameters: () => [], propDecorators: { tableScrollContainer: [{
|
|
1193
1211
|
type: ViewChild,
|
|
1194
1212
|
args: ['tableScrollContainer']
|
|
@@ -1515,10 +1533,10 @@ class TableSortDirective {
|
|
|
1515
1533
|
get descIcon() {
|
|
1516
1534
|
return '<svg style="height: 1.4rem; width: 1.4rem;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z"></path></svg>';
|
|
1517
1535
|
}
|
|
1518
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1519
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
1536
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TableSortDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: TableComponent }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1537
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.22", type: TableSortDirective, isStandalone: true, selector: "[s4ySortableColumnName]", inputs: { s4ySortableColumnName: { classPropertyName: "s4ySortableColumnName", publicName: "s4ySortableColumnName", isSignal: true, isRequired: false, transformFunction: null }, s4ySortable: { classPropertyName: "s4ySortable", publicName: "s4ySortable", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "emitSortableColumnName()", "mouseenter": "mouseOver()", "mouseleave": "mouseLeave()" } }, ngImport: i0 });
|
|
1520
1538
|
}
|
|
1521
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1539
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TableSortDirective, decorators: [{
|
|
1522
1540
|
type: Directive,
|
|
1523
1541
|
args: [{
|
|
1524
1542
|
selector: '[s4ySortableColumnName]',
|
|
@@ -1535,6 +1553,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
1535
1553
|
args: ['mouseleave']
|
|
1536
1554
|
}] } });
|
|
1537
1555
|
|
|
1556
|
+
class TableStickyDirective {
|
|
1557
|
+
s4yTableSticky = input();
|
|
1558
|
+
get stickyClass() {
|
|
1559
|
+
return !!this.s4yTableSticky();
|
|
1560
|
+
}
|
|
1561
|
+
get isLeft() {
|
|
1562
|
+
return this.s4yTableSticky() === 'left';
|
|
1563
|
+
}
|
|
1564
|
+
get isRight() {
|
|
1565
|
+
return this.s4yTableSticky() === 'right';
|
|
1566
|
+
}
|
|
1567
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TableStickyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1568
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.22", type: TableStickyDirective, isStandalone: true, selector: "[s4yTableSticky]", inputs: { s4yTableSticky: { classPropertyName: "s4yTableSticky", publicName: "s4yTableSticky", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.s4y-table-sticky": "this.stickyClass", "class.s4y-table-sticky--left": "this.isLeft", "class.s4y-table-sticky--right": "this.isRight" } }, ngImport: i0 });
|
|
1569
|
+
}
|
|
1570
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TableStickyDirective, decorators: [{
|
|
1571
|
+
type: Directive,
|
|
1572
|
+
args: [{
|
|
1573
|
+
selector: '[s4yTableSticky]',
|
|
1574
|
+
standalone: true,
|
|
1575
|
+
}]
|
|
1576
|
+
}], propDecorators: { stickyClass: [{
|
|
1577
|
+
type: HostBinding,
|
|
1578
|
+
args: ['class.s4y-table-sticky']
|
|
1579
|
+
}], isLeft: [{
|
|
1580
|
+
type: HostBinding,
|
|
1581
|
+
args: ['class.s4y-table-sticky--left']
|
|
1582
|
+
}], isRight: [{
|
|
1583
|
+
type: HostBinding,
|
|
1584
|
+
args: ['class.s4y-table-sticky--right']
|
|
1585
|
+
}] } });
|
|
1586
|
+
|
|
1538
1587
|
const modalFadeCombined = trigger('modalFadeCombined', [
|
|
1539
1588
|
transition(':enter', [
|
|
1540
1589
|
group([
|
|
@@ -1620,12 +1669,12 @@ class ModalComponent {
|
|
|
1620
1669
|
ngOnDestroy() {
|
|
1621
1670
|
window.removeEventListener('keydown', this.escListener);
|
|
1622
1671
|
}
|
|
1623
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1624
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1672
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ModalComponent, deps: [{ token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
1673
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: ModalComponent, isStandalone: true, selector: "s4y-modal", inputs: { scrollableContent: { classPropertyName: "scrollableContent", publicName: "scrollableContent", isSignal: true, isRequired: false, transformFunction: null }, centeredModal: { classPropertyName: "centeredModal", publicName: "centeredModal", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, withHeader: { classPropertyName: "withHeader", publicName: "withHeader", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, interceptBackdropClick: { classPropertyName: "interceptBackdropClick", publicName: "interceptBackdropClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", requestClose: "requestClose", onBackdrop: "onBackdrop" }, queries: [{ propertyName: "modalHeaderTemplate", first: true, predicate: ["modalHeaderTemplate"], descendants: true }, { propertyName: "modalFooterTemplate", first: true, predicate: ["modalFooterTemplate"], descendants: true }], ngImport: i0, template: "@if (visible()) {\r\n <div\r\n class=\"s4y-modal-wrapper\"\r\n [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n [class.s4y-modal-wrapper-centered]=\"centeredModal()\"\r\n @modalFadeCombined\r\n cdkScrollable\r\n (click)=\"onBackdropClick($event)\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n >\r\n <div\r\n class=\"s4y-modal-container\"\r\n [class.s4y-modal-container__scrollable-content]=\"scrollableContent()\"\r\n [ngStyle]=\"modalStyle()\"\r\n >\r\n @if (modalHeaderTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n }\r\n @if (!modalHeaderTemplate && withHeader()) {\r\n <div class=\"s4y-modal-header\">\r\n <h2 class=\"s4y-modal-header__title\">{{ title() }}</h2>\r\n <button role=\"button\" (click)=\"onClose()\">\r\n <p>×</p>\r\n </button>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"s4y-modal-body\"\r\n [class.s4y-modal-body__scrollable-content]=\"scrollableContent()\"\r\n cdkScrollable\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n @if (modalFooterTemplate) {\r\n <div class=\"s4y-modal-footer\">\r\n <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:var(--z-index-modal-backdrop);padding:3.8rem;background-color:#000000b3}.s4y-modal-wrapper.s4y-modal-wrapper-with-scrollable{overflow-y:auto;-webkit-overflow-scrolling:auto}.s4y-modal-wrapper.s4y-modal-wrapper-centered{align-items:center;justify-content:center}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 2rem 2.2rem;display:flex;flex-direction:column}@media screen and (min-width:320px)and (max-width:480px){.s4y-modal-container{width:90%}}@media screen and (min-width:481px)and (max-width:767px){.s4y-modal-container{width:90%}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-modal-container{width:90%}}.s4y-modal-header{padding-bottom:1rem;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header .s4y-modal-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-modal-body{flex-grow:1}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}.s4y-modal-body__scrollable-content{overflow-y:auto}.s4y-modal-container__scrollable-content{max-height:90dvh;min-height:18rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], animations: [modalFadeCombined] });
|
|
1625
1674
|
}
|
|
1626
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1675
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ModalComponent, decorators: [{
|
|
1627
1676
|
type: Component,
|
|
1628
|
-
args: [{ selector: 's4y-modal', imports: [CommonModule, CdkScrollable], animations: [modalFadeCombined], template: "@if (visible()) {\r\n <div\r\n class=\"s4y-modal-wrapper\"\r\n [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n [class.s4y-modal-wrapper-centered]=\"centeredModal()\"\r\n @modalFadeCombined\r\n cdkScrollable\r\n (click)=\"onBackdropClick($event)\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n >\r\n <div\r\n class=\"s4y-modal-container\"\r\n [class.s4y-modal-container__scrollable-content]=\"scrollableContent()\"\r\n [ngStyle]=\"modalStyle()\"\r\n >\r\n @if (modalHeaderTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n }\r\n @if (!modalHeaderTemplate && withHeader()) {\r\n <div class=\"s4y-modal-header\">\r\n <h2 class=\"s4y-modal-header__title\">{{ title() }}</h2>\r\n <button role=\"button\" (click)=\"onClose()\">\r\n <p>×</p>\r\n </button>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"s4y-modal-body\"\r\n [class.s4y-modal-body__scrollable-content]=\"scrollableContent()\"\r\n cdkScrollable\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n @if (modalFooterTemplate) {\r\n <div class=\"s4y-modal-footer\">\r\n <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:var(--z-index-modal-backdrop);padding:3.8rem;background-color:#000000b3}.s4y-modal-wrapper.s4y-modal-wrapper-with-scrollable{overflow-y:auto;-webkit-overflow-scrolling:auto}.s4y-modal-wrapper.s4y-modal-wrapper-centered{align-items:center;justify-content:center}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 2rem 2.2rem;display:flex;flex-direction:column}@media screen and (min-width:
|
|
1677
|
+
args: [{ selector: 's4y-modal', imports: [CommonModule, CdkScrollable], animations: [modalFadeCombined], template: "@if (visible()) {\r\n <div\r\n class=\"s4y-modal-wrapper\"\r\n [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n [class.s4y-modal-wrapper-centered]=\"centeredModal()\"\r\n @modalFadeCombined\r\n cdkScrollable\r\n (click)=\"onBackdropClick($event)\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n >\r\n <div\r\n class=\"s4y-modal-container\"\r\n [class.s4y-modal-container__scrollable-content]=\"scrollableContent()\"\r\n [ngStyle]=\"modalStyle()\"\r\n >\r\n @if (modalHeaderTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n }\r\n @if (!modalHeaderTemplate && withHeader()) {\r\n <div class=\"s4y-modal-header\">\r\n <h2 class=\"s4y-modal-header__title\">{{ title() }}</h2>\r\n <button role=\"button\" (click)=\"onClose()\">\r\n <p>×</p>\r\n </button>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"s4y-modal-body\"\r\n [class.s4y-modal-body__scrollable-content]=\"scrollableContent()\"\r\n cdkScrollable\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n @if (modalFooterTemplate) {\r\n <div class=\"s4y-modal-footer\">\r\n <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:var(--z-index-modal-backdrop);padding:3.8rem;background-color:#000000b3}.s4y-modal-wrapper.s4y-modal-wrapper-with-scrollable{overflow-y:auto;-webkit-overflow-scrolling:auto}.s4y-modal-wrapper.s4y-modal-wrapper-centered{align-items:center;justify-content:center}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 2rem 2.2rem;display:flex;flex-direction:column}@media screen and (min-width:320px)and (max-width:480px){.s4y-modal-container{width:90%}}@media screen and (min-width:481px)and (max-width:767px){.s4y-modal-container{width:90%}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-modal-container{width:90%}}.s4y-modal-header{padding-bottom:1rem;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header .s4y-modal-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-modal-body{flex-grow:1}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}.s4y-modal-body__scrollable-content{overflow-y:auto}.s4y-modal-container__scrollable-content{max-height:90dvh;min-height:18rem}\n"] }]
|
|
1629
1678
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: Document, decorators: [{
|
|
1630
1679
|
type: Inject,
|
|
1631
1680
|
args: [DOCUMENT]
|
|
@@ -1660,10 +1709,10 @@ class ModalConfirmationService {
|
|
|
1660
1709
|
close() {
|
|
1661
1710
|
this._visible.set(false);
|
|
1662
1711
|
}
|
|
1663
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1664
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
1712
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ModalConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1713
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ModalConfirmationService });
|
|
1665
1714
|
}
|
|
1666
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1715
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ModalConfirmationService, decorators: [{
|
|
1667
1716
|
type: Injectable
|
|
1668
1717
|
}] });
|
|
1669
1718
|
|
|
@@ -1690,12 +1739,12 @@ class ModalConfirmationComponent {
|
|
|
1690
1739
|
onClose() {
|
|
1691
1740
|
this.modalConfirmationService.close();
|
|
1692
1741
|
}
|
|
1693
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1694
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1742
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ModalConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1743
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: ModalConfirmationComponent, isStandalone: true, selector: "s4y-modal-confirmation", inputs: { modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["iconTemplate"], descendants: true }], ngImport: i0, template: "@if (visible()) {\r\n <div class=\"s4y-modal-wrapper\" @modalFadeCombined>\r\n <div class=\"s4y-backdrop\" (click)=\"onClose()\"></div>\r\n <div class=\"s4y-modal-container\" [ngStyle]=\"modalStyle()\">\r\n @if (iconTemplate) {\r\n <div class=\"s4y-modal-icon\">\r\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\r\n </div>\r\n }\r\n <div class=\"s4y-modal-header\">\r\n <h3>{{ modalConfigs().title }}</h3>\r\n <p>\r\n {{ modalConfigs().message }}\r\n </p>\r\n </div>\r\n\r\n <div class=\"s4y-modal-body\">\r\n <button\r\n (click)=\"onCancel()\"\r\n s4yButton\r\n [variant]=\"buttonCancelProps().variant ?? 'danger'\"\r\n [outlined]=\"buttonCancelProps().outlined ?? true\"\r\n [fullWidth]=\"true\"\r\n >\r\n {{ buttonCancelProps().text }}\r\n </button>\r\n <button\r\n (click)=\"onConfirm()\"\r\n s4yButton\r\n [variant]=\"buttonConfirmProps().variant ?? 'danger'\"\r\n [outlined]=\"buttonConfirmProps().outlined ?? false\"\r\n [fullWidth]=\"true\"\r\n >\r\n {{ buttonConfirmProps().text }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--z-index-emergency)}.s4y-backdrop{position:fixed;inset:0;background-color:#000c;backdrop-filter:blur(4px)}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:350px;max-height:90dvh;min-height:14rem;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 1.8rem 3rem;display:flex;flex-direction:column}@media screen and (min-width:320px)and (max-width:480px){.s4y-modal-container{width:90%}}@media screen and (min-width:481px)and (max-width:767px){.s4y-modal-container{width:90%}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-modal-container{width:90%}}.s4y-modal-icon{text-align:center;display:grid;place-items:center}.s4y-modal-header{padding:1rem 0;flex-shrink:0;align-items:center;justify-content:space-between;display:flex;flex-direction:column;gap:.4rem;margin-bottom:2.8rem}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header h3{color:var(--primary-color);font-size:1.8rem;text-align:center}.s4y-modal-header p{font-size:1.4rem;text-align:center}.s4y-modal-body{flex-grow:1;overflow-y:auto;display:flex;align-items:center;gap:1.4rem}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "button[s4yButton], a[s4yButton]", inputs: ["disabled", "outlined", "loading", "size", "roundend", "variant", "fullWidth", "iconAligned"] }], animations: [modalFadeCombined] });
|
|
1695
1744
|
}
|
|
1696
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1745
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ModalConfirmationComponent, decorators: [{
|
|
1697
1746
|
type: Component,
|
|
1698
|
-
args: [{ selector: 's4y-modal-confirmation', imports: [CommonModule, ButtonComponent], animations: [modalFadeCombined], template: "@if (visible()) {\r\n <div class=\"s4y-modal-wrapper\" @modalFadeCombined>\r\n <div class=\"s4y-backdrop\" (click)=\"onClose()\"></div>\r\n <div class=\"s4y-modal-container\" [ngStyle]=\"modalStyle()\">\r\n @if (iconTemplate) {\r\n <div class=\"s4y-modal-icon\">\r\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\r\n </div>\r\n }\r\n <div class=\"s4y-modal-header\">\r\n <h3>{{ modalConfigs().title }}</h3>\r\n <p>\r\n {{ modalConfigs().message }}\r\n </p>\r\n </div>\r\n\r\n <div class=\"s4y-modal-body\">\r\n <button\r\n (click)=\"onCancel()\"\r\n s4yButton\r\n [variant]=\"buttonCancelProps().variant ?? 'danger'\"\r\n [outlined]=\"buttonCancelProps().outlined ?? true\"\r\n [fullWidth]=\"true\"\r\n >\r\n {{ buttonCancelProps().text }}\r\n </button>\r\n <button\r\n (click)=\"onConfirm()\"\r\n s4yButton\r\n [variant]=\"buttonConfirmProps().variant ?? 'danger'\"\r\n [outlined]=\"buttonConfirmProps().outlined ?? false\"\r\n [fullWidth]=\"true\"\r\n >\r\n {{ buttonConfirmProps().text }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--z-index-emergency)}.s4y-backdrop{position:fixed;inset:0;background-color:#000c;backdrop-filter:blur(4px)}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:350px;max-height:90dvh;min-height:14rem;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 1.8rem 3rem;display:flex;flex-direction:column}@media screen and (min-width:
|
|
1747
|
+
args: [{ selector: 's4y-modal-confirmation', imports: [CommonModule, ButtonComponent], animations: [modalFadeCombined], template: "@if (visible()) {\r\n <div class=\"s4y-modal-wrapper\" @modalFadeCombined>\r\n <div class=\"s4y-backdrop\" (click)=\"onClose()\"></div>\r\n <div class=\"s4y-modal-container\" [ngStyle]=\"modalStyle()\">\r\n @if (iconTemplate) {\r\n <div class=\"s4y-modal-icon\">\r\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\r\n </div>\r\n }\r\n <div class=\"s4y-modal-header\">\r\n <h3>{{ modalConfigs().title }}</h3>\r\n <p>\r\n {{ modalConfigs().message }}\r\n </p>\r\n </div>\r\n\r\n <div class=\"s4y-modal-body\">\r\n <button\r\n (click)=\"onCancel()\"\r\n s4yButton\r\n [variant]=\"buttonCancelProps().variant ?? 'danger'\"\r\n [outlined]=\"buttonCancelProps().outlined ?? true\"\r\n [fullWidth]=\"true\"\r\n >\r\n {{ buttonCancelProps().text }}\r\n </button>\r\n <button\r\n (click)=\"onConfirm()\"\r\n s4yButton\r\n [variant]=\"buttonConfirmProps().variant ?? 'danger'\"\r\n [outlined]=\"buttonConfirmProps().outlined ?? false\"\r\n [fullWidth]=\"true\"\r\n >\r\n {{ buttonConfirmProps().text }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--z-index-emergency)}.s4y-backdrop{position:fixed;inset:0;background-color:#000c;backdrop-filter:blur(4px)}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:350px;max-height:90dvh;min-height:14rem;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 1.8rem 3rem;display:flex;flex-direction:column}@media screen and (min-width:320px)and (max-width:480px){.s4y-modal-container{width:90%}}@media screen and (min-width:481px)and (max-width:767px){.s4y-modal-container{width:90%}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-modal-container{width:90%}}.s4y-modal-icon{text-align:center;display:grid;place-items:center}.s4y-modal-header{padding:1rem 0;flex-shrink:0;align-items:center;justify-content:space-between;display:flex;flex-direction:column;gap:.4rem;margin-bottom:2.8rem}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header h3{color:var(--primary-color);font-size:1.8rem;text-align:center}.s4y-modal-header p{font-size:1.4rem;text-align:center}.s4y-modal-body{flex-grow:1;overflow-y:auto;display:flex;align-items:center;gap:1.4rem}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}\n"] }]
|
|
1699
1748
|
}], propDecorators: { iconTemplate: [{
|
|
1700
1749
|
type: ContentChild,
|
|
1701
1750
|
args: ['iconTemplate']
|
|
@@ -1705,10 +1754,10 @@ class SearchBarComponent {
|
|
|
1705
1754
|
size = input('md');
|
|
1706
1755
|
iconPosition = input('left');
|
|
1707
1756
|
showIcon = input(true);
|
|
1708
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1709
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1757
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1758
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: SearchBarComponent, isStandalone: true, selector: "s4y-search-bar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label\r\n [attr.data-size]=\"size()\"\r\n class=\"s4y-search-bar-container\"\r\n [class.s4y-search-bar--icon-right]=\"iconPosition() === 'right'\"\r\n>\r\n @if (showIcon()) {\r\n <ng-container>\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n </ng-container>\r\n }\r\n <ng-content select=\"input[s4ySearchBar]\"></ng-content>\r\n</label>\r\n\r\n<ng-template #searchIcon>\r\n <span class=\"s4y-search-bar__icon\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.s4y-search-bar-container{display:flex;align-items:center;justify-content:flex-start;padding:0 1.4rem;max-width:60rem;border-radius:var(--radius);gap:1.2rem;background-color:#fff;border:1px solid var(--gray-500);box-shadow:var(--shadow-default);transition:.3s ease}.s4y-search-bar-container input{width:100%;background-color:transparent;border:none;outline:none;color:var(--primary-color);transition:.3s ease}.s4y-search-bar-container input::placeholder{color:var(--gray-900);transition:opacity .3s ease,transform .3s ease}.s4y-search-bar-container:focus-within{box-shadow:0 0 0 3px rgba(var(--primary-rgb),.2);border:1px solid var(--primary-color)}.s4y-search-bar-container:focus-within input::placeholder{opacity:0;transform:translate(4px)}.s4y-search-bar-container:focus-within .s4y-search-bar__icon{color:var(--primary-color)}.s4y-search-bar-container .s4y-search-bar__icon{width:2.4rem;height:2.4rem;display:grid;place-items:center;flex-shrink:0;transition:.3s ease}.s4y-search-bar-container.s4y-search-bar--icon-right{flex-direction:row-reverse}.s4y-search-bar-container[data-size=xs]{height:2.8rem;padding:0 .8rem;gap:.6rem}.s4y-search-bar-container[data-size=xs] input{font-size:1.1rem}.s4y-search-bar-container[data-size=xs] input::placeholder{font-size:1.1rem;letter-spacing:.2px}.s4y-search-bar-container[data-size=xs] .s4y-search-bar__icon{width:1.4rem;height:1.4rem}.s4y-search-bar-container[data-size=sm]{height:3.6rem;padding:0 1rem}.s4y-search-bar-container[data-size=sm] input{font-size:1.25rem}.s4y-search-bar-container[data-size=sm] input::placeholder{font-size:1.25rem}.s4y-search-bar-container[data-size=sm] .s4y-search-bar__icon{width:1.8rem;height:1.8rem}.s4y-search-bar-container[data-size=md]{min-height:4.6rem}.s4y-search-bar-container[data-size=md] input{font-size:1.4rem}.s4y-search-bar-container[data-size=md] input::placeholder{font-size:1.4rem}.s4y-search-bar-container[data-size=lg]{height:5.6rem}.s4y-search-bar-container[data-size=lg] input{font-size:1.6rem}.s4y-search-bar-container[data-size=lg] input::placeholder{font-size:1.6rem}.s4y-search-bar-container[data-size=xl]{height:6.2rem}.s4y-search-bar-container[data-size=xl] input{font-size:1.8rem}.s4y-search-bar-container[data-size=xl] input::placeholder{font-size:1.8rem;letter-spacing:.3px}.s4y-search-bar-container[data-size=xl] .s4y-search-bar__icon{width:3rem;height:3rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1710
1759
|
}
|
|
1711
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1760
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
1712
1761
|
type: Component,
|
|
1713
1762
|
args: [{ selector: 's4y-search-bar', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, template: "<label\r\n [attr.data-size]=\"size()\"\r\n class=\"s4y-search-bar-container\"\r\n [class.s4y-search-bar--icon-right]=\"iconPosition() === 'right'\"\r\n>\r\n @if (showIcon()) {\r\n <ng-container>\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n </ng-container>\r\n }\r\n <ng-content select=\"input[s4ySearchBar]\"></ng-content>\r\n</label>\r\n\r\n<ng-template #searchIcon>\r\n <span class=\"s4y-search-bar__icon\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.s4y-search-bar-container{display:flex;align-items:center;justify-content:flex-start;padding:0 1.4rem;max-width:60rem;border-radius:var(--radius);gap:1.2rem;background-color:#fff;border:1px solid var(--gray-500);box-shadow:var(--shadow-default);transition:.3s ease}.s4y-search-bar-container input{width:100%;background-color:transparent;border:none;outline:none;color:var(--primary-color);transition:.3s ease}.s4y-search-bar-container input::placeholder{color:var(--gray-900);transition:opacity .3s ease,transform .3s ease}.s4y-search-bar-container:focus-within{box-shadow:0 0 0 3px rgba(var(--primary-rgb),.2);border:1px solid var(--primary-color)}.s4y-search-bar-container:focus-within input::placeholder{opacity:0;transform:translate(4px)}.s4y-search-bar-container:focus-within .s4y-search-bar__icon{color:var(--primary-color)}.s4y-search-bar-container .s4y-search-bar__icon{width:2.4rem;height:2.4rem;display:grid;place-items:center;flex-shrink:0;transition:.3s ease}.s4y-search-bar-container.s4y-search-bar--icon-right{flex-direction:row-reverse}.s4y-search-bar-container[data-size=xs]{height:2.8rem;padding:0 .8rem;gap:.6rem}.s4y-search-bar-container[data-size=xs] input{font-size:1.1rem}.s4y-search-bar-container[data-size=xs] input::placeholder{font-size:1.1rem;letter-spacing:.2px}.s4y-search-bar-container[data-size=xs] .s4y-search-bar__icon{width:1.4rem;height:1.4rem}.s4y-search-bar-container[data-size=sm]{height:3.6rem;padding:0 1rem}.s4y-search-bar-container[data-size=sm] input{font-size:1.25rem}.s4y-search-bar-container[data-size=sm] input::placeholder{font-size:1.25rem}.s4y-search-bar-container[data-size=sm] .s4y-search-bar__icon{width:1.8rem;height:1.8rem}.s4y-search-bar-container[data-size=md]{min-height:4.6rem}.s4y-search-bar-container[data-size=md] input{font-size:1.4rem}.s4y-search-bar-container[data-size=md] input::placeholder{font-size:1.4rem}.s4y-search-bar-container[data-size=lg]{height:5.6rem}.s4y-search-bar-container[data-size=lg] input{font-size:1.6rem}.s4y-search-bar-container[data-size=lg] input::placeholder{font-size:1.6rem}.s4y-search-bar-container[data-size=xl]{height:6.2rem}.s4y-search-bar-container[data-size=xl] input{font-size:1.8rem}.s4y-search-bar-container[data-size=xl] input::placeholder{font-size:1.8rem;letter-spacing:.3px}.s4y-search-bar-container[data-size=xl] .s4y-search-bar__icon{width:3rem;height:3rem}\n"] }]
|
|
1714
1763
|
}] });
|
|
@@ -1739,8 +1788,8 @@ class ToggleComponent {
|
|
|
1739
1788
|
this.onTouched();
|
|
1740
1789
|
this.onChange(this.model());
|
|
1741
1790
|
}
|
|
1742
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1743
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
1791
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1792
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.22", type: ToggleComponent, isStandalone: true, selector: "s4y-toggle", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange" }, providers: [
|
|
1744
1793
|
{
|
|
1745
1794
|
provide: NG_VALUE_ACCESSOR,
|
|
1746
1795
|
useExisting: ToggleComponent,
|
|
@@ -1748,7 +1797,7 @@ class ToggleComponent {
|
|
|
1748
1797
|
},
|
|
1749
1798
|
], ngImport: i0, template: "<label class=\"s4y-switch\" [class]=\"size()\">\r\n <input\r\n (input)=\"onToggle()\"\r\n type=\"checkbox\"\r\n [checked]=\"model()\"\r\n [disabled]=\"disabled() || disabledWithReactives\"\r\n />\r\n <span class=\"slider round\"></span>\r\n</label>\r\n", styles: ["@charset \"UTF-8\";.s4y-switch{position:relative;display:inline-block;width:60px;height:34px}.s4y-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--primary-color)}input:focus+.slider{box-shadow:0 0 1px var(--primary-color)}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translate(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.s4y-switch.small{width:34px;height:18px}.s4y-switch.small .slider:before{position:absolute;content:\"\";height:12px;width:12px;left:4px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.s4y-switch.small input:checked+.slider:before{-webkit-transform:translateX(15px);-ms-transform:translateX(15px);transform:translate(15px)}.s4y-switch.medium{width:48px;height:24px}.s4y-switch.medium .slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.s4y-switch.medium input:checked+.slider:before{-webkit-transform:translateX(24px);-ms-transform:translateX(24px);transform:translate(24px)}.s4y-switch.large{width:60px;height:34px}.s4y-switch.large .slider:before{position:absolute;content:\"\";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.s4y-switch.large input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translate(26px)}input:disabled+.slider{cursor:not-allowed;background-color:#bdbdbd}input:disabled+.slider:before{background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }] });
|
|
1750
1799
|
}
|
|
1751
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1800
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
1752
1801
|
type: Component,
|
|
1753
1802
|
args: [{ selector: 's4y-toggle', imports: [FormsModule], providers: [
|
|
1754
1803
|
{
|
|
@@ -1881,16 +1930,16 @@ class SelectComponent {
|
|
|
1881
1930
|
? opt1.id === opt2.id
|
|
1882
1931
|
: JSON.stringify(opt1) === JSON.stringify(opt2); // fallback genérico
|
|
1883
1932
|
}
|
|
1884
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1885
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1933
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1934
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: SelectComponent, isStandalone: true, selector: "s4y-select", inputs: { withSearch: { classPropertyName: "withSearch", publicName: "withSearch", isSignal: true, isRequired: false, transformFunction: null }, maxScreen: { classPropertyName: "maxScreen", publicName: "maxScreen", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, onSearch: { classPropertyName: "onSearch", publicName: "onSearch", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSearch: "onSearchChange" }, providers: [
|
|
1886
1935
|
{
|
|
1887
1936
|
multi: true,
|
|
1888
1937
|
provide: NG_VALUE_ACCESSOR,
|
|
1889
1938
|
useExisting: forwardRef(() => SelectComponent),
|
|
1890
1939
|
},
|
|
1891
|
-
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "selectedOptionTemplate", first: true, predicate: ["selectedOptionTemplate"], descendants: true }], ngImport: i0, template: "<label\r\n class=\"s4y-select-container\"\r\n [style.maxWidth]=\"widthStyle()\"\r\n s4yClickOutside\r\n (clickOutside)=\"isOpened = false\"\r\n [attr.size]=\"size()\"\r\n>\r\n <p class=\"s4y-select-label\">\r\n {{ label() }}\r\n </p>\r\n\r\n <div\r\n class=\"s4y-select-container__wrapper\"\r\n [class.disabled]=\"isDisabled\"\r\n (click)=\"isOpened = !isOpened\"\r\n [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n tabindex=\"0\"\r\n aria-controls=\"select-options-container\"\r\n >\r\n <div class=\"s4y-select-container__placeholder\">\r\n @if (selectedOptionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedOption?.option }\"\r\n ></ng-container>\r\n } @else {\r\n @if (!selectedOption) {\r\n <p>Selecione...</p>\r\n } @else {\r\n <p>{{ selectedOption }}</p>\r\n }\r\n }\r\n </div>\r\n\r\n <div class=\"s4y-select-container__actions\">\r\n @if (hasValue() && !isDisabled && closable()) {\r\n <span class=\"s4y-select-clear\" (click)=\"clearSelection($event)\"\r\n >×</span\r\n >\r\n } @else {\r\n @if (isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n }\r\n @if (!isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n }\r\n }\r\n </div>\r\n </div>\r\n <ng-content select=\"s4y-error-message\"></ng-content>\r\n <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n <div class=\"s4y-select-options\">\r\n @if (withSearch()) {\r\n <div class=\"s4y-select-options__search\">\r\n <input\r\n [ngModel]=\"onSearch()\"\r\n (ngModelChange)=\"onSearch.set($event)\"\r\n placeholder=\"Pesquisar...\"\r\n type=\"text\"\r\n name=\"search-option\"\r\n id=\"search-option\"\r\n autocomplete=\"off\"\r\n />\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n </div>\r\n }\r\n @if (isLoading()) {\r\n <div class=\"s4y-select-container__loading\">\r\n <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n </div>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <p class=\"s4y-select-options__message\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p class=\"s4y-select-options__message\">\r\n {{ errorMessageDefault() }}\r\n </p>\r\n }\r\n } @else {\r\n <div\r\n class=\"s4y-select-options__scroll\"\r\n role=\"listbox\"\r\n aria-live=\"polite\"\r\n >\r\n @for (option of transformedOptions(); track $index) {\r\n <p\r\n [class.selected]=\"option.selected\"\r\n class=\"s4y-select-options__item\"\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n tabindex=\"0\"\r\n (click)=\"setSelectedOption(option)\"\r\n (keyup.enter)=\"setSelectedOption(option)\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n optionTemplate;\r\n context: { $implicit: option?.option }\r\n \"\r\n ></ng-container>\r\n </p>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n {{ emptyMessageDefault() }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</label>\r\n\r\n<!-- arrows -->\r\n<ng-template #arrowDown>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n <svg\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-select-container{display:block;min-width:12rem}.s4y-select-container .s4y-select-label{margin-bottom:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-container__placeholder,.s4y-select-container .s4y-select-options__item{font-size:1.4rem}.s4y-select-container .s4y-select-container__wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease}.s4y-select-container .s4y-select-container__wrapper.disabled{opacity:.5;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}.s4y-select-container .s4y-select-container__placeholder{color:var(--gray-900);flex:1}.s4y-select-container .s4y-select-options-container{position:relative}.s4y-select-container .s4y-select-options{position:absolute;top:5px;left:0;display:flex;flex-direction:column;gap:.6rem;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem;z-index:var(--z-index-select-dropdown)}.s4y-select-container .s4y-select-options__scroll{overflow-y:auto}.s4y-select-container .s4y-select-options__item{padding:.8rem}.s4y-select-container .s4y-select-options__item:hover{border-radius:var(--radius);cursor:pointer;background-color:var(--gray-200)}.s4y-select-container .s4y-select-options__item.selected{background-color:var(--primary-color);color:var(--gray-100)}.s4y-select-container .s4y-select-options__message{color:var(--gray-900)}.s4y-select-container .s4y-select-container__loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.s4y-select-container .s4y-select-options__search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem}.s4y-select-container .s4y-select-container__actions{display:flex;align-items:center;gap:.2rem}.s4y-select-container .s4y-select-clear{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0%;width:1.8rem;height:1.8rem;flex:0 0 auto;border-radius:50%;font-size:1.8rem;color:var(--gray-900);transition:.2s ease}.s4y-select-container .s4y-select-clear:hover{background-color:var(--gray-200)}.s4y-select-container[size=extra-small] .s4y-select-container__wrapper{height:2.8rem;padding:.4rem .8rem}.s4y-select-container[size=extra-small] .s4y-select-container__placeholder,.s4y-select-container[size=extra-small] .s4y-select-options__item{font-size:1.2rem}.s4y-select-container[size=small] .s4y-select-container__wrapper{height:3.6rem;padding:.6rem 1.2rem}.s4y-select-container[size=small] .s4y-select-container__placeholder,.s4y-select-container[size=small] .s4y-select-options__item{font-size:1.3rem}.s4y-select-container[size=medium] .s4y-select-container__wrapper,.s4y-select-container:not([size]) .s4y-select-container__wrapper{height:4.6rem;padding:.8rem 1.6rem}.s4y-select-container[size=large] .s4y-select-container__wrapper{height:5.6rem;padding:1rem 2rem}.s4y-select-container[size=large] .s4y-select-container__placeholder,.s4y-select-container[size=large] .s4y-select-options__item{font-size:1.5rem}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__wrapper,:host.ng-invalid.ng-dirty .s4y-select-container__wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[s4yClickOutside]", inputs: ["isVisible"], outputs: ["clickOutside"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [selectAnimation] });
|
|
1940
|
+
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "selectedOptionTemplate", first: true, predicate: ["selectedOptionTemplate"], descendants: true }], ngImport: i0, template: "<label\r\n class=\"s4y-select-container\"\r\n [style.maxWidth]=\"widthStyle()\"\r\n s4yClickOutside\r\n (clickOutside)=\"isOpened = false\"\r\n [attr.size]=\"size()\"\r\n>\r\n <p class=\"s4y-select-label\">\r\n {{ label() }}\r\n </p>\r\n\r\n <div\r\n class=\"s4y-select-container__wrapper\"\r\n [class.disabled]=\"isDisabled\"\r\n (click)=\"isOpened = !isOpened\"\r\n [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n tabindex=\"0\"\r\n aria-controls=\"select-options-container\"\r\n >\r\n <div class=\"s4y-select-container__placeholder\">\r\n @if (selectedOptionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedOption?.option }\"\r\n ></ng-container>\r\n } @else {\r\n @if (!selectedOption) {\r\n <p>Selecione...</p>\r\n } @else {\r\n <p>{{ selectedOption }}</p>\r\n }\r\n }\r\n </div>\r\n\r\n <div class=\"s4y-select-container__actions\">\r\n @if (hasValue() && !isDisabled && closable()) {\r\n <span class=\"s4y-select-clear\" (click)=\"clearSelection($event)\"\r\n >×</span\r\n >\r\n } @else {\r\n @if (isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n }\r\n @if (!isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n }\r\n }\r\n </div>\r\n </div>\r\n <ng-content select=\"s4y-error-message\"></ng-content>\r\n <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n <div class=\"s4y-select-options\">\r\n @if (withSearch()) {\r\n <div class=\"s4y-select-options__search\">\r\n <input\r\n [ngModel]=\"onSearch()\"\r\n (ngModelChange)=\"onSearch.set($event)\"\r\n placeholder=\"Pesquisar...\"\r\n type=\"text\"\r\n name=\"search-option\"\r\n id=\"search-option\"\r\n autocomplete=\"off\"\r\n />\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n </div>\r\n }\r\n @if (isLoading()) {\r\n <div class=\"s4y-select-container__loading\">\r\n <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n </div>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <p class=\"s4y-select-options__message\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p class=\"s4y-select-options__message\">\r\n {{ errorMessageDefault() }}\r\n </p>\r\n }\r\n } @else {\r\n <div\r\n class=\"s4y-select-options__scroll\"\r\n role=\"listbox\"\r\n aria-live=\"polite\"\r\n >\r\n @for (option of transformedOptions(); track $index) {\r\n <p\r\n [class.selected]=\"option.selected\"\r\n class=\"s4y-select-options__item\"\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n tabindex=\"0\"\r\n (click)=\"setSelectedOption(option)\"\r\n (keyup.enter)=\"setSelectedOption(option)\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n optionTemplate;\r\n context: { $implicit: option?.option }\r\n \"\r\n ></ng-container>\r\n </p>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n {{ emptyMessageDefault() }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</label>\r\n\r\n<!-- arrows -->\r\n<ng-template #arrowDown>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n <svg\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-select-container{display:block;min-width:12rem}.s4y-select-container .s4y-select-label{margin-bottom:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-container__placeholder,.s4y-select-container .s4y-select-options__item{font-size:1.4rem}.s4y-select-container .s4y-select-container__wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease}.s4y-select-container .s4y-select-container__wrapper.disabled{opacity:.5;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}.s4y-select-container .s4y-select-container__placeholder{color:var(--gray-900);flex:1}.s4y-select-container .s4y-select-options-container{position:relative}.s4y-select-container .s4y-select-options{position:absolute;top:5px;left:0;display:flex;flex-direction:column;gap:.6rem;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem;z-index:var(--z-index-select-dropdown)}.s4y-select-container .s4y-select-options__scroll{overflow-y:auto}.s4y-select-container .s4y-select-options__item{padding:.8rem}.s4y-select-container .s4y-select-options__item:hover{border-radius:var(--radius);cursor:pointer;background-color:var(--gray-200)}.s4y-select-container .s4y-select-options__item.selected{background-color:var(--primary-color);color:var(--gray-100)}.s4y-select-container .s4y-select-options__message{color:var(--gray-900)}.s4y-select-container .s4y-select-container__loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.s4y-select-container .s4y-select-options__search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem}.s4y-select-container .s4y-select-container__actions{display:flex;align-items:center;gap:.2rem}.s4y-select-container .s4y-select-clear{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0%;width:1.8rem;height:1.8rem;flex:0 0 auto;border-radius:50%;font-size:1.8rem;color:var(--gray-900);transition:.2s ease}.s4y-select-container .s4y-select-clear:hover{background-color:var(--gray-200)}.s4y-select-container[size=extra-small] .s4y-select-container__wrapper{height:2.8rem;padding:.4rem .8rem}.s4y-select-container[size=extra-small] .s4y-select-container__placeholder,.s4y-select-container[size=extra-small] .s4y-select-options__item{font-size:1.2rem}.s4y-select-container[size=small] .s4y-select-container__wrapper{height:3.6rem;padding:.6rem 1.2rem}.s4y-select-container[size=small] .s4y-select-container__placeholder,.s4y-select-container[size=small] .s4y-select-options__item{font-size:1.3rem}.s4y-select-container[size=medium] .s4y-select-container__wrapper,.s4y-select-container:not([size]) .s4y-select-container__wrapper{height:4.6rem;padding:.8rem 1.6rem}.s4y-select-container[size=large] .s4y-select-container__wrapper{height:5.6rem;padding:1rem 2rem}.s4y-select-container[size=large] .s4y-select-container__placeholder,.s4y-select-container[size=large] .s4y-select-options__item{font-size:1.5rem}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__wrapper,:host.ng-invalid.ng-dirty .s4y-select-container__wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[s4yClickOutside]", inputs: ["isVisible"], outputs: ["clickOutside"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [selectAnimation] });
|
|
1892
1941
|
}
|
|
1893
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1942
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1894
1943
|
type: Component,
|
|
1895
1944
|
args: [{ selector: 's4y-select', imports: [
|
|
1896
1945
|
NgIf,
|
|
@@ -1992,10 +2041,10 @@ class PaginationComponent {
|
|
|
1992
2041
|
rowsPerPage: this.rowsPerPage(),
|
|
1993
2042
|
});
|
|
1994
2043
|
}
|
|
1995
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1996
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2044
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2045
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: PaginationComponent, isStandalone: true, selector: "s4y-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalResults: { classPropertyName: "totalResults", publicName: "totalResults", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPage: { classPropertyName: "rowsPerPage", publicName: "rowsPerPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", rowsPerPage: "rowsPerPageChange", onChange: "onChange" }, ngImport: i0, template: "<div class=\"s4y-pagination-container desktop\">\r\n <div class=\"s4y-pagination-wrapper-view\">\r\n <select\r\n [value]=\"rowsPerPage()\"\r\n (change)=\"selectRowsPerPage($event)\"\r\n name=\"quantity-view-results\"\r\n id=\"quantity-view-results\"\r\n >\r\n @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n <option [value]=\"rowsPerPageOption\" [selected]=\"rowsPerPageOption === rowsPerPage()\">\r\n {{ rowsPerPageOption }}\r\n </option>\r\n }\r\n </select>\r\n\r\n <ng-container [ngTemplateOutlet]=\"arrow\"></ng-container>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-wrapper\">\r\n <button\r\n [disabled]=\"prevButtonDisabled()\"\r\n (click)=\"prevPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n </button>\r\n\r\n <div class=\"s4y-pagination-pages\">\r\n @for (item of smartPageArray(); track $index) {\r\n <button\r\n *ngIf=\"item !== '...'; else ellipsis\"\r\n (click)=\"changePage(item)\"\r\n [class.selected]=\"item === currentPage()\"\r\n class=\"s4y-pagination-pages__item\"\r\n >\r\n {{ item + 1 }}\r\n </button>\r\n <ng-template #ellipsis>\r\n <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n </ng-template>\r\n }\r\n </div>\r\n\r\n <button\r\n [disabled]=\"nextButtonDisabled()\"\r\n (click)=\"nextPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n </button>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-details\">\r\n @if (totalResults() > 0) {\r\n <p>\r\n {{ offset() }}\r\n </p>\r\n <span>-</span>\r\n <p>{{ limit() }}</p>\r\n <strong>of</strong>\r\n <p>\r\n {{ totalResults() }}\r\n </p>\r\n }\r\n </div>\r\n</div>\r\n\r\n<!-- Mobile -->\r\n<div class=\"s4y-pagination-container mobile\">\r\n <div class=\"flex justify-between align-center\">\r\n <div class=\"s4y-pagination-wrapper-view\">\r\n <select\r\n [value]=\"rowsPerPage()\"\r\n (change)=\"selectRowsPerPage($event)\"\r\n name=\"quantity-view-results\"\r\n id=\"quantity-view-results\"\r\n >\r\n @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n <option [value]=\"rowsPerPageOption\">\r\n {{ rowsPerPageOption }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-details\">\r\n <p>\r\n {{ offset() }}\r\n </p>\r\n <span>-</span>\r\n <p>{{ limit() }}</p>\r\n <strong>of</strong>\r\n <p>\r\n {{ totalResults() }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-wrapper\">\r\n <button\r\n [disabled]=\"prevButtonDisabled()\"\r\n (click)=\"prevPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n </button>\r\n\r\n <div class=\"s4y-pagination-pages\">\r\n @for (item of smartPageArray(); track $index) {\r\n <button\r\n *ngIf=\"item !== '...'; else ellipsis\"\r\n (click)=\"changePage(item)\"\r\n [class.selected]=\"item === currentPage()\"\r\n class=\"s4y-pagination-pages__item\"\r\n >\r\n {{ item + 1 }}\r\n </button>\r\n <ng-template #ellipsis>\r\n <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n </ng-template>\r\n }\r\n </div>\r\n\r\n <button\r\n [disabled]=\"nextButtonDisabled()\"\r\n (click)=\"nextPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<ng-template #arrowLeft>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.8284 12.0005L14.6569 14.8289L13.2426 16.2431L9 12.0005L13.2426 7.75781L14.6569 9.17203L11.8284 12.0005Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowRight>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12.1717 12.0005L9.34326 9.17203L10.7575 7.75781L15.0001 12.0005L10.7575 16.2431L9.34326 14.8289L12.1717 12.0005Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrow>\r\n <svg\r\n class=\"s4y-pagination-arrow-view\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-pagination-container{display:flex;align-items:center;justify-content:space-between}@media screen and (min-width:320px)and (max-width:480px){.s4y-pagination-container{flex-direction:column;gap:1.8rem}}@media screen and (min-width:481px)and (max-width:767px){.s4y-pagination-container{flex-direction:column;gap:1.8rem}}.s4y-pagination-container.desktop{display:none}@media screen and (min-width:1025px)and (max-width:1280px){.s4y-pagination-container.desktop{display:flex}}@media screen and (min-width:1281px){.s4y-pagination-container.desktop{display:flex}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-pagination-container.desktop{display:flex}}.s4y-pagination-container.mobile{display:none}@media screen and (min-width:320px)and (max-width:480px){.s4y-pagination-container.mobile{display:flex}}@media screen and (min-width:481px)and (max-width:767px){.s4y-pagination-container.mobile{display:flex}}.s4y-pagination-container.mobile .flex{width:100%}.s4y-pagination-container.mobile .s4y-pagination-wrapper{justify-content:space-between;width:100%}.s4y-pagination-wrapper{display:flex;align-items:center;gap:1.4rem;font-size:1rem}.s4y-pagination-pages{display:flex;align-items:center;gap:.4rem}.s4y-pagination-pages .s4y-pagination-pages__item{border-radius:var(--radius);width:34px;height:34px;border:1px solid transparent;transition:.5s ease}.s4y-pagination-pages .s4y-pagination-pages__item:hover{border:1px solid var(--gray-200);background-color:var(--gray-200)}.s4y-pagination-pages .s4y-pagination-pages__item.selected{background-color:var(--primary-color);color:#fff}.s4y-pagination-button{border-radius:var(--radius);width:34px;height:34px;border:1px solid transparent;transition:.5s ease}.s4y-pagination-button:hover{border:1px solid var(--gray-200);background-color:var(--gray-200)}.s4y-pagination-button:disabled{pointer-events:none}.s4y-pagination-wrapper-view{position:relative;min-width:58px;display:inline-block}.s4y-pagination-wrapper-view select{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:1px solid var(--gray-400);border-radius:var(--radius);min-height:34px;padding:1.2rem 2.8rem 1.2rem 1.2rem;display:block;font-size:1.4rem;width:100%}.s4y-pagination-wrapper-view .s4y-pagination-arrow-view{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);pointer-events:none;font-size:1.2rem;color:#333;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.s4y-pagination-details{display:flex;gap:.6rem;font-size:1.4rem;color:var(--gray-900)}.s4y-pagination-pages__ellipsis{font:bold}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
|
|
1997
2046
|
}
|
|
1998
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2047
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
1999
2048
|
type: Component,
|
|
2000
2049
|
args: [{ selector: 's4y-pagination', imports: [
|
|
2001
2050
|
NgTemplateOutlet,
|
|
@@ -2003,7 +2052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
2003
2052
|
FormsModule,
|
|
2004
2053
|
SelectComponent,
|
|
2005
2054
|
SvgComponent,
|
|
2006
|
-
], template: "<div class=\"s4y-pagination-container desktop\">\r\n <div class=\"s4y-pagination-wrapper-view\">\r\n <select\r\n [value]=\"rowsPerPage()\"\r\n (change)=\"selectRowsPerPage($event)\"\r\n name=\"quantity-view-results\"\r\n id=\"quantity-view-results\"\r\n >\r\n @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n <option [value]=\"rowsPerPageOption\" [selected]=\"rowsPerPageOption === rowsPerPage()\">\r\n {{ rowsPerPageOption }}\r\n </option>\r\n }\r\n </select>\r\n\r\n <ng-container [ngTemplateOutlet]=\"arrow\"></ng-container>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-wrapper\">\r\n <button\r\n [disabled]=\"prevButtonDisabled()\"\r\n (click)=\"prevPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n </button>\r\n\r\n <div class=\"s4y-pagination-pages\">\r\n @for (item of smartPageArray(); track $index) {\r\n <button\r\n *ngIf=\"item !== '...'; else ellipsis\"\r\n (click)=\"changePage(item)\"\r\n [class.selected]=\"item === currentPage()\"\r\n class=\"s4y-pagination-pages__item\"\r\n >\r\n {{ item + 1 }}\r\n </button>\r\n <ng-template #ellipsis>\r\n <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n </ng-template>\r\n }\r\n </div>\r\n\r\n <button\r\n [disabled]=\"nextButtonDisabled()\"\r\n (click)=\"nextPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n </button>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-details\">\r\n @if (totalResults() > 0) {\r\n <p>\r\n {{ offset() }}\r\n </p>\r\n <span>-</span>\r\n <p>{{ limit() }}</p>\r\n <strong>of</strong>\r\n <p>\r\n {{ totalResults() }}\r\n </p>\r\n }\r\n </div>\r\n</div>\r\n\r\n<!-- Mobile -->\r\n<div class=\"s4y-pagination-container mobile\">\r\n <div class=\"flex justify-between align-center\">\r\n <div class=\"s4y-pagination-wrapper-view\">\r\n <select\r\n [value]=\"rowsPerPage()\"\r\n (change)=\"selectRowsPerPage($event)\"\r\n name=\"quantity-view-results\"\r\n id=\"quantity-view-results\"\r\n >\r\n @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n <option [value]=\"rowsPerPageOption\">\r\n {{ rowsPerPageOption }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-details\">\r\n <p>\r\n {{ offset() }}\r\n </p>\r\n <span>-</span>\r\n <p>{{ limit() }}</p>\r\n <strong>of</strong>\r\n <p>\r\n {{ totalResults() }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-wrapper\">\r\n <button\r\n [disabled]=\"prevButtonDisabled()\"\r\n (click)=\"prevPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n </button>\r\n\r\n <div class=\"s4y-pagination-pages\">\r\n @for (item of smartPageArray(); track $index) {\r\n <button\r\n *ngIf=\"item !== '...'; else ellipsis\"\r\n (click)=\"changePage(item)\"\r\n [class.selected]=\"item === currentPage()\"\r\n class=\"s4y-pagination-pages__item\"\r\n >\r\n {{ item + 1 }}\r\n </button>\r\n <ng-template #ellipsis>\r\n <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n </ng-template>\r\n }\r\n </div>\r\n\r\n <button\r\n [disabled]=\"nextButtonDisabled()\"\r\n (click)=\"nextPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<ng-template #arrowLeft>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.8284 12.0005L14.6569 14.8289L13.2426 16.2431L9 12.0005L13.2426 7.75781L14.6569 9.17203L11.8284 12.0005Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowRight>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12.1717 12.0005L9.34326 9.17203L10.7575 7.75781L15.0001 12.0005L10.7575 16.2431L9.34326 14.8289L12.1717 12.0005Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrow>\r\n <svg\r\n class=\"s4y-pagination-arrow-view\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-pagination-container{display:flex;align-items:center;justify-content:space-between}@media screen and (min-width:
|
|
2055
|
+
], template: "<div class=\"s4y-pagination-container desktop\">\r\n <div class=\"s4y-pagination-wrapper-view\">\r\n <select\r\n [value]=\"rowsPerPage()\"\r\n (change)=\"selectRowsPerPage($event)\"\r\n name=\"quantity-view-results\"\r\n id=\"quantity-view-results\"\r\n >\r\n @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n <option [value]=\"rowsPerPageOption\" [selected]=\"rowsPerPageOption === rowsPerPage()\">\r\n {{ rowsPerPageOption }}\r\n </option>\r\n }\r\n </select>\r\n\r\n <ng-container [ngTemplateOutlet]=\"arrow\"></ng-container>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-wrapper\">\r\n <button\r\n [disabled]=\"prevButtonDisabled()\"\r\n (click)=\"prevPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n </button>\r\n\r\n <div class=\"s4y-pagination-pages\">\r\n @for (item of smartPageArray(); track $index) {\r\n <button\r\n *ngIf=\"item !== '...'; else ellipsis\"\r\n (click)=\"changePage(item)\"\r\n [class.selected]=\"item === currentPage()\"\r\n class=\"s4y-pagination-pages__item\"\r\n >\r\n {{ item + 1 }}\r\n </button>\r\n <ng-template #ellipsis>\r\n <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n </ng-template>\r\n }\r\n </div>\r\n\r\n <button\r\n [disabled]=\"nextButtonDisabled()\"\r\n (click)=\"nextPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n </button>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-details\">\r\n @if (totalResults() > 0) {\r\n <p>\r\n {{ offset() }}\r\n </p>\r\n <span>-</span>\r\n <p>{{ limit() }}</p>\r\n <strong>of</strong>\r\n <p>\r\n {{ totalResults() }}\r\n </p>\r\n }\r\n </div>\r\n</div>\r\n\r\n<!-- Mobile -->\r\n<div class=\"s4y-pagination-container mobile\">\r\n <div class=\"flex justify-between align-center\">\r\n <div class=\"s4y-pagination-wrapper-view\">\r\n <select\r\n [value]=\"rowsPerPage()\"\r\n (change)=\"selectRowsPerPage($event)\"\r\n name=\"quantity-view-results\"\r\n id=\"quantity-view-results\"\r\n >\r\n @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n <option [value]=\"rowsPerPageOption\">\r\n {{ rowsPerPageOption }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-details\">\r\n <p>\r\n {{ offset() }}\r\n </p>\r\n <span>-</span>\r\n <p>{{ limit() }}</p>\r\n <strong>of</strong>\r\n <p>\r\n {{ totalResults() }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-wrapper\">\r\n <button\r\n [disabled]=\"prevButtonDisabled()\"\r\n (click)=\"prevPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n </button>\r\n\r\n <div class=\"s4y-pagination-pages\">\r\n @for (item of smartPageArray(); track $index) {\r\n <button\r\n *ngIf=\"item !== '...'; else ellipsis\"\r\n (click)=\"changePage(item)\"\r\n [class.selected]=\"item === currentPage()\"\r\n class=\"s4y-pagination-pages__item\"\r\n >\r\n {{ item + 1 }}\r\n </button>\r\n <ng-template #ellipsis>\r\n <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n </ng-template>\r\n }\r\n </div>\r\n\r\n <button\r\n [disabled]=\"nextButtonDisabled()\"\r\n (click)=\"nextPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<ng-template #arrowLeft>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.8284 12.0005L14.6569 14.8289L13.2426 16.2431L9 12.0005L13.2426 7.75781L14.6569 9.17203L11.8284 12.0005Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowRight>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12.1717 12.0005L9.34326 9.17203L10.7575 7.75781L15.0001 12.0005L10.7575 16.2431L9.34326 14.8289L12.1717 12.0005Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrow>\r\n <svg\r\n class=\"s4y-pagination-arrow-view\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-pagination-container{display:flex;align-items:center;justify-content:space-between}@media screen and (min-width:320px)and (max-width:480px){.s4y-pagination-container{flex-direction:column;gap:1.8rem}}@media screen and (min-width:481px)and (max-width:767px){.s4y-pagination-container{flex-direction:column;gap:1.8rem}}.s4y-pagination-container.desktop{display:none}@media screen and (min-width:1025px)and (max-width:1280px){.s4y-pagination-container.desktop{display:flex}}@media screen and (min-width:1281px){.s4y-pagination-container.desktop{display:flex}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-pagination-container.desktop{display:flex}}.s4y-pagination-container.mobile{display:none}@media screen and (min-width:320px)and (max-width:480px){.s4y-pagination-container.mobile{display:flex}}@media screen and (min-width:481px)and (max-width:767px){.s4y-pagination-container.mobile{display:flex}}.s4y-pagination-container.mobile .flex{width:100%}.s4y-pagination-container.mobile .s4y-pagination-wrapper{justify-content:space-between;width:100%}.s4y-pagination-wrapper{display:flex;align-items:center;gap:1.4rem;font-size:1rem}.s4y-pagination-pages{display:flex;align-items:center;gap:.4rem}.s4y-pagination-pages .s4y-pagination-pages__item{border-radius:var(--radius);width:34px;height:34px;border:1px solid transparent;transition:.5s ease}.s4y-pagination-pages .s4y-pagination-pages__item:hover{border:1px solid var(--gray-200);background-color:var(--gray-200)}.s4y-pagination-pages .s4y-pagination-pages__item.selected{background-color:var(--primary-color);color:#fff}.s4y-pagination-button{border-radius:var(--radius);width:34px;height:34px;border:1px solid transparent;transition:.5s ease}.s4y-pagination-button:hover{border:1px solid var(--gray-200);background-color:var(--gray-200)}.s4y-pagination-button:disabled{pointer-events:none}.s4y-pagination-wrapper-view{position:relative;min-width:58px;display:inline-block}.s4y-pagination-wrapper-view select{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:1px solid var(--gray-400);border-radius:var(--radius);min-height:34px;padding:1.2rem 2.8rem 1.2rem 1.2rem;display:block;font-size:1.4rem;width:100%}.s4y-pagination-wrapper-view .s4y-pagination-arrow-view{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);pointer-events:none;font-size:1.2rem;color:#333;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.s4y-pagination-details{display:flex;gap:.6rem;font-size:1.4rem;color:var(--gray-900)}.s4y-pagination-pages__ellipsis{font:bold}\n"] }]
|
|
2007
2056
|
}] });
|
|
2008
2057
|
|
|
2009
2058
|
class SliderComponent {
|
|
@@ -2035,8 +2084,8 @@ class SliderComponent {
|
|
|
2035
2084
|
this.value = typeof value === 'number' ? value : Number(value);
|
|
2036
2085
|
this.onChange(value);
|
|
2037
2086
|
}
|
|
2038
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2039
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2087
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2088
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: SliderComponent, isStandalone: true, selector: "s4y-slider", inputs: { showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, rangeStyle: { classPropertyName: "rangeStyle", publicName: "rangeStyle", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
2040
2089
|
{
|
|
2041
2090
|
provide: NG_VALUE_ACCESSOR,
|
|
2042
2091
|
useExisting: forwardRef(() => SliderComponent),
|
|
@@ -2044,7 +2093,7 @@ class SliderComponent {
|
|
|
2044
2093
|
},
|
|
2045
2094
|
], ngImport: i0, template: "<input\r\n #rangeElement\r\n [ngStyle]=\"rangeStyle\"\r\n type=\"range\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [step]=\"step()\"\r\n [disabled]=\"disabled\"\r\n [value]=\"value\"\r\n (input)=\"changeValue($event)\"\r\n/>\r\n\r\n@if (showValue()) {\r\n <p class=\"s4y-ranger-value\">\r\n {{ rangeElement.value }}\r\n </p>\r\n}\r\n", styles: [":host{display:flex;align-items:center;width:max-content;gap:1rem}input[type=range]{font-size:1.4rem;min-width:14rem;background-color:var(--gray-200);--thumb-height: 1.125em;--track-height: .125em;--track-color: rgba(0, 0, 0, .2);--brightness-hover: 180%;--brightness-down: 80%;--clip-edges: .125em}input[type=range]:after{content:\"\";top:35%;background-color:var(--gray-200);position:absolute;width:100%;z-index:-1;height:4px;border-radius:var(--thumb-width, var(--thumb-height))}input[type=range]{color:var(--primary-color);--track-color: rgba(255, 255, 255, .1)}input[type=range]{position:relative;background-color:transparent;background:#fff0;overflow:hidden}input[type=range]:active{cursor:grabbing}input[type=range]:disabled{filter:grayscale(1);opacity:.3;cursor:not-allowed}input[type=range],input[type=range]::-webkit-slider-runnable-track,input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;transition:all ease .1s;height:var(--thumb-height)}input[type=range]::-webkit-slider-runnable-track,input[type=range]::-webkit-slider-thumb{position:relative}input[type=range]::-webkit-slider-thumb{--thumb-radius: calc((var(--thumb-height) * .5) - 1px);--clip-top: calc((var(--thumb-height) - var(--track-height)) * .5 - .5px);--clip-bottom: calc(var(--thumb-height) - var(--clip-top));--clip-further: calc(100% + 1px) ;--box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;width:var(--thumb-width, var(--thumb-height));background:linear-gradient(currentColor 0 0) scroll no-repeat left center/50% calc(var(--track-height) + 1px);background-color:currentColor;box-shadow:var(--box-fill);border-radius:var(--thumb-width, var(--thumb-height));filter:brightness(100%);clip-path:polygon(100% -1px,var(--clip-edges) -1px,0 var(--clip-top),-100vmax var(--clip-top),-100vmax var(--clip-bottom),0 var(--clip-bottom),var(--clip-edges) 100%,var(--clip-further) var(--clip-further))}input[type=range]:hover::-webkit-slider-thumb{filter:brightness(var(--brightness-hover));cursor:grab}input[type=range]:active::-webkit-slider-thumb{filter:brightness(var(--brightness-down));cursor:grabbing}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(var(--track-color) 0 0) scroll no-repeat center/100% calc(var(--track-height) + 1px)}input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}input[type=range],input[type=range]::-moz-range-track,input[type=range]::-moz-range-thumb{appearance:none;transition:all ease .1s;height:var(--thumb-height)}input[type=range]::-moz-range-track,input[type=range]::-moz-range-thumb,input[type=range]::-moz-range-progress{background:#fff0}input[type=range]::-moz-range-thumb{background:currentColor;border:0;width:var(--thumb-width, var(--thumb-height));border-radius:var(--thumb-width, var(--thumb-height));cursor:grab}input[type=range]:active::-moz-range-thumb{cursor:grabbing}input[type=range]::-moz-range-track{width:100%;background:var(--track-color)}input[type=range]::-moz-range-progress{appearance:none;background:currentColor;transition-delay:30ms}input[type=range]::-moz-range-track,input[type=range]::-moz-range-progress{height:calc(var(--track-height) + 1px);border-radius:var(--track-height)}input[type=range]::-moz-range-thumb,input[type=range]::-moz-range-progress{filter:brightness(100%)}input[type=range]:hover::-moz-range-thumb,input[type=range]:hover::-moz-range-progress{filter:brightness(var(--brightness-hover))}input[type=range]:active::-moz-range-thumb,input[type=range]:active::-moz-range-progress{filter:brightness(var(--brightness-down))}input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed}.s4y-ranger-value{font-size:1.4rem}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
2046
2095
|
}
|
|
2047
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2096
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SliderComponent, decorators: [{
|
|
2048
2097
|
type: Component,
|
|
2049
2098
|
args: [{ selector: 's4y-slider', imports: [NgStyle], providers: [
|
|
2050
2099
|
{
|
|
@@ -2100,8 +2149,8 @@ class RadioComponent {
|
|
|
2100
2149
|
return manual;
|
|
2101
2150
|
return this.displayWith()(this.radioValue());
|
|
2102
2151
|
});
|
|
2103
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2104
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
2152
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2153
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.22", type: RadioComponent, isStandalone: true, selector: "s4y-radio", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, radioValue: { classPropertyName: "radioValue", publicName: "radioValue", isSignal: true, isRequired: true, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
2105
2154
|
{
|
|
2106
2155
|
provide: NG_VALUE_ACCESSOR,
|
|
2107
2156
|
useExisting: forwardRef(() => RadioComponent),
|
|
@@ -2109,7 +2158,7 @@ class RadioComponent {
|
|
|
2109
2158
|
},
|
|
2110
2159
|
], ngImport: i0, template: "<label class=\"s4y-radio\" [class.disabled]=\"disabled\">\r\n <input\r\n value=\"on\"\r\n [disabled]=\"disabled\"\r\n [id]=\"id()\"\r\n [name]=\"name()\"\r\n type=\"radio\"\r\n (change)=\"onInput()\"\r\n [checked]=\"isChecked()\"\r\n />\r\n <span class=\"s4y-radio-label\">\r\n {{ displayLabel() }}\r\n </span>\r\n</label>\r\n", styles: [".s4y-radio{display:block;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;width:max-content;min-height:1.8rem;min-height:1.9rem}.s4y-radio .s4y-radio-label{font-size:1.4rem;color:var(--gray-900)}.s4y-radio+.s4y-radio{margin-top:12px}.s4y-radio input{display:none}.s4y-radio input+span{display:inline-block;position:relative;padding-left:24px}.s4y-radio input+span:before{content:\"\";display:block;position:absolute;top:0;left:0;border-radius:50%;margin-right:5px;width:16px;height:16px;border:1px solid #ccc;background:#fff}.s4y-radio input+span:after{content:\"\";display:block;width:10px;height:10px;background:var(--primary-color);position:absolute;border-radius:50%;top:3px;left:3px;opacity:0;transform:scale(0);transition:all .2s cubic-bezier(.64,.57,.67,1.53)}.s4y-radio input:checked+span:after{opacity:1;transform:scale(1)}.s4y-radio.disabled{cursor:not-allowed}\n"] });
|
|
2111
2160
|
}
|
|
2112
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2161
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: RadioComponent, decorators: [{
|
|
2113
2162
|
type: Component,
|
|
2114
2163
|
args: [{ selector: 's4y-radio', imports: [], providers: [
|
|
2115
2164
|
{
|
|
@@ -2138,10 +2187,10 @@ class TooltipComponent {
|
|
|
2138
2187
|
visible = false;
|
|
2139
2188
|
constructor() { }
|
|
2140
2189
|
ngOnInit() { }
|
|
2141
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2142
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2190
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2191
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: TooltipComponent, isStandalone: false, selector: "s4y-tooltip", ngImport: i0, template: "<div\r\n class=\"tooltip {{ 'tooltip--' + position }}\"\r\n [class.tooltip--visible]=\"visible\"\r\n [style.left]=\"left + 'px'\"\r\n [style.top]=\"top + 'px'\"\r\n>\r\n {{ tooltip }}\r\n</div>\r\n", styles: [".tooltip{position:fixed;background-color:var(--gray-100);color:var(--gray-900);border:1px solid var(--gray-300);box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;border-radius:4px;font-family:Arial;padding:3px 6px;font-size:12px;width:max-content;opacity:0}.tooltip:before{content:\"\";width:0;height:0;position:absolute}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip--light{background-color:#fff;color:#000}.tooltip--light:before{border:5px solid white}.tooltip--dark{background-color:#000;color:#fff}.tooltip--dark:before{border:5px solid black}.tooltip--below{transform:translate(-50%);margin-top:7px}.tooltip--below:before{border-left-color:transparent;border-right-color:transparent;border-top:none;left:calc(50% - 5px);top:-5px}.tooltip--above{transform:translate(-50%,-100%);margin-bottom:7px}.tooltip--above:before{border-left-color:transparent;border-right-color:transparent;border-bottom:none;left:calc(50% - 5px);bottom:-5px}.tooltip--left{transform:translate(calc(-100% - 7px),-50%)}.tooltip--left:before{border-top-color:transparent;border-bottom-color:transparent;border-right:none;right:-5px;top:calc(50% - 5px)}.tooltip--right{transform:translateY(-50%);margin-left:7px}.tooltip--right:before{border-top-color:transparent;border-bottom-color:transparent;border-left:none;left:-5px;top:calc(50% - 5px)}.tooltip--dynamic{margin-left:20px}.tooltip--dynamic:before{display:none}\n"] });
|
|
2143
2192
|
}
|
|
2144
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2193
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
2145
2194
|
type: Component,
|
|
2146
2195
|
args: [{ selector: 's4y-tooltip', standalone: false, template: "<div\r\n class=\"tooltip {{ 'tooltip--' + position }}\"\r\n [class.tooltip--visible]=\"visible\"\r\n [style.left]=\"left + 'px'\"\r\n [style.top]=\"top + 'px'\"\r\n>\r\n {{ tooltip }}\r\n</div>\r\n", styles: [".tooltip{position:fixed;background-color:var(--gray-100);color:var(--gray-900);border:1px solid var(--gray-300);box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;border-radius:4px;font-family:Arial;padding:3px 6px;font-size:12px;width:max-content;opacity:0}.tooltip:before{content:\"\";width:0;height:0;position:absolute}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip--light{background-color:#fff;color:#000}.tooltip--light:before{border:5px solid white}.tooltip--dark{background-color:#000;color:#fff}.tooltip--dark:before{border:5px solid black}.tooltip--below{transform:translate(-50%);margin-top:7px}.tooltip--below:before{border-left-color:transparent;border-right-color:transparent;border-top:none;left:calc(50% - 5px);top:-5px}.tooltip--above{transform:translate(-50%,-100%);margin-bottom:7px}.tooltip--above:before{border-left-color:transparent;border-right-color:transparent;border-bottom:none;left:calc(50% - 5px);bottom:-5px}.tooltip--left{transform:translate(calc(-100% - 7px),-50%)}.tooltip--left:before{border-top-color:transparent;border-bottom-color:transparent;border-right:none;right:-5px;top:calc(50% - 5px)}.tooltip--right{transform:translateY(-50%);margin-left:7px}.tooltip--right:before{border-top-color:transparent;border-bottom-color:transparent;border-left:none;left:-5px;top:calc(50% - 5px)}.tooltip--dynamic{margin-left:20px}.tooltip--dynamic:before{display:none}\n"] }]
|
|
2147
2196
|
}], ctorParameters: () => [] });
|
|
@@ -2252,10 +2301,10 @@ class TooltipDirective {
|
|
|
2252
2301
|
this.componentRef = null;
|
|
2253
2302
|
}
|
|
2254
2303
|
}
|
|
2255
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2256
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
2304
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2305
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.22", type: TooltipDirective, isStandalone: false, selector: "[s4yTooltip]", inputs: { tooltip: ["s4yTooltip", "tooltip"], position: ["s4yTooltipPosition", "position"], showDelay: "showDelay", hideDelay: "hideDelay" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "mousemove": "onMouseMove($event)", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd()" } }, ngImport: i0 });
|
|
2257
2306
|
}
|
|
2258
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2307
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
2259
2308
|
type: Directive,
|
|
2260
2309
|
args: [{
|
|
2261
2310
|
selector: '[s4yTooltip]',
|
|
@@ -2289,11 +2338,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
2289
2338
|
}] } });
|
|
2290
2339
|
|
|
2291
2340
|
class TooltipModule {
|
|
2292
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2293
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
2294
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
2341
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2342
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.22", ngImport: i0, type: TooltipModule, declarations: [TooltipComponent, TooltipDirective], imports: [CommonModule, NgClass], exports: [TooltipDirective] });
|
|
2343
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TooltipModule, imports: [CommonModule] });
|
|
2295
2344
|
}
|
|
2296
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2345
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TooltipModule, decorators: [{
|
|
2297
2346
|
type: NgModule,
|
|
2298
2347
|
args: [{
|
|
2299
2348
|
declarations: [TooltipComponent, TooltipDirective],
|
|
@@ -2308,10 +2357,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
2308
2357
|
* Usage: refer to the demo - app.component.html
|
|
2309
2358
|
*/
|
|
2310
2359
|
class BreadcrumbItemDirective {
|
|
2311
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2312
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
2360
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: BreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2361
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.22", type: BreadcrumbItemDirective, isStandalone: true, selector: "[s4yBreadcrumbItem]", ngImport: i0 });
|
|
2313
2362
|
}
|
|
2314
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2363
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: BreadcrumbItemDirective, decorators: [{
|
|
2315
2364
|
type: Directive,
|
|
2316
2365
|
args: [{
|
|
2317
2366
|
selector: '[s4yBreadcrumbItem]',
|
|
@@ -2636,10 +2685,10 @@ class BreadcrumbService {
|
|
|
2636
2685
|
}
|
|
2637
2686
|
return config || {};
|
|
2638
2687
|
}
|
|
2639
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2640
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
2688
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: BreadcrumbService, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2689
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: BreadcrumbService, providedIn: 'root' });
|
|
2641
2690
|
}
|
|
2642
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2691
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: BreadcrumbService, decorators: [{
|
|
2643
2692
|
type: Injectable,
|
|
2644
2693
|
args: [{
|
|
2645
2694
|
providedIn: 'root',
|
|
@@ -2739,10 +2788,10 @@ class BreadcrumbComponent {
|
|
|
2739
2788
|
});
|
|
2740
2789
|
}));
|
|
2741
2790
|
}
|
|
2742
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2743
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2791
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: BreadcrumbService }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
2792
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: BreadcrumbComponent, isStandalone: true, selector: "s4y-breadcrumb", inputs: { autoGenerate: "autoGenerate", preserveQueryParams: "preserveQueryParams", preserveFragment: "preserveFragment", class: "class", anchorTarget: "anchorTarget", separator: "separator" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: BreadcrumbItemDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<nav aria-label=\"breadcrumb\" class=\"s4y-breadcrumb-root\" [ngClass]=\"class\">\r\n <ol class=\"s4y-breadcrumb-list\">\r\n <ng-container\r\n *ngFor=\"\r\n let breadcrumb of breadcrumbs$ | async;\r\n last as isLast;\r\n first as isFirst;\r\n index as index;\r\n count as count\r\n \"\r\n >\r\n <li class=\"s4y-breadcrumb-item\">\r\n <a\r\n *ngIf=\"!isLast\"\r\n class=\"s4y-breadcrumb-link\"\r\n [ngClass]=\"{ 's4y-breadcrumb-link-disabled': breadcrumb.disable }\"\r\n [attr.aria-disabled]=\"breadcrumb.disable\"\r\n [attr.tabIndex]=\"breadcrumb.disable ? -1 : 0\"\r\n rel=\"noopener noreferrer\"\r\n [routerLink]=\"\r\n breadcrumb.routeInterceptor\r\n ? breadcrumb.routeInterceptor(breadcrumb.routeLink!, breadcrumb)\r\n : breadcrumb.routeLink\r\n \"\r\n [queryParams]=\"\r\n preserveQueryParams ? breadcrumb.queryParams : undefined\r\n \"\r\n [fragment]=\"preserveFragment ? breadcrumb.fragment : undefined\"\r\n [target]=\"anchorTarget ? anchorTarget : '_self'\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n itemTemplate;\r\n context: {\r\n $implicit: breadcrumb.label,\r\n info: breadcrumb.info,\r\n last: isLast,\r\n first: isFirst,\r\n index: index,\r\n count: count,\r\n }\r\n \"\r\n ></ng-container>\r\n <ng-container *ngIf=\"!itemTemplate\">{{\r\n breadcrumb.label\r\n }}</ng-container>\r\n </a>\r\n\r\n <span *ngIf=\"isLast\" class=\"s4y-breadcrumb-trail\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n itemTemplate;\r\n context: {\r\n $implicit: breadcrumb.label,\r\n info: breadcrumb.info,\r\n last: isLast,\r\n first: isFirst,\r\n index: index,\r\n count: count,\r\n }\r\n \"\r\n ></ng-container>\r\n <ng-container *ngIf=\"!itemTemplate\">{{\r\n breadcrumb.label\r\n }}</ng-container>\r\n </span>\r\n </li>\r\n\r\n <li *ngIf=\"!isLast\" class=\"s4y-breadcrumb-separator\" aria-hidden=\"true\">\r\n @if (separatorTemplate) {\r\n <ng-container *ngTemplateOutlet=\"separatorTemplate\"></ng-container>\r\n }\r\n\r\n <ng-container *ngIf=\"!separatorTemplate\">{{ separator }}</ng-container>\r\n </li>\r\n </ng-container>\r\n </ol>\r\n</nav>\r\n", styles: [".s4y-breadcrumb-root{margin:0;font-size:1.4rem}.s4y-breadcrumb-list{display:flex;align-items:center;flex-wrap:wrap;margin:0;padding:0}.s4y-breadcrumb-item{list-style:none}.s4y-breadcrumb-trail{display:flex;align-items:center;font-weight:700}.s4y-breadcrumb-link{display:flex;align-items:center;white-space:nowrap;color:inherit;text-decoration:none;transition:text-decoration .3s;cursor:pointer}.s4y-breadcrumb-link:hover{text-decoration:underline}.s4y-breadcrumb-link-disabled{pointer-events:none;cursor:disabled}.s4y-breadcrumb-separator{display:flex;-webkit-user-select:none;user-select:none;margin-left:8px;margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2744
2793
|
}
|
|
2745
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2794
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
2746
2795
|
type: Component,
|
|
2747
2796
|
args: [{ selector: 's4y-breadcrumb', imports: [CommonModule, RouterModule], encapsulation: ViewEncapsulation.None, template: "<nav aria-label=\"breadcrumb\" class=\"s4y-breadcrumb-root\" [ngClass]=\"class\">\r\n <ol class=\"s4y-breadcrumb-list\">\r\n <ng-container\r\n *ngFor=\"\r\n let breadcrumb of breadcrumbs$ | async;\r\n last as isLast;\r\n first as isFirst;\r\n index as index;\r\n count as count\r\n \"\r\n >\r\n <li class=\"s4y-breadcrumb-item\">\r\n <a\r\n *ngIf=\"!isLast\"\r\n class=\"s4y-breadcrumb-link\"\r\n [ngClass]=\"{ 's4y-breadcrumb-link-disabled': breadcrumb.disable }\"\r\n [attr.aria-disabled]=\"breadcrumb.disable\"\r\n [attr.tabIndex]=\"breadcrumb.disable ? -1 : 0\"\r\n rel=\"noopener noreferrer\"\r\n [routerLink]=\"\r\n breadcrumb.routeInterceptor\r\n ? breadcrumb.routeInterceptor(breadcrumb.routeLink!, breadcrumb)\r\n : breadcrumb.routeLink\r\n \"\r\n [queryParams]=\"\r\n preserveQueryParams ? breadcrumb.queryParams : undefined\r\n \"\r\n [fragment]=\"preserveFragment ? breadcrumb.fragment : undefined\"\r\n [target]=\"anchorTarget ? anchorTarget : '_self'\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n itemTemplate;\r\n context: {\r\n $implicit: breadcrumb.label,\r\n info: breadcrumb.info,\r\n last: isLast,\r\n first: isFirst,\r\n index: index,\r\n count: count,\r\n }\r\n \"\r\n ></ng-container>\r\n <ng-container *ngIf=\"!itemTemplate\">{{\r\n breadcrumb.label\r\n }}</ng-container>\r\n </a>\r\n\r\n <span *ngIf=\"isLast\" class=\"s4y-breadcrumb-trail\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n itemTemplate;\r\n context: {\r\n $implicit: breadcrumb.label,\r\n info: breadcrumb.info,\r\n last: isLast,\r\n first: isFirst,\r\n index: index,\r\n count: count,\r\n }\r\n \"\r\n ></ng-container>\r\n <ng-container *ngIf=\"!itemTemplate\">{{\r\n breadcrumb.label\r\n }}</ng-container>\r\n </span>\r\n </li>\r\n\r\n <li *ngIf=\"!isLast\" class=\"s4y-breadcrumb-separator\" aria-hidden=\"true\">\r\n @if (separatorTemplate) {\r\n <ng-container *ngTemplateOutlet=\"separatorTemplate\"></ng-container>\r\n }\r\n\r\n <ng-container *ngIf=\"!separatorTemplate\">{{ separator }}</ng-container>\r\n </li>\r\n </ng-container>\r\n </ol>\r\n</nav>\r\n", styles: [".s4y-breadcrumb-root{margin:0;font-size:1.4rem}.s4y-breadcrumb-list{display:flex;align-items:center;flex-wrap:wrap;margin:0;padding:0}.s4y-breadcrumb-item{list-style:none}.s4y-breadcrumb-trail{display:flex;align-items:center;font-weight:700}.s4y-breadcrumb-link{display:flex;align-items:center;white-space:nowrap;color:inherit;text-decoration:none;transition:text-decoration .3s;cursor:pointer}.s4y-breadcrumb-link:hover{text-decoration:underline}.s4y-breadcrumb-link-disabled{pointer-events:none;cursor:disabled}.s4y-breadcrumb-separator{display:flex;-webkit-user-select:none;user-select:none;margin-left:8px;margin-right:8px}\n"] }]
|
|
2748
2797
|
}], ctorParameters: () => [{ type: BreadcrumbService }, { type: i1$2.ActivatedRoute }], propDecorators: { itemTemplate: [{
|
|
@@ -2778,10 +2827,10 @@ class StepComponent {
|
|
|
2778
2827
|
this.stepClicked.emit(this.value);
|
|
2779
2828
|
}
|
|
2780
2829
|
}
|
|
2781
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2782
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2830
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2831
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: StepComponent, isStandalone: true, selector: "s4y-step", inputs: { value: "value", title: "title", description: "description", isLast: "isLast", selected: "selected", disabled: "disabled", isCompleted: "isCompleted" }, viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, static: true }], ngImport: i0, template: "<button\r\n (click)=\"onClick()\"\r\n [class.last-step]=\"isLast\"\r\n #root\r\n role=\"button\"\r\n type=\"button\"\r\n class=\"s4y-step-container\"\r\n [disabled]=\"disabled\"\r\n [class.selected]=\"selected || isCompleted\"\r\n [class.future-step]=\"linear && !isCompleted && !selected\"\r\n>\r\n <div class=\"s4y-step-information\">\r\n <div class=\"s4y-step-information__icon\">\r\n <ng-container *ngIf=\"isCompleted; else showValue\"> \u2714 </ng-container>\r\n <ng-template #showValue>{{ value }}</ng-template>\r\n </div>\r\n <div class=\"s4y-step-information__line\"></div>\r\n </div>\r\n <div class=\"s4y-step-content\">\r\n <p class=\"s4y-step-content__title\">{{ title }}</p>\r\n @if (description) {\r\n <p class=\"s4y-step-content__description\">\r\n {{ description }}\r\n </p>\r\n }\r\n </div>\r\n</button>\r\n", styles: [":host{display:block;width:100%}.s4y-step-container{text-align:start;-webkit-user-select:text;user-select:text;display:block;width:100%}.s4y-step-container .s4y-step-information{display:flex;align-items:center;justify-content:center;gap:2.4rem}.s4y-step-container .s4y-step-information .s4y-step-information__icon{transition:.5s ease;height:2rem;width:2rem;border-radius:50px;font-size:1.2rem;color:#fff;flex-shrink:0;border:1px solid var(--gray-600);color:var(--gray-600);display:flex;align-items:center;justify-content:center}.s4y-step-container .s4y-step-information .s4y-step-information__line{transition:.5s ease;background-color:var(--gray-200);height:2px;flex-grow:1}.s4y-step-container .s4y-step-content{margin:1rem 0}.s4y-step-container .s4y-step-content .s4y-step-content__title{font-size:1.4rem;font-weight:700;color:var(--gray-900)}.s4y-step-container .s4y-step-content .s4y-step-content__description{font-size:1.4rem;color:var(--gray-600)}.s4y-step-container.disabled{cursor:not-allowed;-webkit-user-select:none;user-select:none;opacity:.4}.s4y-step-container.last-step .s4y-step-information{align-items:flex-start;justify-content:flex-start}.s4y-step-container.last-step .s4y-step-information .s4y-step-information__line{display:none}.s4y-step-container.selected .s4y-step-information .s4y-step-information__icon{transition:.5s ease;background-color:var(--primary-color);color:#fff}.s4y-step-container.selected .s4y-step-information .s4y-step-information__line{transition:.5s ease;background-color:var(--primary-color)}.s4y-step-container.future-step{opacity:.4;cursor:default;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
2783
2832
|
}
|
|
2784
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2833
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: StepComponent, decorators: [{
|
|
2785
2834
|
type: Component,
|
|
2786
2835
|
args: [{ selector: 's4y-step', imports: [CommonModule], template: "<button\r\n (click)=\"onClick()\"\r\n [class.last-step]=\"isLast\"\r\n #root\r\n role=\"button\"\r\n type=\"button\"\r\n class=\"s4y-step-container\"\r\n [disabled]=\"disabled\"\r\n [class.selected]=\"selected || isCompleted\"\r\n [class.future-step]=\"linear && !isCompleted && !selected\"\r\n>\r\n <div class=\"s4y-step-information\">\r\n <div class=\"s4y-step-information__icon\">\r\n <ng-container *ngIf=\"isCompleted; else showValue\"> \u2714 </ng-container>\r\n <ng-template #showValue>{{ value }}</ng-template>\r\n </div>\r\n <div class=\"s4y-step-information__line\"></div>\r\n </div>\r\n <div class=\"s4y-step-content\">\r\n <p class=\"s4y-step-content__title\">{{ title }}</p>\r\n @if (description) {\r\n <p class=\"s4y-step-content__description\">\r\n {{ description }}\r\n </p>\r\n }\r\n </div>\r\n</button>\r\n", styles: [":host{display:block;width:100%}.s4y-step-container{text-align:start;-webkit-user-select:text;user-select:text;display:block;width:100%}.s4y-step-container .s4y-step-information{display:flex;align-items:center;justify-content:center;gap:2.4rem}.s4y-step-container .s4y-step-information .s4y-step-information__icon{transition:.5s ease;height:2rem;width:2rem;border-radius:50px;font-size:1.2rem;color:#fff;flex-shrink:0;border:1px solid var(--gray-600);color:var(--gray-600);display:flex;align-items:center;justify-content:center}.s4y-step-container .s4y-step-information .s4y-step-information__line{transition:.5s ease;background-color:var(--gray-200);height:2px;flex-grow:1}.s4y-step-container .s4y-step-content{margin:1rem 0}.s4y-step-container .s4y-step-content .s4y-step-content__title{font-size:1.4rem;font-weight:700;color:var(--gray-900)}.s4y-step-container .s4y-step-content .s4y-step-content__description{font-size:1.4rem;color:var(--gray-600)}.s4y-step-container.disabled{cursor:not-allowed;-webkit-user-select:none;user-select:none;opacity:.4}.s4y-step-container.last-step .s4y-step-information{align-items:flex-start;justify-content:flex-start}.s4y-step-container.last-step .s4y-step-information .s4y-step-information__line{display:none}.s4y-step-container.selected .s4y-step-information .s4y-step-information__icon{transition:.5s ease;background-color:var(--primary-color);color:#fff}.s4y-step-container.selected .s4y-step-information .s4y-step-information__line{transition:.5s ease;background-color:var(--primary-color)}.s4y-step-container.future-step{opacity:.4;cursor:default;pointer-events:none}\n"] }]
|
|
2787
2836
|
}], propDecorators: { root: [{
|
|
@@ -2826,10 +2875,10 @@ class StepPanelComponent {
|
|
|
2826
2875
|
canNavigateTo(value) {
|
|
2827
2876
|
this.stepperComponent.setSelected(value);
|
|
2828
2877
|
}
|
|
2829
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2830
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2878
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: StepPanelComponent, deps: [{ token: StepperComponent }], target: i0.ɵɵFactoryTarget.Component });
|
|
2879
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: StepPanelComponent, isStandalone: true, selector: "s4y-step-panel", inputs: { value: "value", visible: "visible" }, queries: [{ propertyName: "templatePanel", first: true, predicate: ["templatePanel"], descendants: true }], viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, static: true }], ngImport: i0, template: "<!-- <div\r\n class=\"s4y-step-panel-container\"\r\n #root\r\n [@stepperAnimation]=\"animationState\"\r\n>\r\n @if (visible) {\r\n <ng-content></ng-content>\r\n }\r\n</div> -->\r\n<!-- Angular mais novo @for nao tem tanto suporte para as animacoes -->\r\n\r\n<div\r\n [@stepperAnimation]=\"animationState\"\r\n class=\"s4y-step-panel-container\"\r\n *ngIf=\"visible\"\r\n #root\r\n>\r\n <ng-contaner\r\n [ngTemplateOutlet]=\"templatePanel\"\r\n [ngTemplateOutletContext]=\"{ canNavigateTo: canNavigateTo.bind(this) }\"\r\n ></ng-contaner>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [stepperAnimation] });
|
|
2831
2880
|
}
|
|
2832
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2881
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: StepPanelComponent, decorators: [{
|
|
2833
2882
|
type: Component,
|
|
2834
2883
|
args: [{ selector: 's4y-step-panel', animations: [stepperAnimation], imports: [CommonModule], template: "<!-- <div\r\n class=\"s4y-step-panel-container\"\r\n #root\r\n [@stepperAnimation]=\"animationState\"\r\n>\r\n @if (visible) {\r\n <ng-content></ng-content>\r\n }\r\n</div> -->\r\n<!-- Angular mais novo @for nao tem tanto suporte para as animacoes -->\r\n\r\n<div\r\n [@stepperAnimation]=\"animationState\"\r\n class=\"s4y-step-panel-container\"\r\n *ngIf=\"visible\"\r\n #root\r\n>\r\n <ng-contaner\r\n [ngTemplateOutlet]=\"templatePanel\"\r\n [ngTemplateOutletContext]=\"{ canNavigateTo: canNavigateTo.bind(this) }\"\r\n ></ng-contaner>\r\n</div>\r\n" }]
|
|
2835
2884
|
}], ctorParameters: () => [{ type: StepperComponent }], propDecorators: { root: [{
|
|
@@ -2911,10 +2960,10 @@ class StepperComponent {
|
|
|
2911
2960
|
this.onDestroy$.next();
|
|
2912
2961
|
this.onDestroy$.complete();
|
|
2913
2962
|
}
|
|
2914
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2915
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2963
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: StepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2964
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: StepperComponent, isStandalone: true, selector: "s4y-stepper", inputs: { linear: "linear", isTabsNavigate: "isTabsNavigate" }, queries: [{ propertyName: "steps", predicate: StepComponent }, { propertyName: "stepsPanel", predicate: StepPanelComponent, descendants: true }], ngImport: i0, template: "<div class=\"s4y-stepper-container\">\r\n <div class=\"s4y-stepper-container__header\">\r\n <ng-content select=\"s4y-step\"></ng-content>\r\n </div>\r\n <div class=\"s4y-stepper-container__body\">\r\n <ng-content select=\"s4y-step-panel\"></ng-content>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.s4y-stepper-container{width:max-content;min-height:10.2rem;width:100%;padding:1.4rem}.s4y-stepper-container .s4y-stepper-container__header{display:flex;align-items:center;justify-content:center;gap:2.4rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
2916
2965
|
}
|
|
2917
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2966
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: StepperComponent, decorators: [{
|
|
2918
2967
|
type: Component,
|
|
2919
2968
|
args: [{ selector: 's4y-stepper', imports: [CommonModule], template: "<div class=\"s4y-stepper-container\">\r\n <div class=\"s4y-stepper-container__header\">\r\n <ng-content select=\"s4y-step\"></ng-content>\r\n </div>\r\n <div class=\"s4y-stepper-container__body\">\r\n <ng-content select=\"s4y-step-panel\"></ng-content>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.s4y-stepper-container{width:max-content;min-height:10.2rem;width:100%;padding:1.4rem}.s4y-stepper-container .s4y-stepper-container__header{display:flex;align-items:center;justify-content:center;gap:2.4rem}\n"] }]
|
|
2920
2969
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { steps: [{
|
|
@@ -2938,10 +2987,10 @@ class LoadingModalService {
|
|
|
2938
2987
|
hiddenLoading() {
|
|
2939
2988
|
this._isLoading.set(false);
|
|
2940
2989
|
}
|
|
2941
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2942
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
2990
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: LoadingModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2991
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: LoadingModalService });
|
|
2943
2992
|
}
|
|
2944
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2993
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: LoadingModalService, decorators: [{
|
|
2945
2994
|
type: Injectable
|
|
2946
2995
|
}] });
|
|
2947
2996
|
|
|
@@ -2981,19 +3030,19 @@ class LoadingModalComponent {
|
|
|
2981
3030
|
clearInterval(this.intervalId);
|
|
2982
3031
|
}
|
|
2983
3032
|
}
|
|
2984
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2985
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3033
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: LoadingModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3034
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: LoadingModalComponent, isStandalone: true, selector: "s4y-loading-modal", inputs: { messageInfor: { classPropertyName: "messageInfor", publicName: "messageInfor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (loadingModalService.isLoading()) {\r\n <div class=\"s4y-loading-modal-wrapper\" @loadingAnimation>\r\n <div class=\"s4y-loading-modal-item\"></div>\r\n <p class=\"s4y-loading-modal-item-infor\">\r\n {{ messageInfor() }} <span>{{ dots }}</span>\r\n </p>\r\n </div>\r\n}\r\n", styles: [".s4y-loading-modal-wrapper{background-color:#000000b3;position:fixed;top:0;left:0;width:100dvw;height:100dvh;z-index:var(--z-index-loader);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-direction:column}.s4y-loading-modal-wrapper .s4y-loading-modal-item-infor{color:var(--gray-100);margin-top:2rem;max-width:60rem;text-align:center}.s4y-loading-modal-wrapper .s4y-loading-modal-item{width:48px;height:48px;border-radius:50%;position:relative;animation:rotate 1s linear infinite}.s4y-loading-modal-wrapper .s4y-loading-modal-item:before{content:\"\";box-sizing:border-box;position:absolute;inset:0;border-radius:50%;border:5px solid #fff;animation:prixClipFix 2s linear infinite}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes prixClipFix{0%{clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}25%{clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}50%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}75%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}to{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}}\n"], animations: [loadingAnimation], encapsulation: i0.ViewEncapsulation.None });
|
|
2986
3035
|
}
|
|
2987
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3036
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: LoadingModalComponent, decorators: [{
|
|
2988
3037
|
type: Component,
|
|
2989
3038
|
args: [{ selector: 's4y-loading-modal', imports: [], encapsulation: ViewEncapsulation.None, animations: [loadingAnimation], template: "@if (loadingModalService.isLoading()) {\r\n <div class=\"s4y-loading-modal-wrapper\" @loadingAnimation>\r\n <div class=\"s4y-loading-modal-item\"></div>\r\n <p class=\"s4y-loading-modal-item-infor\">\r\n {{ messageInfor() }} <span>{{ dots }}</span>\r\n </p>\r\n </div>\r\n}\r\n", styles: [".s4y-loading-modal-wrapper{background-color:#000000b3;position:fixed;top:0;left:0;width:100dvw;height:100dvh;z-index:var(--z-index-loader);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-direction:column}.s4y-loading-modal-wrapper .s4y-loading-modal-item-infor{color:var(--gray-100);margin-top:2rem;max-width:60rem;text-align:center}.s4y-loading-modal-wrapper .s4y-loading-modal-item{width:48px;height:48px;border-radius:50%;position:relative;animation:rotate 1s linear infinite}.s4y-loading-modal-wrapper .s4y-loading-modal-item:before{content:\"\";box-sizing:border-box;position:absolute;inset:0;border-radius:50%;border:5px solid #fff;animation:prixClipFix 2s linear infinite}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes prixClipFix{0%{clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}25%{clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}50%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}75%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}to{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}}\n"] }]
|
|
2990
3039
|
}] });
|
|
2991
3040
|
|
|
2992
3041
|
class CheckboxComponent {
|
|
2993
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2994
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
3042
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3043
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: CheckboxComponent, isStandalone: true, selector: "input[s4yCheckbox][type=\"checkbox\"]", host: { attributes: { "role": "checkbox" } }, ngImport: i0, template: "", styles: [":host{position:relative;display:inline-block;vertical-align:middle;width:2rem;height:2rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;border:none;background:transparent;outline:none}:host:before{content:\"\";position:absolute;top:2.5px;left:7px;width:6px;height:12px;z-index:2;border:solid white;border-width:0 3px 3px 0;transform:rotate(40deg);background-color:transparent;opacity:0;transform:rotate(40deg) scale(0);transition:transform .2s ease,opacity .2s ease;cursor:pointer}:host:after{content:\"\";position:absolute;top:0;width:2rem;height:2rem;border:1px solid var(--gray-500);border-radius:3px;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .3s ease}:host:checked:after{background:var(--primary-color);border-color:var(--primary-color);animation:pulse-zoom .3s ease}:host:checked:before{opacity:1;transform:rotate(40deg) scale(1)}@keyframes pulse-zoom{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}:host:disabled:after{opacity:.5;cursor:not-allowed}\n"] });
|
|
2995
3044
|
}
|
|
2996
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3045
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
2997
3046
|
type: Component,
|
|
2998
3047
|
args: [{ selector: 'input[s4yCheckbox][type="checkbox"]', imports: [], host: {
|
|
2999
3048
|
role: 'checkbox',
|
|
@@ -3058,10 +3107,10 @@ class SidebarRightService {
|
|
|
3058
3107
|
window.removeEventListener('resize', this.resizeHandler);
|
|
3059
3108
|
}
|
|
3060
3109
|
}
|
|
3061
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3062
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
3110
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SidebarRightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3111
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SidebarRightService, providedIn: 'root' });
|
|
3063
3112
|
}
|
|
3064
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SidebarRightService, decorators: [{
|
|
3065
3114
|
type: Injectable,
|
|
3066
3115
|
args: [{
|
|
3067
3116
|
providedIn: 'root',
|
|
@@ -3083,23 +3132,23 @@ class SidebarRightComponent {
|
|
|
3083
3132
|
closeByOverlay() {
|
|
3084
3133
|
this.sidebarRightService.toggleSidebar();
|
|
3085
3134
|
}
|
|
3086
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3087
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
3135
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SidebarRightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3136
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: SidebarRightComponent, isStandalone: true, selector: "s4y-sidebar-right", inputs: { width: "width" }, host: { properties: { "attr.data-opened": "isOpened()" } }, ngImport: i0, template: "<div class=\"s4y-aside-overlay\" (click)=\"closeByOverlay()\"></div>\r\n\r\n<div class=\"s4y-sidebar-right-container\" [attr.data-opened]=\"isOpened()\" *ngIf=\"isOpened()\" [@sidebarRightAnimation]=\"animationParams\">\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.s4y-aside-overlay{display:none}@media screen and (min-width:320px)and (max-width:480px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width:481px)and (max-width:767px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width:1025px)and (max-width:1280px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}.s4y-sidebar-right-container{height:100dvh;width:28rem;overflow-y:auto;overflow-x:hidden;padding:1.4rem;border-left:1px solid var(--gray-300);box-shadow:var(--shadow-default);background-color:#fff;flex-shrink:0}@media screen and (min-width:320px)and (max-width:480px){.s4y-sidebar-right-container{position:fixed;top:0;right:0;z-index:var(--z-index-emergency)}}@media screen and (min-width:481px)and (max-width:767px){.s4y-sidebar-right-container{position:fixed;top:0;right:0;z-index:var(--z-index-emergency)}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-sidebar-right-container{position:fixed;top:0;right:0;z-index:var(--z-index-emergency)}}@media screen and (min-width:1025px)and (max-width:1280px){.s4y-sidebar-right-container{position:fixed;top:0;right:0;z-index:var(--z-index-emergency)}}@media screen and (min-width:320px)and (max-width:480px){:host[data-opened=false] .s4y-sidebar-right-container{transform:translate(100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none;transition:.5s ease}:host[data-opened=true] .s4y-sidebar-right-container{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width:481px)and (max-width:767px){:host[data-opened=false] .s4y-sidebar-right-container{transform:translate(100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none;transition:.5s ease}:host[data-opened=true] .s4y-sidebar-right-container{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width:768px)and (max-width:1024px){:host[data-opened=false] .s4y-sidebar-right-container{transform:translate(100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;transition:.5s ease;pointer-events:none}:host[data-opened=true] .s4y-sidebar-right-container{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width:1025px)and (max-width:1280px){:host[data-opened=false] .s4y-sidebar-right-container{transform:translate(100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;transition:.5s ease;pointer-events:none}:host[data-opened=true] .s4y-sidebar-right-container{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [sidebarRightAnimation] });
|
|
3088
3137
|
}
|
|
3089
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SidebarRightComponent, decorators: [{
|
|
3090
3139
|
type: Component,
|
|
3091
3140
|
args: [{ selector: 's4y-sidebar-right', imports: [CommonModule], animations: [sidebarRightAnimation], host: {
|
|
3092
3141
|
'[attr.data-opened]': 'isOpened()',
|
|
3093
|
-
}, template: "<div class=\"s4y-aside-overlay\" (click)=\"closeByOverlay()\"></div>\r\n\r\n<div class=\"s4y-sidebar-right-container\" [attr.data-opened]=\"isOpened()\" *ngIf=\"isOpened()\" [@sidebarRightAnimation]=\"animationParams\">\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.s4y-aside-overlay{display:none}@media screen and (min-width:
|
|
3142
|
+
}, template: "<div class=\"s4y-aside-overlay\" (click)=\"closeByOverlay()\"></div>\r\n\r\n<div class=\"s4y-sidebar-right-container\" [attr.data-opened]=\"isOpened()\" *ngIf=\"isOpened()\" [@sidebarRightAnimation]=\"animationParams\">\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.s4y-aside-overlay{display:none}@media screen and (min-width:320px)and (max-width:480px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width:481px)and (max-width:767px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width:1025px)and (max-width:1280px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}.s4y-sidebar-right-container{height:100dvh;width:28rem;overflow-y:auto;overflow-x:hidden;padding:1.4rem;border-left:1px solid var(--gray-300);box-shadow:var(--shadow-default);background-color:#fff;flex-shrink:0}@media screen and (min-width:320px)and (max-width:480px){.s4y-sidebar-right-container{position:fixed;top:0;right:0;z-index:var(--z-index-emergency)}}@media screen and (min-width:481px)and (max-width:767px){.s4y-sidebar-right-container{position:fixed;top:0;right:0;z-index:var(--z-index-emergency)}}@media screen and (min-width:768px)and (max-width:1024px){.s4y-sidebar-right-container{position:fixed;top:0;right:0;z-index:var(--z-index-emergency)}}@media screen and (min-width:1025px)and (max-width:1280px){.s4y-sidebar-right-container{position:fixed;top:0;right:0;z-index:var(--z-index-emergency)}}@media screen and (min-width:320px)and (max-width:480px){:host[data-opened=false] .s4y-sidebar-right-container{transform:translate(100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none;transition:.5s ease}:host[data-opened=true] .s4y-sidebar-right-container{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width:481px)and (max-width:767px){:host[data-opened=false] .s4y-sidebar-right-container{transform:translate(100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none;transition:.5s ease}:host[data-opened=true] .s4y-sidebar-right-container{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width:768px)and (max-width:1024px){:host[data-opened=false] .s4y-sidebar-right-container{transform:translate(100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;transition:.5s ease;pointer-events:none}:host[data-opened=true] .s4y-sidebar-right-container{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width:1025px)and (max-width:1280px){:host[data-opened=false] .s4y-sidebar-right-container{transform:translate(100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;transition:.5s ease;pointer-events:none}:host[data-opened=true] .s4y-sidebar-right-container{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}\n"] }]
|
|
3094
3143
|
}], propDecorators: { width: [{
|
|
3095
3144
|
type: Input
|
|
3096
3145
|
}] } });
|
|
3097
3146
|
|
|
3098
3147
|
class PopoverPanelComponent {
|
|
3099
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3100
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
3148
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: PopoverPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3149
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: PopoverPanelComponent, isStandalone: true, selector: "s4y-popover-panel", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{z-index:5;padding:1.4rem;border-radius:var(--radius);font-size:1.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-300);top:2.9rem;right:0;min-width:14rem;background:#fff;width:fit-content;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}\n"] });
|
|
3101
3150
|
}
|
|
3102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3151
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: PopoverPanelComponent, decorators: [{
|
|
3103
3152
|
type: Component,
|
|
3104
3153
|
args: [{ selector: 's4y-popover-panel', imports: [], template: `<ng-content />`, styles: [":host{z-index:5;padding:1.4rem;border-radius:var(--radius);font-size:1.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-300);top:2.9rem;right:0;min-width:14rem;background:#fff;width:fit-content;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}\n"] }]
|
|
3105
3154
|
}] });
|
|
@@ -3328,10 +3377,10 @@ class PopoverTriggerDirective {
|
|
|
3328
3377
|
this.subs.unsubscribe();
|
|
3329
3378
|
this.overlayRef?.dispose();
|
|
3330
3379
|
}
|
|
3331
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3332
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
3380
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: PopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3381
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.22", type: PopoverTriggerDirective, isStandalone: true, selector: "[s4yPopoverTrigger]", inputs: { menuTrigger: { classPropertyName: "menuTrigger", publicName: "s4yPopoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, menuContext: { classPropertyName: "menuContext", publicName: "s4yPopoverTriggerContext", isSignal: true, isRequired: false, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "s4yPopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, popoverOffsetX: { classPropertyName: "popoverOffsetX", publicName: "s4yPopoverOffsetX", isSignal: true, isRequired: false, transformFunction: null }, popoverOffsetY: { classPropertyName: "popoverOffsetY", publicName: "s4yPopoverOffsetY", isSignal: true, isRequired: false, transformFunction: null }, fade: { classPropertyName: "fade", publicName: "s4yPopoverFade", isSignal: true, isRequired: false, transformFunction: null }, fadeDuration: { classPropertyName: "fadeDuration", publicName: "s4yPopoverFadeDuration", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggle()" } }, ngImport: i0 });
|
|
3333
3382
|
}
|
|
3334
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3383
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: PopoverTriggerDirective, decorators: [{
|
|
3335
3384
|
type: Directive,
|
|
3336
3385
|
args: [{
|
|
3337
3386
|
selector: '[s4yPopoverTrigger]',
|
|
@@ -3343,10 +3392,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
3343
3392
|
}] } });
|
|
3344
3393
|
|
|
3345
3394
|
class MenuComponent {
|
|
3346
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3347
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
3395
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3396
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: MenuComponent, isStandalone: true, selector: "s4y-menu", ngImport: i0, template: '<ng-content/>', isInline: true, styles: [":host{z-index:5;padding:1.4rem;background-color:#fff;border-radius:var(--radius);font-size:1.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-400);top:2.9rem;right:0;min-width:14rem;max-width:240px;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}\n"] });
|
|
3348
3397
|
}
|
|
3349
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3398
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: MenuComponent, decorators: [{
|
|
3350
3399
|
type: Component,
|
|
3351
3400
|
args: [{ selector: 's4y-menu', imports: [], template: '<ng-content/>', styles: [":host{z-index:5;padding:1.4rem;background-color:#fff;border-radius:var(--radius);font-size:1.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-400);top:2.9rem;right:0;min-width:14rem;max-width:240px;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}\n"] }]
|
|
3352
3401
|
}] });
|
|
@@ -3354,8 +3403,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
3354
3403
|
class MenuItemComponent {
|
|
3355
3404
|
iconUri = input();
|
|
3356
3405
|
imageUri = input();
|
|
3357
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3358
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3406
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3407
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: MenuItemComponent, isStandalone: true, selector: "button[s4yMenuItem], a[s4yMenuItem]", inputs: { iconUri: { classPropertyName: "iconUri", publicName: "iconUri", isSignal: true, isRequired: false, transformFunction: null }, imageUri: { classPropertyName: "imageUri", publicName: "imageUri", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-label": "Mais informa\u00E7\u00F5es" } }, ngImport: i0, template: `
|
|
3359
3408
|
@if (iconUri()) {
|
|
3360
3409
|
<s4y-svg [size]="18" [src]="iconUri()"></s4y-svg>
|
|
3361
3410
|
}
|
|
@@ -3366,7 +3415,7 @@ class MenuItemComponent {
|
|
|
3366
3415
|
<ng-content></ng-content>
|
|
3367
3416
|
`, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:flex-start;gap:.8rem;padding:0 .4rem;min-height:4rem;width:100%;&:hover{text-decoration:underline}}\n"], dependencies: [{ kind: "component", type: SvgComponent, selector: "s4y-svg", inputs: ["src", "color", "size"] }] });
|
|
3368
3417
|
}
|
|
3369
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3418
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
3370
3419
|
type: Component,
|
|
3371
3420
|
args: [{ selector: 'button[s4yMenuItem], a[s4yMenuItem]', standalone: true, imports: [SvgComponent], template: `
|
|
3372
3421
|
@if (iconUri()) {
|
|
@@ -3422,10 +3471,10 @@ class ImagePreviewComponent {
|
|
|
3422
3471
|
return;
|
|
3423
3472
|
this.overlayRef.dispose();
|
|
3424
3473
|
}
|
|
3425
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3426
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3474
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ImagePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3475
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: ImagePreviewComponent, isStandalone: true, selector: "s4y-image-preview", viewQueries: [{ propertyName: "imgEl", first: true, predicate: ["imgEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"s4y-image-preview-container\">\r\n <div class=\"s4y-preview-controls\">\r\n <div class=\"flex gap-1 align-center\">\r\n <button\r\n class=\"btn-close s4y-action-btn gray-4\"\r\n type=\"button\"\r\n (click)=\"close()\"\r\n >\r\n \u2715\r\n </button>\r\n @if (name) {\r\n <p class=\"medium-text-regular fw-400\" style=\"color: var(--gray-400)\">\r\n {{ name }}\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"flex gap-2\">\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomOut()\">\r\n <ng-container [ngTemplateOutlet]=\"zoomOutSvg\" />\r\n </button>\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomIn()\">\r\n <ng-container [ngTemplateOutlet]=\"zoomInSvg\" />\r\n </button>\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"resetZoom()\">\r\n <ng-container [ngTemplateOutlet]=\"refreshSvg\" />\r\n </button>\r\n\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"toggleFullscreen()\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"\r\n fullScreenImage() ? fullScreenExitSvg : fullscreenSvg\r\n \"\r\n />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"s4y-preview-img-container\">\r\n <div class=\"s4y-img-preview\" [class.full-screen-img]=\"fullScreenImage()\">\r\n <img\r\n #imgEl\r\n style=\"transform-origin: center center\"\r\n [src]=\"src\"\r\n alt=\"Imagem\"\r\n (dblclick)=\"resetZoom()\"\r\n />\r\n </div>\r\n\r\n <div class=\"s4y-preview-clickable\" (click)=\"close()\"></div>\r\n </div>\r\n</div>\r\n\r\n<!-- SVG -->\r\n\r\n<ng-template #fullscreenSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #fullScreenExitSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18 7H22V9H16V3H18V7ZM8 9H2V7H6V3H8V9ZM18 17V21H16V15H22V17H18ZM8 15V21H6V17H2V15H8Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #zoomInSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM10 10V7H12V10H15V12H12V15H10V12H7V10H10Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n<ng-template #zoomOutSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM7 10H15V12H7V10Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #refreshSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-image-preview-container{width:100%;display:flex;flex-direction:column;gap:1.2rem;min-height:100dvh}.s4y-image-preview-container .s4y-action-btn{border-radius:50%;height:3rem;width:3rem}.s4y-image-preview-container .s4y-action-btn:hover{transition:.2s ease;background-color:var(--gray-700)}.s4y-image-preview-container .s4y-preview-controls{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;backdrop-filter:blur(6px);background:color-mix(in oklab,#000 45%,transparent);margin-bottom:.5rem;align-items:center;height:5rem;flex-shrink:0;padding:0 1.8rem}.s4y-image-preview-container .s4y-preview-controls button{line-height:0;color:#fff}.s4y-image-preview-container .s4y-preview-controls .btn-close{font-size:2rem;transition:.2s ease}.s4y-image-preview-container .s4y-preview-img-container{flex-grow:1;z-index:3;position:relative;display:flex;align-items:center;padding-bottom:1.2rem}.s4y-image-preview-container .s4y-img-preview{margin:0 auto;display:flex;align-items:center;justify-content:center;z-index:2;width:90%;max-width:70rem;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview img{height:auto;border-radius:var(--radius);width:100%;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview.full-screen-img{max-width:100%;height:auto}.s4y-image-preview-container .s4y-preview-clickable{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3427
3476
|
}
|
|
3428
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3477
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ImagePreviewComponent, decorators: [{
|
|
3429
3478
|
type: Component,
|
|
3430
3479
|
args: [{ selector: 's4y-image-preview', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, template: "<div class=\"s4y-image-preview-container\">\r\n <div class=\"s4y-preview-controls\">\r\n <div class=\"flex gap-1 align-center\">\r\n <button\r\n class=\"btn-close s4y-action-btn gray-4\"\r\n type=\"button\"\r\n (click)=\"close()\"\r\n >\r\n \u2715\r\n </button>\r\n @if (name) {\r\n <p class=\"medium-text-regular fw-400\" style=\"color: var(--gray-400)\">\r\n {{ name }}\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"flex gap-2\">\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomOut()\">\r\n <ng-container [ngTemplateOutlet]=\"zoomOutSvg\" />\r\n </button>\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomIn()\">\r\n <ng-container [ngTemplateOutlet]=\"zoomInSvg\" />\r\n </button>\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"resetZoom()\">\r\n <ng-container [ngTemplateOutlet]=\"refreshSvg\" />\r\n </button>\r\n\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"toggleFullscreen()\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"\r\n fullScreenImage() ? fullScreenExitSvg : fullscreenSvg\r\n \"\r\n />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"s4y-preview-img-container\">\r\n <div class=\"s4y-img-preview\" [class.full-screen-img]=\"fullScreenImage()\">\r\n <img\r\n #imgEl\r\n style=\"transform-origin: center center\"\r\n [src]=\"src\"\r\n alt=\"Imagem\"\r\n (dblclick)=\"resetZoom()\"\r\n />\r\n </div>\r\n\r\n <div class=\"s4y-preview-clickable\" (click)=\"close()\"></div>\r\n </div>\r\n</div>\r\n\r\n<!-- SVG -->\r\n\r\n<ng-template #fullscreenSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #fullScreenExitSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18 7H22V9H16V3H18V7ZM8 9H2V7H6V3H8V9ZM18 17V21H16V15H22V17H18ZM8 15V21H6V17H2V15H8Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #zoomInSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM10 10V7H12V10H15V12H12V15H10V12H7V10H10Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n<ng-template #zoomOutSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM7 10H15V12H7V10Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #refreshSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-image-preview-container{width:100%;display:flex;flex-direction:column;gap:1.2rem;min-height:100dvh}.s4y-image-preview-container .s4y-action-btn{border-radius:50%;height:3rem;width:3rem}.s4y-image-preview-container .s4y-action-btn:hover{transition:.2s ease;background-color:var(--gray-700)}.s4y-image-preview-container .s4y-preview-controls{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;backdrop-filter:blur(6px);background:color-mix(in oklab,#000 45%,transparent);margin-bottom:.5rem;align-items:center;height:5rem;flex-shrink:0;padding:0 1.8rem}.s4y-image-preview-container .s4y-preview-controls button{line-height:0;color:#fff}.s4y-image-preview-container .s4y-preview-controls .btn-close{font-size:2rem;transition:.2s ease}.s4y-image-preview-container .s4y-preview-img-container{flex-grow:1;z-index:3;position:relative;display:flex;align-items:center;padding-bottom:1.2rem}.s4y-image-preview-container .s4y-img-preview{margin:0 auto;display:flex;align-items:center;justify-content:center;z-index:2;width:90%;max-width:70rem;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview img{height:auto;border-radius:var(--radius);width:100%;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview.full-screen-img{max-width:100%;height:auto}.s4y-image-preview-container .s4y-preview-clickable{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}\n"] }]
|
|
3431
3480
|
}] });
|
|
@@ -3470,10 +3519,10 @@ class ImageService {
|
|
|
3470
3519
|
createPortal() {
|
|
3471
3520
|
return new ComponentPortal(ImagePreviewComponent);
|
|
3472
3521
|
}
|
|
3473
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3474
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
3522
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ImageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3523
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ImageService, providedIn: 'root' });
|
|
3475
3524
|
}
|
|
3476
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3525
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ImageService, decorators: [{
|
|
3477
3526
|
type: Injectable,
|
|
3478
3527
|
args: [{
|
|
3479
3528
|
providedIn: 'root',
|
|
@@ -3575,20 +3624,20 @@ class ImageComponent {
|
|
|
3575
3624
|
get ImageEl() {
|
|
3576
3625
|
return this.elRef.nativeElement;
|
|
3577
3626
|
}
|
|
3578
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3579
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
3627
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3628
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.22", type: ImageComponent, isStandalone: true, selector: "img[s4yImage]", inputs: { src: { classPropertyName: "src", publicName: "s4ySrc", isSignal: true, isRequired: false, transformFunction: null }, innerTpl: { classPropertyName: "innerTpl", publicName: "innerTpl", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, disablePreview: { classPropertyName: "disablePreview", publicName: "disablePreview", isSignal: true, isRequired: false, transformFunction: null }, withOverlay: { classPropertyName: "withOverlay", publicName: "withOverlay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".s4y-img-overlay.active{opacity:1}.s4y-eye-overlay{color:#fff}.s4y-img-overlay{background-color:#0009;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0;transition:.3s ease;opacity:0;display:flex;align-items:center;justify-content:center}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
3580
3629
|
}
|
|
3581
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3630
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ImageComponent, decorators: [{
|
|
3582
3631
|
type: Component,
|
|
3583
3632
|
args: [{ selector: 'img[s4yImage]', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, styles: [".s4y-img-overlay.active{opacity:1}.s4y-eye-overlay{color:#fff}.s4y-img-overlay{background-color:#0009;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0;transition:.3s ease;opacity:0;display:flex;align-items:center;justify-content:center}\n"] }]
|
|
3584
3633
|
}], ctorParameters: () => [] });
|
|
3585
3634
|
|
|
3586
3635
|
class DynamicTooltipComponent {
|
|
3587
3636
|
text = "";
|
|
3588
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3589
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
3637
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3638
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: DynamicTooltipComponent, isStandalone: true, selector: "s4y-dynamic-tooltip", ngImport: i0, template: "<div class=\"s4y-tooltip-container\">\r\n <p>\r\n {{ text }}\r\n </p>\r\n</div>\r\n", styles: [".s4y-tooltip-container{font-size:1.2rem;background-color:#fff;display:block;padding:1.2rem;border-radius:var(--radius);box-shadow:var(--shadow-default);height:fit-content;width:fit-content;border:1px solid var(--gray-200);position:relative;max-width:24rem}.s4y-tooltip-container p{line-height:150%}\n"] });
|
|
3590
3639
|
}
|
|
3591
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3640
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicTooltipComponent, decorators: [{
|
|
3592
3641
|
type: Component,
|
|
3593
3642
|
args: [{ selector: 's4y-dynamic-tooltip', imports: [], template: "<div class=\"s4y-tooltip-container\">\r\n <p>\r\n {{ text }}\r\n </p>\r\n</div>\r\n", styles: [".s4y-tooltip-container{font-size:1.2rem;background-color:#fff;display:block;padding:1.2rem;border-radius:var(--radius);box-shadow:var(--shadow-default);height:fit-content;width:fit-content;border:1px solid var(--gray-200);position:relative;max-width:24rem}.s4y-tooltip-container p{line-height:150%}\n"] }]
|
|
3594
3643
|
}] });
|
|
@@ -3748,10 +3797,10 @@ class DynamicTooltipDirective {
|
|
|
3748
3797
|
ngOnDestroy() {
|
|
3749
3798
|
this.dispose();
|
|
3750
3799
|
}
|
|
3751
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3752
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
3800
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3801
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.22", type: DynamicTooltipDirective, isStandalone: true, selector: "[s4yDynamicTooltip]", inputs: { tooltipContent: { classPropertyName: "tooltipContent", publicName: "s4yDynamicTooltip", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "shown()", "mouseleave": "hide($event)" } }, ngImport: i0 });
|
|
3753
3802
|
}
|
|
3754
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3803
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicTooltipDirective, decorators: [{
|
|
3755
3804
|
type: Directive,
|
|
3756
3805
|
args: [{
|
|
3757
3806
|
selector: '[s4yDynamicTooltip]',
|
|
@@ -3773,10 +3822,10 @@ class SummaryCardComponent {
|
|
|
3773
3822
|
iconBackgroundColor: '#4b5563',
|
|
3774
3823
|
});
|
|
3775
3824
|
footerTpl = contentChild('footerTpl');
|
|
3776
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3777
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3825
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SummaryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3826
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: SummaryCardComponent, isStandalone: true, selector: "s4y-summary-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["footerTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@let summaryProps = props();\r\n\r\n<div class=\"s4y-summary-card-header\">\r\n <div class=\"s4y-summary-card-header__content\">\r\n <p class=\"small-text-regular gray-7\">\r\n {{ summaryProps.label }}\r\n </p>\r\n\r\n @if (summaryProps.withTooltip) {\r\n <svg\r\n [s4yDynamicTooltip]=\"summaryProps.tooltipContent ?? ''\"\r\n [placement]=\"summaryProps.tooltipPlacement ?? 'right'\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n width=\"14\"\r\n height=\"14\"\r\n >\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n ></path>\r\n </svg>\r\n }\r\n </div>\r\n @let showIcon = summaryProps.withIcon && !!summaryProps.iconUri;\r\n\r\n @if (showIcon) {\r\n <div\r\n class=\"s4y-summary-card-icon\"\r\n [style.background]=\"summaryProps.iconBackgroundColor ?? '#4b5563'\"\r\n >\r\n <s4y-svg\r\n [size]=\"summaryProps.iconSize ?? 18\"\r\n [color]=\"summaryProps.iconColor || '#fff'\"\r\n [src]=\"summaryProps.iconUri\"\r\n ></s4y-svg>\r\n </div>\r\n }\r\n</div>\r\n\r\n<div class=\"s4y-summary-card-body\">\r\n <p class=\"medium-text-bold gray-9\">\r\n {{ summaryProps.value }}\r\n </p>\r\n</div>\r\n\r\n@let footerTemplate = footerTpl();\r\n\r\n@if (summaryProps.withFooter && footerTemplate) {\r\n <div class=\"s4y-summary-card-footer\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n}\r\n", styles: [":host{display:block;background-color:#fff;border-radius:var(--radius);padding:1.4rem;min-width:21.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-400);width:fit-content}.s4y-summary-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:2.6rem}.s4y-summary-card-icon{width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:var(--radius);padding:.3rem}.s4y-summary-card-body{margin:.4rem 0}.s4y-summary-card-footer{padding-top:.8rem;border-top:1px solid var(--gray-300);font-size:1.4rem;color:var(--gray-900)}.s4y-summary-card-header__content{display:flex;gap:.4rem;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: SvgComponent, selector: "s4y-svg", inputs: ["src", "color", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicTooltipDirective, selector: "[s4yDynamicTooltip]", inputs: ["s4yDynamicTooltip", "placement"] }] });
|
|
3778
3827
|
}
|
|
3779
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3828
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SummaryCardComponent, decorators: [{
|
|
3780
3829
|
type: Component,
|
|
3781
3830
|
args: [{ selector: 's4y-summary-card', imports: [SvgComponent, NgTemplateOutlet, DynamicTooltipDirective], template: "@let summaryProps = props();\r\n\r\n<div class=\"s4y-summary-card-header\">\r\n <div class=\"s4y-summary-card-header__content\">\r\n <p class=\"small-text-regular gray-7\">\r\n {{ summaryProps.label }}\r\n </p>\r\n\r\n @if (summaryProps.withTooltip) {\r\n <svg\r\n [s4yDynamicTooltip]=\"summaryProps.tooltipContent ?? ''\"\r\n [placement]=\"summaryProps.tooltipPlacement ?? 'right'\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n width=\"14\"\r\n height=\"14\"\r\n >\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n ></path>\r\n </svg>\r\n }\r\n </div>\r\n @let showIcon = summaryProps.withIcon && !!summaryProps.iconUri;\r\n\r\n @if (showIcon) {\r\n <div\r\n class=\"s4y-summary-card-icon\"\r\n [style.background]=\"summaryProps.iconBackgroundColor ?? '#4b5563'\"\r\n >\r\n <s4y-svg\r\n [size]=\"summaryProps.iconSize ?? 18\"\r\n [color]=\"summaryProps.iconColor || '#fff'\"\r\n [src]=\"summaryProps.iconUri\"\r\n ></s4y-svg>\r\n </div>\r\n }\r\n</div>\r\n\r\n<div class=\"s4y-summary-card-body\">\r\n <p class=\"medium-text-bold gray-9\">\r\n {{ summaryProps.value }}\r\n </p>\r\n</div>\r\n\r\n@let footerTemplate = footerTpl();\r\n\r\n@if (summaryProps.withFooter && footerTemplate) {\r\n <div class=\"s4y-summary-card-footer\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n}\r\n", styles: [":host{display:block;background-color:#fff;border-radius:var(--radius);padding:1.4rem;min-width:21.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-400);width:fit-content}.s4y-summary-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:2.6rem}.s4y-summary-card-icon{width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:var(--radius);padding:.3rem}.s4y-summary-card-body{margin:.4rem 0}.s4y-summary-card-footer{padding-top:.8rem;border-top:1px solid var(--gray-300);font-size:1.4rem;color:var(--gray-900)}.s4y-summary-card-header__content{display:flex;gap:.4rem;flex-shrink:0}\n"] }]
|
|
3782
3831
|
}] });
|
|
@@ -3927,8 +3976,8 @@ class SelectMultiComponent {
|
|
|
3927
3976
|
this._onChange(stillValid);
|
|
3928
3977
|
}
|
|
3929
3978
|
});
|
|
3930
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3931
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3979
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SelectMultiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3980
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: SelectMultiComponent, isStandalone: true, selector: "s4y-select-multi", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, withSearch: { classPropertyName: "withSearch", publicName: "withSearch", isSignal: true, isRequired: false, transformFunction: null }, maxScreen: { classPropertyName: "maxScreen", publicName: "maxScreen", isSignal: true, isRequired: false, transformFunction: null }, withCheckAll: { classPropertyName: "withCheckAll", publicName: "withCheckAll", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, preserveSelectionOnFilter: { classPropertyName: "preserveSelectionOnFilter", publicName: "preserveSelectionOnFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange", search: "searchChange" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)" }, properties: { "style.maxWidth": "maxScreen() ? \"100%\" : \"32rem\"", "attr.tabindex": "0", "class.disabled": "disabled()", "attr.aria-disabled": "disabled()", "attr.role": "\"combobox\"", "attr.aria-expanded": "opened()", "attr.aria-haspopup": "\"listbox\"" } }, providers: [
|
|
3932
3981
|
{
|
|
3933
3982
|
provide: NG_VALUE_ACCESSOR,
|
|
3934
3983
|
multi: true,
|
|
@@ -3936,7 +3985,7 @@ class SelectMultiComponent {
|
|
|
3936
3985
|
},
|
|
3937
3986
|
], ngImport: i0, template: "<label class=\"s4y-select-label\">\r\n {{ label() }}\r\n</label>\r\n\r\n<div class=\"s4y-select\">\r\n <!-- Campo principal -->\r\n <button\r\n type=\"button\"\r\n class=\"s4y-select-field\"\r\n [attr.aria-expanded]=\"opened()\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"toggleOpen()\"\r\n >\r\n <ng-container *ngIf=\"value().length; else placeholderTpl\">\r\n <div class=\"chips\">\r\n <span class=\"chip\" *ngFor=\"let v of value()\">\r\n {{ displayWith()(v) }}\r\n <button\r\n type=\"button\"\r\n class=\"chip-remove\"\r\n (click)=\"$event.stopPropagation(); removeChip(v)\"\r\n [disabled]=\"disabled()\"\r\n aria-label=\"Remover\"\r\n >\r\n \u00D7\r\n </button>\r\n </span>\r\n </div>\r\n </ng-container>\r\n <ng-template #placeholderTpl>\r\n <span>{{ placeholder() }}</span>\r\n </ng-template>\r\n <div class=\"arrow\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"opened() ? arrowUp : arrowDown\"\r\n ></ng-container>\r\n </div>\r\n </button>\r\n\r\n <div class=\"s4y-select-dropdown-container\">\r\n <div\r\n @selectMultiAnim\r\n class=\"s4y-select-dropdown\"\r\n [class.gap-1]=\"filteredOptions().length\"\r\n *ngIf=\"opened()\"\r\n >\r\n <div class=\"dropdown-actions\">\r\n @if (withSearch()) {\r\n <label class=\"s4y-dropdown-search\">\r\n <input\r\n type=\"text\"\r\n class=\"search\"\r\n [placeholder]=\"'Buscar...'\"\r\n [value]=\"search()\"\r\n (input)=\"onSearch($event)\"\r\n />\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n </label>\r\n }\r\n\r\n @if (withCheckAll()) {\r\n <label class=\"check-all\">\r\n <input\r\n s4yCheckbox\r\n type=\"checkbox\"\r\n [checked]=\"allSelected()\"\r\n [indeterminate]=\"someSelected()\"\r\n (change)=\"toggleSelectAll()\"\r\n />\r\n Marcar todos\r\n </label>\r\n }\r\n </div>\r\n\r\n @if (loading()) {\r\n <div class=\"s4y-loading flex align-center justify-center\">\r\n <s4y-spinner size=\"mini\"></s4y-spinner>\r\n </div>\r\n } @else {\r\n <div class=\"options\">\r\n <button\r\n type=\"button\"\r\n class=\"option\"\r\n *ngFor=\"let opt of filteredOptions()\"\r\n (click)=\"toggleOption(opt)\"\r\n [class.selected]=\"isSelected(opt)\"\r\n >\r\n <input\r\n s4yCheckbox\r\n type=\"checkbox\"\r\n [checked]=\"isSelected(opt)\"\r\n tabindex=\"-1\"\r\n />\r\n <span class=\"text-small\">{{ displayWith()(opt) }}</span>\r\n </button>\r\n\r\n <div class=\"no-results\" *ngIf=\"!filteredOptions().length\">\r\n {{ emptyMessage() }}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <ng-content select=\"s4y-error-message\"></ng-content>\r\n\r\n <!-- Dropdown -->\r\n</div>\r\n\r\n<!-- Arros -->\r\n\r\n<ng-template #arrowDown>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n <svg\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [":host{display:block}:host.disabled{pointer-events:none;opacity:.7;cursor:not-allowed;-webkit-user-select:none;user-select:none}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-field,:host.ng-invalid.ng-dirty .s4y-select-field{border:1px solid var(--danger-color);background-color:#fff6f5}.s4y-select-label{margin-bottom:.8rem;font-size:1.4rem;display:inline-block}.s4y-select{position:relative;width:100%}.s4y-select-field{border-radius:var(--radius);align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;display:flex;width:100%}.chips{display:flex;gap:6px;overflow-x:hidden}.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;background:#f1f3f5;border:1px solid #e5e7eb;white-space:nowrap}.chip .chip-remove{border:0;background:transparent;cursor:pointer}.s4y-select-dropdown-container{position:relative;margin-top:.8rem}.s4y-dropdown-search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem;width:100%}.s4y-dropdown-search input{font-size:1.4rem}.s4y-dropdown-search input::placeholder{font-size:1.4rem}.s4y-select-dropdown{position:absolute;top:0;left:0;display:flex;flex-direction:column;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem;z-index:var(--z-index-select-dropdown)}.dropdown-actions{display:flex;gap:8px;align-items:flex-start;flex-direction:column}.dropdown-actions .check-all{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--radius);text-align:left;cursor:pointer;background:transparent;font-size:1.4rem}.options{display:flex;flex-direction:column;max-height:240px;overflow-y:auto}.option{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--radius);text-align:left;cursor:pointer;background:transparent}.option span{font-size:1.4rem}.option:hover{background-color:var(--gray-300)}.arrow{flex-shrink:0;display:flex;align-items:center;justify-content:center}.no-results{font-size:1.4rem;color:var(--gray-900)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckboxComponent, selector: "input[s4yCheckbox][type=\"checkbox\"]" }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }], animations: [selectMultiAnim] });
|
|
3938
3987
|
}
|
|
3939
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3988
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: SelectMultiComponent, decorators: [{
|
|
3940
3989
|
type: Component,
|
|
3941
3990
|
args: [{ selector: 's4y-select-multi', imports: [CommonModule, CheckboxComponent, SpinnerComponent], providers: [
|
|
3942
3991
|
{
|
|
@@ -4229,10 +4278,10 @@ class DynamicDialogComponent {
|
|
|
4229
4278
|
this.cancelLoading = false;
|
|
4230
4279
|
}
|
|
4231
4280
|
}
|
|
4232
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4233
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
4281
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicDialogComponent, deps: [{ token: DynamicDialogRef }, { token: DYNAMIC_DIALOG_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
|
|
4282
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: DynamicDialogComponent, isStandalone: true, selector: "s4y-dynamic-dialog", inputs: { contentPortal: "contentPortal", headerTemplate: "headerTemplate", footerTemplate: "footerTemplate", contentTemplate: "contentTemplate", templateContext: "templateContext" }, host: { attributes: { "role": "dialog", "aria-modal": "true", "tabindex": "-1" }, properties: { "attr.aria-labelledby": "'s4y-dialog-title'" }, classAttribute: "s4y-dialog" }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<article class=\"s4y-dialog\" role=\"dialog\" aria-modal=\"true\">\r\n @if (headerTemplate) {\r\n <header\r\n class=\"s4y-dialog-header\"\r\n [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n [ngStyle]=\"dialogOptions?.headerStyle\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n >\r\n </ng-container>\r\n </header>\r\n } @else if (dialogOptions?.title || dialogOptions?.description) {\r\n <header\r\n class=\"s4y-dialog-header\"\r\n [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n [ngStyle]=\"dialogOptions?.headerStyle\"\r\n >\r\n <h2 class=\"s4y-dialog-header__title\">{{ dialogOptions?.title }}</h2>\r\n <p class=\"s4y-dialog-header__description\">\r\n {{ dialogOptions?.description }}\r\n </p>\r\n </header>\r\n }\r\n\r\n @if (dialogOptions?.closable || dialogOptions?.closable == undefined) {\r\n <button class=\"s4y-dialog-close-btn\" (click)=\"ref.closeAnimated(undefined, 'close')\" aria-label=\"Fechar\">\r\n ×\r\n </button>\r\n }\r\n\r\n <section class=\"s4y-dialog__body\" [ngStyle]=\"dialogOptions?.bodyStyle\">\r\n @if (contentTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"contentTemplate\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n >\r\n </ng-container>\r\n } @else {\r\n <ng-template\r\n cdkPortalOutlet\r\n [cdkPortalOutlet]=\"contentPortal\"\r\n ></ng-template>\r\n }\r\n </section>\r\n\r\n @let cancelBtnOptions = this.dialogOptions?.cancelBtnOptions;\r\n @let okBtnOptions = this.dialogOptions?.okBtnOptions;\r\n\r\n @if (!(dialogOptions?.hideFooter ?? false)) {\r\n <footer\r\n class=\"flex gap-1 s4y-dialog__footer\"\r\n [ngStyle]=\"dialogOptions?.footerStyle\"\r\n >\r\n @if (footerTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"footerTemplate\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n >\r\n </ng-container>\r\n } @else {\r\n @if (cancelBtnOptions?.text) {\r\n <button\r\n (click)=\"onCancel()\"\r\n [loading]=\"cancelLoading || (cancelBtnOptions?.loading ?? false)\"\r\n [fullWidth]=\"cancelBtnOptions?.fullWidth ?? false\"\r\n s4yButton\r\n [variant]=\"cancelBtnOptions?.variant ?? 'gray'\"\r\n [outlined]=\"cancelBtnOptions?.outlined ?? true\"\r\n [disabled]=\"cancelBtnOptions?.disabled ?? false\"\r\n [size]=\"cancelBtnOptions?.size ?? 'small'\"\r\n >\r\n {{ cancelBtnOptions?.text ?? \"Cancelar\" }}\r\n </button>\r\n }\r\n @if (okBtnOptions?.text) {\r\n <button\r\n (click)=\"onOk()\"\r\n [loading]=\"okLoading || (okBtnOptions?.loading ?? false)\"\r\n [fullWidth]=\"okBtnOptions?.fullWidth ?? false\"\r\n s4yButton\r\n [variant]=\"okBtnOptions?.variant ?? 'primary'\"\r\n [outlined]=\"okBtnOptions?.outlined ?? false\"\r\n [disabled]=\"okBtnOptions?.disabled ?? false\"\r\n [size]=\"okBtnOptions?.size ?? 'small'\"\r\n >\r\n {{ okBtnOptions?.text ?? \"Ok\" }}\r\n </button>\r\n }\r\n }\r\n </footer>\r\n }\r\n</article>\r\n", styles: [".s4y-dialog{display:flex;flex-direction:column;max-height:90dvh;overflow:hidden;position:relative}.s4y-dialog-header{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;padding-bottom:1.4rem;gap:.4rem}.s4y-centered-header{align-items:center}.s4y-dialog-action{display:flex;align-items:center;justify-content:space-between;width:100%}.s4y-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding-top:1.4rem;flex-shrink:0}@media screen and (min-width:320px)and (max-width:480px){.s4y-dialog__footer{flex-direction:column-reverse}.s4y-dialog__footer button{width:100%}}.s4y-dialog-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-dialog-header__description{font-size:2rem;font-size:1.4rem;font-weight:400;color:var(--gray-700)}.s4y-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto}.s4y-dialog-close-btn{padding:0rem 1.4rem;cursor:pointer;font-size:2rem;position:absolute;right:0;top:0;transition:.5 ease}.s4y-dialog-close-btn:hover{background-color:var(--gray-200);border-radius:var(--radius)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ButtonComponent, selector: "button[s4yButton], a[s4yButton]", inputs: ["disabled", "outlined", "loading", "size", "roundend", "variant", "fullWidth", "iconAligned"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [] });
|
|
4234
4283
|
}
|
|
4235
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4284
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicDialogComponent, decorators: [{
|
|
4236
4285
|
type: Component,
|
|
4237
4286
|
args: [{ selector: 's4y-dynamic-dialog', imports: [CdkPortalOutlet, ButtonComponent, NgStyle, NgIf, NgTemplateOutlet], host: {
|
|
4238
4287
|
role: 'dialog',
|
|
@@ -4240,7 +4289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
4240
4289
|
tabindex: '-1',
|
|
4241
4290
|
class: 's4y-dialog',
|
|
4242
4291
|
'[attr.aria-labelledby]': "'s4y-dialog-title'",
|
|
4243
|
-
}, animations: [], template: "<article class=\"s4y-dialog\" role=\"dialog\" aria-modal=\"true\">\r\n @if (headerTemplate) {\r\n <header\r\n class=\"s4y-dialog-header\"\r\n [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n [ngStyle]=\"dialogOptions?.headerStyle\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n >\r\n </ng-container>\r\n </header>\r\n } @else if (dialogOptions?.title || dialogOptions?.description) {\r\n <header\r\n class=\"s4y-dialog-header\"\r\n [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n [ngStyle]=\"dialogOptions?.headerStyle\"\r\n >\r\n <h2 class=\"s4y-dialog-header__title\">{{ dialogOptions?.title }}</h2>\r\n <p class=\"s4y-dialog-header__description\">\r\n {{ dialogOptions?.description }}\r\n </p>\r\n </header>\r\n }\r\n\r\n @if (dialogOptions?.closable || dialogOptions?.closable == undefined) {\r\n <button class=\"s4y-dialog-close-btn\" (click)=\"ref.closeAnimated(undefined, 'close')\" aria-label=\"Fechar\">\r\n ×\r\n </button>\r\n }\r\n\r\n <section class=\"s4y-dialog__body\" [ngStyle]=\"dialogOptions?.bodyStyle\">\r\n @if (contentTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"contentTemplate\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n >\r\n </ng-container>\r\n } @else {\r\n <ng-template\r\n cdkPortalOutlet\r\n [cdkPortalOutlet]=\"contentPortal\"\r\n ></ng-template>\r\n }\r\n </section>\r\n\r\n @let cancelBtnOptions = this.dialogOptions?.cancelBtnOptions;\r\n @let okBtnOptions = this.dialogOptions?.okBtnOptions;\r\n\r\n @if (!(dialogOptions?.hideFooter ?? false)) {\r\n <footer\r\n class=\"flex gap-1 s4y-dialog__footer\"\r\n [ngStyle]=\"dialogOptions?.footerStyle\"\r\n >\r\n @if (footerTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"footerTemplate\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n >\r\n </ng-container>\r\n } @else {\r\n @if (cancelBtnOptions?.text) {\r\n <button\r\n (click)=\"onCancel()\"\r\n [loading]=\"cancelLoading || (cancelBtnOptions?.loading ?? false)\"\r\n [fullWidth]=\"cancelBtnOptions?.fullWidth ?? false\"\r\n s4yButton\r\n [variant]=\"cancelBtnOptions?.variant ?? 'gray'\"\r\n [outlined]=\"cancelBtnOptions?.outlined ?? true\"\r\n [disabled]=\"cancelBtnOptions?.disabled ?? false\"\r\n [size]=\"cancelBtnOptions?.size ?? 'small'\"\r\n >\r\n {{ cancelBtnOptions?.text ?? \"Cancelar\" }}\r\n </button>\r\n }\r\n @if (okBtnOptions?.text) {\r\n <button\r\n (click)=\"onOk()\"\r\n [loading]=\"okLoading || (okBtnOptions?.loading ?? false)\"\r\n [fullWidth]=\"okBtnOptions?.fullWidth ?? false\"\r\n s4yButton\r\n [variant]=\"okBtnOptions?.variant ?? 'primary'\"\r\n [outlined]=\"okBtnOptions?.outlined ?? false\"\r\n [disabled]=\"okBtnOptions?.disabled ?? false\"\r\n [size]=\"okBtnOptions?.size ?? 'small'\"\r\n >\r\n {{ okBtnOptions?.text ?? \"Ok\" }}\r\n </button>\r\n }\r\n }\r\n </footer>\r\n }\r\n</article>\r\n", styles: [".s4y-dialog{display:flex;flex-direction:column;max-height:90dvh;overflow:hidden;position:relative}.s4y-dialog-header{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;padding-bottom:1.4rem;gap:.4rem}.s4y-centered-header{align-items:center}.s4y-dialog-action{display:flex;align-items:center;justify-content:space-between;width:100%}.s4y-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding-top:1.4rem;flex-shrink:0}@media screen and (min-width:
|
|
4292
|
+
}, animations: [], template: "<article class=\"s4y-dialog\" role=\"dialog\" aria-modal=\"true\">\r\n @if (headerTemplate) {\r\n <header\r\n class=\"s4y-dialog-header\"\r\n [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n [ngStyle]=\"dialogOptions?.headerStyle\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n >\r\n </ng-container>\r\n </header>\r\n } @else if (dialogOptions?.title || dialogOptions?.description) {\r\n <header\r\n class=\"s4y-dialog-header\"\r\n [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n [ngStyle]=\"dialogOptions?.headerStyle\"\r\n >\r\n <h2 class=\"s4y-dialog-header__title\">{{ dialogOptions?.title }}</h2>\r\n <p class=\"s4y-dialog-header__description\">\r\n {{ dialogOptions?.description }}\r\n </p>\r\n </header>\r\n }\r\n\r\n @if (dialogOptions?.closable || dialogOptions?.closable == undefined) {\r\n <button class=\"s4y-dialog-close-btn\" (click)=\"ref.closeAnimated(undefined, 'close')\" aria-label=\"Fechar\">\r\n ×\r\n </button>\r\n }\r\n\r\n <section class=\"s4y-dialog__body\" [ngStyle]=\"dialogOptions?.bodyStyle\">\r\n @if (contentTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"contentTemplate\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n >\r\n </ng-container>\r\n } @else {\r\n <ng-template\r\n cdkPortalOutlet\r\n [cdkPortalOutlet]=\"contentPortal\"\r\n ></ng-template>\r\n }\r\n </section>\r\n\r\n @let cancelBtnOptions = this.dialogOptions?.cancelBtnOptions;\r\n @let okBtnOptions = this.dialogOptions?.okBtnOptions;\r\n\r\n @if (!(dialogOptions?.hideFooter ?? false)) {\r\n <footer\r\n class=\"flex gap-1 s4y-dialog__footer\"\r\n [ngStyle]=\"dialogOptions?.footerStyle\"\r\n >\r\n @if (footerTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"footerTemplate\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n >\r\n </ng-container>\r\n } @else {\r\n @if (cancelBtnOptions?.text) {\r\n <button\r\n (click)=\"onCancel()\"\r\n [loading]=\"cancelLoading || (cancelBtnOptions?.loading ?? false)\"\r\n [fullWidth]=\"cancelBtnOptions?.fullWidth ?? false\"\r\n s4yButton\r\n [variant]=\"cancelBtnOptions?.variant ?? 'gray'\"\r\n [outlined]=\"cancelBtnOptions?.outlined ?? true\"\r\n [disabled]=\"cancelBtnOptions?.disabled ?? false\"\r\n [size]=\"cancelBtnOptions?.size ?? 'small'\"\r\n >\r\n {{ cancelBtnOptions?.text ?? \"Cancelar\" }}\r\n </button>\r\n }\r\n @if (okBtnOptions?.text) {\r\n <button\r\n (click)=\"onOk()\"\r\n [loading]=\"okLoading || (okBtnOptions?.loading ?? false)\"\r\n [fullWidth]=\"okBtnOptions?.fullWidth ?? false\"\r\n s4yButton\r\n [variant]=\"okBtnOptions?.variant ?? 'primary'\"\r\n [outlined]=\"okBtnOptions?.outlined ?? false\"\r\n [disabled]=\"okBtnOptions?.disabled ?? false\"\r\n [size]=\"okBtnOptions?.size ?? 'small'\"\r\n >\r\n {{ okBtnOptions?.text ?? \"Ok\" }}\r\n </button>\r\n }\r\n }\r\n </footer>\r\n }\r\n</article>\r\n", styles: [".s4y-dialog{display:flex;flex-direction:column;max-height:90dvh;overflow:hidden;position:relative}.s4y-dialog-header{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;padding-bottom:1.4rem;gap:.4rem}.s4y-centered-header{align-items:center}.s4y-dialog-action{display:flex;align-items:center;justify-content:space-between;width:100%}.s4y-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding-top:1.4rem;flex-shrink:0}@media screen and (min-width:320px)and (max-width:480px){.s4y-dialog__footer{flex-direction:column-reverse}.s4y-dialog__footer button{width:100%}}.s4y-dialog-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-dialog-header__description{font-size:2rem;font-size:1.4rem;font-weight:400;color:var(--gray-700)}.s4y-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto}.s4y-dialog-close-btn{padding:0rem 1.4rem;cursor:pointer;font-size:2rem;position:absolute;right:0;top:0;transition:.5 ease}.s4y-dialog-close-btn:hover{background-color:var(--gray-200);border-radius:var(--radius)}\n"] }]
|
|
4244
4293
|
}], ctorParameters: () => [{ type: DynamicDialogRef }, { type: undefined, decorators: [{
|
|
4245
4294
|
type: Inject,
|
|
4246
4295
|
args: [DYNAMIC_DIALOG_OPTIONS]
|
|
@@ -4352,10 +4401,10 @@ class DynamicDialogService {
|
|
|
4352
4401
|
],
|
|
4353
4402
|
};
|
|
4354
4403
|
}
|
|
4355
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4356
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
4404
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4405
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicDialogService, providedIn: 'root' });
|
|
4357
4406
|
}
|
|
4358
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4407
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicDialogService, decorators: [{
|
|
4359
4408
|
type: Injectable,
|
|
4360
4409
|
args: [{
|
|
4361
4410
|
providedIn: 'root',
|
|
@@ -4364,15 +4413,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
4364
4413
|
|
|
4365
4414
|
class DynamicLoadingGlobalComponent {
|
|
4366
4415
|
message = signal('Carregando dados...');
|
|
4367
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4368
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
4416
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicLoadingGlobalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4417
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: DynamicLoadingGlobalComponent, isStandalone: true, selector: "s4y-dynamic-loading-global", ngImport: i0, template: `
|
|
4369
4418
|
<div class="s4y-dynamic-loading-container">
|
|
4370
4419
|
<span class="s4y-dynamic-loading-container__loader"></span>
|
|
4371
4420
|
<p>{{ message() }}</p>
|
|
4372
4421
|
</div>
|
|
4373
4422
|
`, isInline: true, styles: [".s4y-dynamic-loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;color:#fff}.s4y-dynamic-loading-container__loader{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:3px solid #fff;border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
4374
4423
|
}
|
|
4375
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4424
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicLoadingGlobalComponent, decorators: [{
|
|
4376
4425
|
type: Component,
|
|
4377
4426
|
args: [{ selector: 's4y-dynamic-loading-global', imports: [], template: `
|
|
4378
4427
|
<div class="s4y-dynamic-loading-container">
|
|
@@ -4435,10 +4484,10 @@ class DynamicLoadingGlobalService {
|
|
|
4435
4484
|
}
|
|
4436
4485
|
return `dlg_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`;
|
|
4437
4486
|
}
|
|
4438
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4439
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
4487
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicLoadingGlobalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4488
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicLoadingGlobalService, providedIn: 'root' });
|
|
4440
4489
|
}
|
|
4441
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4490
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicLoadingGlobalService, decorators: [{
|
|
4442
4491
|
type: Injectable,
|
|
4443
4492
|
args: [{
|
|
4444
4493
|
providedIn: 'root',
|
|
@@ -4658,8 +4707,8 @@ class RatingComponent {
|
|
|
4658
4707
|
</svg>
|
|
4659
4708
|
`;
|
|
4660
4709
|
}
|
|
4661
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4662
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
4710
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: RatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4711
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: RatingComponent, isStandalone: true, selector: "s4y-rating", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowHalf: { classPropertyName: "allowHalf", publicName: "allowHalf", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseleave": "clearHoverStar()" }, properties: { "class.s4y-rating--disabled": "this.isDisabledClass", "class.s4y-rating--readonly": "this.isReadOnlyClass" } }, providers: [
|
|
4663
4712
|
{
|
|
4664
4713
|
provide: NG_VALUE_ACCESSOR,
|
|
4665
4714
|
useExisting: forwardRef(() => RatingComponent),
|
|
@@ -4667,7 +4716,7 @@ class RatingComponent {
|
|
|
4667
4716
|
},
|
|
4668
4717
|
], ngImport: i0, template: "<div\r\n class=\"s4y-star-container\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"0\"\r\n [attr.aria-valuemax]=\"count()\"\r\n [attr.aria-valuenow]=\"value()\"\r\n [attr.aria-valuetext]=\"(hoverValue() ?? value()) + ' de ' + count()\"\r\n [attr.aria-readonly]=\"readOnly() ? 'true' : null\"\r\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n tabindex=\"0\"\r\n (blur)=\"onTouched()\"\r\n (keydown)=\"onKey($event)\"\r\n>\r\n @for (star of stars(); track $index) {\r\n <button\r\n tabindex=\"-1\"\r\n (click)=\"setRating($index, $event)\"\r\n (mousemove)=\"onStarHover($index, $event)\"\r\n (touchstart)=\"onStarHoverTouch($index, $event)\"\r\n (touchend)=\"onTouchCommit($index, $event)\"\r\n [innerHTML]=\"star\"\r\n [disabled]=\"disabled()\"\r\n role=\"button\"\r\n class=\"s4y-star-item\"\r\n [style.height.px]=\"sizePx()\"\r\n [style.width.px]=\"sizePx()\"\r\n [attr.aria-label]=\"'Avaliar com ' + ($index + 1) + ' estrela(s)'\"\r\n ></button>\r\n }\r\n</div>\r\n", styles: [":host(.s4y-rating--disabled) .s4y-star-item{cursor:not-allowed;opacity:.6;pointer-events:none}:host(.s4y-rating--readonly) .s4y-star-item{cursor:default}.s4y-star-container{display:flex;gap:.8rem}.s4y-star-container .s4y-star-item{cursor:pointer;color:#ffc309}.s4y-star-container .s4y-star-item svg{width:100%;height:100%}.s4y-star-item{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.s4y-star-item svg{width:100%;height:100%;display:block;pointer-events:none}\n"] });
|
|
4669
4718
|
}
|
|
4670
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4719
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: RatingComponent, decorators: [{
|
|
4671
4720
|
type: Component,
|
|
4672
4721
|
args: [{ selector: 's4y-rating', providers: [
|
|
4673
4722
|
{
|
|
@@ -4795,10 +4844,10 @@ class TagComponent {
|
|
|
4795
4844
|
this.stopEdit(false);
|
|
4796
4845
|
}
|
|
4797
4846
|
}
|
|
4798
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4799
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
4847
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4848
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: TagComponent, isStandalone: true, selector: "s4y-tag", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, withShadow: { classPropertyName: "withShadow", publicName: "withShadow", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", editStart: "editStart", editEnd: "editEnd" }, host: { attributes: { "role": "button", "tabindex": "0" }, listeners: { "dblclick": "onDblClick($event)" }, properties: { "style.fontWeight": "\"500\"", "style.boxShadow": "shadow()", "class": "class()", "attr.aria-label": "editable() ? \"Editar tag\" : null" } }, viewQueries: [{ propertyName: "editInput", first: true, predicate: ["editInput"], descendants: true, isSignal: true }], ngImport: i0, template: "\r\n@if (!isEditing()) {\r\n <p (keydown)=\"onKeydown($event)\">\r\n {{ value() }}\r\n </p>\r\n\r\n <ng-content select=\"[icon]\"></ng-content>\r\n} @else {\r\n <input\r\n type=\"text\"\r\n [value]=\"value()\"\r\n (blur)=\"stopEdit()\"\r\n (keydown.enter)=\"stopEdit()\"\r\n (keydown.escape)=\"stopEdit(false)\"\r\n (input)=\"setValue($event)\"\r\n autofocus\r\n #editInput\r\n />\r\n}\r\n\r\n\r\n", styles: [":host{background-color:#fff;font-size:1.2rem;border-radius:var(--radius);width:fit-content;padding:.4rem .8rem;display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-shrink:0;border:1px solid transparent}:host(.size-xs){font-size:1rem;padding:.2rem .4rem;gap:.3rem}:host(.size-sm){font-size:1.2rem;padding:.25rem .55rem;gap:.4rem}:host(.size-md){font-size:1.4rem;padding:.3rem .7rem;gap:.5rem}:host(.size-lg){font-size:1.6rem;padding:.4rem .9rem;gap:.6rem}:host(.size-xl){font-size:1.8rem;padding:.5rem 1.1rem;gap:.7rem}:host(.tag-primary){background:var(--primary-color);color:#fff}:host(.tag-secondary){background:var(--secondary-color);color:#fff}:host(.tag-success){background:var(--success-color);color:#fff}:host(.tag-error){background:var(--danger-color);color:#fff}:host(.tag-warning){background:var(--warning-color);color:#fff}:host(.tag-info){background:var(--info-color);color:#fff}:host(.tag-neutral){background-color:var(--gray-500);border:1px solid var(--gray-500);color:#fff}:host(.tag-finished){color:#fff;background:var(--success-color)}:host(.tag-primary.outlined){border:1px solid var(--primary-color);color:var(--primary-color);background-color:transparent}:host(.tag-success.outlined){color:var(--success-color);background-color:transparent;border:1px solid var(--success-color)}:host(.tag-secondary.outlined){border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}:host(.tag-neutral.outlined){background-color:transparent;border:1px solid var(--gray-500);color:var(--gray-500)}:host(.tag-error.outlined){border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host(.tag-finished.outlined){border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host(.tag-info.outlined){border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host(.tag-warning.outlined){background-color:transparent;border:1px solid var(--warning-color);color:var(--warning-color)}input{background-color:transparent;width:100%}\n"] });
|
|
4800
4849
|
}
|
|
4801
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4850
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TagComponent, decorators: [{
|
|
4802
4851
|
type: Component,
|
|
4803
4852
|
args: [{ selector: 's4y-tag', imports: [], host: {
|
|
4804
4853
|
'[style.fontWeight]': '"500"',
|
|
@@ -4866,12 +4915,12 @@ class ConfirmationComponent {
|
|
|
4866
4915
|
this.loading = false;
|
|
4867
4916
|
}
|
|
4868
4917
|
}
|
|
4869
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4870
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
4918
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4919
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: ConfirmationComponent, isStandalone: true, selector: "s4y-confirmation", ngImport: i0, template: "@let model = props;\r\n@let cancelModel = model?.cancelProps;\r\n@let confirmationModel = model?.confirmationProps;\r\n\r\n@if (model) {\r\n <div class=\"s4y-confirmation-icon\">\r\n @if (model.iconUri) {\r\n <s4y-svg [src]=\"model.iconUri\" />\r\n } @else {\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z\"\r\n ></path>\r\n </svg>\r\n }\r\n </div>\r\n\r\n\r\n <div class=\"s4y-confirmation-content flex\">\r\n <p class=\"medium-text-bold s4y-confirmation-title\">\r\n {{ model.title }}\r\n </p>\r\n\r\n @if (model.content) {\r\n <div class=\"s4y-confirmation-description\">\r\n @if (isTemplate) {\r\n <ng-container *ngTemplateOutlet=\"template!\"></ng-container>\r\n } @else if (isHtml) {\r\n <div class=\"small-text-regular\" [innerHTML]=\"safeHtml\"></div>\r\n } @else {\r\n <p class=\"small-text-regular\">{{ textContent }}</p>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n\r\n <div class=\"s4y-confirmation-buttons\">\r\n <button\r\n type=\"button\"\r\n s4yButton\r\n [outlined]=\"true\"\r\n [variant]=\"'danger'\"\r\n [fullWidth]=\"true\"\r\n [disabled]=\"cancelLoading || loading\"\r\n [loading]=\"cancelLoading\"\r\n (click)=\"handleCancel()\"\r\n >\r\n {{ cancelModel?.text ?? \"Cancelar\" }}\r\n </button>\r\n <button\r\n type=\"button\"\r\n s4yButton\r\n [outlined]=\"false\"\r\n [variant]=\"'danger'\"\r\n [fullWidth]=\"true\"\r\n [disabled]=\"confirmLoading || loading\"\r\n [loading]=\"confirmLoading\"\r\n (click)=\"handleConfirm()\"\r\n >\r\n {{ confirmationModel?.text ?? \"Confirmar\" }}\r\n </button>\r\n </div>\r\n}\r\n", styles: [":host{display:block;width:100%}:host .s4y-confirmation-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}:host .s4y-confirmation-content{gap:.4rem;flex-direction:column;text-align:center;padding:1rem 0;width:100%;overflow-wrap:break-word;word-break:break-word}:host .s4y-confirmation-title{color:var(--primary-color)}:host .s4y-confirmation-description{font-weight:400;overflow-wrap:break-word;word-break:break-word}:host .s4y-confirmation-description strong,:host .s4y-confirmation-description b{font-weight:600;color:var(--primary-color)}:host .s4y-confirmation-description em,:host .s4y-confirmation-description i{font-style:italic}:host .s4y-confirmation-description a{color:var(--primary-color);text-decoration:underline}:host .s4y-confirmation-description p{margin:0}:host .s4y-confirmation-description p+p{margin-top:.8rem}:host .s4y-confirmation-description ul,:host .s4y-confirmation-description ol{margin:.8rem 0;padding-left:2rem}:host s4y-svg,:host svg{width:4rem;color:var(--warning-color);flex-shrink:0}:host .s4y-confirmation-buttons{display:flex;gap:1.4rem;align-items:center;margin-top:2.8rem;width:100%;flex-shrink:0;flex-wrap:wrap}:host .s4y-confirmation-buttons button{flex:1 1 calc(50% - .7rem)}@media(max-width:30rem){:host .s4y-confirmation-buttons{flex:1 1 100%}}\n"], dependencies: [{ kind: "component", type: SvgComponent, selector: "s4y-svg", inputs: ["src", "color", "size"] }, { kind: "component", type: ButtonComponent, selector: "button[s4yButton], a[s4yButton]", inputs: ["disabled", "outlined", "loading", "size", "roundend", "variant", "fullWidth", "iconAligned"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
4871
4920
|
}
|
|
4872
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4921
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ConfirmationComponent, decorators: [{
|
|
4873
4922
|
type: Component,
|
|
4874
|
-
args: [{ selector: 's4y-confirmation', imports: [SvgComponent, ButtonComponent, NgTemplateOutlet], template: "@let model = props;\r\n@let cancelModel = model?.cancelProps;\r\n@let confirmationModel = model?.confirmationProps;\r\n\r\n@if (model) {\r\n <div class=\"s4y-confirmation-icon\">\r\n @if (model.iconUri) {\r\n <s4y-svg [src]=\"model.iconUri\" />\r\n } @else {\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z\"\r\n ></path>\r\n </svg>\r\n }\r\n </div>\r\n\r\n\r\n <div class=\"s4y-confirmation-content flex\">\r\n <p class=\"medium-text-bold s4y-confirmation-title\">\r\n {{ model.title }}\r\n </p>\r\n\r\n @if (model.content) {\r\n <div class=\"s4y-confirmation-description\">\r\n @if (isTemplate) {\r\n <ng-container *ngTemplateOutlet=\"template!\"></ng-container>\r\n } @else if (isHtml) {\r\n <div class=\"small-text-regular\" [innerHTML]=\"safeHtml\"></div>\r\n } @else {\r\n <p class=\"small-text-regular\">{{ textContent }}</p>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n\r\n <div class=\"s4y-confirmation-buttons\">\r\n <button\r\n type=\"button\"\r\n s4yButton\r\n [outlined]=\"true\"\r\n [variant]=\"'danger'\"\r\n [fullWidth]=\"true\"\r\n [disabled]=\"cancelLoading || loading\"\r\n [loading]=\"cancelLoading\"\r\n (click)=\"handleCancel()\"\r\n >\r\n {{ cancelModel?.text ?? \"Cancelar\" }}\r\n </button>\r\n <button\r\n type=\"button\"\r\n s4yButton\r\n [outlined]=\"false\"\r\n [variant]=\"'danger'\"\r\n [fullWidth]=\"true\"\r\n [disabled]=\"confirmLoading || loading\"\r\n [loading]=\"confirmLoading\"\r\n (click)=\"handleConfirm()\"\r\n >\r\n {{ confirmationModel?.text ?? \"Confirmar\" }}\r\n </button>\r\n </div>\r\n}\r\n", styles: [":host{display:block;width:100%}:host .s4y-confirmation-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}:host .s4y-confirmation-content{gap:.4rem;flex-direction:column;text-align:center;padding:1rem 0;width:100%;overflow-wrap:break-word;word-break:break-word}:host .s4y-confirmation-title{color:var(--primary-color)}:host .s4y-confirmation-description{font-weight:400;overflow-wrap:break-word;word-break:break-word}:host .s4y-confirmation-description strong,:host .s4y-confirmation-description b{font-weight:600;color:var(--primary-color)}:host .s4y-confirmation-description em,:host .s4y-confirmation-description i{font-style:italic}:host .s4y-confirmation-description a{color:var(--primary-color);text-decoration:underline}:host .s4y-confirmation-description p{margin:0}:host .s4y-confirmation-description p+p{margin-top:.8rem}:host .s4y-confirmation-description ul,:host .s4y-confirmation-description ol{margin:.8rem 0;padding-left:2rem}:host s4y-svg,:host svg{width:4rem;color:var(--warning-color);flex-shrink:0}:host .s4y-confirmation-buttons{display:flex;gap:1.4rem;align-items:center;margin-top:2.8rem;width:100%;flex-shrink:0;flex-wrap:wrap}:host .s4y-confirmation-buttons button{flex:1 1 calc(50% - .7rem)}@media
|
|
4923
|
+
args: [{ selector: 's4y-confirmation', imports: [SvgComponent, ButtonComponent, NgTemplateOutlet], template: "@let model = props;\r\n@let cancelModel = model?.cancelProps;\r\n@let confirmationModel = model?.confirmationProps;\r\n\r\n@if (model) {\r\n <div class=\"s4y-confirmation-icon\">\r\n @if (model.iconUri) {\r\n <s4y-svg [src]=\"model.iconUri\" />\r\n } @else {\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z\"\r\n ></path>\r\n </svg>\r\n }\r\n </div>\r\n\r\n\r\n <div class=\"s4y-confirmation-content flex\">\r\n <p class=\"medium-text-bold s4y-confirmation-title\">\r\n {{ model.title }}\r\n </p>\r\n\r\n @if (model.content) {\r\n <div class=\"s4y-confirmation-description\">\r\n @if (isTemplate) {\r\n <ng-container *ngTemplateOutlet=\"template!\"></ng-container>\r\n } @else if (isHtml) {\r\n <div class=\"small-text-regular\" [innerHTML]=\"safeHtml\"></div>\r\n } @else {\r\n <p class=\"small-text-regular\">{{ textContent }}</p>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n\r\n <div class=\"s4y-confirmation-buttons\">\r\n <button\r\n type=\"button\"\r\n s4yButton\r\n [outlined]=\"true\"\r\n [variant]=\"'danger'\"\r\n [fullWidth]=\"true\"\r\n [disabled]=\"cancelLoading || loading\"\r\n [loading]=\"cancelLoading\"\r\n (click)=\"handleCancel()\"\r\n >\r\n {{ cancelModel?.text ?? \"Cancelar\" }}\r\n </button>\r\n <button\r\n type=\"button\"\r\n s4yButton\r\n [outlined]=\"false\"\r\n [variant]=\"'danger'\"\r\n [fullWidth]=\"true\"\r\n [disabled]=\"confirmLoading || loading\"\r\n [loading]=\"confirmLoading\"\r\n (click)=\"handleConfirm()\"\r\n >\r\n {{ confirmationModel?.text ?? \"Confirmar\" }}\r\n </button>\r\n </div>\r\n}\r\n", styles: [":host{display:block;width:100%}:host .s4y-confirmation-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}:host .s4y-confirmation-content{gap:.4rem;flex-direction:column;text-align:center;padding:1rem 0;width:100%;overflow-wrap:break-word;word-break:break-word}:host .s4y-confirmation-title{color:var(--primary-color)}:host .s4y-confirmation-description{font-weight:400;overflow-wrap:break-word;word-break:break-word}:host .s4y-confirmation-description strong,:host .s4y-confirmation-description b{font-weight:600;color:var(--primary-color)}:host .s4y-confirmation-description em,:host .s4y-confirmation-description i{font-style:italic}:host .s4y-confirmation-description a{color:var(--primary-color);text-decoration:underline}:host .s4y-confirmation-description p{margin:0}:host .s4y-confirmation-description p+p{margin-top:.8rem}:host .s4y-confirmation-description ul,:host .s4y-confirmation-description ol{margin:.8rem 0;padding-left:2rem}:host s4y-svg,:host svg{width:4rem;color:var(--warning-color);flex-shrink:0}:host .s4y-confirmation-buttons{display:flex;gap:1.4rem;align-items:center;margin-top:2.8rem;width:100%;flex-shrink:0;flex-wrap:wrap}:host .s4y-confirmation-buttons button{flex:1 1 calc(50% - .7rem)}@media(max-width:30rem){:host .s4y-confirmation-buttons{flex:1 1 100%}}\n"] }]
|
|
4875
4924
|
}] });
|
|
4876
4925
|
|
|
4877
4926
|
class ConfirmationService {
|
|
@@ -4973,10 +5022,10 @@ class ConfirmationService {
|
|
|
4973
5022
|
overlayRef.dispose();
|
|
4974
5023
|
}
|
|
4975
5024
|
}
|
|
4976
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4977
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
5025
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
5026
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ConfirmationService, providedIn: 'root' });
|
|
4978
5027
|
}
|
|
4979
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5028
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ConfirmationService, decorators: [{
|
|
4980
5029
|
type: Injectable,
|
|
4981
5030
|
args: [{
|
|
4982
5031
|
providedIn: 'root',
|
|
@@ -5043,10 +5092,10 @@ class CollapseComponent {
|
|
|
5043
5092
|
panel.active = !panel.active;
|
|
5044
5093
|
panel.activeChange.emit(panel.active);
|
|
5045
5094
|
}
|
|
5046
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5047
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.
|
|
5095
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: CollapseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5096
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.22", type: CollapseComponent, isStandalone: true, selector: "s4y-collapse", inputs: { accordion: ["accordion", "accordion", booleanAttribute], bordered: ["bordered", "bordered", booleanAttribute], ghost: ["ghost", "ghost", booleanAttribute], expandIconPosition: "expandIconPosition", size: "size" }, host: { properties: { "class.s4y-collapse-icon-position-start": "expandIconPosition === 'start'", "class.s4y-collapse-icon-position-end": "expandIconPosition === 'end'", "class.s4y-collapse-ghost": "ghost", "class.s4y-collapse-borderless": "!bordered", "class.s4y-collapse-small": "size === 'small'", "class.s4y-collapse-large": "size === 'large'" }, classAttribute: "s4y-collapse" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".s4y-collapse{display:block;background-color:#fff;border:1px solid var(--gray-200);border-bottom:0;border-radius:var(--radius)}.s4y-collapse .s4y-collapse-item{display:block;border-bottom:1px solid var(--gray-200)}.s4y-collapse .s4y-collapse-item:last-child,.s4y-collapse .s4y-collapse-item:last-child .s4y-collapse-header{border-radius:0 0 var(--radius) var(--radius)}.s4y-collapse .s4y-collapse-item .s4y-collapse-header{position:relative;display:flex;flex-wrap:nowrap;align-items:center;padding:12px 16px;color:var(--gray-900);line-height:1.5715;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.s4y-collapse .s4y-collapse-item .s4y-collapse-header:hover{background-color:var(--gray-100)}.s4y-collapse .s4y-collapse-item .s4y-collapse-header:focus{outline:none}.s4y-collapse .s4y-collapse-item .s4y-collapse-header .s4y-collapse-expand-icon{display:inline-flex;align-items:center;margin-right:12px;font-size:14px}.s4y-collapse .s4y-collapse-item .s4y-collapse-header .s4y-collapse-arrow{display:inline-block;transition:transform .24s cubic-bezier(.4,0,.2,1);color:var(--gray-600)}.s4y-collapse .s4y-collapse-item .s4y-collapse-header .s4y-collapse-arrow.s4y-collapse-arrow-active{transform:rotate(90deg)}.s4y-collapse .s4y-collapse-item .s4y-collapse-header .s4y-collapse-header-text{flex:auto;font-weight:500}.s4y-collapse .s4y-collapse-item .s4y-collapse-header .s4y-collapse-extra{margin-left:auto;color:var(--gray-600)}.s4y-collapse .s4y-collapse-item .s4y-collapse-header-collapsible-only{cursor:default}.s4y-collapse .s4y-collapse-item .s4y-collapse-header-collapsible-only .s4y-collapse-header-text{flex:none;cursor:pointer}.s4y-collapse .s4y-collapse-item .s4y-collapse-icon-collapsible-only{cursor:default}.s4y-collapse .s4y-collapse-item .s4y-collapse-icon-collapsible-only .s4y-collapse-expand-icon{cursor:pointer}.s4y-collapse .s4y-collapse-item.s4y-collapse-no-arrow .s4y-collapse-header{padding-left:12px}.s4y-collapse .s4y-collapse-item.s4y-collapse-item-active .s4y-collapse-header{background-color:var(--gray-100)}.s4y-collapse .s4y-collapse-item.s4y-collapse-item-disabled .s4y-collapse-header{color:var(--gray-400);cursor:not-allowed}.s4y-collapse .s4y-collapse-item.s4y-collapse-item-disabled .s4y-collapse-header:hover{background-color:transparent}.s4y-collapse .s4y-collapse-item.s4y-collapse-item-disabled .s4y-collapse-header .s4y-collapse-arrow{color:var(--gray-400)}.s4y-collapse .s4y-collapse-content{color:var(--gray-700);background-color:#fff;border-top:1px solid var(--gray-200)}.s4y-collapse .s4y-collapse-content .s4y-collapse-content-box{padding:16px}.s4y-collapse .s4y-collapse-content.s4y-collapse-content-active{border-top-color:var(--gray-200)}.s4y-collapse .s4y-collapse-item:last-child .s4y-collapse-content{border-radius:0 0 var(--radius) var(--radius)}.s4y-collapse.s4y-collapse-icon-position-end .s4y-collapse-item .s4y-collapse-header{padding-right:40px}.s4y-collapse.s4y-collapse-icon-position-end .s4y-collapse-item .s4y-collapse-header .s4y-collapse-expand-icon{position:absolute;top:50%;right:16px;left:auto;margin:0;transform:translateY(-50%)}.s4y-collapse.s4y-collapse-borderless{background-color:transparent;border:0}.s4y-collapse.s4y-collapse-borderless .s4y-collapse-item{border-bottom:1px solid var(--gray-200)}.s4y-collapse.s4y-collapse-borderless .s4y-collapse-item:last-child{border-bottom:0}.s4y-collapse.s4y-collapse-borderless .s4y-collapse-item:last-child,.s4y-collapse.s4y-collapse-borderless .s4y-collapse-item:last-child .s4y-collapse-header{border-radius:0}.s4y-collapse.s4y-collapse-borderless .s4y-collapse-item .s4y-collapse-content{background-color:transparent;border-top:0}.s4y-collapse.s4y-collapse-borderless .s4y-collapse-item .s4y-collapse-content .s4y-collapse-content-box{padding-top:4px}.s4y-collapse.s4y-collapse-ghost{background-color:transparent;border:0}.s4y-collapse.s4y-collapse-ghost .s4y-collapse-item{border-bottom:0}.s4y-collapse.s4y-collapse-ghost .s4y-collapse-item .s4y-collapse-content{background-color:transparent;border-top:0}.s4y-collapse.s4y-collapse-ghost .s4y-collapse-item .s4y-collapse-content .s4y-collapse-content-box{padding-top:12px;padding-bottom:12px}.s4y-collapse.s4y-collapse-small .s4y-collapse-item .s4y-collapse-header{padding:8px 12px;font-size:1.4rem}.s4y-collapse.s4y-collapse-small .s4y-collapse-item .s4y-collapse-content .s4y-collapse-content-box{padding:12px;font-size:1.4rem}.s4y-collapse.s4y-collapse-large .s4y-collapse-item{font-size:16px;line-height:1.5}.s4y-collapse.s4y-collapse-large .s4y-collapse-item .s4y-collapse-header{padding:16px 24px}.s4y-collapse.s4y-collapse-large .s4y-collapse-item .s4y-collapse-content .s4y-collapse-content-box{padding:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5048
5097
|
}
|
|
5049
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5098
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: CollapseComponent, decorators: [{
|
|
5050
5099
|
type: Component,
|
|
5051
5100
|
args: [{ selector: 's4y-collapse', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-content></ng-content>`, host: {
|
|
5052
5101
|
class: 's4y-collapse',
|
|
@@ -5149,8 +5198,8 @@ class CollapsePanelComponent {
|
|
|
5149
5198
|
markForCheck() {
|
|
5150
5199
|
this.cdr.markForCheck();
|
|
5151
5200
|
}
|
|
5152
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5153
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
5201
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: CollapsePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5202
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: CollapsePanelComponent, isStandalone: true, selector: "s4y-collapse-panel", inputs: { active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], showArrow: ["showArrow", "showArrow", booleanAttribute], extra: "extra", extraTemplate: "extraTemplate", header: "header", headerTemplate: "headerTemplate", expandedIconTemplate: "expandedIconTemplate", collapsible: "collapsible" }, outputs: { activeChange: "activeChange" }, host: { properties: { "class.s4y-collapse-no-arrow": "!showArrow", "class.s4y-collapse-item-active": "active", "class.s4y-collapse-item-disabled": "disabled || collapsible === \"disabled\"" }, classAttribute: "s4y-collapse-item" }, viewQueries: [{ propertyName: "headerElement", first: true, predicate: ["headerElement"], descendants: true }, { propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true }], ngImport: i0, template: `
|
|
5154
5203
|
<div
|
|
5155
5204
|
#headerElement
|
|
5156
5205
|
role="button"
|
|
@@ -5231,7 +5280,7 @@ class CollapsePanelComponent {
|
|
|
5231
5280
|
]),
|
|
5232
5281
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5233
5282
|
}
|
|
5234
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5283
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: CollapsePanelComponent, decorators: [{
|
|
5235
5284
|
type: Component,
|
|
5236
5285
|
args: [{
|
|
5237
5286
|
selector: 's4y-collapse-panel',
|
|
@@ -5376,11 +5425,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
5376
5425
|
* ```
|
|
5377
5426
|
*/
|
|
5378
5427
|
class CollapseModule {
|
|
5379
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5380
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
5381
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
5428
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: CollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
5429
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.22", ngImport: i0, type: CollapseModule, imports: [CollapseComponent, CollapsePanelComponent], exports: [CollapseComponent, CollapsePanelComponent] });
|
|
5430
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: CollapseModule, imports: [CollapseComponent, CollapsePanelComponent] });
|
|
5382
5431
|
}
|
|
5383
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5432
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: CollapseModule, decorators: [{
|
|
5384
5433
|
type: NgModule,
|
|
5385
5434
|
args: [{
|
|
5386
5435
|
imports: [CollapseComponent, CollapsePanelComponent],
|
|
@@ -5438,10 +5487,10 @@ class InformationBannerComponent {
|
|
|
5438
5487
|
</svg>
|
|
5439
5488
|
`,
|
|
5440
5489
|
};
|
|
5441
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5442
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
5490
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: InformationBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5491
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: InformationBannerComponent, isStandalone: true, selector: "s4y-information-banner", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClosable: "onClosable" }, queries: [{ propertyName: "headerTpl", first: true, predicate: ["headerTpl"], descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: ["footerTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@let model = props();\r\n\r\n<div class=\"s4y-information-banner-container\" [class]=\"bannerClass()\">\r\n <span\r\n class=\"info-banner__icon\"\r\n [style.width.px]=\"model.iconSize ?? 22\"\r\n [style.height.px]=\"model.iconSize ?? 22\"\r\n [innerHTML]=\"icon()\">\r\n </span>\r\n <div class=\"s4y-information-banner__content\">\r\n @let headerTemplate = headerTpl();\r\n\r\n @if (headerTemplate) {\r\n <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\r\n } @else {\r\n <div class=\"flex align-center justify-between\">\r\n <p class=\"fw-600 small-text-regular\">{{ model.title }}</p>\r\n\r\n @if (model.closable) {\r\n <button type=\"button\" (click)=\"onClosable.emit()\">×</button>\r\n }\r\n </div>\r\n }\r\n\r\n @let contentTemplate = contentTpl();\r\n\r\n @if (contentTemplate) {\r\n <ng-template *ngTemplateOutlet=\"contentTemplate\"></ng-template>\r\n } @else {\r\n <p class=\"small-text-regular gray-7 fw-400\">\r\n {{ model.description }}\r\n </p>\r\n }\r\n\r\n @let footerTemplate = footerTpl();\r\n\r\n @if (footerTemplate) {\r\n <div class=\"s4y-information-banner__footer\">\r\n <ng-template *ngTemplateOutlet=\"footerTemplate\"></ng-template>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".s4y-information-banner-container{border-radius:var(--radius);padding:1.6rem;background-color:#f5f7f9;display:flex;gap:1.4rem;border:1px solid transparent}.s4y-information-banner-container .info-banner__icon{display:grid;place-items:center;flex-shrink:0;color:var(--info-banner-icon);line-height:0}.s4y-information-banner-container .info-banner__icon svg{display:block}.s4y-information-banner-container .s4y-information-banner__content{flex-grow:1;display:flex;flex-direction:column;gap:.6rem}.s4y-information-banner-container .s4y-information-banner__content .fw-400{font-weight:400;margin-right:1rem}.s4y-information-banner-container .s4y-information-banner__content .fw-600{font-weight:600}.s4y-information-banner-container .s4y-information-banner__footer{margin-top:1rem}.s4y-information-banner-container.s4y-information-banner--neutral{background:#f5f7f9;border-color:#d7dde3;--info-banner-icon: #6b7280}.s4y-information-banner-container.s4y-information-banner--info{background:#f5f9ff;border-color:#bcd7ff;--info-banner-icon: #2563eb}.s4y-information-banner-container.s4y-information-banner--success{background:#f2fbf5;border-color:#bfe8cd;--info-banner-icon: #16a34a}.s4y-information-banner-container.s4y-information-banner--warning{background:#fff6eb;border-color:#ffd3a6;--info-banner-icon: #f59e0b}.s4y-information-banner-container.s4y-information-banner--error{background:#fff1f1;border-color:#ffb4b4;--info-banner-icon: #dc2626}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
5443
5492
|
}
|
|
5444
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5493
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: InformationBannerComponent, decorators: [{
|
|
5445
5494
|
type: Component,
|
|
5446
5495
|
args: [{ selector: 's4y-information-banner', imports: [NgTemplateOutlet], template: "@let model = props();\r\n\r\n<div class=\"s4y-information-banner-container\" [class]=\"bannerClass()\">\r\n <span\r\n class=\"info-banner__icon\"\r\n [style.width.px]=\"model.iconSize ?? 22\"\r\n [style.height.px]=\"model.iconSize ?? 22\"\r\n [innerHTML]=\"icon()\">\r\n </span>\r\n <div class=\"s4y-information-banner__content\">\r\n @let headerTemplate = headerTpl();\r\n\r\n @if (headerTemplate) {\r\n <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\r\n } @else {\r\n <div class=\"flex align-center justify-between\">\r\n <p class=\"fw-600 small-text-regular\">{{ model.title }}</p>\r\n\r\n @if (model.closable) {\r\n <button type=\"button\" (click)=\"onClosable.emit()\">×</button>\r\n }\r\n </div>\r\n }\r\n\r\n @let contentTemplate = contentTpl();\r\n\r\n @if (contentTemplate) {\r\n <ng-template *ngTemplateOutlet=\"contentTemplate\"></ng-template>\r\n } @else {\r\n <p class=\"small-text-regular gray-7 fw-400\">\r\n {{ model.description }}\r\n </p>\r\n }\r\n\r\n @let footerTemplate = footerTpl();\r\n\r\n @if (footerTemplate) {\r\n <div class=\"s4y-information-banner__footer\">\r\n <ng-template *ngTemplateOutlet=\"footerTemplate\"></ng-template>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".s4y-information-banner-container{border-radius:var(--radius);padding:1.6rem;background-color:#f5f7f9;display:flex;gap:1.4rem;border:1px solid transparent}.s4y-information-banner-container .info-banner__icon{display:grid;place-items:center;flex-shrink:0;color:var(--info-banner-icon);line-height:0}.s4y-information-banner-container .info-banner__icon svg{display:block}.s4y-information-banner-container .s4y-information-banner__content{flex-grow:1;display:flex;flex-direction:column;gap:.6rem}.s4y-information-banner-container .s4y-information-banner__content .fw-400{font-weight:400;margin-right:1rem}.s4y-information-banner-container .s4y-information-banner__content .fw-600{font-weight:600}.s4y-information-banner-container .s4y-information-banner__footer{margin-top:1rem}.s4y-information-banner-container.s4y-information-banner--neutral{background:#f5f7f9;border-color:#d7dde3;--info-banner-icon: #6b7280}.s4y-information-banner-container.s4y-information-banner--info{background:#f5f9ff;border-color:#bcd7ff;--info-banner-icon: #2563eb}.s4y-information-banner-container.s4y-information-banner--success{background:#f2fbf5;border-color:#bfe8cd;--info-banner-icon: #16a34a}.s4y-information-banner-container.s4y-information-banner--warning{background:#fff6eb;border-color:#ffd3a6;--info-banner-icon: #f59e0b}.s4y-information-banner-container.s4y-information-banner--error{background:#fff1f1;border-color:#ffb4b4;--info-banner-icon: #dc2626}\n"] }]
|
|
5447
5496
|
}] });
|
|
@@ -5455,5 +5504,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
5455
5504
|
* Generated bundle index. Do not edit.
|
|
5456
5505
|
*/
|
|
5457
5506
|
|
|
5458
|
-
export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CollapseComponent, CollapseModule, CollapsePanelComponent, ConfirmationService, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_OPTIONS, DYNAMIC_DIALOG_REF, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, DynamicLoadingGlobalService, DynamicTooltipDirective, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, ImageComponent, ImageService, InformationBannerComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, MenuComponent, MenuItemComponent, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, PopoverPanelComponent, PopoverTriggerDirective, RadioComponent, RatingComponent, SearchBarComponent, SelectComponent, SelectMultiComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SummaryCardComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, TagComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, modalFadeCombined, sidebarRightAnimation };
|
|
5507
|
+
export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CollapseComponent, CollapseModule, CollapsePanelComponent, ConfirmationService, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_OPTIONS, DYNAMIC_DIALOG_REF, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, DynamicLoadingGlobalService, DynamicTooltipDirective, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, ImageComponent, ImageService, InformationBannerComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, MenuComponent, MenuItemComponent, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, PopoverPanelComponent, PopoverTriggerDirective, RadioComponent, RatingComponent, SearchBarComponent, SelectComponent, SelectMultiComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SummaryCardComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, TableStickyDirective, TagComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, modalFadeCombined, sidebarRightAnimation };
|
|
5459
5508
|
//# sourceMappingURL=s4y-ui.mjs.map
|