s4y-ui 3.2.4 → 3.3.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 +220 -153
- 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/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,10 +133,10 @@ 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',
|
|
@@ -194,10 +198,10 @@ class SvgComponent {
|
|
|
194
198
|
.getSvgContent(src)
|
|
195
199
|
.pipe(map((content) => this.sanitizer.bypassSecurityTrustHtml(content)));
|
|
196
200
|
}
|
|
197
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
198
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
201
|
+
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 });
|
|
202
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SvgComponent, isStandalone: true, selector: "s4y-svg", inputs: { size: "size", src: "src" }, host: { properties: { "class": "this.size" } }, ngImport: i0, template: "<!-- <span\r\n *ngIf=\"mode === 'inline'\"\r\n class=\"s4y-svg-inline\"\r\n [innerHTML]=\"svgContent\"\r\n [ngStyle]=\"{\r\n width: size,\r\n height: size,\r\n color: color\r\n }\"\r\n></span>\r\n\r\n<span\r\n *ngIf=\"mode === 'mask'\"\r\n class=\"s4y-svg-mask\"\r\n [ngStyle]=\"{\r\n WebkitMaskImage: maskStyle,\r\n maskImage: maskStyle,\r\n width: size,\r\n height: size,\r\n backgroundColor: color\r\n }\"\r\n></span> -->\r\n\r\n<div class=\"icon-inner\" [innerHTML]=\"svgContent | async\"></div>\r\n\r\n{{ svgContent | json }}\r\n", styles: [":host{--icon-font-size: 1em;display:inline-block;width:1em;height:1em;text-align:center;font-size:var(--icon-font-size);contain:strict;fill:currentColor;box-sizing:content-box!important}.icon-inner{display:block;width:100%;height:100%}svg{width:100%;height:100%;max-width:100%;max-height:100%}: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" }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
199
203
|
}
|
|
200
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SvgComponent, decorators: [{
|
|
201
205
|
type: Component,
|
|
202
206
|
args: [{ selector: 's4y-svg', imports: [AsyncPipe, JsonPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <span\r\n *ngIf=\"mode === 'inline'\"\r\n class=\"s4y-svg-inline\"\r\n [innerHTML]=\"svgContent\"\r\n [ngStyle]=\"{\r\n width: size,\r\n height: size,\r\n color: color\r\n }\"\r\n></span>\r\n\r\n<span\r\n *ngIf=\"mode === 'mask'\"\r\n class=\"s4y-svg-mask\"\r\n [ngStyle]=\"{\r\n WebkitMaskImage: maskStyle,\r\n maskImage: maskStyle,\r\n width: size,\r\n height: size,\r\n backgroundColor: color\r\n }\"\r\n></span> -->\r\n\r\n<div class=\"icon-inner\" [innerHTML]=\"svgContent | async\"></div>\r\n\r\n{{ svgContent | json }}\r\n", styles: [":host{--icon-font-size: 1em;display:inline-block;width:1em;height:1em;text-align:center;font-size:var(--icon-font-size);contain:strict;fill:currentColor;box-sizing:content-box!important}.icon-inner{display:block;width:100%;height:100%}svg{width:100%;height:100%;max-width:100%;max-height:100%}:host(.small){width:16px;height:16px}:host(.default){width:24px;height:24px}:host(.large){width:32px;height:32px}\n"] }]
|
|
203
207
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: SvgService }], propDecorators: { size: [{
|
|
@@ -249,10 +253,10 @@ class AsideComponent {
|
|
|
249
253
|
closeWithClickedOverlay() {
|
|
250
254
|
this.asideService.onToggle();
|
|
251
255
|
}
|
|
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"] }] });
|
|
256
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
257
|
+
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\" [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"] }] });
|
|
254
258
|
}
|
|
255
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
259
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AsideComponent, decorators: [{
|
|
256
260
|
type: Component,
|
|
257
261
|
args: [{ selector: 's4y-aside', standalone: false, host: {
|
|
258
262
|
'[attr.data-opened]': 'isOpened()',
|
|
@@ -269,19 +273,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
269
273
|
}] } });
|
|
270
274
|
|
|
271
275
|
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.
|
|
276
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardRoutesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
277
|
+
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
278
|
}
|
|
275
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
279
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardRoutesComponent, decorators: [{
|
|
276
280
|
type: Component,
|
|
277
281
|
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
282
|
}] });
|
|
279
283
|
|
|
280
284
|
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.
|
|
285
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
286
|
+
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
287
|
}
|
|
284
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
288
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardContainerComponent, decorators: [{
|
|
285
289
|
type: Component,
|
|
286
290
|
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
291
|
}] });
|
|
@@ -294,8 +298,8 @@ const COMPONENTS$1 = [
|
|
|
294
298
|
DashboardContainerComponent,
|
|
295
299
|
];
|
|
296
300
|
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.
|
|
301
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
302
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: DashboardModule, declarations: [DashboardLayoutComponent,
|
|
299
303
|
AsideComponent,
|
|
300
304
|
NavbarComponent,
|
|
301
305
|
DashboardRoutesComponent,
|
|
@@ -304,9 +308,9 @@ class DashboardModule {
|
|
|
304
308
|
NavbarComponent,
|
|
305
309
|
DashboardRoutesComponent,
|
|
306
310
|
DashboardContainerComponent] });
|
|
307
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
311
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardModule, imports: [RouterModule, CommonModule, AvatarComponent] });
|
|
308
312
|
}
|
|
309
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
313
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardModule, decorators: [{
|
|
310
314
|
type: NgModule,
|
|
311
315
|
args: [{
|
|
312
316
|
declarations: [COMPONENTS$1],
|
|
@@ -344,8 +348,8 @@ class ButtonComponent {
|
|
|
344
348
|
return 'btn-primary';
|
|
345
349
|
}
|
|
346
350
|
});
|
|
347
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
348
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
351
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
352
|
+
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
353
|
@if (loading()) {
|
|
350
354
|
<div class="loader"></div>
|
|
351
355
|
} @else {
|
|
@@ -353,7 +357,7 @@ class ButtonComponent {
|
|
|
353
357
|
}
|
|
354
358
|
`, 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
359
|
}
|
|
356
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
360
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
357
361
|
type: Component,
|
|
358
362
|
args: [{ selector: 'button[s4yButton], a[s4yButton]', imports: [], template: `
|
|
359
363
|
@if (loading()) {
|
|
@@ -377,64 +381,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
377
381
|
}] } });
|
|
378
382
|
|
|
379
383
|
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.
|
|
384
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
385
|
+
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
386
|
}
|
|
383
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
387
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
384
388
|
type: Component,
|
|
385
389
|
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
390
|
}] });
|
|
387
391
|
|
|
388
392
|
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.
|
|
393
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
394
|
+
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
395
|
}
|
|
392
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
396
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputComponent, decorators: [{
|
|
393
397
|
type: Component,
|
|
394
398
|
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
399
|
}] });
|
|
396
400
|
|
|
397
401
|
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.
|
|
402
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
403
|
+
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
404
|
}
|
|
401
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
405
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LabelComponent, decorators: [{
|
|
402
406
|
type: Component,
|
|
403
407
|
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
408
|
}] });
|
|
405
409
|
|
|
406
410
|
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.
|
|
411
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
412
|
+
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
413
|
}
|
|
410
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
414
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HintComponent, decorators: [{
|
|
411
415
|
type: Component,
|
|
412
416
|
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
417
|
}] });
|
|
414
418
|
|
|
415
419
|
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.
|
|
420
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
421
|
+
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
422
|
}
|
|
419
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
423
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ErrorMessageComponent, decorators: [{
|
|
420
424
|
type: Component,
|
|
421
425
|
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
426
|
}] });
|
|
423
427
|
|
|
424
428
|
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.
|
|
429
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputPrefixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
430
|
+
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
431
|
}
|
|
428
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
432
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputPrefixComponent, decorators: [{
|
|
429
433
|
type: Component,
|
|
430
434
|
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
435
|
}] });
|
|
432
436
|
|
|
433
437
|
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.
|
|
438
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputSufixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
439
|
+
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
440
|
}
|
|
437
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
441
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputSufixComponent, decorators: [{
|
|
438
442
|
type: Component,
|
|
439
443
|
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
444
|
}] });
|
|
@@ -470,8 +474,8 @@ class FormFieldPasswordComponent {
|
|
|
470
474
|
setDisabledState(isDisabled) {
|
|
471
475
|
this.disabled = isDisabled;
|
|
472
476
|
}
|
|
473
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
474
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
477
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormFieldPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
478
|
+
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
479
|
{
|
|
476
480
|
multi: true,
|
|
477
481
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -479,7 +483,7 @@ class FormFieldPasswordComponent {
|
|
|
479
483
|
},
|
|
480
484
|
], 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
485
|
}
|
|
482
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
486
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormFieldPasswordComponent, decorators: [{
|
|
483
487
|
type: Component,
|
|
484
488
|
args: [{ selector: 's4y-form-field-password', standalone: false, providers: [
|
|
485
489
|
{
|
|
@@ -501,8 +505,8 @@ const COMPONENTS = [
|
|
|
501
505
|
FormFieldPasswordComponent,
|
|
502
506
|
];
|
|
503
507
|
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.
|
|
508
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormsKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
509
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: FormsKitModule, declarations: [FormFieldComponent,
|
|
506
510
|
InputComponent,
|
|
507
511
|
LabelComponent,
|
|
508
512
|
HintComponent,
|
|
@@ -517,9 +521,9 @@ class FormsKitModule {
|
|
|
517
521
|
InputPrefixComponent,
|
|
518
522
|
InputSufixComponent,
|
|
519
523
|
FormFieldPasswordComponent] });
|
|
520
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
524
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormsKitModule, imports: [CommonModule] });
|
|
521
525
|
}
|
|
522
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
526
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormsKitModule, decorators: [{
|
|
523
527
|
type: NgModule,
|
|
524
528
|
args: [{
|
|
525
529
|
declarations: COMPONENTS,
|
|
@@ -712,10 +716,10 @@ class MaskDirective {
|
|
|
712
716
|
const nextPos = this._getCursorPosition(template, digits.length);
|
|
713
717
|
setTimeout(() => input.setSelectionRange(nextPos, nextPos));
|
|
714
718
|
}
|
|
715
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
716
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
719
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MaskDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
720
|
+
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
721
|
}
|
|
718
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
722
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MaskDirective, decorators: [{
|
|
719
723
|
type: Directive,
|
|
720
724
|
args: [{
|
|
721
725
|
selector: '[s4yMask]',
|
|
@@ -745,10 +749,10 @@ class ClickOutsideDirective {
|
|
|
745
749
|
this.clickOutside.emit();
|
|
746
750
|
}
|
|
747
751
|
}
|
|
748
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
749
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
752
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
753
|
+
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
754
|
}
|
|
751
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
755
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ClickOutsideDirective, decorators: [{
|
|
752
756
|
type: Directive,
|
|
753
757
|
args: [{
|
|
754
758
|
selector: '[s4yClickOutside]',
|
|
@@ -816,10 +820,10 @@ class ToastService {
|
|
|
816
820
|
return v.toString(16);
|
|
817
821
|
});
|
|
818
822
|
}
|
|
819
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
820
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
823
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
824
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToastService, providedIn: 'root' });
|
|
821
825
|
}
|
|
822
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
826
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToastService, decorators: [{
|
|
823
827
|
type: Injectable,
|
|
824
828
|
args: [{
|
|
825
829
|
providedIn: 'root',
|
|
@@ -834,10 +838,10 @@ class ToastComponent {
|
|
|
834
838
|
}
|
|
835
839
|
toasts = computed(() => this._toastService.toasts());
|
|
836
840
|
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.
|
|
841
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToastComponent, deps: [{ token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
842
|
+
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
843
|
}
|
|
840
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
844
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToastComponent, decorators: [{
|
|
841
845
|
type: Component,
|
|
842
846
|
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
847
|
}], ctorParameters: () => [{ type: ToastService }] });
|
|
@@ -964,10 +968,10 @@ class DrawerComponent {
|
|
|
964
968
|
this.isOpen.set(false);
|
|
965
969
|
}
|
|
966
970
|
}
|
|
967
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
968
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
971
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
972
|
+
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
973
|
}
|
|
970
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
974
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
971
975
|
type: Component,
|
|
972
976
|
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
977
|
}], ctorParameters: () => [], propDecorators: { headerTemplate: [{
|
|
@@ -989,10 +993,10 @@ class SpinnerComponent {
|
|
|
989
993
|
color = input('primary');
|
|
990
994
|
constructor() { }
|
|
991
995
|
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.
|
|
996
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
997
|
+
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
998
|
}
|
|
995
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
999
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
996
1000
|
type: Component,
|
|
997
1001
|
args: [{ selector: 's4y-spinner', host: {
|
|
998
1002
|
'[attr.size]': 'size()',
|
|
@@ -1050,10 +1054,10 @@ class TableComponent {
|
|
|
1050
1054
|
this.data;
|
|
1051
1055
|
console.log('Reorndenador');
|
|
1052
1056
|
}
|
|
1053
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1054
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1057
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1058
|
+
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
1059
|
}
|
|
1056
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1060
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableComponent, decorators: [{
|
|
1057
1061
|
type: Component,
|
|
1058
1062
|
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
1063
|
}], ctorParameters: () => [], propDecorators: { rowTemplate: [{
|
|
@@ -1171,10 +1175,10 @@ class TableSortDirective {
|
|
|
1171
1175
|
get descIcon() {
|
|
1172
1176
|
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
1177
|
}
|
|
1174
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1175
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
1178
|
+
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 });
|
|
1179
|
+
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
1180
|
}
|
|
1177
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1181
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableSortDirective, decorators: [{
|
|
1178
1182
|
type: Directive,
|
|
1179
1183
|
args: [{
|
|
1180
1184
|
selector: '[s4ySortableColumnName]',
|
|
@@ -1252,10 +1256,10 @@ class ModalComponent {
|
|
|
1252
1256
|
ngOnDestroy() {
|
|
1253
1257
|
window.removeEventListener('keydown', this.escListener);
|
|
1254
1258
|
}
|
|
1255
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1256
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1259
|
+
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 });
|
|
1260
|
+
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
1261
|
}
|
|
1258
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1262
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalComponent, decorators: [{
|
|
1259
1263
|
type: Component,
|
|
1260
1264
|
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
1265
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: Document, decorators: [{
|
|
@@ -1292,10 +1296,10 @@ class ModalConfirmationService {
|
|
|
1292
1296
|
close() {
|
|
1293
1297
|
this._visible.set(false);
|
|
1294
1298
|
}
|
|
1295
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1296
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
1299
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1300
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalConfirmationService });
|
|
1297
1301
|
}
|
|
1298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1302
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalConfirmationService, decorators: [{
|
|
1299
1303
|
type: Injectable
|
|
1300
1304
|
}] });
|
|
1301
1305
|
|
|
@@ -1322,10 +1326,10 @@ class ModalConfirmationComponent {
|
|
|
1322
1326
|
onClose() {
|
|
1323
1327
|
this.modalConfirmationService.close();
|
|
1324
1328
|
}
|
|
1325
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1326
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1329
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1330
|
+
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
1331
|
}
|
|
1328
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1332
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalConfirmationComponent, decorators: [{
|
|
1329
1333
|
type: Component,
|
|
1330
1334
|
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
1335
|
}], propDecorators: { iconTemplate: [{
|
|
@@ -1334,10 +1338,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1334
1338
|
}] } });
|
|
1335
1339
|
|
|
1336
1340
|
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.
|
|
1341
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1342
|
+
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
1343
|
}
|
|
1340
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1344
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
1341
1345
|
type: Component,
|
|
1342
1346
|
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
1347
|
}] });
|
|
@@ -1368,8 +1372,8 @@ class ToggleComponent {
|
|
|
1368
1372
|
this.onTouched();
|
|
1369
1373
|
this.onChange(this.model());
|
|
1370
1374
|
}
|
|
1371
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1372
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
1375
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1376
|
+
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
1377
|
{
|
|
1374
1378
|
provide: NG_VALUE_ACCESSOR,
|
|
1375
1379
|
useExisting: ToggleComponent,
|
|
@@ -1377,7 +1381,7 @@ class ToggleComponent {
|
|
|
1377
1381
|
},
|
|
1378
1382
|
], 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
1383
|
}
|
|
1380
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1384
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
1381
1385
|
type: Component,
|
|
1382
1386
|
args: [{ selector: 's4y-toggle', imports: [FormsModule], providers: [
|
|
1383
1387
|
{
|
|
@@ -1500,8 +1504,8 @@ class SelectComponent {
|
|
|
1500
1504
|
? opt1.id === opt2.id
|
|
1501
1505
|
: JSON.stringify(opt1) === JSON.stringify(opt2); // fallback genérico
|
|
1502
1506
|
}
|
|
1503
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1504
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1507
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1508
|
+
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
1509
|
{
|
|
1506
1510
|
multi: true,
|
|
1507
1511
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1509,7 +1513,7 @@ class SelectComponent {
|
|
|
1509
1513
|
},
|
|
1510
1514
|
], 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
1515
|
}
|
|
1512
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1516
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1513
1517
|
type: Component,
|
|
1514
1518
|
args: [{ selector: 's4y-select', imports: [NgIf, CommonModule, SpinnerComponent, ClickOutsideDirective, FormsModule], animations: [selectAnimation], providers: [
|
|
1515
1519
|
{
|
|
@@ -1646,10 +1650,10 @@ class PaginationComponent {
|
|
|
1646
1650
|
rowsPerPage: this.rowsPerPage(),
|
|
1647
1651
|
});
|
|
1648
1652
|
}
|
|
1649
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1650
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1653
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1654
|
+
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
1655
|
}
|
|
1652
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1656
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
1653
1657
|
type: Component,
|
|
1654
1658
|
args: [{ selector: 's4y-pagination', imports: [
|
|
1655
1659
|
NgTemplateOutlet,
|
|
@@ -1689,8 +1693,8 @@ class SliderComponent {
|
|
|
1689
1693
|
this.value = typeof value === 'number' ? value : Number(value);
|
|
1690
1694
|
this.onChange(value);
|
|
1691
1695
|
}
|
|
1692
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1693
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1696
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1697
|
+
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
1698
|
{
|
|
1695
1699
|
provide: NG_VALUE_ACCESSOR,
|
|
1696
1700
|
useExisting: forwardRef(() => SliderComponent),
|
|
@@ -1698,7 +1702,7 @@ class SliderComponent {
|
|
|
1698
1702
|
},
|
|
1699
1703
|
], 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
1704
|
}
|
|
1701
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1705
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SliderComponent, decorators: [{
|
|
1702
1706
|
type: Component,
|
|
1703
1707
|
args: [{ selector: 's4y-slider', imports: [NgStyle], providers: [
|
|
1704
1708
|
{
|
|
@@ -1736,8 +1740,8 @@ class RadioComponent {
|
|
|
1736
1740
|
this.onChange(value);
|
|
1737
1741
|
this.onTouched();
|
|
1738
1742
|
}
|
|
1739
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1740
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1743
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1744
|
+
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
1745
|
{
|
|
1742
1746
|
provide: NG_VALUE_ACCESSOR,
|
|
1743
1747
|
useExisting: forwardRef(() => RadioComponent),
|
|
@@ -1745,7 +1749,7 @@ class RadioComponent {
|
|
|
1745
1749
|
},
|
|
1746
1750
|
], 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
1751
|
}
|
|
1748
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1752
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RadioComponent, decorators: [{
|
|
1749
1753
|
type: Component,
|
|
1750
1754
|
args: [{ selector: 's4y-radio', imports: [], providers: [
|
|
1751
1755
|
{
|
|
@@ -1774,10 +1778,10 @@ class TooltipComponent {
|
|
|
1774
1778
|
visible = false;
|
|
1775
1779
|
constructor() { }
|
|
1776
1780
|
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.
|
|
1781
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1782
|
+
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
1783
|
}
|
|
1780
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1784
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
1781
1785
|
type: Component,
|
|
1782
1786
|
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
1787
|
}], ctorParameters: () => [] });
|
|
@@ -1888,10 +1892,10 @@ class TooltipDirective {
|
|
|
1888
1892
|
this.componentRef = null;
|
|
1889
1893
|
}
|
|
1890
1894
|
}
|
|
1891
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1892
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
1895
|
+
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 });
|
|
1896
|
+
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
1897
|
}
|
|
1894
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1898
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
1895
1899
|
type: Directive,
|
|
1896
1900
|
args: [{
|
|
1897
1901
|
selector: '[s4yTooltip]',
|
|
@@ -1925,11 +1929,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1925
1929
|
}] } });
|
|
1926
1930
|
|
|
1927
1931
|
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.
|
|
1932
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1933
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: TooltipModule, declarations: [TooltipComponent, TooltipDirective], imports: [CommonModule, NgClass], exports: [TooltipDirective] });
|
|
1934
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipModule, imports: [CommonModule] });
|
|
1931
1935
|
}
|
|
1932
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1936
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipModule, decorators: [{
|
|
1933
1937
|
type: NgModule,
|
|
1934
1938
|
args: [{
|
|
1935
1939
|
declarations: [TooltipComponent, TooltipDirective],
|
|
@@ -1944,10 +1948,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1944
1948
|
* Usage: refer to the demo - app.component.html
|
|
1945
1949
|
*/
|
|
1946
1950
|
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.
|
|
1951
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1952
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: BreadcrumbItemDirective, isStandalone: true, selector: "[s4yBreadcrumbItem]", ngImport: i0 });
|
|
1949
1953
|
}
|
|
1950
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1954
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbItemDirective, decorators: [{
|
|
1951
1955
|
type: Directive,
|
|
1952
1956
|
args: [{
|
|
1953
1957
|
selector: '[s4yBreadcrumbItem]',
|
|
@@ -2272,10 +2276,10 @@ class BreadcrumbService {
|
|
|
2272
2276
|
}
|
|
2273
2277
|
return config || {};
|
|
2274
2278
|
}
|
|
2275
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2276
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
2279
|
+
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 });
|
|
2280
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbService, providedIn: 'root' });
|
|
2277
2281
|
}
|
|
2278
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2282
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbService, decorators: [{
|
|
2279
2283
|
type: Injectable,
|
|
2280
2284
|
args: [{
|
|
2281
2285
|
providedIn: 'root',
|
|
@@ -2375,10 +2379,10 @@ class BreadcrumbComponent {
|
|
|
2375
2379
|
});
|
|
2376
2380
|
}));
|
|
2377
2381
|
}
|
|
2378
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2379
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2382
|
+
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 });
|
|
2383
|
+
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
2384
|
}
|
|
2381
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2385
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
2382
2386
|
type: Component,
|
|
2383
2387
|
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
2388
|
}], ctorParameters: () => [{ type: BreadcrumbService }, { type: i1$2.ActivatedRoute }], propDecorators: { itemTemplate: [{
|
|
@@ -2414,10 +2418,10 @@ class StepComponent {
|
|
|
2414
2418
|
this.stepClicked.emit(this.value);
|
|
2415
2419
|
}
|
|
2416
2420
|
}
|
|
2417
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2418
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2421
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2422
|
+
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
2423
|
}
|
|
2420
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2424
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepComponent, decorators: [{
|
|
2421
2425
|
type: Component,
|
|
2422
2426
|
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
2427
|
}], propDecorators: { root: [{
|
|
@@ -2462,10 +2466,10 @@ class StepPanelComponent {
|
|
|
2462
2466
|
canNavigateTo(value) {
|
|
2463
2467
|
this.stepperComponent.setSelected(value);
|
|
2464
2468
|
}
|
|
2465
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2466
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2469
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepPanelComponent, deps: [{ token: StepperComponent }], target: i0.ɵɵFactoryTarget.Component });
|
|
2470
|
+
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
2471
|
}
|
|
2468
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2472
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepPanelComponent, decorators: [{
|
|
2469
2473
|
type: Component,
|
|
2470
2474
|
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
2475
|
}], ctorParameters: () => [{ type: StepperComponent }], propDecorators: { root: [{
|
|
@@ -2547,10 +2551,10 @@ class StepperComponent {
|
|
|
2547
2551
|
this.onDestroy$.next();
|
|
2548
2552
|
this.onDestroy$.complete();
|
|
2549
2553
|
}
|
|
2550
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2551
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2554
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2555
|
+
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
2556
|
}
|
|
2553
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2557
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepperComponent, decorators: [{
|
|
2554
2558
|
type: Component,
|
|
2555
2559
|
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
2560
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { steps: [{
|
|
@@ -2574,10 +2578,10 @@ class LoadingModalService {
|
|
|
2574
2578
|
hiddenLoading() {
|
|
2575
2579
|
this._isLoading.set(false);
|
|
2576
2580
|
}
|
|
2577
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2578
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
2581
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoadingModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2582
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoadingModalService });
|
|
2579
2583
|
}
|
|
2580
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2584
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoadingModalService, decorators: [{
|
|
2581
2585
|
type: Injectable
|
|
2582
2586
|
}] });
|
|
2583
2587
|
|
|
@@ -2617,19 +2621,19 @@ class LoadingModalComponent {
|
|
|
2617
2621
|
clearInterval(this.intervalId);
|
|
2618
2622
|
}
|
|
2619
2623
|
}
|
|
2620
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2621
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2624
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoadingModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2625
|
+
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
2626
|
}
|
|
2623
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2627
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoadingModalComponent, decorators: [{
|
|
2624
2628
|
type: Component,
|
|
2625
2629
|
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
2630
|
}] });
|
|
2627
2631
|
|
|
2628
2632
|
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.
|
|
2633
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2634
|
+
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
2635
|
}
|
|
2632
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2636
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
2633
2637
|
type: Component,
|
|
2634
2638
|
args: [{ selector: 'input[s4yCheckbox][type="checkbox"]', imports: [], host: {
|
|
2635
2639
|
'[attr.aria-checked]': 'checked',
|
|
@@ -2637,6 +2641,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
2637
2641
|
}, 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
2642
|
}] });
|
|
2639
2643
|
|
|
2644
|
+
const sidebarRightAnimation = trigger('sidebarRightAnimation', [
|
|
2645
|
+
transition(':enter', group([
|
|
2646
|
+
style({
|
|
2647
|
+
width: '0',
|
|
2648
|
+
visibility: 'hidden',
|
|
2649
|
+
padding: '1.6rem 0 ',
|
|
2650
|
+
}),
|
|
2651
|
+
animate(300, style({
|
|
2652
|
+
width: '{{width}}',
|
|
2653
|
+
visibility: 'visible',
|
|
2654
|
+
padding: '1.6rem',
|
|
2655
|
+
})),
|
|
2656
|
+
])),
|
|
2657
|
+
transition(':leave', group([
|
|
2658
|
+
style({
|
|
2659
|
+
width: '{{width}}',
|
|
2660
|
+
visibility: 'visible',
|
|
2661
|
+
padding: '1.6rem',
|
|
2662
|
+
}),
|
|
2663
|
+
animate(300, style({
|
|
2664
|
+
width: '0',
|
|
2665
|
+
visibility: 'hidden',
|
|
2666
|
+
padding: '1.6rem 0 ',
|
|
2667
|
+
})),
|
|
2668
|
+
])),
|
|
2669
|
+
]);
|
|
2670
|
+
|
|
2671
|
+
class SidebarRightService {
|
|
2672
|
+
_isOpened = signal(false);
|
|
2673
|
+
isOpened = computed(() => this._isOpened);
|
|
2674
|
+
toggleSidebar() {
|
|
2675
|
+
const oldState = !this._isOpened();
|
|
2676
|
+
this._isOpened.set(oldState);
|
|
2677
|
+
}
|
|
2678
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarRightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2679
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarRightService });
|
|
2680
|
+
}
|
|
2681
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarRightService, decorators: [{
|
|
2682
|
+
type: Injectable
|
|
2683
|
+
}] });
|
|
2684
|
+
|
|
2685
|
+
class SidebarRightComponent {
|
|
2686
|
+
sidebarRightService = inject(SidebarRightService);
|
|
2687
|
+
get isOpened() {
|
|
2688
|
+
return this.sidebarRightService.isOpened();
|
|
2689
|
+
}
|
|
2690
|
+
width = '28rem';
|
|
2691
|
+
animationParams = {
|
|
2692
|
+
value: '',
|
|
2693
|
+
params: {
|
|
2694
|
+
width: this.width,
|
|
2695
|
+
},
|
|
2696
|
+
};
|
|
2697
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarRightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2698
|
+
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.6rem;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] });
|
|
2699
|
+
}
|
|
2700
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarRightComponent, decorators: [{
|
|
2701
|
+
type: Component,
|
|
2702
|
+
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.6rem;border-left:1px solid var(--gray-300);box-shadow:var(--shadow-default)}\n"] }]
|
|
2703
|
+
}], propDecorators: { width: [{
|
|
2704
|
+
type: Input
|
|
2705
|
+
}] } });
|
|
2706
|
+
|
|
2640
2707
|
/*
|
|
2641
2708
|
* Public API Surface of s4y-components
|
|
2642
2709
|
*/
|
|
@@ -2646,5 +2713,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
2646
2713
|
* Generated bundle index. Do not edit.
|
|
2647
2714
|
*/
|
|
2648
2715
|
|
|
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 };
|
|
2716
|
+
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
2717
|
//# sourceMappingURL=s4y-ui.mjs.map
|