s4y-ui 3.2.4 → 3.4.4
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 +268 -195
- package/fesm2022/s4y-ui.mjs.map +1 -1
- package/lib/components/dashboard/dashboard-layout/dashboard-layout.component.d.ts +2 -1
- package/lib/components/sidebar-right/index.d.ts +3 -0
- package/lib/components/sidebar-right/sidebar-right.animation.d.ts +1 -0
- package/lib/components/sidebar-right/sidebar-right.component.d.ts +15 -0
- package/lib/components/sidebar-right/sidebar-right.service.d.ts +8 -0
- package/lib/components/svg/svg.component.d.ts +8 -3
- package/package.json +3 -2
- package/public-api.d.ts +1 -0
- package/src/scss/styles.scss +1 -0
- package/src/scss/styles.scss.map +1 -1
package/fesm2022/s4y-ui.mjs
CHANGED
|
@@ -15,18 +15,22 @@ import { trigger, transition, animate, style, group, query, state } from '@angul
|
|
|
15
15
|
class DashboardLayoutComponent {
|
|
16
16
|
asideTemplate;
|
|
17
17
|
navTemplate;
|
|
18
|
-
|
|
19
|
-
static
|
|
18
|
+
rightPanel;
|
|
19
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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"] }] });
|
|
20
21
|
}
|
|
21
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
22
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardLayoutComponent, decorators: [{
|
|
22
23
|
type: Component,
|
|
23
|
-
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
|
|
24
|
+
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"] }]
|
|
24
25
|
}], propDecorators: { asideTemplate: [{
|
|
25
26
|
type: ContentChild,
|
|
26
27
|
args: ['asideTemplate']
|
|
27
28
|
}], navTemplate: [{
|
|
28
29
|
type: ContentChild,
|
|
29
30
|
args: ['navTemplate']
|
|
31
|
+
}], rightPanel: [{
|
|
32
|
+
type: ContentChild,
|
|
33
|
+
args: ['rightPanel']
|
|
30
34
|
}] } });
|
|
31
35
|
|
|
32
36
|
class AsideService {
|
|
@@ -35,10 +39,10 @@ class AsideService {
|
|
|
35
39
|
onToggle() {
|
|
36
40
|
this._isOpened.update((state) => !state);
|
|
37
41
|
}
|
|
38
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
39
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
42
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AsideService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
43
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AsideService, providedIn: 'root' });
|
|
40
44
|
}
|
|
41
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
45
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AsideService, decorators: [{
|
|
42
46
|
type: Injectable,
|
|
43
47
|
args: [{
|
|
44
48
|
providedIn: 'root',
|
|
@@ -48,12 +52,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
48
52
|
class NavbarComponent {
|
|
49
53
|
_asideService = inject(AsideService);
|
|
50
54
|
actionsTemplate;
|
|
51
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
52
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
55
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
56
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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"] }] });
|
|
53
57
|
}
|
|
54
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
58
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
55
59
|
type: Component,
|
|
56
|
-
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-
|
|
60
|
+
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"] }]
|
|
57
61
|
}], propDecorators: { actionsTemplate: [{
|
|
58
62
|
type: ContentChild,
|
|
59
63
|
args: ['actionsTemplate']
|
|
@@ -99,10 +103,10 @@ class AvatarComponent {
|
|
|
99
103
|
onError() {
|
|
100
104
|
this.imageError.set(true);
|
|
101
105
|
}
|
|
102
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
103
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
106
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
107
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\n d=\"M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z\"\r\n ></path>\r\n</svg>\r\n}\r\n", styles: [":host{display:block;overflow:hidden;object-fit:cover;object-position:top center;flex-shrink:0}:host.s4y-avatar-sm{width:32px;height:32px;font-size:.75rem}:host.s4y-avatar-md{width:42px;height:42px;font-size:1rem}:host.s4y-avatar-lg{width:72px;height:72px;font-size:1.25rem}:host.s4y-avatar-xl{width:96px;height:96px;font-size:1.5rem}: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 }] });
|
|
104
108
|
}
|
|
105
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
106
110
|
type: Component,
|
|
107
111
|
args: [{ selector: 's4y-avatar', imports: [CommonModule], template: "@if (src()) {\r\n<img [src]=\"src()\" [alt]=\"alt()\" />\r\n\r\n}@else {\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path\r\n d=\"M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z\"\r\n ></path>\r\n</svg>\r\n}\r\n", styles: [":host{display:block;overflow:hidden;object-fit:cover;object-position:top center;flex-shrink:0}:host.s4y-avatar-sm{width:32px;height:32px;font-size:.75rem}:host.s4y-avatar-md{width:42px;height:42px;font-size:1rem}:host.s4y-avatar-lg{width:72px;height:72px;font-size:1.25rem}:host.s4y-avatar-xl{width:96px;height:96px;font-size:1.5rem}: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"] }]
|
|
108
112
|
}], propDecorators: { hostClasses: [{
|
|
@@ -129,57 +133,21 @@ class SvgService {
|
|
|
129
133
|
return throwError(() => error);
|
|
130
134
|
}));
|
|
131
135
|
}
|
|
132
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
133
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
136
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SvgService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
137
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SvgService, providedIn: 'root' });
|
|
134
138
|
}
|
|
135
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SvgService, decorators: [{
|
|
136
140
|
type: Injectable,
|
|
137
141
|
args: [{
|
|
138
142
|
providedIn: 'root',
|
|
139
143
|
}]
|
|
140
144
|
}] });
|
|
141
145
|
|
|
142
|
-
// import { NgIf, NgStyle } from '@angular/common';
|
|
143
|
-
// import { HttpClient } from '@angular/common/http';
|
|
144
|
-
// import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
|
|
145
|
-
// import { DomSanitizer } from '@angular/platform-browser';
|
|
146
|
-
// import { SvgService } from './svg.service';
|
|
147
|
-
// @Component({
|
|
148
|
-
// selector: 's4y-svg',
|
|
149
|
-
// imports: [NgStyle, NgIf],
|
|
150
|
-
// templateUrl: './svg.component.html',
|
|
151
|
-
// styleUrl: './svg.component.scss',
|
|
152
|
-
// changeDetection: ChangeDetectionStrategy.OnPush,
|
|
153
|
-
// })
|
|
154
|
-
// export class SvgComponent implements OnChanges {
|
|
155
|
-
// @Input() src!: string;
|
|
156
|
-
// @Input() mode: 'inline' | 'mask' = 'mask';
|
|
157
|
-
// @Input() size: string = '24px';
|
|
158
|
-
// @Input() color: string = 'currentColor';
|
|
159
|
-
// svgContent: any = '';
|
|
160
|
-
// maskStyle = '';
|
|
161
|
-
// constructor(
|
|
162
|
-
// private http: HttpClient,
|
|
163
|
-
// private sanitizer: DomSanitizer,
|
|
164
|
-
// private svgService: SvgService
|
|
165
|
-
// ) {}
|
|
166
|
-
// ngOnChanges(changes: SimpleChanges): void {
|
|
167
|
-
// if (!this.src) return;
|
|
168
|
-
// if (this.mode === 'inline') {
|
|
169
|
-
// this.http.get(this.src, { responseType: 'text' }).subscribe((svg) => {
|
|
170
|
-
// this.svgContent = this.sanitizer.bypassSecurityTrustHtml(svg);
|
|
171
|
-
// });
|
|
172
|
-
// } else if (this.mode === 'mask') {
|
|
173
|
-
// this.maskStyle = `url("${this.src}")`;
|
|
174
|
-
// }
|
|
175
|
-
// }
|
|
176
|
-
// }
|
|
177
|
-
// src/app/icon/icon.component.ts
|
|
178
146
|
class SvgComponent {
|
|
179
147
|
sanitizer;
|
|
180
148
|
svgService;
|
|
181
|
-
size = 'default';
|
|
182
149
|
svgContent;
|
|
150
|
+
_size = '24px';
|
|
183
151
|
constructor(sanitizer, svgService) {
|
|
184
152
|
this.sanitizer = sanitizer;
|
|
185
153
|
this.svgService = svgService;
|
|
@@ -189,24 +157,63 @@ class SvgComponent {
|
|
|
189
157
|
return;
|
|
190
158
|
this.setSvgContent(value);
|
|
191
159
|
}
|
|
160
|
+
color = '#000';
|
|
161
|
+
set size(value) {
|
|
162
|
+
switch (value) {
|
|
163
|
+
case 'small':
|
|
164
|
+
this._size = '16px';
|
|
165
|
+
break;
|
|
166
|
+
case 'default':
|
|
167
|
+
this._size = '24px';
|
|
168
|
+
break;
|
|
169
|
+
case 'large':
|
|
170
|
+
this._size = '32px';
|
|
171
|
+
break;
|
|
172
|
+
default:
|
|
173
|
+
this._size = value;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
get hostWidth() {
|
|
177
|
+
return this.normalizeSize(this._size);
|
|
178
|
+
}
|
|
179
|
+
get hostHeight() {
|
|
180
|
+
return this.normalizeSize(this._size);
|
|
181
|
+
}
|
|
182
|
+
normalizeSize(v) {
|
|
183
|
+
if (!v)
|
|
184
|
+
return '24px';
|
|
185
|
+
if (typeof v === 'number' && Number.isFinite(v) && v > 0)
|
|
186
|
+
return `${v}px`;
|
|
187
|
+
if (typeof v === 'string')
|
|
188
|
+
return v.trim() || '24px';
|
|
189
|
+
return '24px';
|
|
190
|
+
}
|
|
192
191
|
setSvgContent(src) {
|
|
193
192
|
this.svgContent = this.svgService
|
|
194
193
|
.getSvgContent(src)
|
|
195
194
|
.pipe(map((content) => this.sanitizer.bypassSecurityTrustHtml(content)));
|
|
196
195
|
}
|
|
197
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
198
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
196
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SvgComponent, deps: [{ token: i1$1.DomSanitizer }, { token: SvgService }], target: i0.ɵɵFactoryTarget.Component });
|
|
197
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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 });
|
|
199
198
|
}
|
|
200
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
199
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SvgComponent, decorators: [{
|
|
201
200
|
type: Component,
|
|
202
|
-
args: [{ selector: 's4y-svg', imports: [AsyncPipe, JsonPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "
|
|
203
|
-
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: SvgService }], propDecorators: {
|
|
201
|
+
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"] }]
|
|
202
|
+
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: SvgService }], propDecorators: { src: [{
|
|
203
|
+
type: Input
|
|
204
|
+
}], color: [{
|
|
204
205
|
type: Input
|
|
205
206
|
}, {
|
|
206
207
|
type: HostBinding,
|
|
207
|
-
args: ['
|
|
208
|
-
}],
|
|
208
|
+
args: ['style.color']
|
|
209
|
+
}], size: [{
|
|
209
210
|
type: Input
|
|
211
|
+
}], hostWidth: [{
|
|
212
|
+
type: HostBinding,
|
|
213
|
+
args: ['style.width']
|
|
214
|
+
}], hostHeight: [{
|
|
215
|
+
type: HostBinding,
|
|
216
|
+
args: ['style.height']
|
|
210
217
|
}] } });
|
|
211
218
|
|
|
212
219
|
class AsideComponent {
|
|
@@ -249,14 +256,14 @@ class AsideComponent {
|
|
|
249
256
|
closeWithClickedOverlay() {
|
|
250
257
|
this.asideService.onToggle();
|
|
251
258
|
}
|
|
252
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
253
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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)=\"closeWithClickedOverlay()\"></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\" [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}.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:30rem}}@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:30rem}}\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: ["size", "src"] }] });
|
|
259
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
260
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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)=\"closeWithClickedOverlay()\"></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}.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:30rem}}@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:30rem}}\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"] }] });
|
|
254
261
|
}
|
|
255
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
262
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AsideComponent, decorators: [{
|
|
256
263
|
type: Component,
|
|
257
264
|
args: [{ selector: 's4y-aside', standalone: false, host: {
|
|
258
265
|
'[attr.data-opened]': 'isOpened()',
|
|
259
|
-
}, template: "<div class=\"s4y-aside-overlay\" (click)=\"closeWithClickedOverlay()\"></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\" [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}.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:30rem}}@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:30rem}}\n"] }]
|
|
266
|
+
}, template: "<div class=\"s4y-aside-overlay\" (click)=\"closeWithClickedOverlay()\"></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}.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:30rem}}@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:30rem}}\n"] }]
|
|
260
267
|
}], propDecorators: { menuTemplate: [{
|
|
261
268
|
type: ContentChild,
|
|
262
269
|
args: ['menuTemplate']
|
|
@@ -269,19 +276,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
269
276
|
}] } });
|
|
270
277
|
|
|
271
278
|
class DashboardRoutesComponent {
|
|
272
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
273
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
279
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardRoutesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
280
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DashboardRoutesComponent, isStandalone: false, selector: "s4y-dashboard-routes", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;overflow-y:auto;overflow-x:hidden;height:calc(100dvh - var(--nav-height))}\n"] });
|
|
274
281
|
}
|
|
275
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
282
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardRoutesComponent, decorators: [{
|
|
276
283
|
type: Component,
|
|
277
284
|
args: [{ selector: 's4y-dashboard-routes', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;overflow-y:auto;overflow-x:hidden;height:calc(100dvh - var(--nav-height))}\n"] }]
|
|
278
285
|
}] });
|
|
279
286
|
|
|
280
287
|
class DashboardContainerComponent {
|
|
281
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
282
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
288
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
289
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DashboardContainerComponent, isStandalone: false, selector: "s4y-dashboard-container", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;padding:1.4rem 4rem 3.2rem;min-height:100%}\n"] });
|
|
283
290
|
}
|
|
284
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
291
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardContainerComponent, decorators: [{
|
|
285
292
|
type: Component,
|
|
286
293
|
args: [{ selector: 's4y-dashboard-container', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;padding:1.4rem 4rem 3.2rem;min-height:100%}\n"] }]
|
|
287
294
|
}] });
|
|
@@ -294,8 +301,8 @@ const COMPONENTS$1 = [
|
|
|
294
301
|
DashboardContainerComponent,
|
|
295
302
|
];
|
|
296
303
|
class DashboardModule {
|
|
297
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
298
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
304
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
305
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: DashboardModule, declarations: [DashboardLayoutComponent,
|
|
299
306
|
AsideComponent,
|
|
300
307
|
NavbarComponent,
|
|
301
308
|
DashboardRoutesComponent,
|
|
@@ -304,9 +311,9 @@ class DashboardModule {
|
|
|
304
311
|
NavbarComponent,
|
|
305
312
|
DashboardRoutesComponent,
|
|
306
313
|
DashboardContainerComponent] });
|
|
307
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
314
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardModule, imports: [RouterModule, CommonModule, AvatarComponent] });
|
|
308
315
|
}
|
|
309
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
316
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardModule, decorators: [{
|
|
310
317
|
type: NgModule,
|
|
311
318
|
args: [{
|
|
312
319
|
declarations: [COMPONENTS$1],
|
|
@@ -344,8 +351,8 @@ class ButtonComponent {
|
|
|
344
351
|
return 'btn-primary';
|
|
345
352
|
}
|
|
346
353
|
});
|
|
347
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
348
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
354
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
355
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", 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()", "disabled": "this.isDisabled" } }, ngImport: i0, template: `
|
|
349
356
|
@if (loading()) {
|
|
350
357
|
<div class="loader"></div>
|
|
351
358
|
} @else {
|
|
@@ -353,7 +360,7 @@ class ButtonComponent {
|
|
|
353
360
|
}
|
|
354
361
|
`, isInline: true, styles: [":host.btn-default{display:flex;align-items:center;justify-content:center;gap:.8rem;color:#fff;min-height:4.6rem;min-width:9.2rem;font-size:1.4rem;font-weight:500;border-radius:var(--radius);padding:.8rem 1.6rem;transition:.5s ease}:host([size=extra-small]){height:2.4rem;min-width:6.4rem;font-size:1.2rem;padding:.4rem .8rem}:host([size=small]){height:3.2rem;min-width:8rem;font-size:1.3rem;padding:.6rem 1.2rem}:host([size=medium]){height:4rem;min-width:9.2rem;font-size:1.4rem;padding:.8rem 1.6rem}:host([size=large]){height:4.8rem;min-width:10.4rem;font-size:1.5rem;padding:1rem 2rem}:host([size=extra-large]){height:5.6rem;min-width:11.6rem;font-size:1.6rem;padding:1.2rem 2.4rem}: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:hover .loader{border:3px 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 .loader{border:3px solid var(--primary-color)}:host.btn-primary.outlined:hover{color:#fff;background-color:var(--primary-color)}:host.btn-primary.outlined:hover .loader{border:3px solid #fff}: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:hover .loader{border:3px solid var(--secondary-color)}:host.btn-secondary.outlined{border:1px solid var(--secondary-color);background-color:transparent;color:var(--secondary-color)}:host.btn-secondary.outlined .loader{border:3px solid var(--secondary-color)}:host.btn-secondary.outlined:hover{background-color:var(--secondary-color);color:#fff;border:1px solid var(--secondary-color)}:host.btn-secondary.outlined:hover .loader{border:3px solid #fff}: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:hover .loader{border:3px solid var(--danger-color)}:host.btn-danger.outlined{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined .loader{border:3px solid var(--danger-color)}:host.btn-danger.outlined:hover{color:#fff;background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-danger.outlined:hover .loader{border:3px solid #fff}: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:hover .loader{border:3px solid var(--success-color)}:host.btn-success.outlined{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined .loader{border:3px solid var(--success-color)}:host.btn-success.outlined:hover{background-color:var(--success-color);border:1px solid var(--success-color);color:#fff}:host.btn-success.outlined:hover .loader{border:3px solid #fff}:host.btn-info{background-color:var(--infor-color);border:1px solid var(--infor-color)}:host.btn-info:hover{border:1px solid var(--infor-color);color:var(--infor-color);background-color:transparent}:host.btn-info:hover .loader{border:3px solid var(--infor-color)}:host.btn-info.outlined{border:1px solid var(--infor-color);color:var(--infor-color);background-color:transparent}:host.btn-info.outlined .loader{border:3px solid var(--infor-color)}:host.btn-info.outlined:hover{background-color:var(--infor-color);border:1px solid var(--infor-color);color:#fff}:host.btn-info.outlined:hover .loader{border:3px solid #fff}:host.disabled{background-color:#979797;color:#fff;cursor:default;border:1px solid #979797;padding:.8rem 1.6rem}:host.disabled:hover{background-color:#979797;color:#fff;border:1px solid #979797}:host.disabled.outlined{background-color:transparent;color:#979797;border:1px solid #979797;pointer-events:none}.loader{width:16px;aspect-ratio:1;border-radius:50%;border:3px solid #fff;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"] });
|
|
355
362
|
}
|
|
356
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
363
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
357
364
|
type: Component,
|
|
358
365
|
args: [{ selector: 'button[s4yButton], a[s4yButton]', imports: [], template: `
|
|
359
366
|
@if (loading()) {
|
|
@@ -377,64 +384,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
377
384
|
}] } });
|
|
378
385
|
|
|
379
386
|
class FormFieldComponent {
|
|
380
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
381
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
387
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
388
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: [".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;min-height:4.6rem}.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}::ng-deep .s4y-form-field:has(input.ng-invalid.ng-touched.ng-dirty) s4y-label,::ng-deep .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"] });
|
|
382
389
|
}
|
|
383
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
390
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
384
391
|
type: Component,
|
|
385
392
|
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: [".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;min-height:4.6rem}.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}::ng-deep .s4y-form-field:has(input.ng-invalid.ng-touched.ng-dirty) s4y-label,::ng-deep .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"] }]
|
|
386
393
|
}] });
|
|
387
394
|
|
|
388
395
|
class InputComponent {
|
|
389
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
390
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
396
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
397
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InputComponent, isStandalone: false, selector: "input[s4y-input], textarea[s4y-input]", 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}\n"] });
|
|
391
398
|
}
|
|
392
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
399
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputComponent, decorators: [{
|
|
393
400
|
type: Component,
|
|
394
401
|
args: [{ selector: 'input[s4y-input], textarea[s4y-input]', standalone: false, 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}\n"] }]
|
|
395
402
|
}] });
|
|
396
403
|
|
|
397
404
|
class LabelComponent {
|
|
398
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
399
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
405
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
406
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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"] });
|
|
400
407
|
}
|
|
401
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
408
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LabelComponent, decorators: [{
|
|
402
409
|
type: Component,
|
|
403
410
|
args: [{ selector: 's4y-label', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{font-size:1.4rem;max-width:max-content}\n"] }]
|
|
404
411
|
}] });
|
|
405
412
|
|
|
406
413
|
class HintComponent {
|
|
407
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
408
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
414
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
415
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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"] });
|
|
409
416
|
}
|
|
410
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
417
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HintComponent, decorators: [{
|
|
411
418
|
type: Component,
|
|
412
419
|
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"] }]
|
|
413
420
|
}] });
|
|
414
421
|
|
|
415
422
|
class ErrorMessageComponent {
|
|
416
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
417
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
423
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
424
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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"] });
|
|
418
425
|
}
|
|
419
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
426
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ErrorMessageComponent, decorators: [{
|
|
420
427
|
type: Component,
|
|
421
428
|
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"] }]
|
|
422
429
|
}] });
|
|
423
430
|
|
|
424
431
|
class InputPrefixComponent {
|
|
425
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
426
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
432
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputPrefixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
433
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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"] });
|
|
427
434
|
}
|
|
428
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
435
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputPrefixComponent, decorators: [{
|
|
429
436
|
type: Component,
|
|
430
437
|
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"] }]
|
|
431
438
|
}] });
|
|
432
439
|
|
|
433
440
|
class InputSufixComponent {
|
|
434
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
435
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
441
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputSufixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
442
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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"] });
|
|
436
443
|
}
|
|
437
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
444
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputSufixComponent, decorators: [{
|
|
438
445
|
type: Component,
|
|
439
446
|
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"] }]
|
|
440
447
|
}] });
|
|
@@ -470,8 +477,8 @@ class FormFieldPasswordComponent {
|
|
|
470
477
|
setDisabledState(isDisabled) {
|
|
471
478
|
this.disabled = isDisabled;
|
|
472
479
|
}
|
|
473
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
474
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
480
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormFieldPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
481
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: [
|
|
475
482
|
{
|
|
476
483
|
multi: true,
|
|
477
484
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -479,7 +486,7 @@ class FormFieldPasswordComponent {
|
|
|
479
486
|
},
|
|
480
487
|
], 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;min-height:4.6rem}.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]" }, { kind: "component", type: LabelComponent, selector: "s4y-label" }, { kind: "component", type: InputSufixComponent, selector: "s4y-input-sufix" }] });
|
|
481
488
|
}
|
|
482
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
489
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormFieldPasswordComponent, decorators: [{
|
|
483
490
|
type: Component,
|
|
484
491
|
args: [{ selector: 's4y-form-field-password', standalone: false, providers: [
|
|
485
492
|
{
|
|
@@ -501,8 +508,8 @@ const COMPONENTS = [
|
|
|
501
508
|
FormFieldPasswordComponent,
|
|
502
509
|
];
|
|
503
510
|
class FormsKitModule {
|
|
504
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
505
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
511
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormsKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
512
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: FormsKitModule, declarations: [FormFieldComponent,
|
|
506
513
|
InputComponent,
|
|
507
514
|
LabelComponent,
|
|
508
515
|
HintComponent,
|
|
@@ -517,9 +524,9 @@ class FormsKitModule {
|
|
|
517
524
|
InputPrefixComponent,
|
|
518
525
|
InputSufixComponent,
|
|
519
526
|
FormFieldPasswordComponent] });
|
|
520
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
527
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormsKitModule, imports: [CommonModule] });
|
|
521
528
|
}
|
|
522
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
529
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormsKitModule, decorators: [{
|
|
523
530
|
type: NgModule,
|
|
524
531
|
args: [{
|
|
525
532
|
declarations: COMPONENTS,
|
|
@@ -712,10 +719,10 @@ class MaskDirective {
|
|
|
712
719
|
const nextPos = this._getCursorPosition(template, digits.length);
|
|
713
720
|
setTimeout(() => input.setSelectionRange(nextPos, nextPos));
|
|
714
721
|
}
|
|
715
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
716
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
722
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MaskDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
723
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", 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 });
|
|
717
724
|
}
|
|
718
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
725
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MaskDirective, decorators: [{
|
|
719
726
|
type: Directive,
|
|
720
727
|
args: [{
|
|
721
728
|
selector: '[s4yMask]',
|
|
@@ -745,10 +752,10 @@ class ClickOutsideDirective {
|
|
|
745
752
|
this.clickOutside.emit();
|
|
746
753
|
}
|
|
747
754
|
}
|
|
748
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
749
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
755
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
756
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: ClickOutsideDirective, isStandalone: true, selector: "[s4yClickOutside]", inputs: { isVisible: "isVisible" }, outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "handleClick($event.target)" } }, ngImport: i0 });
|
|
750
757
|
}
|
|
751
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
758
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ClickOutsideDirective, decorators: [{
|
|
752
759
|
type: Directive,
|
|
753
760
|
args: [{
|
|
754
761
|
selector: '[s4yClickOutside]',
|
|
@@ -816,10 +823,10 @@ class ToastService {
|
|
|
816
823
|
return v.toString(16);
|
|
817
824
|
});
|
|
818
825
|
}
|
|
819
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
820
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
826
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
827
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToastService, providedIn: 'root' });
|
|
821
828
|
}
|
|
822
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
829
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToastService, decorators: [{
|
|
823
830
|
type: Injectable,
|
|
824
831
|
args: [{
|
|
825
832
|
providedIn: 'root',
|
|
@@ -834,10 +841,10 @@ class ToastComponent {
|
|
|
834
841
|
}
|
|
835
842
|
toasts = computed(() => this._toastService.toasts());
|
|
836
843
|
isBottomPosition = computed(() => this.position().startsWith('bottom'));
|
|
837
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
838
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
844
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToastComponent, deps: [{ token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
845
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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(--infor-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] });
|
|
839
846
|
}
|
|
840
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
847
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToastComponent, decorators: [{
|
|
841
848
|
type: Component,
|
|
842
849
|
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(--infor-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"] }]
|
|
843
850
|
}], ctorParameters: () => [{ type: ToastService }] });
|
|
@@ -964,10 +971,10 @@ class DrawerComponent {
|
|
|
964
971
|
this.isOpen.set(false);
|
|
965
972
|
}
|
|
966
973
|
}
|
|
967
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
968
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
974
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
975
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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] });
|
|
969
976
|
}
|
|
970
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
977
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
971
978
|
type: Component,
|
|
972
979
|
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"] }]
|
|
973
980
|
}], ctorParameters: () => [], propDecorators: { headerTemplate: [{
|
|
@@ -989,10 +996,10 @@ class SpinnerComponent {
|
|
|
989
996
|
color = input('primary');
|
|
990
997
|
constructor() { }
|
|
991
998
|
ngOnInit() { }
|
|
992
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
993
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
999
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1000
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", 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"] });
|
|
994
1001
|
}
|
|
995
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1002
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
996
1003
|
type: Component,
|
|
997
1004
|
args: [{ selector: 's4y-spinner', host: {
|
|
998
1005
|
'[attr.size]': 'size()',
|
|
@@ -1050,10 +1057,10 @@ class TableComponent {
|
|
|
1050
1057
|
this.data;
|
|
1051
1058
|
console.log('Reorndenador');
|
|
1052
1059
|
}
|
|
1053
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1054
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1060
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1061
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, maxScreen: { classPropertyName: "maxScreen", publicName: "maxScreen", 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 } }, 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 }], ngImport: i0, template: "<div class=\"s4y-table-container\" [ngStyle]=\"tableStyle()\">\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 [ngTemplateOutlet]=\"customErrorTemplate\"></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<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}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-200);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{border:1px solid var(--gray-600)}.s4y-table tbody tr{background-color:#fff;font-size:1.3rem;font-weight:400;height:5rem}.s4y-table tbody td{border:1px solid var(--gray-600)}.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 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}\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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1055
1062
|
}
|
|
1056
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1063
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableComponent, decorators: [{
|
|
1057
1064
|
type: Component,
|
|
1058
1065
|
args: [{ selector: 's4y-table', imports: [CommonModule, SpinnerComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"s4y-table-container\" [ngStyle]=\"tableStyle()\">\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 [ngTemplateOutlet]=\"customErrorTemplate\"></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<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}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-200);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{border:1px solid var(--gray-600)}.s4y-table tbody tr{background-color:#fff;font-size:1.3rem;font-weight:400;height:5rem}.s4y-table tbody td{border:1px solid var(--gray-600)}.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 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}\n"] }]
|
|
1059
1066
|
}], ctorParameters: () => [], propDecorators: { rowTemplate: [{
|
|
@@ -1171,10 +1178,10 @@ class TableSortDirective {
|
|
|
1171
1178
|
get descIcon() {
|
|
1172
1179
|
return '<svg style="height: 1.8rem; width: 1.8rem;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20 4V16H23L19 21L15 16H18V4H20ZM12 18V20H3V18H12ZM14 11V13H3V11H14ZM14 4V6H3V4H14Z"></path></svg>';
|
|
1173
1180
|
}
|
|
1174
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1175
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
1181
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableSortDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: TableComponent }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1182
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", 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()" } }, ngImport: i0 });
|
|
1176
1183
|
}
|
|
1177
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1184
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableSortDirective, decorators: [{
|
|
1178
1185
|
type: Directive,
|
|
1179
1186
|
args: [{
|
|
1180
1187
|
selector: '[s4ySortableColumnName]',
|
|
@@ -1252,10 +1259,10 @@ class ModalComponent {
|
|
|
1252
1259
|
ngOnDestroy() {
|
|
1253
1260
|
window.removeEventListener('keydown', this.escListener);
|
|
1254
1261
|
}
|
|
1255
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1256
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1262
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalComponent, deps: [{ token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
1263
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 } }, outputs: { requestClose: "requestClose" }, 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 (click)=\"onClose()\"\r\n @modalFadeCombined\r\n >\r\n <div\r\n class=\"s4y-modal-container\"\r\n (click)=\"$event.stopPropagation()\"\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 >\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"] }], animations: [modalFadeCombined] });
|
|
1257
1264
|
}
|
|
1258
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1265
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalComponent, decorators: [{
|
|
1259
1266
|
type: Component,
|
|
1260
1267
|
args: [{ selector: 's4y-modal', imports: [CommonModule], 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 (click)=\"onClose()\"\r\n @modalFadeCombined\r\n >\r\n <div\r\n class=\"s4y-modal-container\"\r\n (click)=\"$event.stopPropagation()\"\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 >\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"] }]
|
|
1261
1268
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: Document, decorators: [{
|
|
@@ -1292,10 +1299,10 @@ class ModalConfirmationService {
|
|
|
1292
1299
|
close() {
|
|
1293
1300
|
this._visible.set(false);
|
|
1294
1301
|
}
|
|
1295
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1296
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
1302
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1303
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalConfirmationService });
|
|
1297
1304
|
}
|
|
1298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1305
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalConfirmationService, decorators: [{
|
|
1299
1306
|
type: Injectable
|
|
1300
1307
|
}] });
|
|
1301
1308
|
|
|
@@ -1322,10 +1329,10 @@ class ModalConfirmationComponent {
|
|
|
1322
1329
|
onClose() {
|
|
1323
1330
|
this.modalConfirmationService.close();
|
|
1324
1331
|
}
|
|
1325
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1326
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1332
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1333
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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;-webkit-backdrop-filter:blur(4px);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", "variant", "fullWidth"] }], animations: [modalFadeCombined] });
|
|
1327
1334
|
}
|
|
1328
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1335
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalConfirmationComponent, decorators: [{
|
|
1329
1336
|
type: Component,
|
|
1330
1337
|
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;-webkit-backdrop-filter:blur(4px);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"] }]
|
|
1331
1338
|
}], propDecorators: { iconTemplate: [{
|
|
@@ -1334,10 +1341,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1334
1341
|
}] } });
|
|
1335
1342
|
|
|
1336
1343
|
class SearchBarComponent {
|
|
1337
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1338
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
1344
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1345
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SearchBarComponent, isStandalone: true, selector: "s4y-search-bar", ngImport: i0, template: "<label class=\"s4y-search-bar-container\">\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\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: [".s4y-search-bar-container{display:flex;align-items:center;justify-content:flex-start;padding:0 1.2rem;max-width:60rem;border-radius:var(--radius);gap:1.2rem;background-color:transparent;border:1px solid var(--gray-500);transition:.5s ease}.s4y-search-bar-container input{width:100%;min-height:4.5rem;font-size:1.4rem;background-color:transparent;color:var(--primary-color)}.s4y-search-bar-container input::placeholder{transition:.5s ease;color:var(--primary-color)}.s4y-search-bar-container .s4y-search-bar__icon{display:block;width:2.4rem;height:2.4rem;display:grid;place-items:center;flex-shrink:0}.s4y-search-bar-container:focus-within{border:1px solid var(--primary-color)}.s4y-search-bar-container:focus-within .s4y-search-bar__icon{color:var(--primary-color)}.s4y-search-bar-container:focus-within input::placeholder{opacity:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1339
1346
|
}
|
|
1340
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1347
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
1341
1348
|
type: Component,
|
|
1342
1349
|
args: [{ selector: 's4y-search-bar', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, template: "<label class=\"s4y-search-bar-container\">\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\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: [".s4y-search-bar-container{display:flex;align-items:center;justify-content:flex-start;padding:0 1.2rem;max-width:60rem;border-radius:var(--radius);gap:1.2rem;background-color:transparent;border:1px solid var(--gray-500);transition:.5s ease}.s4y-search-bar-container input{width:100%;min-height:4.5rem;font-size:1.4rem;background-color:transparent;color:var(--primary-color)}.s4y-search-bar-container input::placeholder{transition:.5s ease;color:var(--primary-color)}.s4y-search-bar-container .s4y-search-bar__icon{display:block;width:2.4rem;height:2.4rem;display:grid;place-items:center;flex-shrink:0}.s4y-search-bar-container:focus-within{border:1px solid var(--primary-color)}.s4y-search-bar-container:focus-within .s4y-search-bar__icon{color:var(--primary-color)}.s4y-search-bar-container:focus-within input::placeholder{opacity:0}\n"] }]
|
|
1343
1350
|
}] });
|
|
@@ -1368,8 +1375,8 @@ class ToggleComponent {
|
|
|
1368
1375
|
this.onTouched();
|
|
1369
1376
|
this.onChange(this.model());
|
|
1370
1377
|
}
|
|
1371
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1372
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
1378
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1379
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", 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: [
|
|
1373
1380
|
{
|
|
1374
1381
|
provide: NG_VALUE_ACCESSOR,
|
|
1375
1382
|
useExisting: ToggleComponent,
|
|
@@ -1377,7 +1384,7 @@ class ToggleComponent {
|
|
|
1377
1384
|
},
|
|
1378
1385
|
], 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 }] });
|
|
1379
1386
|
}
|
|
1380
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1387
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
1381
1388
|
type: Component,
|
|
1382
1389
|
args: [{ selector: 's4y-toggle', imports: [FormsModule], providers: [
|
|
1383
1390
|
{
|
|
@@ -1500,8 +1507,8 @@ class SelectComponent {
|
|
|
1500
1507
|
? opt1.id === opt2.id
|
|
1501
1508
|
: JSON.stringify(opt1) === JSON.stringify(opt2); // fallback genérico
|
|
1502
1509
|
}
|
|
1503
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1504
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1510
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1511
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 }, 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: [
|
|
1505
1512
|
{
|
|
1506
1513
|
multi: true,
|
|
1507
1514
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1509,7 +1516,7 @@ class SelectComponent {
|
|
|
1509
1516
|
},
|
|
1510
1517
|
], 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>\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 @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 </div>\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__wrapper{margin-bottom:.8rem;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;min-height:4.6rem}.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);font-size:1.4rem}.s4y-select-container .s4y-select-options-container{position:relative}.s4y-select-container .s4y-select-options{position:absolute;top:0;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;font-size:1.4rem}.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{font-size:1.4rem;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-options__search input{font-size:1.4rem}.s4y-select-container .s4y-select-options__search input::placeholder{font-size:1.4rem}: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] });
|
|
1511
1518
|
}
|
|
1512
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1519
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1513
1520
|
type: Component,
|
|
1514
1521
|
args: [{ selector: 's4y-select', imports: [NgIf, CommonModule, SpinnerComponent, ClickOutsideDirective, FormsModule], animations: [selectAnimation], providers: [
|
|
1515
1522
|
{
|
|
@@ -1646,10 +1653,10 @@ class PaginationComponent {
|
|
|
1646
1653
|
rowsPerPage: this.rowsPerPage(),
|
|
1647
1654
|
});
|
|
1648
1655
|
}
|
|
1649
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1650
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1656
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1657
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 } }, outputs: { currentPage: "currentPageChange", 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\">\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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
|
|
1651
1658
|
}
|
|
1652
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1659
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
1653
1660
|
type: Component,
|
|
1654
1661
|
args: [{ selector: 's4y-pagination', imports: [
|
|
1655
1662
|
NgTemplateOutlet,
|
|
@@ -1689,8 +1696,8 @@ class SliderComponent {
|
|
|
1689
1696
|
this.value = typeof value === 'number' ? value : Number(value);
|
|
1690
1697
|
this.onChange(value);
|
|
1691
1698
|
}
|
|
1692
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1693
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1699
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1700
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: [
|
|
1694
1701
|
{
|
|
1695
1702
|
provide: NG_VALUE_ACCESSOR,
|
|
1696
1703
|
useExisting: forwardRef(() => SliderComponent),
|
|
@@ -1698,7 +1705,7 @@ class SliderComponent {
|
|
|
1698
1705
|
},
|
|
1699
1706
|
], 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"] }] });
|
|
1700
1707
|
}
|
|
1701
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1708
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SliderComponent, decorators: [{
|
|
1702
1709
|
type: Component,
|
|
1703
1710
|
args: [{ selector: 's4y-slider', imports: [NgStyle], providers: [
|
|
1704
1711
|
{
|
|
@@ -1736,8 +1743,8 @@ class RadioComponent {
|
|
|
1736
1743
|
this.onChange(value);
|
|
1737
1744
|
this.onTouched();
|
|
1738
1745
|
}
|
|
1739
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1740
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1746
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1747
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 } }, providers: [
|
|
1741
1748
|
{
|
|
1742
1749
|
provide: NG_VALUE_ACCESSOR,
|
|
1743
1750
|
useExisting: forwardRef(() => RadioComponent),
|
|
@@ -1745,7 +1752,7 @@ class RadioComponent {
|
|
|
1745
1752
|
},
|
|
1746
1753
|
], ngImport: i0, template: "<label class=\"s4y-radio\" [class.disabled]=\"disabled\">\r\n <input\r\n [value]=\"radioValue()\"\r\n [disabled]=\"disabled\"\r\n [id]=\"id()\"\r\n [name]=\"name()\"\r\n type=\"radio\"\r\n (input)=\"onInput($event)\"\r\n [checked]=\"value == radioValue()\"\r\n />\r\n @if (label()) {\r\n <span class=\"s4y-radio-label\">\r\n {{ label() }}\r\n </span>\r\n }\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"] });
|
|
1747
1754
|
}
|
|
1748
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1755
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RadioComponent, decorators: [{
|
|
1749
1756
|
type: Component,
|
|
1750
1757
|
args: [{ selector: 's4y-radio', imports: [], providers: [
|
|
1751
1758
|
{
|
|
@@ -1774,10 +1781,10 @@ class TooltipComponent {
|
|
|
1774
1781
|
visible = false;
|
|
1775
1782
|
constructor() { }
|
|
1776
1783
|
ngOnInit() { }
|
|
1777
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1778
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
1784
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1785
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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"] });
|
|
1779
1786
|
}
|
|
1780
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1787
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
1781
1788
|
type: Component,
|
|
1782
1789
|
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"] }]
|
|
1783
1790
|
}], ctorParameters: () => [] });
|
|
@@ -1888,10 +1895,10 @@ class TooltipDirective {
|
|
|
1888
1895
|
this.componentRef = null;
|
|
1889
1896
|
}
|
|
1890
1897
|
}
|
|
1891
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1892
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
1898
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1899
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", 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 });
|
|
1893
1900
|
}
|
|
1894
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1901
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
1895
1902
|
type: Directive,
|
|
1896
1903
|
args: [{
|
|
1897
1904
|
selector: '[s4yTooltip]',
|
|
@@ -1925,11 +1932,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1925
1932
|
}] } });
|
|
1926
1933
|
|
|
1927
1934
|
class TooltipModule {
|
|
1928
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1929
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
1930
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
1935
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1936
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: TooltipModule, declarations: [TooltipComponent, TooltipDirective], imports: [CommonModule, NgClass], exports: [TooltipDirective] });
|
|
1937
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipModule, imports: [CommonModule] });
|
|
1931
1938
|
}
|
|
1932
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1939
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipModule, decorators: [{
|
|
1933
1940
|
type: NgModule,
|
|
1934
1941
|
args: [{
|
|
1935
1942
|
declarations: [TooltipComponent, TooltipDirective],
|
|
@@ -1944,10 +1951,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1944
1951
|
* Usage: refer to the demo - app.component.html
|
|
1945
1952
|
*/
|
|
1946
1953
|
class BreadcrumbItemDirective {
|
|
1947
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1948
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
1954
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1955
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: BreadcrumbItemDirective, isStandalone: true, selector: "[s4yBreadcrumbItem]", ngImport: i0 });
|
|
1949
1956
|
}
|
|
1950
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1957
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbItemDirective, decorators: [{
|
|
1951
1958
|
type: Directive,
|
|
1952
1959
|
args: [{
|
|
1953
1960
|
selector: '[s4yBreadcrumbItem]',
|
|
@@ -2272,10 +2279,10 @@ class BreadcrumbService {
|
|
|
2272
2279
|
}
|
|
2273
2280
|
return config || {};
|
|
2274
2281
|
}
|
|
2275
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2276
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
2282
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbService, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2283
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbService, providedIn: 'root' });
|
|
2277
2284
|
}
|
|
2278
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2285
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbService, decorators: [{
|
|
2279
2286
|
type: Injectable,
|
|
2280
2287
|
args: [{
|
|
2281
2288
|
providedIn: 'root',
|
|
@@ -2375,10 +2382,10 @@ class BreadcrumbComponent {
|
|
|
2375
2382
|
});
|
|
2376
2383
|
}));
|
|
2377
2384
|
}
|
|
2378
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2379
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2385
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: BreadcrumbService }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
2386
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 });
|
|
2380
2387
|
}
|
|
2381
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2388
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
2382
2389
|
type: Component,
|
|
2383
2390
|
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"] }]
|
|
2384
2391
|
}], ctorParameters: () => [{ type: BreadcrumbService }, { type: i1$2.ActivatedRoute }], propDecorators: { itemTemplate: [{
|
|
@@ -2414,10 +2421,10 @@ class StepComponent {
|
|
|
2414
2421
|
this.stepClicked.emit(this.value);
|
|
2415
2422
|
}
|
|
2416
2423
|
}
|
|
2417
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2418
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2424
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2425
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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"] }] });
|
|
2419
2426
|
}
|
|
2420
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2427
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepComponent, decorators: [{
|
|
2421
2428
|
type: Component,
|
|
2422
2429
|
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"] }]
|
|
2423
2430
|
}], propDecorators: { root: [{
|
|
@@ -2462,10 +2469,10 @@ class StepPanelComponent {
|
|
|
2462
2469
|
canNavigateTo(value) {
|
|
2463
2470
|
this.stepperComponent.setSelected(value);
|
|
2464
2471
|
}
|
|
2465
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2466
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2472
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepPanelComponent, deps: [{ token: StepperComponent }], target: i0.ɵɵFactoryTarget.Component });
|
|
2473
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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] });
|
|
2467
2474
|
}
|
|
2468
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2475
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepPanelComponent, decorators: [{
|
|
2469
2476
|
type: Component,
|
|
2470
2477
|
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" }]
|
|
2471
2478
|
}], ctorParameters: () => [{ type: StepperComponent }], propDecorators: { root: [{
|
|
@@ -2547,10 +2554,10 @@ class StepperComponent {
|
|
|
2547
2554
|
this.onDestroy$.next();
|
|
2548
2555
|
this.onDestroy$.complete();
|
|
2549
2556
|
}
|
|
2550
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2551
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2557
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2558
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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 }] });
|
|
2552
2559
|
}
|
|
2553
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2560
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepperComponent, decorators: [{
|
|
2554
2561
|
type: Component,
|
|
2555
2562
|
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"] }]
|
|
2556
2563
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { steps: [{
|
|
@@ -2574,10 +2581,10 @@ class LoadingModalService {
|
|
|
2574
2581
|
hiddenLoading() {
|
|
2575
2582
|
this._isLoading.set(false);
|
|
2576
2583
|
}
|
|
2577
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2578
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
2584
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoadingModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2585
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoadingModalService });
|
|
2579
2586
|
}
|
|
2580
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2587
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoadingModalService, decorators: [{
|
|
2581
2588
|
type: Injectable
|
|
2582
2589
|
}] });
|
|
2583
2590
|
|
|
@@ -2617,19 +2624,19 @@ class LoadingModalComponent {
|
|
|
2617
2624
|
clearInterval(this.intervalId);
|
|
2618
2625
|
}
|
|
2619
2626
|
}
|
|
2620
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2621
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2627
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoadingModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2628
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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);-webkit-backdrop-filter:blur(4px);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 });
|
|
2622
2629
|
}
|
|
2623
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2630
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoadingModalComponent, decorators: [{
|
|
2624
2631
|
type: Component,
|
|
2625
2632
|
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);-webkit-backdrop-filter:blur(4px);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"] }]
|
|
2626
2633
|
}] });
|
|
2627
2634
|
|
|
2628
2635
|
class CheckboxComponent {
|
|
2629
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2630
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2636
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2637
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: CheckboxComponent, isStandalone: true, selector: "input[s4yCheckbox][type=\"checkbox\"]", host: { attributes: { "role": "checkbox" }, properties: { "attr.aria-checked": "checked" } }, 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"] });
|
|
2631
2638
|
}
|
|
2632
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2639
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
2633
2640
|
type: Component,
|
|
2634
2641
|
args: [{ selector: 'input[s4yCheckbox][type="checkbox"]', imports: [], host: {
|
|
2635
2642
|
'[attr.aria-checked]': 'checked',
|
|
@@ -2637,6 +2644,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
2637
2644
|
}, 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"] }]
|
|
2638
2645
|
}] });
|
|
2639
2646
|
|
|
2647
|
+
const sidebarRightAnimation = trigger('sidebarRightAnimation', [
|
|
2648
|
+
transition(':enter', group([
|
|
2649
|
+
style({
|
|
2650
|
+
width: '0',
|
|
2651
|
+
visibility: 'hidden',
|
|
2652
|
+
padding: '1.6rem 0 ',
|
|
2653
|
+
}),
|
|
2654
|
+
animate(300, style({
|
|
2655
|
+
width: '{{width}}',
|
|
2656
|
+
visibility: 'visible',
|
|
2657
|
+
padding: '1.6rem',
|
|
2658
|
+
})),
|
|
2659
|
+
])),
|
|
2660
|
+
transition(':leave', group([
|
|
2661
|
+
style({
|
|
2662
|
+
width: '{{width}}',
|
|
2663
|
+
visibility: 'visible',
|
|
2664
|
+
padding: '1.6rem',
|
|
2665
|
+
}),
|
|
2666
|
+
animate(300, style({
|
|
2667
|
+
width: '0',
|
|
2668
|
+
visibility: 'hidden',
|
|
2669
|
+
padding: '1.6rem 0 ',
|
|
2670
|
+
})),
|
|
2671
|
+
])),
|
|
2672
|
+
]);
|
|
2673
|
+
|
|
2674
|
+
class SidebarRightService {
|
|
2675
|
+
_isOpened = signal(false);
|
|
2676
|
+
isOpened = computed(() => this._isOpened);
|
|
2677
|
+
toggleSidebar() {
|
|
2678
|
+
const oldState = !this._isOpened();
|
|
2679
|
+
this._isOpened.set(oldState);
|
|
2680
|
+
}
|
|
2681
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarRightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2682
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarRightService, providedIn: 'root' });
|
|
2683
|
+
}
|
|
2684
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarRightService, decorators: [{
|
|
2685
|
+
type: Injectable,
|
|
2686
|
+
args: [{
|
|
2687
|
+
providedIn: 'root',
|
|
2688
|
+
}]
|
|
2689
|
+
}] });
|
|
2690
|
+
|
|
2691
|
+
class SidebarRightComponent {
|
|
2692
|
+
sidebarRightService = inject(SidebarRightService);
|
|
2693
|
+
get isOpened() {
|
|
2694
|
+
return this.sidebarRightService.isOpened();
|
|
2695
|
+
}
|
|
2696
|
+
width = '28rem';
|
|
2697
|
+
animationParams = {
|
|
2698
|
+
value: '',
|
|
2699
|
+
params: {
|
|
2700
|
+
width: this.width,
|
|
2701
|
+
},
|
|
2702
|
+
};
|
|
2703
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarRightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2704
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SidebarRightComponent, isStandalone: true, selector: "s4y-sidebar-right", inputs: { width: "width" }, ngImport: i0, template: "<div class=\"s4y-sidebar-right-container\" *ngIf=\"isOpened()\" [@sidebarRightAnimation]=\"animationParams\">\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".s4y-sidebar-right-container{display:block;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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [sidebarRightAnimation] });
|
|
2705
|
+
}
|
|
2706
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarRightComponent, decorators: [{
|
|
2707
|
+
type: Component,
|
|
2708
|
+
args: [{ selector: 's4y-sidebar-right', imports: [CommonModule], animations: [sidebarRightAnimation], host: {}, template: "<div class=\"s4y-sidebar-right-container\" *ngIf=\"isOpened()\" [@sidebarRightAnimation]=\"animationParams\">\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".s4y-sidebar-right-container{display:block;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)}\n"] }]
|
|
2709
|
+
}], propDecorators: { width: [{
|
|
2710
|
+
type: Input
|
|
2711
|
+
}] } });
|
|
2712
|
+
|
|
2640
2713
|
/*
|
|
2641
2714
|
* Public API Surface of s4y-components
|
|
2642
2715
|
*/
|
|
@@ -2646,5 +2719,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
2646
2719
|
* Generated bundle index. Do not edit.
|
|
2647
2720
|
*/
|
|
2648
2721
|
|
|
2649
|
-
export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, RadioComponent, SearchBarComponent, SelectComponent, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition };
|
|
2722
|
+
export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, RadioComponent, SearchBarComponent, SelectComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, sidebarRightAnimation };
|
|
2650
2723
|
//# sourceMappingURL=s4y-ui.mjs.map
|